UX: Normalize sizing for inputs, buttons, dropdowns (discourse#14226)

See PR for details
dfabulich · Sep 9, 2021 · 24e71ac · 24e71ac
1 parent 76f0cf1
commit 24e71ac
Show file tree

Hide file tree

Showing 69 changed files with 489 additions and 689 deletions.
diff --git a/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js b/app/assets/javascripts/admin/addon/components/screened-ip-address-form.js
@@ -17,7 +17,7 @@ import { schedule } from "@ember/runloop";
 **/
 
 export default Component.extend({
-  classNames: ["screened-ip-address-form"],
+  classNames: ["screened-ip-address-form", "inline-form"],
   formSubmitted: false,
   actionName: "block",
 

diff --git a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
@@ -1,30 +1,35 @@
-<b>{{i18n "admin.permalink.form.label"}}</b>
+<div class="inline-form">
+  <label>{{i18n "admin.permalink.form.label"}}</label>
 
-{{text-field
-  value=url
-  disabled=formSubmitted
-  class="permalink-url"
-  placeholderKey="admin.permalink.url"
-  autocorrect="off"
-  autocapitalize="off"}}
+  {{text-field
+    value=url
+    disabled=formSubmitted
+    class="permalink-url"
+    placeholderKey="admin.permalink.url"
+    autocorrect="off"
+    autocapitalize="off"
+  }}
 
-{{combo-box
-  content=permalinkTypes
-  value=permalinkType
-  onChange=(action (mut permalinkType))
-  class="permalink-type"
-}}
+  {{combo-box
+    content=permalinkTypes
+    value=permalinkType
+    onChange=(action (mut permalinkType))
+    class="permalink-type"
+  }}
 
-{{text-field
-  value=permalink_type_value
-  disabled=formSubmitted
-  class="external-url"
-  placeholderKey=permalinkTypePlaceholder
-  autocorrect="off"
-  autocapitalize="off"}}
+  {{text-field
+    value=permalink_type_value
+    disabled=formSubmitted
+    class="external-url"
+    placeholderKey=permalinkTypePlaceholder
+    autocorrect="off"
+    autocapitalize="off"
+  }}
 
-{{d-button
-  class="btn-default"
-  action=(action "submit")
-  disabled=formSubmitted
-  label="admin.permalink.form.add"}}
+  {{d-button
+    class="btn-default"
+    action=(action "submit")
+    disabled=formSubmitted
+    label="admin.permalink.form.add"
+  }}
+</div>
diff --git a/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs b/app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
@@ -1,4 +1,4 @@
-<b>{{i18n "admin.logs.screened_ips.form.label"}}</b>
+<label>{{i18n "admin.logs.screened_ips.form.label"}}</label>
 {{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
 
 {{combo-box

diff --git a/app/assets/javascripts/admin/addon/templates/email-index.hbs b/app/assets/javascripts/admin/addon/templates/email-index.hbs
@@ -16,21 +16,24 @@
 
 <form>
   <div class="admin-controls">
-    {{#if sendingEmail}}
-      <div class="controls">{{i18n "admin.email.sending_test"}}</div>
-    {{else}}
-      <div class="controls">
-        {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
+    <div class="controls">
+      <div class="inline-form">
+        {{#if sendingEmail}}
+          {{i18n "admin.email.sending_test"}}
+        {{else}}
+          {{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
+          {{d-button
+            class="btn-primary"
+            action=(action "sendTestEmail")
+            disabled=sendTestEmailDisabled
+            label="admin.email.send_test"
+            type="submit"
+          }}
+          {{#if sentTestEmailMessage}}
+            <span class="result-message">{{sentTestEmailMessage}}</span>
+          {{/if}}
+        {{/if}}
       </div>
-      <div class="controls">
-        {{d-button
-          class="btn-primary"
-          action=(action "sendTestEmail")
-          disabled=sendTestEmailDisabled
-          label="admin.email.send_test"
-          type="submit"}}
-        {{#if sentTestEmailMessage}}<span class="result-message">{{sentTestEmailMessage}}</span>{{/if}}
-      </div>
-    {{/if}}
+    </div>
   </div>
 </form>
diff --git a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
@@ -2,32 +2,35 @@
 
 <div class="admin-controls email-preview">
   <div class="controls">
-    <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
-    {{date-picker-past value=lastSeen id="last-seen"}}
-    <label>{{i18n "admin.email.user"}}:</label>
-    {{email-group-user-chooser
-      value=username
-      onChange=(action "updateUsername")
-      options=(hash
-        maximum=1
-      )
-    }}
-    {{d-button
-      class="btn-primary digest-refresh-button"
-      action=(action "refresh")
-      label="admin.email.refresh"}}
-    <div class="toggle">
-      <label>{{i18n "admin.email.format"}}</label>
-      {{#if showHtml}}
-        <span>{{i18n "admin.email.html"}}</span>
-         |
-        <a href {{action "toggleShowHtml"}}>
-          {{i18n "admin.email.text"}}
-        </a>
-      {{else}}
-        <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
-        <span>{{i18n "admin.email.text"}}</span>
-      {{/if}}
+    <div class="inline-form">
+      <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
+      {{date-picker-past value=lastSeen id="last-seen"}}
+      <label>{{i18n "admin.email.user"}}:</label>
+      {{email-group-user-chooser
+        value=username
+        onChange=(action "updateUsername")
+        options=(hash
+          maximum=1
+        )
+      }}
+      {{d-button
+        class="btn-primary digest-refresh-button"
+        action=(action "refresh")
+        label="admin.email.refresh"
+      }}
+      <div class="toggle">
+        <label>{{i18n "admin.email.format"}}</label>
+        {{#if showHtml}}
+          <span>{{i18n "admin.email.html"}}</span>
+          |
+          <a href {{action "toggleShowHtml"}}>
+            {{i18n "admin.email.text"}}
+          </a>
+        {{else}}
+          <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
+          <span>{{i18n "admin.email.text"}}</span>
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -37,20 +40,22 @@
   <div class="email-preview-digest">
     {{#if showSendEmailForm}}
       <div class="controls">
-        {{#if sendingEmail}}
-          {{i18n "admin.email.sending_test"}}
-        {{else}}
-          <label>{{i18n "admin.email.send_digest_label"}}</label>
-          {{text-field value=email placeholderKey="admin.email.test_email_address"}}
-          {{d-button
-            class="btn-default"
-            action=(action "sendEmail")
-            disabled=sendEmailDisabled
-            label="admin.email.send_digest"}}
-          {{#if sentEmail}}
-            <span class="result-message">{{i18n "admin.email.sent_test"}}</span>
+        <div class="inline-form">
+          {{#if sendingEmail}}
+            {{i18n "admin.email.sending_test"}}
+          {{else}}
+            <label>{{i18n "admin.email.send_digest_label"}}</label>
+            {{text-field value=email placeholderKey="admin.email.test_email_address"}}
+            {{d-button
+              class="btn-default"
+              action=(action "sendEmail")
+              disabled=sendEmailDisabled
+              label="admin.email.send_digest"}}
+            {{#if sentEmail}}
+              <span class="result-message">{{i18n "admin.email.sent_test"}}</span>
+            {{/if}}
           {{/if}}
-        {{/if}}
+        </div>
       </div>
     {{/if}}
 

diff --git a/app/assets/javascripts/admin/addon/templates/emojis.hbs b/app/assets/javascripts/admin/addon/templates/emojis.hbs
@@ -16,7 +16,7 @@
         <tr>
           <th>{{i18n "admin.emoji.image"}}</th>
           <th>{{i18n "admin.emoji.name"}}</th>
-          <th>
+          <th colspan="2">
             {{combo-box
               value=filter
               content=sortingGroups
@@ -25,22 +25,21 @@
               onChange=(action "filterGroups")
             }}
           </th>
-          <th></th>
         </tr>
       </thead>
       <tbody>
         {{#each sortedEmojis as |e|}}
           <tr>
-            <th><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></th>
-            <th>:{{e.name}}:</th>
-            <th>{{e.group}}</th>
-            <th>
+            <td><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></td>
+            <td>:{{e.name}}:</td>
+            <td>{{e.group}}</td>
+            <td class="action">
               {{d-button
                 action=(action "destroyEmoji" e)
                 class="btn-danger"
                 icon="far-trash-alt"
               }}
-            </th>
+            </td>
           </tr>
         {{/each}}
       </tbody>

diff --git a/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
@@ -1,7 +1,7 @@
 <p>{{i18n "admin.logs.screened_ips.description"}}</p>
 
 <div class="screened-ip-controls">
-  <div class="filter-screened-ip-address">
+  <div class="filter-screened-ip-address inline-form">
     {{text-field
       value=filter
       class="ip-address-input"
@@ -82,7 +82,9 @@
                   action=(action "save")
                   actionParam=item
                   label="admin.logs.save"}}
-                <a href {{action "cancel" item}}>{{i18n "cancel"}}</a>
+                <a href {{action "cancel" item}} class="cancel-action">
+                  {{i18n "cancel"}}
+                </a>
               {{else}}
                 {{d-button
                   class="btn-default btn-danger"

diff --git a/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
@@ -1,29 +1,29 @@
 <div class="staff-action-logs-controls">
   {{#if filtersExists}}
     <div class="staff-action-logs-filters">
-      <a href {{action "clearAllFilters"}} class="clear-filters filter">
+      <a href {{action "clearAllFilters"}} class="clear-filters filter btn">
         <span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
       </a>
       {{#if actionFilter}}
-        <a href {{action "clearFilter" "actionFilter"}} class="filter">
+        <a href {{action "clearFilter" "actionFilter"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.action"}}</span>: {{actionFilter}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.acting_user}}
-        <a href {{action "clearFilter" "acting_user"}} class="filter">
+        <a href {{action "clearFilter" "acting_user"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{filters.acting_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.target_user}}
-        <a href {{action "clearFilter" "target_user"}} class="filter">
+        <a href {{action "clearFilter" "target_user"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{filters.target_user}}
           {{d-icon "times-circle"}}
         </a>
       {{/if}}
       {{#if filters.subject}}
-        <a href {{action "clearFilter" "subject"}} class="filter">
+        <a href {{action "clearFilter" "subject"}} class="filter btn">
           <span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{filters.subject}}
           {{d-icon "times-circle"}}
         </a>

diff --git a/app/assets/javascripts/discourse/app/templates/components/d-button.hbs b/app/assets/javascripts/discourse/app/templates/components/d-button.hbs
@@ -12,6 +12,9 @@
 
 {{~#if computedLabel~}}
   <span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span>
+{{~else~}}
+  &#8203;
+  {{! Zero-width space character, so icon-only button height = regular button height }}
 {{~/if~}}
 
 {{yield}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
@@ -2,4 +2,5 @@
   type=inputType
   class="date-picker"
   placeholder=placeholder
-  value=value}}
+  value=value
+}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
@@ -61,21 +61,21 @@
       <div class="category-color-editor">
         {{html-safe categoryBadgePreview}}
 
-        <div style="margin-top: 10px;" class="input-prepend input-append">
+        <section class="field">
           <span class="color-title">{{i18n "category.background_color"}}:</span>
           <div class="colorpicker-wrapper">
             <span class="add-on">#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
             {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
           </div>
-        </div>
+        </section>
 
-        <div class="input-prepend input-append">
+        <section class="field">
           <span class="color-title">{{i18n "category.foreground_color"}}:</span>
           <div class="colorpicker-wrapper edit-text-color">
             <span class="add-on">#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
             {{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
           </div>
-        </div>
+        </section>
       </div>
     {{/if}}
   </section>

diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
@@ -1,5 +1,5 @@
-<div class="emoji-uploader">
-  <div class="control">
+<div class="emoji-uploader form-horizontal">
+  <div class="control-group">
     <span class="label">
       {{i18n "admin.emoji.name"}}
     </span>
@@ -12,7 +12,7 @@
       }}
     </div>
   </div>
-  <div class="control">
+  <div class="control-group">
     <span class="label">
       {{i18n "admin.emoji.group"}}
     </span>
@@ -30,7 +30,7 @@
       }}
     </div>
   </div>
-  <div class="control">
+  <div class="control-group">
     <div class="input">
       <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
         {{#if uploading}}

diff --git a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
@@ -21,7 +21,7 @@
   </div>
 
   {{#if displayDateAndTimePicker}}
-    <div class="control-group">
+    <div class="control-group future-date-input-date-picker">
       {{d-icon "calendar-alt"}}
       {{date-picker-future
         value=_date
@@ -30,7 +30,7 @@
       }}
     </div>
 
-    <div class="control-group">
+    <div class="control-group future-date-input-time-picker">
       {{d-icon "far-clock"}}
       {{input
         placeholder="--:--"