From 78419f677db862d3527a1896800148de0156e92f Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Mon, 23 Jul 2018 12:19:40 -0400 Subject: [PATCH] FIX: multiple select-kit fixes on mobile --- .../components/mini-tag-chooser.js.es6 | 23 ++++++++++++++++++- .../select-kit/components/select-kit.js.es6 | 13 +---------- .../select-kit/mixins/dom-helpers.js.es6 | 16 ++++++------- .../select-kit/mixins/events.js.es6 | 16 +++++++++---- .../future-date-input-selector.scss | 9 ++++++-- .../common/select-kit/mini-tag-chooser.scss | 8 ++++--- .../common/select-kit/multi-select.scss | 6 ++--- .../select-kit/dropdown-select-box.scss | 2 +- 8 files changed, 57 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 index ada03fe1fe2..3e8edebc1da 100644 --- a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 +++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 @@ -22,7 +22,7 @@ export default ComboBox.extend(Tags, { fullWidthOnMobile: true, init() { - this._super(); + this._super(...arguments); this.set("termMatchesForbidden", false); this.selectionSelector = ".selected-tag"; @@ -45,6 +45,27 @@ export default ComboBox.extend(Tags, { ); }, + willDestroyElement() { + this._super(...arguments); + + $(".selected-name").off("touchend.select-kit pointerup.select-kit"); + }, + + didInsertElement() { + this._super(...arguments); + + $(".selected-name").on( + "touchend.select-kit pointerup.select-kit", + event => { + if (!this.get("isExpanded")) { + this.expand(event); + } + + this.focusFilterOrHeader(); + } + ); + }, + @computed("hasReachedMaximum") caretIcon(hasReachedMaximum) { return hasReachedMaximum ? null : "plus fa-fw"; 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 18e45adfa93..3155e0ce141 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6 @@ -92,17 +92,6 @@ export default Ember.Component.extend( this.set("computedContent", []); this.set("highlightedSelection", []); - if (this.site && this.site.isMobileDevice) { - this.setProperties({ - filterable: isNone(this.get("filterable")) - ? false - : this.get("filterable"), - autoFilterable: isNone(this.get("autoFilterable")) - ? false - : this.get("filterable") - }); - } - if (this.get("nameChanges")) { this.addObserver( `content.@each.${this.get("nameProperty")}`, @@ -458,7 +447,7 @@ export default Ember.Component.extend( clearSelection() { this.deselect(this.get("selection")); - this.focus(); + this.focusFilterOrHeader(); }, actions: { 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 347c2f7c4e0..8eae8b38ac1 100644 --- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 @@ -82,9 +82,7 @@ export default Ember.Mixin.create({ }, focus() { - Ember.run.schedule("afterRender", () => { - this.$header().focus(); - }); + this.focusFilterOrHeader(); }, // try to focus filter and fallback to header if not present @@ -93,12 +91,12 @@ export default Ember.Mixin.create({ // next so we are sure it finised expand/collapse Ember.run.next(() => { Ember.run.schedule("afterRender", () => { - if ( - (this.site && this.site.isMobileDevice) || - !context.$filterInput() || - !context.$filterInput().is(":visible") - ) { - context.$header().focus(); + if (!context.$filterInput() || !context.$filterInput().is(":visible")) { + if (context.$header()) { + context.$header().focus(); + } else { + $(context.element).focus(); + } } else { context.$filterInput().focus(); } diff --git a/app/assets/javascripts/select-kit/mixins/events.js.es6 b/app/assets/javascripts/select-kit/mixins/events.js.es6 index 80c47622725..3de11e017ad 100644 --- a/app/assets/javascripts/select-kit/mixins/events.js.es6 +++ b/app/assets/javascripts/select-kit/mixins/events.js.es6 @@ -16,11 +16,11 @@ export default Ember.Mixin.create({ }, willDestroyElement() { - this._super(); + this._super(...arguments); $(document).off("mousedown.select-kit"); - if (this.$header()) { + if (this.$header().length) { this.$header() .off("blur.select-kit") .off("focus.select-kit") @@ -28,16 +28,17 @@ export default Ember.Mixin.create({ .off("keydown.select-kit"); } - if (this.$filterInput()) { + if (this.$filterInput().length) { this.$filterInput() .off("change.select-kit") .off("keydown.select-kit") - .off("keypress.select-kit"); + .off("keypress.select-kit") + .off("focusout.select-kit"); } }, didInsertElement() { - this._super(); + this._super(...arguments); $(document).on("mousedown.select-kit", event => { if (!this.element || this.isDestroying || this.isDestroyed) { @@ -120,6 +121,11 @@ export default Ember.Mixin.create({ .on("keypress.select-kit", event => { event.stopPropagation(); }) + .on("focusout.select-kit", event => { + if (!Ember.$.contains(this.element, event.relatedTarget)) { + this.close(event); + } + }) .on("keydown.select-kit", event => { const keyCode = event.keyCode || event.which; diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss index 1e6385b755a..a1c187ae8af 100644 --- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss +++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss @@ -11,11 +11,16 @@ .future-date-input-selector-datetime { color: lighten($primary, 40%); - font-size: $font-down-1; + margin-left: 5px; } .future-date-input-selector-icons { - width: 25px; + margin-right: 5px; + } + + .btn-clear { + padding: 0; + margin-left: 5px; } .future-date-input-selector-row { diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss index 85a8d768e67..9a4bb6b3b7a 100644 --- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss +++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss @@ -58,14 +58,16 @@ .select-kit-collection { .collection-header { max-height: 125px; - overflow-y: auto; + overflow: hidden; flex: 1 0 auto; + border-bottom: 1px solid $primary-low; .selected-tags { display: flex; - padding: 4px 8px; + padding: 4px; flex-wrap: wrap; - border-bottom: 1px solid $primary-low; + margin: -2px; + overflow: hidden; } .selected-tag { diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index 5d0c270f79f..9b7e158aa91 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -64,9 +64,9 @@ } .choices { - margin: 0; + margin: 1px; box-sizing: border-box; - display: inline-flex; + display: flex; justify-content: flex-start; flex-wrap: wrap; @@ -79,7 +79,7 @@ justify-content: space-between; flex-wrap: wrap; flex-direction: row; - margin: 2px; + margin: 1px; } .filter { diff --git a/app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss index 1853c4e2308..5d4c46832b5 100644 --- a/app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss +++ b/app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss @@ -2,7 +2,7 @@ &.dropdown-select-box { .select-kit-collection { max-height: 200px; - overflow-y: scroll; + overflow-y: auto; } } }