UX: improve composer toolbar flexibility (#18195)

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -50,7 +50,7 @@ let _createCallbacks = [];
 
 class Toolbar {
   constructor(opts) {
-    const { site, siteSettings } = opts;
+    const { siteSettings, capabilities } = opts;
     this.shortcuts = {};
     this.context = null;
 
@@ -106,16 +106,16 @@ class Toolbar {
         }),
     });
 
-    this.addButton({
+    if (!capabilities.touch) {
-      id: "code",
+      this.addButton({
-      group: "insertions",
+        id: "code",
-      shortcut: "E",
+        group: "insertions",
-      preventFocus: true,
+        shortcut: "E",
-      trimLeading: true,
+        preventFocus: true,
-      action: (...args) => this.context.send("formatCode", args),
+        trimLeading: true,
-    });
+        action: (...args) => this.context.send("formatCode", args),
+      });
 
-    if (!site.mobileView) {
       this.addButton({
         id: "bullet",
         group: "extras",
@@ -354,7 +354,7 @@ export default Component.extend(TextareaTextManipulation, {
   @discourseComputed()
   toolbar() {
     const toolbar = new Toolbar(
-      this.getProperties("site", "siteSettings", "showLink")
+      this.getProperties("site", "siteSettings", "showLink", "capabilities")
     );
     toolbar.context = this;
 
@@ -708,6 +708,7 @@ export default Component.extend(TextareaTextManipulation, {
           this.applySurround(selected, head, tail, exampleKey, opts),
         applyList: (head, exampleKey, opts) =>
           this._applyList(selected, head, exampleKey, opts),
+        formatCode: (...args) => this.send("formatCode", args),
         addText: (text) => this.addText(selected, text),
         getText: () => this.value,
         toggleDirection: () => this._toggleDirection(),

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -332,7 +332,17 @@ export default Controller.extend({
         })
       );
 
-      if (this.site.mobileView) {
+      if (this.capabilities.touch) {
+        options.push(
+          this._setupPopupMenuOption(() => {
+            return {
+              action: "applyFormatCode",
+              icon: "code",
+              label: "composer.code_title",
+            };
+          })
+        );
+
         options.push(
           this._setupPopupMenuOption(() => {
             return {
@@ -797,6 +807,10 @@ export default Controller.extend({
       });
     },
 
+    applyFormatCode() {
+      this.toolbarEvent.formatCode();
+    },
+
     applyUnorderedList() {
       this.toolbarEvent.applyList("* ", "list_item");
     },

app/assets/javascripts/discourse/app/templates/components/d-editor.hbs

@@ -15,10 +15,6 @@
               <DButton @action={{b.action}} @type="button" @actionParam={{b}} @translatedTitle={{b.title}} @label={{b.label}} @icon={{b.icon}} @class={{b.className}} @preventFocus={{b.preventFocus}} @tabindex={{b.tabindex}} @onKeyDown={{this.rovingButtonBar}} />
             {{/if}}
           {{/each}}
-
-          {{#unless group.lastGroup}}
-            <div class="d-editor-spacer"></div>
-          {{/unless}}
         {{/each}}
       </div>
 

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

@@ -546,14 +546,6 @@ body:not(.ios-safari-composer-hacks) {
   }
 }
 
-.show-preview {
-  @media screen and (max-width: 850px) {
-    .d-editor-button-bar {
-      font-size: $font-down-1;
-    }
-  }
-}
-
 .toggle-preview {
   margin-left: 8px;
   transition: all 0.33s ease-out;

app/assets/stylesheets/common/d-editor.scss

@@ -305,29 +305,21 @@
 
 // d-editor bar button sizing
 .d-editor-button-bar {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
+  @include breakpoint(tablet) {
+    // occupy available space on narrower screens
+    grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
+  }
+  @include breakpoint(mobile-medium) {
+    font-size: var(--font-down-1);
+  }
   align-items: center;
   border-bottom: 1px solid var(--primary-low);
   width: 100%;
   box-sizing: border-box;
-
-  html:not(.keyboard-visible) & {
-    overflow-x: auto; // hiding overflow breaks the cog menu on iPad and mobile
-  }
-
   flex-shrink: 0;
 
-  .d-editor-spacer {
-    height: 1em;
-    display: inline-block;
-    border-left: 1px solid var(--primary-low);
-    margin: 0 0.25em;
-
-    .mobile-view & {
-      display: none;
-    }
-  }
-
   .btn:focus {
     @include default-focus;
   }
@@ -340,27 +332,14 @@
     .d-icon {
       color: currentColor;
     }
-    &:hover {
+    .discourse-no-touch & {
-      color: var(--primary-low);
+      &:hover {
-    }
+        color: var(--primary-low);
-  }
-
-  // ensures items grow/shrink on mobile to fit available space
-  @include breakpoint(mobile-large) {
-    .btn {
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      padding-left: 0.25em;
-      padding-right: 0.25em;
-    }
-
-    .select-kit.toolbar-popup-menu-options {
-      flex-grow: 1;
-      flex-basis: auto;
-      .select-kit-header .select-kit-header-wrapper {
-        justify-content: center;
       }
     }
   }
+
+  .select-kit-header-wrapper {
+    justify-content: center;
+  }
 }

app/assets/stylesheets/mobile/compose.scss

@@ -161,12 +161,10 @@
     }
   }
 
-  .d-editor-button-bar {
+  .wmd-controls:not(.toolbar-visible) {
-    display: none;
+    .d-editor-button-bar {
-  }
+      display: none;
-
+    }
-  .toolbar-visible .d-editor-button-bar {
-    display: flex;
   }
 
   .d-editor-button-bar .btn {