UI: refinements to topic footer buttons (#9780)

app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs

@@ -50,10 +50,10 @@
                   args=(hash topic=topic)
                   tagName=""
                   connectorTagName="span"}}
-
-  {{pinned-button pinned=topic.pinned topic=topic}}
 </div>
 
+{{pinned-button pinned=topic.pinned topic=topic}}
+
 {{#if showNotificationsButton}}
   {{topic-notifications-button
     notificationLevel=topic.details.notification_level

app/assets/javascripts/select-kit/app/templates/components/pinned-button.hbs

@@ -1,5 +1,4 @@
-{{pinned-options value=pinned topic=topic}}
-
 <p class="reason">
-  {{html-safe reasonText}}
+  {{pinned-options value=pinned topic=topic}}
+  <span class="text">{{html-safe reasonText}}</span>
 </p>

app/assets/javascripts/select-kit/app/templates/components/topic-notifications-button.hbs

@@ -1,17 +1,28 @@
-{{topic-notifications-options
-  value=notificationLevel
-  topic=topic
-  onChange=(action "changeTopicNotificationLevel")
-  options=(hash
-    showFullTitle=showFullTitle
-    placement=placement
-    preventsClickPropagation=true
-    showCaret=showCaret
-  )
-}}
-
 {{#if appendReason}}
   <p class="reason">
-    {{html-safe topic.details.notificationReasonText}}
+    {{topic-notifications-options
+      value=notificationLevel
+      topic=topic
+      onChange=(action "changeTopicNotificationLevel")
+      options=(hash
+        showFullTitle=showFullTitle
+        placement=placement
+        preventsClickPropagation=true
+        showCaret=showCaret
+      )
+    }}
+    <span class="text">{{html-safe topic.details.notificationReasonText}}</span>
   </p>
+{{else}}
+  {{topic-notifications-options
+    value=notificationLevel
+    topic=topic
+    onChange=(action "changeTopicNotificationLevel")
+    options=(hash
+      showFullTitle=showFullTitle
+      placement=placement
+      preventsClickPropagation=true
+      showCaret=showCaret
+    )
+  }}
 {{/if}}

app/assets/stylesheets/common/base/topic-post.scss

@@ -1005,10 +1005,38 @@ a.mention-group {
 }
 
 #topic-footer-buttons {
-  .reason {
-    color: $primary-high;
-    display: inline;
-    margin: 0 0 0 8px;
-    line-height: $line-height-medium;
+  padding: 0.5em 0;
+
+  .topic-footer-main-buttons {
+    margin: -0.5em 0;
+
+    > .btn,
+    .topic-admin-menu-button-container {
+      margin: 0.5em 0.5em 0.5em 0;
+    }
+
+    .topic-admin-menu-button-container {
+      display: inline-flex;
+    }
+  }
+
+  .pinned-button:not(.is-hidden) + .topic-notifications-button {
+    margin-top: 0;
+  }
+
+  .pinned-button,
+  .topic-notifications-button {
+    margin: 1em 0;
+
+    .reason {
+      color: $primary-high;
+      display: inline-flex;
+      margin: 0;
+      align-items: center;
+
+      .text {
+        margin-left: 0.5em;
+      }
+    }
   }
 }

app/assets/stylesheets/common/select-kit/pinned-button.scss

@@ -1,28 +1,7 @@
 #topic-footer-buttons {
   .pinned-button {
-    min-width: auto;
-    margin: 1em 0;
-
     &.is-hidden {
       display: none;
     }
-
-    .btn {
-      margin: 0;
-    }
-
-    .reason {
-      display: inline;
-      line-height: $line-height-medium;
-    }
-  }
-}
-
-.pinned-button {
-  margin: 0;
-  min-width: auto;
-
-  .pinned-options {
-    display: inline;
   }
 }

app/assets/stylesheets/common/select-kit/topic-notifications-button.scss

@@ -1,27 +0,0 @@
-#topic-footer-buttons {
-  .topic-notifications-button {
-    min-width: auto;
-    margin: 1em 0;
-
-    .btn {
-      margin: 0;
-    }
-
-    .reason {
-      display: inline;
-      line-height: $line-height-medium;
-    }
-  }
-}
-
-.topic-notifications-button .topic-notifications-options {
-  min-width: auto;
-}
-
-.topic-notifications-button {
-  margin: 0;
-
-  .topic-notifications-options {
-    display: inline-flex;
-  }
-}

app/assets/stylesheets/desktop/topic-post.scss

@@ -451,20 +451,15 @@ pre.copy-codeblocks:hover .copy-cmd {
   }
 }
 
-@mixin topic-footer-button {
-  margin-bottom: 5px;
-  margin-right: 10px;
-}
-
 #topic-footer-buttons {
-  padding: 10px 10px 0 0;
-  float: left;
-  .btn {
-    @include topic-footer-button;
+  max-width: calc(690px + (11px * 2) + 45px);
+
+  .bookmark {
     .d-icon-bookmark.bookmarked {
       color: $tertiary;
     }
   }
+
   .bookmark.bookmarked .d-icon-bookmark,
   .bookmark.bookmarked .d-icon-discourse-bookmark-clock {
     color: $tertiary;
@@ -474,10 +469,6 @@ pre.copy-codeblocks:hover .copy-cmd {
   }
 }
 
-#topic-footer-button {
-  width: 757px;
-}
-
 .suggested-topics {
   clear: left;
   padding: 20px 0 15px 0;

app/assets/stylesheets/mobile/topic-post.scss

@@ -235,20 +235,16 @@ a.reply-to-tab {
 }
 
 #topic-footer-buttons {
-  @include clearfix;
-  padding: 20px 0 0 0;
   .d-icon-bookmark.bookmarked,
   .d-icon-discourse-bookmark-clock.bookmarked {
     color: $tertiary;
   }
-  .combobox {
+
+  .topic-footer-mobile-dropdown {
     margin-right: 0.5em;
     width: 160px;
-    margin-bottom: 0.5em;
   }
-}
 
-#topic-footer-buttons {
   .topic-notifications-button,
   .pinned-button {
     display: flex;
@@ -263,11 +259,6 @@ a.reply-to-tab {
   }
 }
 
-#topic-footer-button {
-  width: 100px;
-  margin: 0 auto;
-}
-
 .suggested-topics {
   clear: left;
   padding: 20px 0 15px 0;
@@ -292,13 +283,6 @@ span.post-count {
   opacity: 0.8;
 }
 
-#topic-footer-buttons {
-  .btn {
-    margin-bottom: 0.5em;
-    margin-right: 0.5em;
-  }
-}
-
 #topic-title {
   z-index: z("base") + 1;
   margin: 0 0 0 0 !important;