extracted entry selection view

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');

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 };

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);
                 }
             }

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';

app/templates/auto-type/auto-type-select-item.hbs

@@ -1,16 +0,0 @@
-<tr class="at-select__item {{#if active}}at-select__item--active{{/if}}" data-id="{{id}}"
-    id="at-select__item--{{id}}">
-    <td>
-        {{~#if customIcon~}}
-            <img src="{{customIcon}}" class="at-select__item-icon at-select__item-icon--custom {{#if color}}{{color}}{{/if}}" />
-        {{~else~}}
-            <i class="fa fa-{{icon}} {{#if color}}{{color}}-color{{/if}} at-select__item-icon"></i>
-        {{~/if~}}
-    </td>
-    <td>{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</td>
-    <td>{{user}}</td>
-    <td>{{url}}</td>
-    <td class="at-select__item-options">
-        <i class="fa fa-ellipsis-h"></i>
-    </td>
-</tr>

app/templates/auto-type/auto-type-select.hbs

@@ -1,30 +0,0 @@
-<div class="at-select">
-    <div class="at-select__header">
-        <h1 class="at-select__header-text">{{res 'autoTypeHeader'}}</h1>
-        <div class="at-select__hint" id="at-select__hint">
-            <div class="at-select__hint-text"><span class="shortcut">{{keyEnter}}</span>: {{res 'autoTypeSelectionHint'}}</div>
-            <div class="at-select__hint-text"><span class="shortcut">{{actionSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintAction'}}</div>
-            <div class="at-select__hint-text"><span class="shortcut">{{altSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintOpt'}}</div>
-            <div class="at-select__hint-text"><span class="shortcut">{{shiftSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintShift'}}</div>
-        </div>
-        {{#if filterText}}
-        <div class="at-select__header-filter" id="at-select__header-filter">
-            <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />
-            <i class="at-select__header-filter-clear fa fa-times"></i>
-        </div>
-        {{/if}}
-    </div>
-    <div class="at-select__message">
-        <div class="at-select__message-text">{{topMessage}}</div>
-    </div>
-    <div class="at-select__items">
-        <div class="scroller">
-            {{#if itemsHtml}}
-                <table class="at-select__table">{{{itemsHtml}}}</table>
-            {{else}}
-                <h1 class="at-select__empty-title muted-color">{{res 'autoTypeNoMatches'}}</h1>
-            {{/if}}
-        </div>
-        <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
-    </div>
-</div>

app/templates/select/select-entry-item.hbs

@@ -0,0 +1,16 @@
+<tr class="select-entry__item {{#if active}}select-entry__item--active{{/if}}" data-id="{{id}}"
+    id="select-entry__item--{{id}}">
+    <td>
+        {{~#if customIcon~}}
+            <img src="{{customIcon}}" class="select-entry__item-icon select-entry__item-icon--custom {{#if color}}{{color}}{{/if}}" />
+        {{~else~}}
+            <i class="fa fa-{{icon}} {{#if color}}{{color}}-color{{/if}} select-entry__item-icon"></i>
+        {{~/if~}}
+    </td>
+    <td>{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</td>
+    <td>{{user}}</td>
+    <td>{{url}}</td>
+    <td class="select-entry__item-options">
+        <i class="fa fa-ellipsis-h"></i>
+    </td>
+</tr>

app/templates/select/select-entry.hbs

@@ -0,0 +1,30 @@
+<div class="select-entry">
+    <div class="select-entry__header">
+        <h1 class="select-entry__header-text">{{res 'autoTypeHeader'}}</h1>
+        <div class="select-entry__hint" id="select-entry__hint">
+            <div class="select-entry__hint-text"><span class="shortcut">{{keyEnter}}</span>: {{res 'autoTypeSelectionHint'}}</div>
+            <div class="select-entry__hint-text"><span class="shortcut">{{actionSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintAction'}}</div>
+            <div class="select-entry__hint-text"><span class="shortcut">{{altSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintOpt'}}</div>
+            <div class="select-entry__hint-text"><span class="shortcut">{{shiftSymbol}} {{keyEnter}}</span>: {{res 'autoTypeSelectionHintShift'}}</div>
+        </div>
+        {{#if filterText}}
+        <div class="select-entry__header-filter" id="select-entry__header-filter">
+            <input type="text" readonly value="{{filterText}}" class="select-entry__header-filter-input" />
+            <i class="select-entry__header-filter-clear fa fa-times"></i>
+        </div>
+        {{/if}}
+    </div>
+    <div class="select-entry__message">
+        <div class="select-entry__message-text">{{topMessage}}</div>
+    </div>
+    <div class="select-entry__items">
+        <div class="scroller">
+            {{#if itemsHtml}}
+                <table class="select-entry__table">{{{itemsHtml}}}</table>
+            {{else}}
+                <h1 class="select-entry__empty-title muted-color">{{res 'autoTypeNoMatches'}}</h1>
+            {{/if}}
+        </div>
+        <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
+    </div>
+</div>