REFACTOR: Consistency, A11Y, and less text for composer toggles (#12627)

app/assets/javascripts/discourse/app/templates/components/composer-toggles.hbs

@@ -2,24 +2,27 @@
   {{plugin-outlet name="before-composer-toggles"}}
 
   {{#if site.mobileView}}
-    {{flat-button
+    {{d-button
-      class="toggle-toolbar"
+      class="btn-flat toggle-toolbar btn-mini-toggle"
       icon="bars"
       action=toggleToolbar
-      title=toggleToolbarTitle}}
+      title=toggleToolbarTitle
+      ariaLabel=toggleToolbarTitle}}
   {{/if}}
 
-  {{flat-button
+  {{d-button
-    class="toggler"
+    class="btn-flat toggler toggle-minimize btn-mini-toggle"
     icon=toggleIcon
     action=toggleComposer
-    title=toggleTitle}}
+    title=toggleTitle
+    ariaLabel=toggleTitle}}
 
   {{#unless site.mobileView}}
-    {{flat-button
+    {{d-button
-      class="toggle-fullscreen"
+      class="btn-flat toggle-fullscreen btn-mini-toggle"
       icon=fullscreenIcon
       action=toggleFullscreen
-      title=fullscreenTitle}}
+      title=fullscreenTitle
+      ariaLabel=fullscreenTitle}}
   {{/unless}}
 </div>

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -207,7 +207,13 @@
               {{d-button action=(action "togglePreview") class="hide-preview" ariaLabel="composer.hide_preview" icon="pencil-alt"}}
             {{/if}}
           {{else}}
-            <a href {{action "togglePreview"}} class="toggle-preview">{{html-safe toggleText}}</a>
+            {{d-button
+              action=(action "togglePreview")
+              translatedTitle=toggleText
+              translatedAriaLabel=toggleText
+              icon="angle-double-left"
+              class=(concat "btn-flat btn-mini-toggle toggle-preview " (unless showPreview "active"))
+              }}
           {{/if}}
 
         </div>

app/assets/stylesheets/common/base/compose.scss

@@ -83,7 +83,7 @@
     .saving-text {
       display: none;
     }
-    .toggler {
+    .toggle-minimize {
       order: 2;
     }
   }
@@ -97,9 +97,7 @@
     margin: 5px 0 10px 0;
     display: flex;
     align-items: center;
-    .d-icon {
+
-      color: var(--primary-high);
-    }
     .reply-details {
       max-width: calc(100% - 175px);
       flex: 1 1 auto;
@@ -108,7 +106,7 @@
       white-space: nowrap;
 
       .d-icon {
-        opacity: 0.8;
+        color: var(--primary-medium);
       }
     }
     .composer-action-title {
@@ -152,11 +150,8 @@
     .composer-controls {
       display: flex;
       margin-left: auto;
-      button {
+      .toggle-minimize {
-        padding: 5px 7px;
+        order: 2;
-        &.toggler {
-          order: 2;
-        }
       }
     }
   }
@@ -538,3 +533,10 @@ body:not(.ios-safari-composer-hacks) {
     }
   }
 }
+
+.toggle-preview {
+  transition: all 0.33s ease-out;
+  &.active {
+    transform: rotate(180deg);
+  }
+}

app/assets/stylesheets/common/components/buttons.scss

@@ -264,6 +264,9 @@
   line-height: $line-height-small;
 }
 
+// Bonus Buttons
+// --------------------------------------------------
+
 .btn-flat {
   background: transparent;
   border: 0;
@@ -309,3 +312,22 @@
   padding: 0;
   color: var(--tertiary);
 }
+
+.btn-mini-toggle {
+  padding: 0.4em 0.467em;
+  .d-icon {
+    color: var(--primary-high);
+  }
+  @include hover {
+    background: transparent;
+    .d-icon {
+      color: var(--primary);
+    }
+  }
+  &:focus {
+    background: var(--primary-low);
+    .d-icon {
+      color: var(--primary);
+    }
+  }
+}

app/assets/stylesheets/mobile/compose.scss

@@ -56,7 +56,7 @@
     }
   }
 
-  .toggler {
+  .toggle-minimize {
     .d-icon-chevron-down {
       vertical-align: text-top;
     }
@@ -67,7 +67,7 @@
     padding-bottom: env(safe-area-inset-bottom);
 
     .toggle-toolbar,
-    .toggler {
+    .toggle-minimize {
       top: 8px;
     }
     .draft-text {

config/locales/client.en.yml

@@ -2028,8 +2028,8 @@ en:
       saved: "Saved!"
       saved_draft: "Post draft in progress. Tap to resume."
       uploading: "Uploading..."
-      show_preview: "show preview »"
+      show_preview: "show preview"
-      hide_preview: "« hide preview"
+      hide_preview: "hide preview"
 
       quote_post_title: "Quote whole post"
       bold_label: "B"