UX: Maximize the preview space in composer (#15188)

A follow-up to #15117 and #15141. Applies the previous changes to PM-specific fields, makes the preview area take the all the available height of the composer, and unifies more spacing between composer elements.
discourse · Dec 24, 2021 · 0b34d5a · 0b34d5a
1 parent a263743
commit 0b34d5a
Show file tree

Hide file tree

Showing 12 changed files with 256 additions and 232 deletions.
diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-editor.hbs
@@ -1,4 +1,4 @@
-{{d-editor
+{{#d-editor
   value=composer.reply
   placeholder=replyPlaceholder
   previewUpdated=(action "previewUpdated")
@@ -19,6 +19,8 @@
   disabled=disableTextarea
   outletArgs=(hash composer=composer editorType="composer")
 }}
+  {{yield}}
+{{/d-editor}}
 
 {{#if allowUpload}}
   {{#if acceptsAllFormats}}

diff --git a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
@@ -1,58 +1,62 @@
 <div class="d-editor-container">
-  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}} {{if isEditorFocused "in-focus"}}">
-    <div class="d-editor-button-bar" role="toolbar">
-      {{#each toolbar.groups as |group|}}
-        {{#each group.buttons as |b|}}
-          {{#if b.popupMenu}}
-            {{toolbar-popup-menu-options
-              content=popupMenuOptions
-              onChange=onPopupMenuAction
-              onOpen=(action b.action b)
-              class=b.className
-              tabindex=-1
-              onKeydown=rovingButtonBar
-              options=(hash
+  <div class="d-editor-textarea-column">
+    {{yield}}
+
+    <div class="d-editor-textarea-wrapper {{if disabled "disabled"}} {{if isEditorFocused "in-focus"}}">
+      <div class="d-editor-button-bar" role="toolbar">
+        {{#each toolbar.groups as |group|}}
+          {{#each group.buttons as |b|}}
+            {{#if b.popupMenu}}
+              {{toolbar-popup-menu-options
+                content=popupMenuOptions
+                onChange=onPopupMenuAction
+                onOpen=(action b.action b)
+                class=b.className
+                tabindex=-1
+                onKeydown=rovingButtonBar
+                options=(hash
+                  icon=b.icon
+                  focusAfterOnChange=false
+                )
+              }}
+            {{else}}
+              {{d-button
+                action=b.action
+                type="button"
+                actionParam=b
+                translatedTitle=b.title
+                label=b.label
                 icon=b.icon
-                focusAfterOnChange=false
-              )
-            }}
-          {{else}}
-            {{d-button
-              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=rovingButtonBar
-            }}
-          {{/if}}
+                class=b.className
+                preventFocus=b.preventFocus
+                tabindex=b.tabindex
+                onKeyDown=rovingButtonBar
+              }}
+            {{/if}}
+          {{/each}}
+
+          {{#unless group.lastGroup}}
+            <div class="d-editor-spacer"></div>
+          {{/unless}}
         {{/each}}
+      </div>
 
-        {{#unless group.lastGroup}}
-          <div class="d-editor-spacer"></div>
-        {{/unless}}
-      {{/each}}
+      {{conditional-loading-spinner condition=loading}}
+      {{d-textarea
+        autocomplete="discourse"
+        tabindex=tabindex
+        value=value
+        class="d-editor-input"
+        placeholder=placeholderTranslated
+        aria-label=placeholderTranslated
+        disabled=disabled
+        input=change
+        focusIn=(action "focusIn")
+        focusOut=(action "focusOut")
+      }}
+      {{popup-input-tip validation=validation}}
+      {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
     </div>
-
-    {{conditional-loading-spinner condition=loading}}
-    {{d-textarea
-      autocomplete="discourse"
-      tabindex=tabindex
-      value=value
-      class="d-editor-input"
-      placeholder=placeholderTranslated
-      aria-label=placeholderTranslated
-      disabled=disabled
-      input=change
-      focusIn=(action "focusIn")
-      focusOut=(action "focusOut")
-    }}
-    {{popup-input-tip validation=validation}}
-    {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
   </div>
 
   <div class="d-editor-preview-wrapper {{if forcePreview "force-preview"}}">