From 3a7d2da633c1e48404289bf52e0cc31eee5f3e86 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 11 Jan 2018 13:05:29 +0100 Subject: [PATCH] FIX: category badges css refactoring/fixes This commit fixes multiple css issues with category badges in select-kit and outside of select-kit. It also contains refactoring of components impacted by those changes. --- .../discourse/helpers/category-link.js.es6 | 4 +- .../multi-select/selected-color.js.es6 | 8 +-- .../multi-select/selected-category.hbs | 4 +- .../multi-select/selected-color.hbs | 13 ----- .../components/multi-select/selected-name.hbs | 30 ++++++---- .../stylesheets/common/components/badges.scss | 27 +++++---- .../common/select-kit/category-chooser.scss | 7 --- .../common/select-kit/category-row.scss | 10 ++++ .../common/select-kit/category-selector.scss | 13 +++-- .../common/select-kit/multi-select.scss | 56 ++++++++++++------- 10 files changed, 92 insertions(+), 80 deletions(-) delete mode 100644 app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs create mode 100644 app/assets/stylesheets/common/select-kit/category-row.scss diff --git a/app/assets/javascripts/discourse/helpers/category-link.js.es6 b/app/assets/javascripts/discourse/helpers/category-link.js.es6 index d02254e31c7..336e25314ee 100644 --- a/app/assets/javascripts/discourse/helpers/category-link.js.es6 +++ b/app/assets/javascripts/discourse/helpers/category-link.js.es6 @@ -67,9 +67,9 @@ export function categoryBadgeHTML(category, opts) { let categoryName = escapeExpression(get(category, 'name')); if (restricted) { - html += iconHTML('lock') + " " + categoryName; + html += `${iconHTML('lock')}${categoryName}`; } else { - html += categoryName; + html += `${categoryName}`; } html += ""; diff --git a/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6 index 7e835e84392..f75e7a708f6 100644 --- a/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6 +++ b/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6 @@ -1,11 +1,11 @@ import SelectedNameComponent from "select-kit/components/multi-select/selected-name"; +import computed from "ember-addons/ember-computed-decorators"; export default SelectedNameComponent.extend({ classNames: "selected-color", - layoutName: "select-kit/templates/components/multi-select/selected-color", - didRender() { - const name = this.get("name"); - this.$(".color-preview").css("background", `#${name}`.htmlSafe()); + @computed("name") + footerContent(name) { + return ``.htmlSafe(); } }); diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs index c437056451c..6e2b1b362fd 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-category.hbs @@ -1,7 +1,7 @@ - +
{{d-icon "times"}} {{badge}} - +
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs deleted file mode 100644 index 93087a800ae..00000000000 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-color.hbs +++ /dev/null @@ -1,13 +0,0 @@ -
- - {{#unless isLocked}} - - {{d-icon "times"}} - - {{/unless}} - - #{{{label}}} - - - -
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs index 4ef569464f4..e4167b47b4d 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs @@ -1,13 +1,19 @@ -{{#if isLocked}} - - {{d-icon "lock"}} - -{{else}} - - {{d-icon "times"}} - -{{/if}} +{{#if headerContent}}
{{headerContent}}
{{/if}} - - {{{label}}} - +
+ {{#if isLocked}} + + {{d-icon "lock"}} + + {{else}} + + {{d-icon "times"}} + + {{/if}} + + + {{{label}}} + +
+ +{{#if footerContent}}
{{footerContent}}
{{/if}} diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index b988ed40943..99c87bf5991 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -19,22 +19,27 @@ font-size: 0.857em; font-weight: bold; white-space: nowrap; - display: inline-block; position: relative; + display: inline-flex; + align-items: center; + + .badge-category { + .d-icon { + margin-right: 3px; + } + } &.bar { //bar category style - line-height: 1.25; margin-right: 5px; - display: inline-flex; span.badge-category { color: $primary; padding: 3px; - vertical-align: text-top; - margin-top: -2px; //vertical alignment fix - display: inline-block; overflow: hidden; text-overflow: ellipsis; + display: inline-flex; + align-items: center; + justify-content: space-between; .extra-info-wrapper & { color: $header-primary; @@ -57,15 +62,11 @@ } &.bullet { //bullet category style - display: inline-flex; - align-items: baseline; margin-right: 5px; font-size: .857em; - line-height: 15px; span.badge-category { color: $primary; - display: inline-block; overflow: hidden; text-overflow: ellipsis; @@ -103,12 +104,10 @@ &.box { //box category style (apply custom widths to the wrapper, not the children) - line-height: 1.5; - margin-top: 5px; margin-right: 5px; + padding: 2px; span { - display: block; overflow: hidden; text-overflow: ellipsis; @@ -132,7 +131,6 @@ &.badge-category { position: relative; padding: 0 5px; - margin-top: 2px; } } } @@ -228,6 +226,7 @@ width: 100%; line-height: 1; vertical-align: text-top; + padding: 0; span.badge-category { max-width: 100px; padding: 5px; diff --git a/app/assets/stylesheets/common/select-kit/category-chooser.scss b/app/assets/stylesheets/common/select-kit/category-chooser.scss index 62da15be23f..dedaa09493f 100644 --- a/app/assets/stylesheets/common/select-kit/category-chooser.scss +++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss @@ -25,13 +25,6 @@ color: $primary; } - .category-status { - color: $primary; - -webkit-box-flex: 0; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - } - .category-desc { -webkit-box-flex: 0; -ms-flex: 1 1 auto; diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss new file mode 100644 index 00000000000..ef3245d5012 --- /dev/null +++ b/app/assets/stylesheets/common/select-kit/category-row.scss @@ -0,0 +1,10 @@ +.select-kit { + .category-row { + .category-status { + display: flex; + -webkit-box-flex: 0; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + } + } +} diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss index 9dc274553ea..2da4ad182d6 100644 --- a/app/assets/stylesheets/common/select-kit/category-selector.scss +++ b/app/assets/stylesheets/common/select-kit/category-selector.scss @@ -1,9 +1,12 @@ .select-kit, .select-kit-box { - .selected-name { - .badge-wrapper { - display: inline-flex; - align-items: center; - line-height: inherit; + &.category-selector { + .selected-name { + .badge-wrapper { + &.box { + margin: 2px; + padding: 0; + } + } } } } diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index f841e4644fe..b92c83e7dca 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -119,12 +119,12 @@ height: 5px; margin: 0 2px 2px 2px; border-radius: 5px; + display: flex; + width: 100%; } } .selected-name { - align-items: center; - justify-content: flex-start; color: $primary; cursor: default; border: 1px solid $primary-medium; @@ -136,36 +136,50 @@ background-color: $primary-low; cursor: pointer; outline: none; - line-height: normal; overflow: hidden; flex: 0 1 auto; flex-wrap: nowrap; + padding: 0; + display: flex; + flex-direction: column; + + .footer { + display: flex; + width: 100%; + } + + .body { + width: 100%; + display: inline-flex; + align-items: center; + + .locked-icon, .delete-icon { + justify-content: center; + align-items: center; + display: inline-flex; + height: 21px; + width: 21px; + + .d-icon { + color: $primary-medium; + cursor: pointer; + font-size: 1em; + margin: 0; + + &:hover { + color: $primary; + } + } + } + } .name { padding: 0 5px; - line-height: 18px; } &.is-highlighted { box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05); } - - .locked-icon, .delete-icon { - justify-content: center; - align-items: center; - width: 21px; - height: 21px; - display: inline-flex; - .d-icon { - color: $primary-medium; - cursor: pointer; - font-size: 1em; - - &:hover { - color: $primary; - } - } - } } } }