auto-type select

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

@@ -16,10 +16,12 @@ let AutoTypePopupView = Backbone.View.extend({
 
     events: {
         'click .at-select__header-filter-clear': 'clearFilterText',
-        'click .at-select__message-clear-filter': 'clearFilterWindow'
+        'click .at-select__message-clear-filter': 'clearFilterWindow',
+        'click .at-select__item': 'itemClicked'
     },
 
     result: null,
+    entries: null,
 
     initialize() {
         this.initScroll();
@@ -43,10 +45,12 @@ let AutoTypePopupView = Backbone.View.extend({
             topMessage = Locale.autoTypeMsgNoWindow;
         }
         let noColor = AppSettingsModel.instance.get('colorfulIcons') ? '' : 'grayscale';
-        let presenter = new EntryPresenter(null, noColor);
+        this.entries = this.model.filter.getEntries();
+        this.result = this.entries.first();
+        let presenter = new EntryPresenter(null, noColor, this.result && this.result.id);
         let itemsHtml = '';
         let itemTemplate = this.itemTemplate;
-        this.model.filter.getEntries().forEach(entry => {
+        this.entries.forEach(entry => {
             presenter.present(entry);
             itemsHtml += itemTemplate(presenter);
         });
@@ -81,6 +85,10 @@ let AutoTypePopupView = Backbone.View.extend({
         this.trigger('result', this.result);
     },
 
+    closeWithResult() {
+        this.trigger('result', this.result);
+    },
+
     escPressed() {
         if (this.model.filter.text) {
             this.clearFilterText();
@@ -90,13 +98,38 @@ let AutoTypePopupView = Backbone.View.extend({
     },
 
     enterPressed() {
-        this.trigger('result', this.result);
+        this.closeWithResult();
     },
 
-    upPressed() {
+    upPressed(e) {
+        e.preventDefault();
+        let activeIndex = this.entries.indexOf(this.result) - 1;
+        if (activeIndex >= 0) {
+            this.result = this.entries.at(activeIndex);
+            this.highlightActive();
+        }
     },
 
-    downPressed() {
+    downPressed(e) {
+        e.preventDefault();
+        let activeIndex = this.entries.indexOf(this.result) + 1;
+        if (activeIndex < this.entries.length) {
+            this.result = this.entries.at(activeIndex);
+            this.highlightActive();
+        }
+    },
+
+    highlightActive() {
+        this.$el.find('.at-select__item').removeClass('at-select__item--active');
+        let activeItem = this.$el.find('.at-select__item[data-id="' + this.result.id + '"]');
+        activeItem.addClass('at-select__item--active');
+        let itemRect = activeItem[0].getBoundingClientRect();
+        let listRect = this.scroller[0].getBoundingClientRect();
+        if (itemRect.top < listRect.top) {
+            this.scroller[0].scrollTop += itemRect.top - listRect.top;
+        } else if (itemRect.bottom > listRect.bottom) {
+            this.scroller[0].scrollTop += itemRect.bottom - listRect.bottom;
+        }
     },
 
     keyPressed(e) {
@@ -123,8 +156,11 @@ let AutoTypePopupView = Backbone.View.extend({
         this.render();
     },
 
-    mainWindowBlur() {
-        this.cancelAndClose();
+    itemClicked(e) {
+        let itemEl = $(e.target).closest('.at-select__item');
+        let id = itemEl.data('id');
+        this.result = this.entries.get(id);
+        this.closeWithResult();
     }
 });
 

app/styles/areas/_auto-type.scss

@@ -2,6 +2,10 @@
   @include position(absolute, 0 null null 0);
   @include size(100%);
   @include th { background-color: background-color(); }
+  @include display(flex);
+  @include flex-direction(column);
+  @include align-items(stretch);
+  @include justify-content(flex-start);
   box-sizing: border-box;
   z-index: $z-index-no-modal;
   opacity: 1;
@@ -32,6 +36,7 @@
   }
   &__message {
     @include display(flex);
+    margin-bottom: $base-padding-v * 2;
     &-text {
       @include flex(1 1);
       overflow: hidden;
@@ -41,21 +46,38 @@
     }
   }
   &__items {
-    // TODO: fix scroller
-    @include display(flex);
-    @include flex-direction(column);
-    @include align-items(stretch);
+    @include flex(1);
     @include scrollbar-on-hover;
-    overflow: hidden;
+    margin-bottom: $base-padding-v;
     position: relative;
+    overflow: hidden;
     >.scroller {
-      @include flex(1);
-      @include align-self(stretch);
-      position: relative;
-      @include mobile {
-        width: 100% !important;
-        max-width: 100% !important;
+      @include display(flex);
+      @include flex-direction(row);
+      @include justify-content(center);
+    }
+  }
+  &__table {
+    @include flex(1);
+    width: 100%;
+    overflow: hidden;
+    border-collapse: collapse;
+    td, th {
+      padding: $base-padding;
+      &:first-of-type {
+        width: 1em;
+        text-align: center;
       }
     }
   }
+  &__item {
+    @include area-selectable(right);
+    &--active, &--active:hover {
+      @include area-selected(right);
+      cursor: pointer;
+    }
+  }
+  &__empty-title {
+    @include align-self(center);
+  }
 }

app/styles/areas/_list.scss

@@ -21,6 +21,7 @@
       @include flex(1);
       @include align-self(stretch);
       position: relative;
+      overflow-x: hidden;
       @include mobile {
         width: 100% !important;
         max-width: 100% !important;

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

@@ -15,9 +15,9 @@
     <div class="at-select__items">
         <div class="scroller">
             {{#if itemsHtml}}
-                <table>{{{itemsHtml}}}</table>
+                <table class="at-select__table">{{{itemsHtml}}}</table>
             {{else}}
-                {{res 'autoTypeNoMatches'}}
+                <h1 class="at-select__empty-title muted-color">{{res 'autoTypeNoMatches'}}</h1>
             {{/if}}
         </div>
         <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>