auto-type select view

app/scripts/auto-type/auto-type-filter.js

@@ -0,0 +1,15 @@
+'use strict';
+
+let AutoTypeFilter = function(windowInfo, appModel) {
+    this.title = windowInfo.title;
+    this.url = windowInfo.url;
+    this.text = '';
+    this.ignoreWindowInfo = false;
+    this.appModel = appModel;
+};
+
+AutoTypeFilter.prototype.getEntries = function() {
+    return this.appModel.getEntries(); // TODO
+};
+
+module.exports = AutoTypeFilter;

app/scripts/auto-type/index.js

@@ -2,6 +2,7 @@
 
 var Backbone = require('backbone'),
     AutoTypeParser = require('./auto-type-parser'),
+    AutoTypeFilter = require('./auto-type-filter'),
     AutoTypeHelperFactory = require('./auto-type-helper-factory'),
     Launcher = require('../comp/launcher'),
     Alerts = require('../comp/alerts'),
@@ -148,15 +149,14 @@ var AutoType = {
 
     selectEntryAndRun: function() {
         this.getActiveWindowTitle((e, title, url) => {
-            let filter = { title, url, text: '' };
-            let entries = this.getMatchingEntries(filter);
+            let filter = new AutoTypeFilter({title, url}, this.appModel);
+            let entries = filter.getEntries();
             if (entries.length === 1) {
                 this.runAndHandleResult(entries[0]);
                 return;
             }
             this.selectEntryView = new AutoTypeSelectView({
                 model: {
-                    appModel: this.appModel,
                     filter: filter
                 }
             }).render();
@@ -173,10 +173,6 @@ var AutoType = {
             });
             setTimeout(() => Launcher.showMainWindow(), Timeouts.RedrawInactiveWindow);
         });
-    },
-
-    getMatchingEntries: function() {
-        return this.appModel.getEntries(); // TODO
     }
 };
 

app/scripts/comp/launcher.js

