From f2e4c579afb81019a22dfc07c78c7ec141ee5c71 Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Tue, 15 Feb 2022 15:03:25 +0100 Subject: [PATCH] Multiple UX fixes for filters [SCI-6525] (#3858) Co-authored-by: Anton --- app/assets/javascripts/repositories/show.js | 5 ++ .../javascripts/sitewide/dropdown_selector.js | 5 +- .../stylesheets/repository/filters.scss | 64 +++++++++++++++++-- .../vue/repository_filter/container.vue | 1 + .../filters/repositoryDateRangeValue.vue | 1 + .../filters/repositoryDateTimeRangeValue.vue | 1 + .../filters/repositoryDateTimeValue.vue | 26 ++++++-- .../filters/repositoryDateValue.vue | 26 ++++++-- .../filters/repositoryNumberValue.vue | 44 ++++++------- .../filters/repositoryTimeRangeValue.vue | 1 + .../filters/repositoryTimeValue.vue | 1 + .../_save_repository_filter_modal.html.erb | 2 +- .../repositories/_toolbar_buttons.html.erb | 10 +-- config/locales/en.yml | 7 ++ 14 files changed, 145 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/repositories/show.js b/app/assets/javascripts/repositories/show.js index dece2dda0..bb574196a 100644 --- a/app/assets/javascripts/repositories/show.js +++ b/app/assets/javascripts/repositories/show.js @@ -202,6 +202,10 @@ $('#modalSaveRepositoryTableFilter #repository_table_filter_name').val(''); }); + $('#modalSaveRepositoryTableFilter').on('shown.bs.modal', function() { + $('#repository_table_filter_name').focus(); + }); + $(document).on('click', '#overwriteFilterLink', function() { var $modal = $('#modalSaveRepositoryTableFilter'); @@ -213,6 +217,7 @@ $modal.removeData('overwrite'); }); + $('#modalSaveRepositoryTableFilter #repository_table_filter_name') .val($modal.data('repositoryTableFilterName')); }); diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index a9d441a97..9f764ae24 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -520,6 +520,7 @@ var dropdownSelector = (function() { var customStyle = selector2.data('config').optionStyle; return $(`
diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss index ab173df16..8a029e6d7 100644 --- a/app/assets/stylesheets/repository/filters.scss +++ b/app/assets/stylesheets/repository/filters.scss @@ -6,15 +6,22 @@ position: relative; &::after { - background: $brand-accent; + background: $brand-danger; border-radius: 50%; + border: 2px solid $color-white; content: ""; display: block; - height: 8px; + height: 10px; position: absolute; right: .3em; top: .3em; - width: 8px; + width: 10px; + } + + &:hover { + &::after { + border-color: $color-concrete; + } } } @@ -129,7 +136,7 @@ .filters-list { flex-grow: 1; overflow-y: auto; - padding: .5em; + padding: .5em 1em; } .filter-container { @@ -150,11 +157,31 @@ grid-auto-flow: column; grid-template-columns: min-content auto; + .between-delimiter { + align-self: center; + + &.vertical { + background-color: $color-silver-chalice; + height: 12px; + margin: auto; + width: 2px; + } + } + + .number-range-selector { + align-items: center; + display: grid; + gap: .5em; + grid-auto-flow: column; + } + .dropdown-selector-container { width: 100%; } .operator-selector { + height: 2em; + .dropdown-selector-container { width: 120px; } @@ -183,6 +210,14 @@ .filter-remove { margin-left: auto; + + .icon-btn { + color: $color-silver-chalice; + + &:hover { + color: $color-black; + } + } } } } @@ -195,3 +230,24 @@ padding-left: 1.5em; } } + + +#saveRepositoryFilters { + .dropdown-menu { + width: 320px; + + .overwrite-link { + align-items: center; + display: flex; + + .fa-save { + flex-shrink: 0; + margin-right: .25em; + } + + .overwrite-title { + white-space: normal; + } + } + } +} \ No newline at end of file diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue index 9ee9e2cf7..f32049604 100644 --- a/app/javascript/vue/repository_filter/container.vue +++ b/app/javascript/vue/repository_filter/container.vue @@ -143,6 +143,7 @@ }, toggleSavedFilters(e) { e.stopPropagation(); + $('.saved-filters-list').scrollTo(0); if (this.savedFilterScrollbar) { this.savedFilterScrollbar.update(); } else { diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue index 9976b64d7..2017f081e 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue @@ -11,6 +11,7 @@
+ —
diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue index dd762349b..7bd9783f7 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue @@ -12,6 +12,7 @@
+
diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue index 9a5657bd4..e31cda539 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue @@ -13,6 +13,7 @@
+
@@ -34,12 +35,25 @@ return { timeType: 'datetime', operators: [ - { value: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today') }, - { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday') }, - { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week') }, - { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month') }, - { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year') }, - { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year') }, + { value: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.today') + } }, + { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.yesterday') + } }, + { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_week') + } }, + { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_month') + } }, + { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_year') + } }, + { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_year') + } }, + { value: '', label: '', params: { delimiter: true } }, { value: 'equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.equal_to') }, { value: 'unequal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.unequal_to') }, { value: 'greater_than', label: this.i18n.t('repositories.show.repository_filter.filters.operators.greater_than') }, diff --git a/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue b/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue index b13cf758a..9ebe97f79 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryDateValue.vue @@ -12,6 +12,7 @@
+ —
@@ -32,12 +33,25 @@ return { timeType: 'date', operators: [ - { value: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today') }, - { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday') }, - { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week') }, - { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month') }, - { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year') }, - { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year') }, + { value: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.today') + } }, + { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.yesterday') + } }, + { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_week') + } }, + { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_month') + } }, + { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_year') + } }, + { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year'), params: { + tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_year') + } }, + { value: '', label: '', params: { delimiter: true } }, { value: 'equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.equal_to') }, { value: 'unequal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.unequal_to') }, { value: 'greater_than', label: this.i18n.t('repositories.show.repository_filter.filters.operators.greater_than') }, diff --git a/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue b/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue index 68c540db4..e9bc3faf8 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue @@ -18,23 +18,21 @@ :placeholder= "this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.input_placeholder',{name: this.filter.column.name})" />
-
+
- - + —
@@ -60,7 +58,6 @@ { value: 'less_than_or_equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.less_than_or_equal_to') }, { value: 'between', label: this.i18n.t('repositories.show.repository_filter.filters.operators.between') } ], - numberRegexp: /[^0-9.]/g, operator: 'equal_to', value: '', from: '', @@ -71,29 +68,24 @@ DropdownSelector }, methods: { - updateRange() { - this.value = { - from: this.from, - to: this.to - }; + validateNumber(number) { + return number.replace(/[^0-9.]/g, '').match(/^\d*(\.\d{0,10})?/)[0] }, }, watch: { - operator() { - if(this.operator !== 'between' && !(typeof this.value === 'string')) this.value = ''; - if(this.operator === 'between') this.value = {to: '', from: ''}; - }, value() { - if (this.operator === 'between') { - this.value = { - from: this.from.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0], - to: this.to.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0] - }; - this.parameters = this.value; - } else { - this.value = this.value.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0] - this.parameters = { number: this.value } - } + this.value = this.validateNumber(this.value) + this.parameters = { number: this.value } + this.updateFilter(); + }, + to() { + this.to = this.validateNumber(this.to) + this.parameters = {from: this.from, to: this.to} + this.updateFilter(); + }, + from() { + this.from = this.validateNumber(this.from) + this.parameters = {from: this.from, to: this.to} this.updateFilter(); } }, diff --git a/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue index d005c9502..6e908633c 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue @@ -11,6 +11,7 @@
+ —
diff --git a/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue b/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue index feaa8b029..bbe320c3a 100644 --- a/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue +++ b/app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue @@ -12,6 +12,7 @@
+ —
diff --git a/app/views/repositories/_save_repository_filter_modal.html.erb b/app/views/repositories/_save_repository_filter_modal.html.erb index e2e1a64db..5c6d6a673 100644 --- a/app/views/repositories/_save_repository_filter_modal.html.erb +++ b/app/views/repositories/_save_repository_filter_modal.html.erb @@ -11,7 +11,7 @@
- +
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb index 16b35f50e..dfb91b8f9 100644 --- a/app/views/repositories/_toolbar_buttons.html.erb +++ b/app/views/repositories/_toolbar_buttons.html.erb @@ -24,7 +24,7 @@ -
    + diff --git a/config/locales/en.yml b/config/locales/en.yml index a7ca2e4ff..4e24d4be8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1440,6 +1440,13 @@ en: file_contains: "File contains" file_attached: "File is attached" file_not_attached: "File is not attached" + tooltips: + today: "Today from midnight to midnight" + yesterday: "The previous 24 hour day" + last_week: "The previous calendar week beginning of Monday to end of Sunday" + this_month: "The current calendar month from beginning of first day to the end of the last day" + this_year: "The current calendar year from beginning of 1st January to the end of 31st December" + last_year: "The last calendar year from beginning of 1st January to the end of 31st December" types: RepositoryAssetValue: input_placeholder: "Enter text"