diff --git a/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6 index c3ca9488e53..a201791c039 100644 --- a/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6 +++ b/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6 @@ -10,7 +10,7 @@ export default Ember.Component.extend({ classNames: ["selected-name", "choice"], classNameBindings: ["isHighlighted", "isLocked"], layoutName: "select-kit/templates/components/multi-select/selected-name", - tagName: "li", + tagName: "span", tabindex: -1, @computed("content") diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6 index 9e10dfb513c..29fb333807a 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6 @@ -72,7 +72,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi this.set("rowComponentOptions", Ember.Object.create()); this.set("computedContent", []); - if ((this.site && this.site.isMobileDevice) || $(window).outerWidth(false) <= 420) { + if (this.site && this.site.isMobileDevice) { this.setProperties({ filterable: false, autoFilterable: false }); } diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 index 814e8464c8c..eddd2bfb21a 100644 --- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 @@ -105,23 +105,23 @@ export default Ember.Mixin.create({ const dHeader = $(".d-header")[0]; const dHeaderBounds = dHeader ? dHeader.getBoundingClientRect() : {top: 0, height: 0}; const dHeaderHeight = dHeaderBounds.top + dHeaderBounds.height; - const componentHeight = this.$().outerHeight(false); - const componentWidth = this.$().outerWidth(false); - const bodyHeight = this.$body().outerHeight(false); + const bodyHeight = this.$body()[0].getBoundingClientRect().height; const windowWidth = $(window).width(); const windowHeight = $(window).height(); const boundingRect = this.get("element").getBoundingClientRect(); + const componentHeight = boundingRect.height; + const componentWidth = boundingRect.width; const offsetTop = boundingRect.top; const offsetBottom = boundingRect.bottom; - if (this.get("fullWidthOnMobile") && windowWidth <= 420) { + if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) { const margin = 10; const relativeLeft = this.$().offset().left - $(window).scrollLeft(); options.left = margin - relativeLeft; options.width = windowWidth - margin * 2; options.maxWidth = options.minWidth = "unset"; } else { - const bodyWidth = this.$body().outerWidth(false); + const bodyWidth = this.$body()[0].getBoundingClientRect().width; if ($("html").css("direction") === "rtl") { const horizontalSpacing = boundingRect.right; @@ -151,10 +151,10 @@ export default Ember.Mixin.create({ const hasAboveSpace = offsetTop - fullHeight - dHeaderHeight > 0; if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) { this.setProperties({ isBelow: true, isAbove: false }); - options.top = componentHeight + this.get("verticalOffset") - 2; + options.top = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset"); } else { this.setProperties({ isBelow: false, isAbove: true }); - options.bottom = componentHeight + this.get("verticalOffset") - 1; + options.bottom = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset"); } this.$body().css(options); @@ -166,8 +166,9 @@ export default Ember.Mixin.create({ const scrollableParent = this.$().parents(this.get("scrollableParentSelector")); if (scrollableParent.length === 0) { return; } - const width = this.$().outerWidth(false); - const height = this.$().outerHeight(false); + const boundingRect = this.get("element").getBoundingClientRect(); + const width = boundingRect.width; + const height = boundingRect.height; const $placeholder = $(`
`); this._previousScrollParentOverflow = this._previousScrollParentOverflow || scrollableParent.css("overflow"); @@ -222,11 +223,11 @@ export default Ember.Mixin.create({ }, _positionWrapper() { - const componentHeight = this.$().outerHeight(false); + const headerBoundingRect = this.$header()[0].getBoundingClientRect(); this.$(this.wrapperSelector).css({ - width: this.$().outerWidth(false) - 2, - height: componentHeight + this.$body().outerHeight(false) + width: this.get("element").getBoundingClientRect().width, + height: headerBoundingRect.height + this.$body()[0].getBoundingClientRect().height }); }, }); diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs index 8b141c5b3be..466b5c6d251 100644 --- a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs +++ b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs @@ -1,13 +1,13 @@ - + + 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 67c7a1235a9..721a30ef218 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,13 @@ - - {{#if isLocked}} - - {{d-icon "lock"}} - - {{else}} - - {{d-icon "times"}} - - {{/if}} +{{#if isLocked}} + + {{d-icon "lock"}} + +{{else}} + + {{d-icon "times"}} + +{{/if}} + {{content.name}} diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss new file mode 100644 index 00000000000..9dc274553ea --- /dev/null +++ b/app/assets/stylesheets/common/select-kit/category-selector.scss @@ -0,0 +1,9 @@ +.select-kit, .select-kit-box { + .selected-name { + .badge-wrapper { + display: inline-flex; + align-items: center; + line-height: inherit; + } + } +} diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss index 439279c7b78..30862ba7f23 100644 --- a/app/assets/stylesheets/common/select-kit/combo-box.scss +++ b/app/assets/stylesheets/common/select-kit/combo-box.scss @@ -72,7 +72,7 @@ } .select-kit-body { - border-radius: 3px 3px 0 0; + border-radius: 0 0 3px 3px ; } } @@ -80,6 +80,10 @@ .select-kit-header { border-radius: 0 0 3px 3px; } + + .select-kit-body { + border-radius: 3px 3px 0 0; + } } } } diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index a705282643d..543489f48ea 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: $secondary; - border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-radius: 0; .select-box-kit-body, .select-kit-body { @@ -22,6 +21,7 @@ .multi-select-header { background: $secondary; + border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); &.is-focused { box-shadow: $tertiary 0px 0px 6px 0px; @@ -63,23 +63,23 @@ } .choices { - list-style: none; margin: 0; - padding: 5px; + padding: 2.5px; box-sizing: border-box; - display: inline; - list-style-type: none; + display: inline-flex; + justify-content: flex-start; + flex-wrap: wrap; .choice { display: inline-flex; box-sizing: border-box; padding: 0 5px; - margin: 2px 0; border: 1px solid transparent; align-items: center; justify-content: space-between; - overflow: hidden; - align-items: center; + flex-wrap: wrap; + flex-direction: row; + margin: 2.5px; } .filter { @@ -136,9 +136,10 @@ background-color: $primary-low; cursor: pointer; outline: none; - padding-left: 0; - padding-right: 0; line-height: normal; + overflow: auto; + flex: unset; + flex-wrap: nowrap; .name { padding: 0 5px; diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index b663b17329d..6fa9438f578 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -3,9 +3,10 @@ } .select-box-kit, .select-kit { - border: 1px solid transparent; + border: none; min-width: 220px; -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; -webkit-box-orient: vertical; @@ -223,6 +224,7 @@ display: -webkit-box; display: -ms-flexbox; display: flex; + box-sizing: border-box; -webkit-box-align: center; -ms-flex-align: center; align-items: center;