From 299d0ca445ebf468dceab611db3edb1f678c2888 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Fri, 10 Sep 2021 09:00:41 -0400 Subject: [PATCH] UX: Minor layout tweaks to dropdowns (#14299) - fixes mini-tag-chooser validation message - fixes ellipsis overflow in mini-tag-chooser - removes redundant `border-radius: 0` styles - simplifies `user-notifications-dropdown` styling and adds example to styleguide --- .../select-kit/addon/mixins/tags.js | 2 +- .../stylesheets/common/select-kit/_index.scss | 1 - .../select-kit/dropdown-select-box.scss | 8 +++++++ .../common/select-kit/multi-select.scss | 16 ++------------ .../common/select-kit/select-kit.scss | 2 +- .../user-notifications-dropdown.scss | 21 ------------------- app/assets/stylesheets/desktop/user.scss | 1 - .../templates/styleguide/atoms/dropdowns.hbs | 4 ++++ 8 files changed, 16 insertions(+), 39 deletions(-) delete mode 100644 app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss diff --git a/app/assets/javascripts/select-kit/addon/mixins/tags.js b/app/assets/javascripts/select-kit/addon/mixins/tags.js index fa3dfabd7e7..fe4c34f50b2 100644 --- a/app/assets/javascripts/select-kit/addon/mixins/tags.js +++ b/app/assets/javascripts/select-kit/addon/mixins/tags.js @@ -29,7 +29,7 @@ export default Mixin.create({ if (maximum && makeArray(this.value).length >= parseInt(maximum, 10)) { this.addError( I18n.t("select_kit.max_content_reached", { - count: this.selectKit.limit, + count: parseInt(maximum, 10), }) ); return false; diff --git a/app/assets/stylesheets/common/select-kit/_index.scss b/app/assets/stylesheets/common/select-kit/_index.scss index 2aabed53746..2b1b4b3cc9c 100644 --- a/app/assets/stylesheets/common/select-kit/_index.scss +++ b/app/assets/stylesheets/common/select-kit/_index.scss @@ -24,5 +24,4 @@ @import "tag-drop"; @import "toolbar-popup-menu-options"; @import "topic-notifications-button"; -@import "user-notifications-dropdown"; @import "user-row"; diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss index efc90f0b5bf..d8f7228221c 100644 --- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss +++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss @@ -84,4 +84,12 @@ } } } + &.user-notifications-dropdown { + .select-kit-header .d-icon { + margin-left: 0; + } + .select-kit-header-wrapper { + justify-content: center; + } + } } diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index 063881b5f91..3a44bcbee59 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -2,7 +2,6 @@ &.multi-select { width: 300px; background: var(--secondary); - border-radius: 0; .select-kit-filter { & + .selected-content, @@ -13,7 +12,6 @@ .select-kit-row { min-height: 1px; - border-radius: 0; } &.is-disabled { @@ -53,25 +51,15 @@ .formated-selection { margin: 0; - border: 0; - padding: 0; - outline: none; - box-shadow: none; cursor: pointer; @include ellipsis; + display: inline-block; } } + &.is-expanded .multi-select-header, .multi-select-header:focus { - border-radius: 0; @include default-focus; } - - &.is-expanded { - .multi-select-header { - border-radius: 0; - @include default-focus; - } - } } } diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 965807d3e09..387b1ba0baf 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -85,8 +85,8 @@ .select-kit-header-wrapper { box-sizing: border-box; display: flex; - flex: 1 0 auto; align-items: center; + width: 100%; } .d-icon-spinner { diff --git a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss b/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss deleted file mode 100644 index 423c6ecf937..00000000000 --- a/app/assets/stylesheets/common/select-kit/user-notifications-dropdown.scss +++ /dev/null @@ -1,21 +0,0 @@ -.select-kit { - &.dropdown-select-box { - &.user-notifications-dropdown { - display: flex; - text-align: left; - - .d-icon { - margin-left: 0; - } - - .select-kit-body { - width: 485px; - max-width: 485px; - } - - .select-kit-header-wrapper { - justify-content: center; - } - } - } -} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 11c99e975c5..f1141c2ca71 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -215,7 +215,6 @@ table.user-invite-list { .controls { padding: 0 0 12px 0; float: right; - text-align: right; max-width: 13.5em; li > .select-kit-header, // select-kit diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs index 271e99e49db..0e8d40f3608 100644 --- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs +++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs @@ -75,3 +75,7 @@ {{#styleguide-example title="list-setting with colors"}} {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}} {{/styleguide-example}} + +{{#styleguide-example title="user-notifications-dropdown"}} + {{user-notifications-dropdown user=currentUser value="changeToNormal"}} +{{/styleguide-example}}