bugfixes

app/scripts/locales/base.json

@@ -377,6 +377,7 @@
     "setGenThemeHc": "High contrast",
     "setGenThemeSd": "Solarized dark",
     "setGenThemeSl": "Solarized light",
+    "setGenMoreThemes": "More themes",
     "setGenLocale": "Language",
     "setGenLocOther": "other languages are available as plugins",
     "setGenFontSize": "Font size",

app/scripts/models/menu/menu-item-model.js

@@ -47,6 +47,7 @@ MenuItemModel.defineModelProperties({
     shortcut: null,
     options: null,
     cls: null,
+    iconCls: null,
     disabled: false,
     visible: true,
     drag: false,

app/scripts/models/menu/menu-model.js

@@ -51,7 +51,7 @@ class MenuModel extends Model {
         ]);
         Colors.AllColors.forEach((color) => {
             const option = {
-                cls: 'fa ' + color + '-color',
+                cls: `fa ${color}-color`,
                 value: color,
                 filterValue: color
             };
@@ -157,9 +157,8 @@ class MenuModel extends Model {
             this.colorsItem.options.forEach((opt) => {
                 opt.active = opt === sel.option;
             });
-            const selColor =
-                sel.item === this.colorsItem && sel.option ? sel.option.value + '-color' : '';
-            this.colorsItem.cls = 'menu__item-colors ' + selColor;
+            this.colorsItem.iconCls =
+                sel.item === this.colorsItem && sel.option ? sel.option.value + '-color' : null;
             const filterKey = sel.item.filterKey;
             const filterValue = (sel.option || sel.item).filterValue;
             const filter = {};

app/scripts/views/fields/field-view.js

@@ -180,6 +180,8 @@ class FieldView extends View {
             textEqual = this.value.equals(newVal);
         } else if (newVal && newVal.isProtected) {
             textEqual = newVal.equals(this.value);
+        } else if (newVal instanceof Date && this.value instanceof Date) {
+            textEqual = newVal.toDateString() === this.value.toDateString();
         } else {
             textEqual = isEqual(this.value, newVal);
         }

app/scripts/views/menu/menu-item-view.js

@@ -37,6 +37,7 @@ class MenuItemView extends View {
         this.listenTo(this.model, 'change:active', this.changeActive);
         this.listenTo(this.model, 'change:expanded', this.changeExpanded);
         this.listenTo(this.model, 'change:cls', this.changeCls);
+        this.listenTo(this.model, 'change:iconCls', this.changeIconCls);
         this.listenTo(this.model, 'delete', this.remove);
         this.listenTo(this.model, 'insert', this.insertItem);
         const shortcut = this.model.shortcut;
@@ -108,6 +109,16 @@ class MenuItemView extends View {
         this.$el.addClass(cls);
     }
 
+    changeIconCls(model, cls, oldCls) {
+        const iconEl = this.el.querySelector('.menu__item-icon');
+        if (oldCls) {
+            iconEl.classList.remove(oldCls);
+        }
+        if (cls) {
+            iconEl.classList.add(cls);
+        }
+    }
+
     mouseover(e) {
         if (!e.button) {
             this.$el.addClass('menu__item--hover');

app/scripts/views/settings/settings-general-view.js

@@ -206,20 +206,28 @@ class SettingsGeneralView extends View {
 
     changeTheme(e) {
         const theme = e.target.closest('.settings__general-theme').dataset.theme;
-        AppSettingsModel.theme = theme;
-        this.render();
+        if (theme === '...') {
+            this.goToPlugins();
+        } else {
+            AppSettingsModel.theme = theme;
+            this.render();
+        }
     }
 
     changeLocale(e) {
         const locale = e.target.value;
         if (locale === '...') {
             e.target.value = AppSettingsModel.locale || 'en-US';
-            this.appModel.menu.select({
-                item: this.appModel.menu.pluginsSection.items[0]
-            });
-            return;
+            this.goToPlugins();
+        } else {
+            AppSettingsModel.locale = locale;
         }
-        AppSettingsModel.locale = locale;
+    }
+
+    goToPlugins() {
+        this.appModel.menu.select({
+            item: this.appModel.menu.pluginsSection.items[0]
+        });
     }
 
     changeFontSize(e) {

app/scripts/views/settings/settings-help-view.js

@@ -26,7 +26,7 @@ class SettingsHelpView extends View {
             issueLink:
                 Links.Repo +
                 '/issues/new?body=' +
-                encodeURIComponent('!please describe your issue here!\n\n' + appInfo),
+                encodeURIComponent('# please describe your issue here\n\n' + appInfo),
             desktopLink: Links.Desktop,
             webAppLink: Links.WebApp,
             appInfo

app/styles/areas/_details.scss

@@ -16,9 +16,11 @@
             height: $mobile-back-button-height;
             font-size: 1.2em;
             > i {
-                margin-right: 0.3em;
+                margin-right: 0.7em;
                 font-size: 1.2em;
-                vertical-align: text-bottom;
+                vertical-align: middle;
+                position: relative;
+                top: -0.15em;
             }
         }
     }
@@ -738,9 +740,11 @@
             padding: $base-padding;
             font-size: 1.2em;
             > i {
-                margin-right: 0.3em;
+                margin-right: 0.7em;
                 font-size: 1.2em;
-                vertical-align: text-bottom;
+                vertical-align: middle;
+                position: relative;
+                top: -0.15em;
             }
             &-pre {
                 display: inline;

app/styles/areas/_generator.scss

@@ -58,6 +58,9 @@
             content: $fa-var-eye-slash;
             color: inherit;
         }
+        &:not([disabled]) + label.gen__check-hide-label:hover:before {
+            color: var(--text-color);
+        }
     }
     &__btn-wrap {
         text-align: center;

app/styles/areas/_menu.scss

@@ -66,7 +66,7 @@
                 display: block;
                 position: absolute;
                 cursor: pointer;
-                @include position(absolute, 50% null null 1em);
+                @include position(absolute, 50% null null 1.6em);
                 transform: translateY(-50%);
             }
         }
@@ -126,6 +126,8 @@
 
         &-icon {
             width: 0.8em;
+            position: relative;
+            top: 0.1em;
             &--image {
                 width: 12px;
                 height: 12px;

app/styles/areas/_open.scss

@@ -25,6 +25,7 @@
 
     &__icon {
         @include icon-btn();
+        color: var(--open-icon-color);
         padding-top: 0;
         margin: 0.2em 0.5em;
         &:hover {
@@ -44,21 +45,6 @@
                 color: var(--medium-color);
             }
         }
-        @include mobile() {
-            &-i {
-                font-size: 4.6em;
-            }
-            &-text {
-                font-size: 1.1em;
-            }
-            .open__icons--lower & {
-                margin: 14px;
-                &-i {
-                    font-size: 4.2em;
-                    margin-bottom: 0.1em;
-                }
-            }
-        }
     }
 
     &__pass {
@@ -102,7 +88,7 @@
                 font-size: 3em;
                 line-height: 1;
                 @include mobile {
-                    line-height: 0.8;
+                    line-height: 1.1;
                 }
             }
         }

app/styles/areas/_settings.scss

@@ -71,9 +71,11 @@
             padding: $base-padding;
             font-size: 1.2em;
             > i {
-                margin-right: 0.3em;
+                margin-right: 0.7em;
                 font-size: 1.2em;
-                vertical-align: text-bottom;
+                vertical-align: middle;
+                position: relative;
+                top: -0.15em;
             }
             &-pre {
                 display: inline;
@@ -136,27 +138,31 @@
         display: none;
     }
 
-    &__file-master-pass-warning,
-    &__file-confirm-master-pass-warning {
-        font-weight: normal;
-        float: right;
-        display: none;
-    }
-
-    &__file-save-to {
-        cursor: pointer;
-        display: inline-block;
-        margin-right: $base-padding-h;
-        text-align: center;
-        > i {
-            display: block;
-            font-size: 3em;
-            padding: $base-padding-px;
-            margin: auto;
+    &__file {
+        &-master-pass-warning,
+        &-confirm-master-pass-warning {
+            font-weight: normal;
+            float: right;
+            display: none;
         }
-        &:hover {
-            transition: color $base-duration $base-timing;
-            color: var(--medium-color);
+
+        &-save-to {
+            cursor: pointer;
+            display: inline-block;
+            margin-right: $base-padding-h;
+            text-align: center;
+
+            > i {
+                display: block;
+                font-size: 3em;
+                padding: $base-padding-px;
+                margin: auto;
+            }
+
+            &:hover {
+                transition: color $base-duration $base-timing;
+                color: var(--medium-color);
+            }
         }
     }
 
@@ -182,6 +188,9 @@
         grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
         grid-gap: $base-spacing;
         margin-bottom: $base-spacing;
+        @include mobile {
+            width: 100%;
+        }
     }
     &__general-theme {
         padding: $base-padding;
@@ -204,6 +213,9 @@
         &-button {
             margin-bottom: $base-padding-v;
         }
+        &-plugins-icon {
+            font-size: 3em;
+        }
         &:hover {
             box-shadow: form-box-shadow-hover();
         }
@@ -322,7 +334,7 @@
 
     &__head-icon {
         position: relative;
-        top: .1em;
+        top: 0.1em;
         margin-right: 0.2em;
     }
 }

app/styles/base/_buttons.scss

@@ -72,6 +72,11 @@
     }
 }
 
+.btn ~ .btn,
+button ~ button {
+    margin-left: $small-spacing;
+}
+
 @mixin icon-btn($error: false) {
     @include area-selectable();
     padding: $medium-padding;
@@ -82,6 +87,7 @@
         vertical-align: middle;
     }
     @if $error {
+        color: var(--muted-color);
         &:hover {
             color: var(--error-color);
         }

app/styles/base/_icon-font.scss

@@ -33,6 +33,12 @@ $fa-glyph-counter: 61440; // 0xf000
     @return $glyph;
 }
 
+// position fixes for icons that need to be shifted because they're special
+
+.fa-keyboard {
+    @include position(relative, 0.1em null null null);
+}
+
 // icons listed below will be automatically added to the generated icon font, see build/loaders/fontawesome-loader.js
 // if the icon has "-o" suffix, it will be used from the "regular" font, otherwise from "solid" or "brands"
 // -o is used because it's similar to an empty bullet and this used to be a convention in fontawesome 4
@@ -182,3 +188,4 @@ $fa-var-twitter: next-fa-glyph();
 $fa-var-paint-brush: next-fa-glyph();
 $fa-var-at: next-fa-glyph();
 $fa-var-usb-token: next-fa-glyph();
+$fa-var-bell: next-fa-glyph();

app/styles/base/_properties.scss

@@ -4,4 +4,5 @@ body {
     --input-border-radius: 4px;
     --block-border-radius: 5px;
     --selected-item-text-color: var(--text-color);
+    --open-icon-color: var(--text-color);
 }

app/styles/common/_dropdown.scss

@@ -5,7 +5,7 @@
     background: var(--background-color);
     border: light-border();
     box-shadow: dropdown-box-shadow();
-    padding: $small-spacing;
+    padding: $tiny-spacing;
     &__item {
         padding: 8px 12px;
         cursor: pointer;

app/styles/common/_modal.scss

@@ -43,9 +43,6 @@
     }
     &__buttons {
         text-align: right;
-        button ~ button {
-            margin-left: $small-spacing;
-        }
         > button {
             margin-bottom: $small-spacing;
         }

app/styles/themes/_light.scss

@@ -28,4 +28,5 @@ body.th-light {
     --selected-item-color: #2366d9;
     --selected-on-secondary-item-color: #d6d6d6;
     --selected-item-text-color: #f6f6f6;
+    --open-icon-color: var(--muted-color);
 }

app/styles/utils/_auto-type-hint.scss

@@ -2,7 +2,7 @@
     @include common-dropdown;
     position: absolute;
     z-index: $z-index-no-modal;
-    border-radius: $base-border-radius;
+    border-radius: var(--block-border-radius);
     padding: $base-padding;
     box-sizing: border-box;
     overflow: hidden;

app/styles/utils/_selection.scss

@@ -33,4 +33,7 @@
     @include area-selected();
     color: var(--text-color);
     background-color: var(--selected-on-secondary-item-color);
+    &:hover {
+        color: var(--text-color);
+    }
 }

app/templates/list-item-short.hbs

@@ -4,5 +4,6 @@
     {{~else~}}
         <i class="fa fa-{{icon}} {{#if color}}{{color}}-color{{/if}} list__item-icon"></i>
     {{~/if}}
-    <span class="list__item-title">{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</span><span class="list__item-descr thin">{{description}}</span>
+    <span class="list__item-title">{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</span>
+    <span class="list__item-descr thin">{{#if description}}{{description}}{{else}}&nbsp;{{/if}}</span>
 </div>

app/templates/menu/menu-item.hbs

@@ -10,7 +10,8 @@
         {{#if customIcon~}}
             <img src="{{customIcon}}" class="menu__item-icon menu__item-icon--image" />
         {{~else~}}
-            <i class="menu__item-icon fa {{#if icon}}fa-{{icon}}{{else}}menu__item-icon--no-icon{{/if}}"></i>
+            <i class="menu__item-icon fa {{#if icon}}fa-{{icon}}{{else}}menu__item-icon--no-icon{{/if}}
+                {{~#if iconCls}} {{iconCls}}{{/if~}}"></i>
         {{~/if}}
         <span class="menu__item-title">{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</span>
         {{#if options}}

app/templates/settings/settings-general.hbs

@@ -60,6 +60,10 @@
                     <button class="settings__general-theme-button"><i class="fa fa-ellipsis-h"></i></button>
                 </div>
             {{/each}}
+            <div class="settings__general-theme settings__general-theme-plugins" data-theme="...">
+                <div class="settings__general-theme-plugins-name">{{res 'setGenMoreThemes'}}</div>
+                <i class="settings__general-theme-plugins-icon fa fa-puzzle-piece"></i>
+            </div>
         </div>
     </div>
     <div>