From 338f6d47d18a97bd93008644f9c60e5058163ddf Mon Sep 17 00:00:00 2001 From: antelle Date: Wed, 28 Apr 2021 09:44:02 +0200 Subject: [PATCH] extracted entry selection view --- app/scripts/auto-type/index.js | 4 +-- .../select-entry-view.js} | 36 +++++++++---------- .../{_auto-type.scss => _select-entry.scss} | 6 ++-- app/styles/main.scss | 2 +- .../auto-type/auto-type-select-item.hbs | 16 --------- app/templates/auto-type/auto-type-select.hbs | 30 ---------------- app/templates/select/select-entry-item.hbs | 16 +++++++++ app/templates/select/select-entry.hbs | 30 ++++++++++++++++ 8 files changed, 70 insertions(+), 70 deletions(-) rename app/scripts/views/{auto-type/auto-type-select-view.js => select/select-entry-view.js} (87%) rename app/styles/areas/{_auto-type.scss => _select-entry.scss} (97%) delete mode 100644 app/templates/auto-type/auto-type-select-item.hbs delete mode 100644 app/templates/auto-type/auto-type-select.hbs create mode 100644 app/templates/select/select-entry-item.hbs create mode 100644 app/templates/select/select-entry.hbs diff --git a/app/scripts/auto-type/index.js b/app/scripts/auto-type/index.js index 9be1fe0b..526f194f 100644 --- a/app/scripts/auto-type/index.js +++ b/app/scripts/auto-type/index.js @@ -11,7 +11,7 @@ import { AppModel } from 'models/app-model'; import { Locale } from 'util/locale'; import { Logger } from 'util/logger'; import { Links } from 'const/links'; -import { AutoTypeSelectView } from 'views/auto-type/auto-type-select-view'; +import { SelectEntryView } from 'views/select/select-entry-view'; const logger = new Logger('auto-type'); const clearTextAutoTypeLog = !!localStorage.debugAutoType; @@ -255,7 +255,7 @@ const AutoType = { } this.focusMainWindow(); evt.filter.ignoreWindowInfo = true; - this.selectEntryView = new AutoTypeSelectView({ filter: evt.filter }); + this.selectEntryView = new SelectEntryView({ filter: evt.filter }); this.selectEntryView.on('result', (result) => { logger.debug('Entry selected', result); this.selectEntryView.off('result'); diff --git a/app/scripts/views/auto-type/auto-type-select-view.js b/app/scripts/views/select/select-entry-view.js similarity index 87% rename from app/scripts/views/auto-type/auto-type-select-view.js rename to app/scripts/views/select/select-entry-view.js index c81cba1a..bed3dde4 100644 --- a/app/scripts/views/auto-type/auto-type-select-view.js +++ b/app/scripts/views/select/select-entry-view.js @@ -9,10 +9,10 @@ import { StringFormat } from 'util/formatting/string-format'; import { Locale } from 'util/locale'; import { Scrollable } from 'framework/views/scrollable'; import { DropdownView } from 'views/dropdown-view'; -import template from 'templates/auto-type/auto-type-select.hbs'; -import itemTemplate from 'templates/auto-type/auto-type-select-item.hbs'; +import template from 'templates/select/select-entry.hbs'; +import itemTemplate from 'templates/select/select-entry-item.hbs'; -class AutoTypeSelectView extends View { +class SelectEntryView extends View { parent = 'body'; modal = 'auto-type'; @@ -21,9 +21,9 @@ class AutoTypeSelectView extends View { itemTemplate = itemTemplate; events = { - 'click .at-select__header-filter-clear': 'clearFilterText', - 'click .at-select__item': 'itemClicked', - 'contextmenu .at-select__item': 'itemRightClicked' + 'click .select-entry__header-filter-clear': 'clearFilterText', + 'click .select-entry__item': 'itemClicked', + 'contextmenu .select-entry__item': 'itemRightClicked' }; result = null; @@ -89,7 +89,7 @@ class AutoTypeSelectView extends View { }); document.activeElement.blur(); this.createScroll({ - root: this.$el.find('.at-select__items')[0], + root: this.$el.find('.select-entry__items')[0], scroller: this.$el.find('.scroller')[0], bar: this.$el.find('.scroller__bar')[0] }); @@ -132,7 +132,7 @@ class AutoTypeSelectView extends View { } shiftEnterPressed(e) { - const activeItem = this.$el.find('.at-select__item[data-id="' + this.result.id + '"]'); + const activeItem = this.$el.find('.select-entry__item[data-id="' + this.result.id + '"]'); this.showItemOptions(activeItem, e); } @@ -155,9 +155,9 @@ class AutoTypeSelectView extends View { } highlightActive() { - this.$el.find('.at-select__item').removeClass('at-select__item--active'); - const activeItem = this.$el.find('.at-select__item[data-id="' + this.result.id + '"]'); - activeItem.addClass('at-select__item--active'); + this.$el.find('.select-entry__item').removeClass('select-entry__item--active'); + const activeItem = this.$el.find('.select-entry__item[data-id="' + this.result.id + '"]'); + activeItem.addClass('select-entry__item--active'); const itemRect = activeItem[0].getBoundingClientRect(); const listRect = this.scroller[0].getBoundingClientRect(); if (itemRect.top < listRect.top) { @@ -176,7 +176,7 @@ class AutoTypeSelectView extends View { backSpacePressed() { if (this.model.filter.text) { - const input = this.el.querySelector('.at-select__header-filter-input'); + const input = this.el.querySelector('.select-entry__header-filter-input'); if (input.selectionStart < input.selectionEnd) { this.model.filter.text = this.model.filter.text.substr(0, input.selectionStart) + @@ -198,8 +198,8 @@ class AutoTypeSelectView extends View { } itemClicked(e) { - const itemEl = $(e.target).closest('.at-select__item'); - const optionsClicked = $(e.target).closest('.at-select__item-options').length; + const itemEl = $(e.target).closest('.select-entry__item'); + const optionsClicked = $(e.target).closest('.select-entry__item-options').length; if (optionsClicked) { this.showItemOptions(itemEl, e); @@ -211,7 +211,7 @@ class AutoTypeSelectView extends View { } itemRightClicked(e) { - const itemEl = $(e.target).closest('.at-select__item'); + const itemEl = $(e.target).closest('.select-entry__item'); this.showItemOptions(itemEl, e); } @@ -231,7 +231,7 @@ class AutoTypeSelectView extends View { } this.result = entry; - if (!itemEl.hasClass('at-select__item--active')) { + if (!itemEl.hasClass('select-entry__item--active')) { this.highlightActive(); } @@ -309,6 +309,6 @@ class AutoTypeSelectView extends View { } } -Object.assign(AutoTypeSelectView.prototype, Scrollable); +Object.assign(SelectEntryView.prototype, Scrollable); -export { AutoTypeSelectView }; +export { SelectEntryView }; diff --git a/app/styles/areas/_auto-type.scss b/app/styles/areas/_select-entry.scss similarity index 97% rename from app/styles/areas/_auto-type.scss rename to app/styles/areas/_select-entry.scss index 6a7e7207..3b103ee4 100644 --- a/app/styles/areas/_auto-type.scss +++ b/app/styles/areas/_select-entry.scss @@ -1,4 +1,4 @@ -.at-select { +.select-entry { @include position(absolute, 0 null null 0); @include size(100%); background-color: var(--background-color); @@ -83,7 +83,7 @@ overflow: hidden; border-collapse: collapse; table-layout: fixed; - tr.at-select__item { + tr.select-entry__item { border-right-width: 3px; } td, @@ -120,7 +120,7 @@ text-align: center; &:hover { background: var(--background-color); - .at-select__item--active & { + .select-entry__item--active & { background: var(--action-color); } } diff --git a/app/styles/main.scss b/app/styles/main.scss index e65e9f53..ab5d7231 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -27,7 +27,6 @@ $fa-font-path: '~font-awesome/fonts'; @import 'common/links'; @import 'areas/app'; -@import 'areas/auto-type'; @import 'areas/details'; @import 'areas/extension'; @import 'areas/footer'; @@ -39,6 +38,7 @@ $fa-font-path: '~font-awesome/fonts'; @import 'areas/list'; @import 'areas/menu'; @import 'areas/open'; +@import 'areas/select-entry'; @import 'areas/settings'; @import 'areas/import-csv'; @import 'areas/titlebar'; diff --git a/app/templates/auto-type/auto-type-select-item.hbs b/app/templates/auto-type/auto-type-select-item.hbs deleted file mode 100644 index 2adc83fb..00000000 --- a/app/templates/auto-type/auto-type-select-item.hbs +++ /dev/null @@ -1,16 +0,0 @@ - - - {{~#if customIcon~}} - - {{~else~}} - - {{~/if~}} - - {{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}} - {{user}} - {{url}} - - - - diff --git a/app/templates/auto-type/auto-type-select.hbs b/app/templates/auto-type/auto-type-select.hbs deleted file mode 100644 index 6eda1e7f..00000000 --- a/app/templates/auto-type/auto-type-select.hbs +++ /dev/null @@ -1,30 +0,0 @@ -
-
-

{{res 'autoTypeHeader'}}

-
-
{{keyEnter}}: {{res 'autoTypeSelectionHint'}}
-
{{actionSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintAction'}}
-
{{altSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintOpt'}}
-
{{shiftSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintShift'}}
-
- {{#if filterText}} -
- - -
- {{/if}} -
-
-
{{topMessage}}
-
-
-
- {{#if itemsHtml}} - {{{itemsHtml}}}
- {{else}} -

{{res 'autoTypeNoMatches'}}

- {{/if}} -
-
-
-
diff --git a/app/templates/select/select-entry-item.hbs b/app/templates/select/select-entry-item.hbs new file mode 100644 index 00000000..6006bb80 --- /dev/null +++ b/app/templates/select/select-entry-item.hbs @@ -0,0 +1,16 @@ + + + {{~#if customIcon~}} + + {{~else~}} + + {{~/if~}} + + {{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}} + {{user}} + {{url}} + + + + diff --git a/app/templates/select/select-entry.hbs b/app/templates/select/select-entry.hbs new file mode 100644 index 00000000..9c3cb833 --- /dev/null +++ b/app/templates/select/select-entry.hbs @@ -0,0 +1,30 @@ +
+
+

{{res 'autoTypeHeader'}}

+
+
{{keyEnter}}: {{res 'autoTypeSelectionHint'}}
+
{{actionSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintAction'}}
+
{{altSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintOpt'}}
+
{{shiftSymbol}} {{keyEnter}}: {{res 'autoTypeSelectionHintShift'}}
+
+ {{#if filterText}} +
+ + +
+ {{/if}} +
+
+
{{topMessage}}
+
+
+
+ {{#if itemsHtml}} + {{{itemsHtml}}}
+ {{else}} +

{{res 'autoTypeNoMatches'}}

+ {{/if}} +
+
+
+