From f1d5d2b13471ba22cea2bb4911b7680d44581d0a Mon Sep 17 00:00:00 2001 From: Kris Date: Wed, 27 Jan 2021 16:17:08 -0500 Subject: [PATCH] REFACTOR: Convert buttons to flexbox (#11785) --- .../components/ignored-user-list.hbs | 2 +- .../templates/components/tag-groups-form.hbs | 24 ++++++++++--------- .../discourse/app/templates/user.hbs | 2 +- .../stylesheets/common/base/_topic-list.scss | 20 +++++++--------- .../stylesheets/common/base/compose.scss | 1 + app/assets/stylesheets/common/base/modal.scss | 10 +++++++- .../stylesheets/common/base/popup-menu.scss | 4 ++-- .../stylesheets/common/base/reviewables.scss | 5 ---- .../stylesheets/common/base/search.scss | 2 +- .../stylesheets/common/base/tagging.scss | 3 +++ .../stylesheets/common/base/topic-post.scss | 20 ++++------------ app/assets/stylesheets/common/base/user.scss | 1 - .../common/components/buttons.scss | 17 +++++++------ .../stylesheets/common/components/navs.scss | 1 + app/assets/stylesheets/common/d-editor.scss | 2 +- app/assets/stylesheets/desktop/user.scss | 8 ++----- app/assets/stylesheets/mobile/topic-post.scss | 12 +++++++++- .../common/discourse-local-dates.scss | 2 +- 18 files changed, 67 insertions(+), 69 deletions(-) diff --git a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs index 73e122024da..44f88763eca 100644 --- a/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/ignored-user-list.hbs @@ -6,4 +6,4 @@ {{/each}}
{{i18n "user.ignored_users_instructions"}}
-
{{#d-button action=(action "newIgnoredUser") class="btn-default" icon="plus"}}{{i18n "user.user_notifications.add_ignored_user"}}{{/d-button}}
+
{{d-button action=(action "newIgnoredUser") class="btn-default" icon="plus" label="user.user_notifications.add_ignored_user"}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs index 38a950ba196..76545e58034 100644 --- a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs @@ -89,16 +89,18 @@ - {{d-button - class="btn-default" - action=(action "save") - disabled=savingDisabled - label="tagging.groups.save"}} +
+ {{d-button + class="btn-default" + action=(action "save") + disabled=savingDisabled + label="tagging.groups.save"}} - {{d-button - class="btn-danger" - action=(action "destroy") - disabled=buffered.isNew - icon="far-trash-alt" - label="tagging.groups.delete"}} + {{d-button + class="btn-danger" + action=(action "destroy") + disabled=buffered.isNew + icon="far-trash-alt" + label="tagging.groups.delete"}} +
diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs index 5a3468539db..e02068af250 100644 --- a/app/assets/javascripts/discourse/app/templates/user.hbs +++ b/app/assets/javascripts/discourse/app/templates/user.hbs @@ -67,7 +67,7 @@ {{/if}} {{#if currentUser.staff}} -
  • {{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}
    • +
  • {{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}
    • {{/if}} {{plugin-outlet name="user-profile-controls" tagName="" diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 81b1155a59a..c38b7e17db6 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -34,18 +34,6 @@ max-height: 40vh; } } - - @include breakpoint(medium) { - // hide button labels to save space - .btn { - .d-button-label { - display: none; - } - .d-icon { - margin: 0; - } - } - } } .navigation-container { @@ -81,6 +69,14 @@ > * { white-space: nowrap; } + .select-kit button { + height: 100%; // ensures nested select-kit button matches height of button siblings + } + .btn { + // need to reduce vertical padding for consistent height + padding-top: 0.3em; + padding-bottom: 0.3em; + } } .show-more { diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 78e721198ce..379302565ac 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -122,6 +122,7 @@ } .action-title { + line-height: normal; @include ellipsis; } diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 77c2bdccd95..a6ef072f02b 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -162,14 +162,22 @@ } .modal-footer { + display: flex; + flex-wrap: wrap; + align-items: center; padding: 14px 15px 10px; border-top: 1px solid var(--primary-low); .btn { - margin: 0 5px 5px 0; + margin: 0 0.3em 0 0; &[href] { min-height: unset; } } + + .btn, + a { + margin-bottom: 0.3em; + } } .modal { diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss index 56f2a0bc2c4..a69e7ee9202 100644 --- a/app/assets/stylesheets/common/base/popup-menu.scss +++ b/app/assets/stylesheets/common/base/popup-menu.scss @@ -19,12 +19,12 @@ } .btn { - display: flex; - text-align: left; + justify-content: left; background: none; width: 100%; padding: 0.75em; border-radius: 0; + margin: 0; .d-icon { color: var(--primary-medium); diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss index 49c8d980f3b..7fbbb1a5944 100644 --- a/app/assets/stylesheets/common/base/reviewables.scss +++ b/app/assets/stylesheets/common/base/reviewables.scss @@ -188,11 +188,6 @@ width: auto; } - .refresh { - height: 1em; - display: flex; - } - .score-filter { width: 5em; } diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index 52dfdcd1b45..d4377f03316 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/app/assets/stylesheets/common/base/search.scss @@ -11,7 +11,7 @@ .search-bar { display: flex; justify-content: space-between; - align-items: center; + align-items: stretch; margin-bottom: 1em; .search-query { diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 9083ca2a940..398da477bbc 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -258,6 +258,9 @@ header .discourse-tag { margin-bottom: 10px; } } + .tag-group-controls { + display: flex; + } .group-tags-list .tag-chooser { width: 100%; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 5ff2d73e88e..3f2081dd971 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -1077,32 +1077,20 @@ a.mention-group { } #topic-footer-buttons { - padding: 0.5em 0; + padding: 0.75em 0; .topic-footer-main-buttons { - margin: 0 0 -0.5em 0; display: flex; flex-wrap: wrap; - > .btn { - margin: 0 0.5em 0.5em 0; - display: inline-flex; - align-items: center; - - .d-button-label { - display: flex; - flex: 1 0 auto; - align-items: center; - } + button { + margin-right: 0.54em; + height: 100%; // helps select-kit buttons match height } .topic-admin-menu-button-container { display: inline-flex; } - - .topic-admin-menu-button-container > span:not(:empty) { - margin: 0 0.5em 0.5em 0; - } } .pinned-button:not(.is-hidden) + .topic-notifications-button { diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index dfe6c338257..2188b942465 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -217,7 +217,6 @@ .btn { margin-bottom: 10px; - line-height: $line-height-medium; } } diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss index e00d5c2876d..f97a14ff042 100644 --- a/app/assets/stylesheets/common/components/buttons.scss +++ b/app/assets/stylesheets/common/components/buttons.scss @@ -13,25 +13,24 @@ $hover-bg-color: var(--primary-medium), $hover-icon-color: var(--primary-low) ) { - display: inline-block; - margin: 0; - padding: 6px 12px; - min-height: 30px; - border: none; box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0; + padding: 0.53em 0.8em; + border: none; font-weight: normal; + font-size: $font-0; + line-height: normal; color: $text-color; background: $bg-color; - font-size: $font-0; - line-height: $line-height-small; - text-align: center; cursor: pointer; transition: all 0.25s; .d-icon { color: $icon-color; margin-right: 0.45em; transition: color 0.25s; - line-height: $line-height-medium; // Match button text line-height } &.no-text { .d-icon { diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss index 1f1b3f65807..7763081b4b7 100644 --- a/app/assets/stylesheets/common/components/navs.scss +++ b/app/assets/stylesheets/common/components/navs.scss @@ -22,6 +22,7 @@ @extend .clearfix; > li { + display: flex; float: left; margin-right: 0.5em; diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss index 73ff05bf8d1..e01d994c11d 100644 --- a/app/assets/stylesheets/common/d-editor.scss +++ b/app/assets/stylesheets/common/d-editor.scss @@ -263,7 +263,7 @@ // shared styles for all font sizes .btn, .btn-default { - padding: 0 0.5em; + padding: 0.5em; } .d-editor-spacer { margin: 0 0.25em; diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index aed20e9962e..ddb0c6f36bf 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -186,15 +186,11 @@ > ul { display: inline-flex; > li { - display: inline; - margin-left: 12px; - .d-button-label { - line-height: 1; - } + display: inline-flex; + margin-left: 0.75em; } a { - margin-bottom: 10px; width: auto; } } diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index a10d75c2090..e78c827a708 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -237,9 +237,19 @@ a.reply-to-tab { color: var(--tertiary); } + .topic-footer-main-buttons { + display: flex; + align-items: stretch; + } + .topic-footer-mobile-dropdown { - margin: 0 0.5em 0.5em 0; + margin: 0 0.75em 0 0; width: 160px; + display: flex; + } + + .select-kit-header { + height: 100%; } .topic-notifications-button, diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss index 937b8c8b7cf..246ac3b4cb4 100644 --- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss +++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss @@ -201,7 +201,7 @@ flex: 1; @include ellipsis; width: 100%; - text-align: left; + justify-content: flex-start; } }