UX: consistent share modal & popup, refactoring (#13759)

UX: consistent share modal & popup, refactoring (#13759)

diff --git a/app/assets/javascripts/discourse/app/components/share-popup.js b/app/assets/javascripts/discourse/app/components/share-popup.js
index a2d9dec..85e815c 100644
--- a/app/assets/javascripts/discourse/app/components/share-popup.js
+++ b/app/assets/javascripts/discourse/app/components/share-popup.js
@@ -49,8 +49,11 @@ export default Component.extend({
       if (this.element) {
         const linkInput = this.element.querySelector("#share-link input");
         linkInput.value = this.link;
-        linkInput.setSelectionRange(0, this.link.length);
-        linkInput.focus();
+        if (!this.site.mobileView) {
+          // if the input is auto-focused on mobile, iOS requires two taps of the copy button
+          linkInput.setSelectionRange(0, this.link.length);
+          linkInput.focus();
+        }
       }
     }, 200);
   },
diff --git a/app/assets/javascripts/discourse/app/templates/components/share-popup.hbs b/app/assets/javascripts/discourse/app/templates/components/share-popup.hbs
index 695be0a..23e32ea 100644
--- a/app/assets/javascripts/discourse/app/templates/components/share-popup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/share-popup.hbs
@@ -4,13 +4,21 @@
   {{#if date}}
     <span class="date">{{displayDate}}</span>
   {{/if}}
+
+  {{d-button
+    action=(action "close")
+    class="btn btn-flat close"
+    icon="times"
+    aria-label="share.close"
+    title="share.close"
+  }}
 </div>
 
-<div>
-  <input type="text" aria-label={{i18n "share.url"}}>
+<div class="share-link-container">
+  <input class="share-link-input" type="text" aria-label={{i18n "share.url"}}> {{copy-button selector="input.share-link-input"}}
 </div>
 
-<div class="actions">
+<div class="share-link-actions">
   <div class="sources">
     {{#each sources as |s|}}
       {{share-source source=s title=model.title action=(action "share")}}
@@ -19,27 +27,26 @@
 
   <div class="alt-actions">
     {{#if topic.details.can_reply_as_new_topic}}
-      <div class="reply-as-new-topic">
-        {{#if topic.isPrivateMessage}}
-          <a href class="new-topic" {{action "replyAsNewTopic"}} aria-label={{i18n "post.reply_as_new_private_message"}} title={{i18n "post.reply_as_new_private_message"}}>
-            {{d-icon "plus"}}
-            {{i18n "user.new_private_message"}}
-          </a>
-        {{else}}
-          <a href class="new-topic" {{action "replyAsNewTopic"}} aria-label={{i18n "post.reply_as_new_topic"}} title={{i18n "post.reply_as_new_topic"}}>
-            {{d-icon "plus"}}
-            {{i18n "topic.create"}}
-          </a>
-        {{/if}}
-      </div>
+      {{#if topic.isPrivateMessage}}
+        {{d-button
+          action=(action "replyAsNewTopic")
+          class="btn btn-default new-topic"
+          icon="plus"
+          aria-label="post.reply_as_new_private_message"
+          title="post.reply_as_new_private_message"
+          label="user.new_private_message"
+        }}
+      {{else}}
+        {{d-button
+          action=(action "replyAsNewTopic")
+          class="btn btn-default new-topic"
+          icon="plus"
+          aria-label="post.reply_as_new_topic"
+          title="post.reply_as_new_topic"
+          label="topic.create"
+        }}
+      {{/if}}
     {{/if}}
 
-    {{d-button
-      action=(action "close")
-      class="btn btn-flat close"
-      icon="times"
-      aria-label="share.close"
-      title="share.close"
-    }}
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/app/templates/components/share-source.hbs b/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
index a2fdb3b..01e3eda 100644
--- a/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/share-source.hbs
@@ -1 +1,7 @@
-{{d-button action=(action "share" source) class=(concat "share-" source.id) translatedTitle=source.title translatedAriaLabel=source.title icon=(if source.icon source.icon source.htmlIcon)}}
+{{d-button
+  action=(action "share" source)
+  class=(concat "btn-default share-" source.id)
+  translatedTitle=source.title
+  translatedAriaLabel=source.title
+  icon=(if source.icon source.icon source.htmlIcon)
+ }}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
index 9063845..cc5b126 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
@@ -2,7 +2,7 @@
   <form>
     <div class="input-group invite-link">
       <label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
-      <div class="invite-input-with-button">
+      <div class="share-link-container">
         {{input
           name="invite-link"
           class="invite-link"
@@ -19,7 +19,7 @@
 
     <div class="input-group input-email">
       <label for="invite-email">{{d-icon "envelope"}}{{i18n "user.invited.invite.restrict_email"}}</label>
-      <div class="invite-input-with-button">
+      <div class="invite-email-container">
         {{input
           id="invite-email"
           value=buffered.email
diff --git a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
index 7275238..53cf997 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
@@ -2,7 +2,7 @@
   <form>
     <div class="input-group invite-link">
       <label for="invite-link">{{i18n "topic.share.instructions"}}</label>
-      <div class="invite-input-with-button">
+      <div class="share-link-container">
         {{input
           name="invite-link"
           class="invite-link"
@@ -12,50 +12,51 @@
         {{copy-button selector="input.invite-link"}}
       </div>
     </div>
+    <div class="share-link-actions">
+      <div class="sources">
+        {{#each sources as |s|}}
+          {{share-source source=s title=topic.title action=(action "share")}}
+        {{/each}}
 
-    <div class="sources">
-      {{#each sources as |s|}}
-        {{share-source source=s title=topic.title action=(action "share")}}
-      {{/each}}
-
-      {{d-button
-        class="btn-default"
-        label="topic.share.notify_users.title"
-        icon="hand-point-right"
-        action=(action "toggleNotifyUsers")
-      }}
-
-      {{#if allowInvites}}
         {{d-button
           class="btn-default"
-          label="topic.share.invite_users"
-          icon="user-plus"
-          action=(action "inviteUsers")
+          label="topic.share.notify_users.title"
+          icon="hand-point-right"
+          action=(action "toggleNotifyUsers")
         }}
-      {{/if}}
-    </div>
 
-    {{#if showNotifyUsers}}
-      <div class="input-group invite-users">
-        <label for="invite-users">{{i18n "topic.share.notify_users.instructions"}}</label>
-        <div class="invite-input-with-button">
-          {{user-chooser
-            value=users
-            onChange=(action "onChangeUsers")
-            options=(hash
-                     topicId=topic.id
-                     maximum=(unless currentUser.staff 1)
-                     excludeCurrentUser=true
-                    )
-          }}
+        {{#if allowInvites}}
           {{d-button
-            icon="check"
-            class="btn-primary"
-            disabled=(if users false true)
-            action=(action "notifyUsers")
+            class="btn-default"
+            label="topic.share.invite_users"
+            icon="user-plus"
+            action=(action "inviteUsers")
           }}
-        </div>
+        {{/if}}
       </div>
-    {{/if}}
+
+      {{#if showNotifyUsers}}
+        <div class="input-group invite-users">

[... diff too long, it was truncated ...]

GitHub sha: 8de89895761876a2f8f174afb46b4e4dffc09ef2

This commit appears in #13759 which was approved by CvX. It was merged by tgxworld.