@@ -140,7 +140,9 @@ if (window.process && window.process.versions && window.process.versions.electro
             return !!this.electron().remote.BrowserWindow.getFocusedWindow();
         },
         showMainWindow: function() {
-            this.getMainWindow().show();
+            let win = this.getMainWindow();
+            win.show();
+            win.restore();
         },
         spawn: function(config) {
             var ts = logger.ts();

app/scripts/util/locale.js

@@ -257,6 +257,10 @@ var Locale = {
     autoTypeErrorGeneric: 'There was an error performing auto-type: {}',
     autoTypeErrorGlobal: 'To use system-wide shortcut, please focus the app where you want to type your password',
     autoTypeHeader: 'Auto-Type: Select',
+    autoTypeMsgNoWindow: 'We were unable to get active window title, start typing to search',
+    autoTypeMsgMatchedByWindow: 'Select a password for {}',
+    autoTypeClearFilter: 'show all entries',
+    autoTypeNoMatches: 'no matches',
 
     appSecWarn: 'Not Secure!',
     appSecWarnBody1: 'You have loaded this app with insecure connection. ' +

app/scripts/views/auto-type/auto-type-select-view.js

@@ -3,19 +3,26 @@
 const Backbone = require('backbone');
 const Keys = require('../../const/keys');
 const KeyHandler = require('../../comp/key-handler');
+const Locale = require('../../util/locale');
+const AppSettingsModel = require('../../models/app-settings-model');
+const EntryPresenter = require('../../presenters/entry-presenter');
+const Scrollable = require('../../mixins/scrollable');
 
 let AutoTypePopupView = Backbone.View.extend({
     el: 'body',
 
     template: require('templates/auto-type/auto-type-select.hbs'),
+    itemTemplate: require('templates/auto-type/auto-type-select-item.hbs'),
 
     events: {
-        'click .at-select__header-filter-clear': 'clearFilterText'
+        'click .at-select__header-filter-clear': 'clearFilterText',
+        'click .at-select__message-clear-filter': 'clearFilterWindow'
     },
 
     result: null,
 
     initialize() {
+        this.initScroll();
         this.listenTo(Backbone, 'main-window-blur', this.mainWindowBlur);
         KeyHandler.onKey(Keys.DOM_VK_ESCAPE, this.escPressed, this, false, true);
         KeyHandler.onKey(Keys.DOM_VK_RETURN, this.enterPressed, this, false, true);
@@ -27,10 +34,34 @@ let AutoTypePopupView = Backbone.View.extend({
     },
 
     render() {
+        let topMessage, topClearFilterVisible;
+        if (this.model.filter.title || this.model.filter.url) {
+            topMessage = Locale.autoTypeMsgMatchedByWindow.replace('{}',
+                this.model.filter.title || this.model.filter.url);
+            topClearFilterVisible = !this.model.filter.ignoreWindowInfo;
+        } else {
+            topMessage = Locale.autoTypeMsgNoWindow;
+        }
+        let noColor = AppSettingsModel.instance.get('colorfulIcons') ? '' : 'grayscale';
+        let presenter = new EntryPresenter(null, noColor);
+        let itemsHtml = '';
+        let itemTemplate = this.itemTemplate;
+        this.model.filter.getEntries().forEach(entry => {
+            presenter.present(entry);
+            itemsHtml += itemTemplate(presenter);
+        });
         this.renderTemplate({
-            filterText: this.model.filter.text
+            filterText: this.model.filter.text,
+            topMessage: topMessage,
+            topClearFilterVisible: topClearFilterVisible,
+            itemsHtml: itemsHtml
         });
         document.activeElement.blur();
+        this.createScroll({
+            root: this.$el.find('.at-select__items')[0],
+            scroller: this.$el.find('.scroller')[0],
+            bar: this.$el.find('.scroller__bar')[0]
+        });
         return this;
     },
 
@@ -51,7 +82,11 @@ let AutoTypePopupView = Backbone.View.extend({
     },
 
     escPressed() {
-        this.cancelAndClose();
+        if (this.model.filter.text) {
+            this.clearFilterText();
+        } else {
+            this.cancelAndClose();
+        }
     },
 
     enterPressed() {
@@ -83,9 +118,16 @@ let AutoTypePopupView = Backbone.View.extend({
         this.render();
     },
 
+    clearFilterWindow() {
+        this.model.filter.ignoreWindowInfo = true;
+        this.render();
+    },
+
     mainWindowBlur() {
         this.cancelAndClose();
     }
 });
 
+_.extend(AutoTypePopupView.prototype, Scrollable);
+
 module.exports = AutoTypePopupView;

app/styles/areas/_auto-type.scss

@@ -30,4 +30,32 @@
       top: .7em;
     }
   }
+  &__message {
+    @include display(flex);
+    &-text {
+      @include flex(1 1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: $base-padding-h;
+    }
+  }
+  &__items {
+    // TODO: fix scroller
+    @include display(flex);
+    @include flex-direction(column);
+    @include align-items(stretch);
+    @include scrollbar-on-hover;
+    overflow: hidden;
+    position: relative;
+    >.scroller {
+      @include flex(1);
+      @include align-self(stretch);
+      position: relative;
+      @include mobile {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,12 @@
+<tr class="at-select__item {{#if active}}at-select__item--active{{/if}}" data-id="{{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>
+</tr>

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

@@ -8,4 +8,18 @@
         </div>
         {{/if}}
     </div>
+    <div class="at-select__message">
+        <div class="at-select__message-text">{{topMessage}}</div>
+        {{#if topClearFilterVisible}}<a class="at-select__message-clear-filter">{{res 'autoTypeClearFilter'}}</a>{{/if}}
+    </div>
+    <div class="at-select__items">
+        <div class="scroller">
+            {{#if itemsHtml}}
+                <table>{{{itemsHtml}}}</table>
+            {{else}}
+                {{res 'autoTypeNoMatches'}}
+            {{/if}}
+        </div>
+        <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
+    </div>
 </div>