update link behaviour on share modal

Qwant · Nov 22, 2018 · 6edf72d · 6edf72d
1 parent 24b0f66
commit 6edf72d
Show file tree

Hide file tree

Showing 14 changed files with 1,881 additions and 1,811 deletions.
diff --git a/language/message/br_FR.po b/language/message/br_FR.po
diff --git a/language/message/de_DE.po b/language/message/de_DE.po
diff --git a/language/message/en_GB.po b/language/message/en_GB.po
diff --git a/language/message/es_ES.po b/language/message/es_ES.po
diff --git a/language/message/fr_FR.po b/language/message/fr_FR.po
diff --git a/language/message/it_IT.po b/language/message/it_IT.po
diff --git a/public/fonts/icomoon.eot b/public/fonts/icomoon.eot
diff --git a/public/fonts/icomoon.svg b/public/fonts/icomoon.svg
diff --git a/public/fonts/icomoon.ttf b/public/fonts/icomoon.ttf
diff --git a/public/fonts/icomoon.woff b/public/fonts/icomoon.woff
diff --git a/src/modals/share.js b/src/modals/share.js
@@ -23,8 +23,8 @@ export default class Share {
     url.select()
     document.execCommand('copy')
     url.blur()
-    await this.modal.panel.toggleClassName(.5, '#share-copy-status', 'share__copy_status--hidden')
-    this.modal.panel.toggleClassName(.5, '#share-copy-status', 'share__copy_status--hidden')
+    await this.modal.panel.addClassName(10, '#share-copy-container', 'share_copy__container--status')
+    this.modal.panel.removeClassName(0, '#share-copy-container', 'share_copy__container--status')
   }
 
   close () {

diff --git a/src/scss/includes/font.scss b/src/scss/includes/font.scss
@@ -28,6 +28,10 @@
 
 .icon-pin_geoloc:before {
   content: "\e90d";
+  color: #5c6f84;
+}
+.icon-check:before {
+  content: "\e91c";
 }
 .icon-chevron-left:before {
   content: "\e913";
@@ -38,6 +42,9 @@
 .icon-chevrons-right:before {
   content: "\e911";
 }
+.icon-copy:before {
+  content: "\e91b";
+}
 .icon-corner-up-right:before {
   content: "\e90f";
 }

diff --git a/src/scss/includes/modals/share.scss b/src/scss/includes/modals/share.scss
@@ -3,7 +3,7 @@
   display: block;
   width: 100%;
   margin-bottom: 5px;
-  padding: 10px 12px;
+  padding: 20px 12px;
   background-color: $background;
   border: solid 1px $separator_color;
   font-size: 14px;
@@ -26,20 +26,49 @@
   padding-right: 6px;
 }
 
-.share__copy_link {
+.share_copy__link {
   font-size: 12px;
   font-weight: bold;
   color: $secondary_text;
   cursor: pointer;
 }
 
-.share__copy_status {
+.share_copy__status {
   margin-left: 15px;
   font-size: 13px;
-  color: $secondary_text;
+  color: $secondary_variant_text;
   transition: color .2s;
 }
 
-.share__copy_status--hidden {
-  color: transparent;
+.share_copy__status__icon {
+  font-size: 14px;
+}
+
+.share_copy__input__container {
+  position: relative;
+}
+
+.share_copy__container { /* show link */
+  position: absolute;
+  top: 1px;
+  right: 2px;
+
+  .share__copy_link {
+    display: block;
+  }
+
+  .share_copy__status {
+    display: none;
+  }
+}
+
+.share_copy__container--status {
+  .share_copy__link {
+    display: none;
+  }
+
+  .share_copy__status {
+    display: block;
+  }
 }
+
diff --git a/src/views/share_modal.dot b/src/views/share_modal.dot
@@ -2,9 +2,19 @@
 <h2 class="modal__title">{{= _('Share favorite', 'share') }}</h2>
 
 <span class="modal__subtitle">{{= _('Share link', 'share') }}</span>
-<input id="share_url_data" value="{{= this.shareUrl }}" type="text"></input>
-<button class="share__copy_link" {{= click(this.copy, this) }}>{{= _('COPY LINK' , 'share') }}</button>
-<span id="share-copy-status" class="share__copy_status share__copy_status--hidden">{{= _('Link copied', 'share') }}</span>
+<div class="share_copy__input__container" {{= click(this.copy, this) }}>
+  <input id="share_url_data" value="{{= this.shareUrl }}" type="text"></input>
+  <div class="share_copy__container" id="share-copy-container">
+    <button class="share_copy__link">
+      <i class="icon-copy"></i>
+    </button>
+    <span class="share_copy__status">
+      <i class="icon-check share_copy__status__icon"></i>
+      {{= _('Copied !', 'share') }}
+    </span>
+  </div>
+</div>
+
 <hr class="modal__hr">
 <i class="share__icons icon-facebook"></i>
 <a rel="noopener noreferrer" target="_blank" {{= this.openPopup() }} href="{{= this.facebookTemplate(this.shareUrl) }}" class="share__link">