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

app/scripts/views/icon-select-view.js

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

app/styles/common/_icon-select.scss

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

app/templates/icon-select.hbs

@@ -4,11 +4,11 @@
         <i class="fa fa-{{icon}} icon-select__icon {{#ifeq ix ../sel}}icon-select__icon--active{{/ifeq}}" data-val="{{ix}}"></i>
         {{/each}}
     </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/*" />
         {{#if canDownloadFavicon}}
-        <span class="icon-select__icon icon-select__icon-btn icon-select__icon-download"
-              data-val="special" data-special="download" title="{{res 'iconFavTitle'}}">
+            <span class="icon-select__icon icon-select__icon-btn icon-select__icon-download"
+                  data-val="special" data-special="download" title="{{res 'iconFavTitle'}}">
             <i class="fa fa-cloud-download-alt"></i>
         </span>
         {{/if}}
@@ -16,6 +16,9 @@
               data-val="special" data-special="select" title="{{res 'iconSelCustom'}}">
             <i class="fa fa-ellipsis-h"></i>
         </span>
+    </div>
+    {{#if hasCustomIcons}}
+    <div class="icon-select__items icon-select__items--custom">
         {{#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}}"
               data-val="{{ci}}">
@@ -23,4 +26,5 @@
         </span>
         {{/each}}
     </div>
+    {{/if}}
 </div>

release-notes.md

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