From 87f4ee13ef1295135da0b5a30bbda4410038e46d Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 22 Feb 2019 23:22:11 +0100
Subject: [PATCH] UX: puts more emphasis on the shared url on share panel
 (#7055)

---
 .../discourse/components/share-panel.js.es6      |  6 +++---
 .../templates/components/share-panel.hbs         |  2 +-
 app/assets/stylesheets/common/base/modal.scss    |  6 +-----
 .../components/share-and-invite-modal.scss       | 16 ++++++++++++----
 config/locales/client.en.yml                     |  4 ++--
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/share-panel.js.es6 b/app/assets/javascripts/discourse/components/share-panel.js.es6
index deb4039d77c..234e8d70a24 100644
--- a/app/assets/javascripts/discourse/components/share-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/share-panel.js.es6
@@ -27,12 +27,12 @@ export default Ember.Component.extend({
     topicTitle = escapeExpression(topicTitle);
 
     if (type === "topic") {
-      return I18n.t("share.topic", { topicTitle });
+      return I18n.t("share.topic_html", { topicTitle });
     }
     if (postNumber) {
-      return I18n.t("share.post", { postNumber, postDate });
+      return I18n.t("share.post_html", { postNumber, postDate });
     }
-    return I18n.t("share.topic", { topicTitle });
+    return I18n.t("share.topic_html", { topicTitle });
   },
 
   @computed("panel.model.shareUrl", "topic.shareUrl")
diff --git a/app/assets/javascripts/discourse/templates/components/share-panel.hbs b/app/assets/javascripts/discourse/templates/components/share-panel.hbs
index dd2e4f7af14..b166c420719 100644
--- a/app/assets/javascripts/discourse/templates/components/share-panel.hbs
+++ b/app/assets/javascripts/discourse/templates/components/share-panel.hbs
@@ -3,7 +3,7 @@
 </div>
 
 <div class="body">
-  {{input value=shareUrl class="topic-share-url"}}
+  {{textarea value=shareUrl class="topic-share-url"}}
   <div class="topic-share-url-for-touch"><a></a></div>
 
   <div class="sources">
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 70f5dc997ea..659b86bb295 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -646,11 +646,7 @@
           background: $danger;
 
           &.single-tab {
-            color: $primary;
-            background: none;
-            padding: s(1 0);
-            font-weight: 700;
-            font-size: $font-up-3;
+            display: none;
           }
         }
       }
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
index 8daff3db7d2..6a275fa5d1e 100644
--- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss
+++ b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
@@ -14,6 +14,11 @@
       font-size: $font-0;
       font-weight: normal;
       margin-bottom: s(2);
+
+      .post-date {
+        color: $primary-medium;
+        font-size: $font-down-1;
+      }
     }
   }
 
@@ -23,12 +28,15 @@
 
     .topic-share-url {
       width: 100%;
+      height: auto;
+      box-sizing: border-box;
     }
 
     .topic-share-url-for-touch {
-      width: 290px;
-
-      @extend .overflow-ellipsis;
+      a {
+        word-break: break-all;
+        font-size: $font-up-1;
+      }
     }
 
     .topic-share-url-for-touch,
@@ -43,7 +51,7 @@
       flex-direction: row;
 
       .social-link {
-        font-size: $font-up-4;
+        font-size: $font-up-6;
         margin-right: s(2);
       }
     }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 9609ee9cb73..135cec512dc 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -135,8 +135,8 @@ en:
       next_month: "Next Month"
       placeholder: date
     share:
-      topic: "<b>Topic</b>: %{topicTitle}"
-      post: "<b>Post #%{postNumber}</b>, %{postDate}"
+      topic_html: 'Topic: <span class="topic-title">%{topicTitle}</span>'
+      post_html: '<span class="post-number">Post #%{postNumber}</span>, <span class="post-date">%{postDate}</span>'
       close: "close"
       twitter: "Share this link on Twitter"
       facebook: "Share this link on Facebook"