fix #1655: separated custom icons to make the download and selection buttons more visible

This commit is contained in:
antelle 2020-12-19 16:30:03 +01:00
parent ddd242b9df
commit 6c7b99af58
No known key found for this signature in database
GPG Key ID: 63C9777AAB7C563C
4 changed files with 14 additions and 5 deletions

View File

@ -21,11 +21,14 @@ class IconSelectView extends View {
}; };
render() { render() {
const customIcons = this.model.file.getCustomIcons();
const hasCustomIcons = Object.keys(customIcons).length > 0;
super.render({ super.render({
sel: this.model.iconId, sel: this.model.iconId,
icons: IconMap, icons: IconMap,
canDownloadFavicon: !!this.model.url, canDownloadFavicon: !!this.model.url,
customIcons: this.model.file.getCustomIcons() customIcons,
hasCustomIcons
}); });
} }

View File

@ -7,7 +7,8 @@
flex-wrap: wrap; flex-wrap: wrap;
user-select: none; user-select: none;
padding-bottom: $base-padding-h; padding-bottom: $base-padding-h;
&--custom { &--custom,
&--actions {
padding-top: $base-padding-h; padding-top: $base-padding-h;
border-top: 1px solid var(--light-border-color); border-top: 1px solid var(--light-border-color);
} }

View File

@ -4,11 +4,11 @@
<i class="fa fa-{{icon}} icon-select__icon {{#ifeq ix ../sel}}icon-select__icon--active{{/ifeq}}" data-val="{{ix}}"></i> <i class="fa fa-{{icon}} icon-select__icon {{#ifeq ix ../sel}}icon-select__icon--active{{/ifeq}}" data-val="{{ix}}"></i>
{{/each}} {{/each}}
</div> </div>
<div class="icon-select__items icon-select__items--custom"> <div class="icon-select__items icon-select__items--actions">
<input type="file" class="icon-select__file-input hide-by-pos" accept="image/*" /> <input type="file" class="icon-select__file-input hide-by-pos" accept="image/*" />
{{#if canDownloadFavicon}} {{#if canDownloadFavicon}}
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-download" <span class="icon-select__icon icon-select__icon-btn icon-select__icon-download"
data-val="special" data-special="download" title="{{res 'iconFavTitle'}}"> data-val="special" data-special="download" title="{{res 'iconFavTitle'}}">
<i class="fa fa-cloud-download-alt"></i> <i class="fa fa-cloud-download-alt"></i>
</span> </span>
{{/if}} {{/if}}
@ -16,6 +16,9 @@
data-val="special" data-special="select" title="{{res 'iconSelCustom'}}"> data-val="special" data-special="select" title="{{res 'iconSelCustom'}}">
<i class="fa fa-ellipsis-h"></i> <i class="fa fa-ellipsis-h"></i>
</span> </span>
</div>
{{#if hasCustomIcons}}
<div class="icon-select__items icon-select__items--custom">
{{#each customIcons as |icon ci|}} {{#each customIcons as |icon ci|}}
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-custom {{#ifeq ci ../sel}}icon-select__icon--active{{/ifeq}}" <span class="icon-select__icon icon-select__icon-btn icon-select__icon-custom {{#ifeq ci ../sel}}icon-select__icon--active{{/ifeq}}"
data-val="{{ci}}"> data-val="{{ci}}">
@ -23,4 +26,5 @@
</span> </span>
{{/each}} {{/each}}
</div> </div>
{{/if}}
</div> </div>

View File

@ -3,6 +3,7 @@ Release notes
##### v1.17.0 (TBD) ##### v1.17.0 (TBD)
`+` automatically switching between dark and light theme `+` automatically switching between dark and light theme
`+` clear searchbox button `+` clear searchbox button
`+` favicon download improvements
##### v1.16.5 (2020-12-18) ##### v1.16.5 (2020-12-18)
`-` using custom OneDrive without a secret `-` using custom OneDrive without a secret