From f7e9f725b0d4d887c5dc1ba9fadcd03b5e6da16a Mon Sep 17 00:00:00 2001 From: antelle Date: Sun, 29 Nov 2020 11:10:34 +0100 Subject: [PATCH] bugfixes --- app/scripts/locales/base.json | 1 + app/scripts/models/menu/menu-item-model.js | 1 + app/scripts/models/menu/menu-model.js | 7 +-- app/scripts/views/fields/field-view.js | 2 + app/scripts/views/menu/menu-item-view.js | 11 ++++ .../views/settings/settings-general-view.js | 22 ++++--- .../views/settings/settings-help-view.js | 2 +- app/styles/areas/_details.scss | 12 ++-- app/styles/areas/_generator.scss | 3 + app/styles/areas/_menu.scss | 4 +- app/styles/areas/_open.scss | 18 +----- app/styles/areas/_settings.scss | 58 +++++++++++-------- app/styles/base/_buttons.scss | 6 ++ app/styles/base/_icon-font.scss | 7 +++ app/styles/base/_properties.scss | 1 + app/styles/common/_dropdown.scss | 2 +- app/styles/common/_modal.scss | 3 - app/styles/themes/_light.scss | 1 + app/styles/utils/_auto-type-hint.scss | 2 +- app/styles/utils/_selection.scss | 3 + app/templates/list-item-short.hbs | 3 +- app/templates/menu/menu-item.hbs | 3 +- app/templates/settings/settings-general.hbs | 4 ++ 23 files changed, 113 insertions(+), 63 deletions(-) diff --git a/app/scripts/locales/base.json b/app/scripts/locales/base.json index 06f02bfb..6aa0fd5d 100644 --- a/app/scripts/locales/base.json +++ b/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", diff --git a/app/scripts/models/menu/menu-item-model.js b/app/scripts/models/menu/menu-item-model.js index fbf8dc58..bbc37b44 100644 --- a/app/scripts/models/menu/menu-item-model.js +++ b/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, diff --git a/app/scripts/models/menu/menu-model.js b/app/scripts/models/menu/menu-model.js index 36eb937a..b8f6e511 100644 --- a/app/scripts/models/menu/menu-model.js +++ b/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 = {}; diff --git a/app/scripts/views/fields/field-view.js b/app/scripts/views/fields/field-view.js index e0f7e52c..078c749a 100644 --- a/app/scripts/views/fields/field-view.js +++ b/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); } diff --git a/app/scripts/views/menu/menu-item-view.js b/app/scripts/views/menu/menu-item-view.js index 32b323a5..9f2c3b29 100644 --- a/app/scripts/views/menu/menu-item-view.js +++ b/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'); diff --git a/app/scripts/views/settings/settings-general-view.js b/app/scripts/views/settings/settings-general-view.js index 92cdd3e9..cc19ff38 100644 --- a/app/scripts/views/settings/settings-general-view.js +++ b/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) { diff --git a/app/scripts/views/settings/settings-help-view.js b/app/scripts/views/settings/settings-help-view.js index 1acb49ab..c6c38cb8 100644 --- a/app/scripts/views/settings/settings-help-view.js +++ b/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 diff --git a/app/styles/areas/_details.scss b/app/styles/areas/_details.scss index 294c8e36..ec500f6f 100644 --- a/app/styles/areas/_details.scss +++ b/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; diff --git a/app/styles/areas/_generator.scss b/app/styles/areas/_generator.scss index f69bd1a0..535a4045 100644 --- a/app/styles/areas/_generator.scss +++ b/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; diff --git a/app/styles/areas/_menu.scss b/app/styles/areas/_menu.scss index 207759a0..efe55c6a 100644 --- a/app/styles/areas/_menu.scss +++ b/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; diff --git a/app/styles/areas/_open.scss b/app/styles/areas/_open.scss index 3c952fdc..5d58ec83 100644 --- a/app/styles/areas/_open.scss +++ b/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; } } } diff --git a/app/styles/areas/_settings.scss b/app/styles/areas/_settings.scss index 22860452..865cef15 100644 --- a/app/styles/areas/_settings.scss +++ b/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; } } diff --git a/app/styles/base/_buttons.scss b/app/styles/base/_buttons.scss index 3a3303a5..ec742112 100644 --- a/app/styles/base/_buttons.scss +++ b/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); } diff --git a/app/styles/base/_icon-font.scss b/app/styles/base/_icon-font.scss index c74e55d9..5d42ee6d 100644 --- a/app/styles/base/_icon-font.scss +++ b/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(); diff --git a/app/styles/base/_properties.scss b/app/styles/base/_properties.scss index f750c286..bc3d2200 100644 --- a/app/styles/base/_properties.scss +++ b/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); } diff --git a/app/styles/common/_dropdown.scss b/app/styles/common/_dropdown.scss index 2b7c0ef0..9d0d5a0e 100644 --- a/app/styles/common/_dropdown.scss +++ b/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; diff --git a/app/styles/common/_modal.scss b/app/styles/common/_modal.scss index d19155d5..20942dee 100644 --- a/app/styles/common/_modal.scss +++ b/app/styles/common/_modal.scss @@ -43,9 +43,6 @@ } &__buttons { text-align: right; - button ~ button { - margin-left: $small-spacing; - } > button { margin-bottom: $small-spacing; } diff --git a/app/styles/themes/_light.scss b/app/styles/themes/_light.scss index 8ebd54a2..59be93e5 100644 --- a/app/styles/themes/_light.scss +++ b/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); } diff --git a/app/styles/utils/_auto-type-hint.scss b/app/styles/utils/_auto-type-hint.scss index 14bb337b..fd746a6c 100644 --- a/app/styles/utils/_auto-type-hint.scss +++ b/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; diff --git a/app/styles/utils/_selection.scss b/app/styles/utils/_selection.scss index 9eaa48b6..af769883 100644 --- a/app/styles/utils/_selection.scss +++ b/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); + } } diff --git a/app/templates/list-item-short.hbs b/app/templates/list-item-short.hbs index 5ffe2b52..126dfe75 100644 --- a/app/templates/list-item-short.hbs +++ b/app/templates/list-item-short.hbs @@ -4,5 +4,6 @@ {{~else~}} {{~/if}} - {{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}{{description}} + {{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}} + {{#if description}}{{description}}{{else}} {{/if}} diff --git a/app/templates/menu/menu-item.hbs b/app/templates/menu/menu-item.hbs index b521cb27..f7215567 100644 --- a/app/templates/menu/menu-item.hbs +++ b/app/templates/menu/menu-item.hbs @@ -10,7 +10,8 @@ {{#if customIcon~}} {{~else~}} - + {{~/if}} {{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}} {{#if options}} diff --git a/app/templates/settings/settings-general.hbs b/app/templates/settings/settings-general.hbs index 74c8779e..f813e790 100644 --- a/app/templates/settings/settings-general.hbs +++ b/app/templates/settings/settings-general.hbs @@ -60,6 +60,10 @@ {{/each}} +
+
{{res 'setGenMoreThemes'}}
+ +