🔀 Merge pull request #966 from Lissy93/feature/925_default-icons

[FEATURE] Adds option for default icon
Fixes #925

docs/configuring.md

@@ -112,6 +112,7 @@ The following file provides a reference of all supported configuration options.
 **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
 **`faviconApi`** | `enum` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `iconhorse`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info
 **`auth`** | `object` | _Optional_ | All settings relating to user authentication. See [`auth`](#appconfigauth-optional)
+**`defaultIcon`** | `string` | _Optional_ | An icon to be applied to any items, which don't already have an icon set. See [Icon Docs](/docs/icons.md#default-icon) for more info
 **`layout`** | `enum` | _Optional_ | Layout for homepage, either `horizontal`, `vertical` or `auto`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified and overridden from the UI.
 **`iconSize`** | `enum` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI.
 **`colCount`** | `number` | _Optional_ | The number of columns of sections displayed on the homepage, using the default view. Should be in integer between `1` and `8`. Note that by default this is applied responsively, based on current screen size, and specifying a value here will override this behavior, which may not be desirable.

docs/icons.md

@@ -11,6 +11,7 @@ Both sections and items can have an icon, which is specified using the `icon` at
 - [Material Icons](#material-design-icons)
 - [Icons by URL](#icons-by-url)
 - [Local Icons](#local-icons)
+- [Using a Default Icon](#default-icon)
 - [No Icon](#no-icon)
 
 <p align="center">
@@ -172,6 +173,12 @@ You can also use sub-folders within the `item-icons` directory to keep things or
 
 ---
 
+## Default Icon
+
+If you'd like to set a default icon, to be applied to any items which don't have an icon already set, then this can be done under `appConfig.defaultIcon`.
+
+---
+
 ## No Icon
 
 If you don't wish for a given item or section to have an icon, just leave out the `icon` attribute.

src/components/LinkItems/Item.vue

@@ -14,16 +14,16 @@
       :style="customStyle"
     >
       <!-- Item Text -->
-      <div :class="`tile-title  ${!item.icon? 'bounce no-icon': ''}`" :id="`tile-${item.id}`" >
+      <div :class="`tile-title  ${!itemIcon? 'bounce no-icon': ''}`" :id="`tile-${item.id}`" >
         <span class="text">{{ item.title }}</span>
         <p class="description">{{ item.description }}</p>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="item.icon" :url="item.url" :size="size" :color="item.color"
+      <Icon :icon="itemIcon" :url="item.url" :size="size" :color="item.color"
         v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon"
-        :isSmall="!item.icon || size === 'small'"
+        :isSmall="!itemIcon || size === 'small'"
         :openingMethod="accumulatedTarget"  position="bottom right"
         :hotkey="item.hotkey" />
       <!-- Status indicator dot (if enabled) showing weather service is available -->
@@ -65,7 +65,6 @@ import MoveItemTo from '@/components/InteractiveEditor/MoveItemTo';
 import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
 import ItemMixin from '@/mixins/ItemMixin';
-// import { targetValidator } from '@/utils/ConfigHelpers';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import { modalNames } from '@/utils/defaults';
 
@@ -89,6 +88,10 @@ export default {
     EditModeIcon,
   },
   computed: {
+    /* Returns either item.icon, or appConfig.defaultIcon, or null */
+    itemIcon() {
+      return this.item.icon || this.$store.getters.appConfig?.defaultIcon;
+    },
     makeColumnCount() {
       if ((this.sectionDisplayData || {}).itemCountX) return this.sectionDisplayData.itemCountX;
       if (this.sectionWidth < 380) return 1;
@@ -101,8 +104,7 @@ export default {
     /* Based on item props, adjust class names */
     makeClassList() {
       const { isAddNew, isEditMode, size } = this;
-      const { icon } = this.item;
-      return `size-${size} ${!icon ? 'short' : ''} `
+      return `size-${size} ${!this.itemIcon ? 'short' : ''} `
         + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
     },
     /* Used by certain themes (material), to show animated CSS icon */

src/components/LinkItems/Section.vue

@@ -389,9 +389,9 @@ export default {
     justify-content: space-around;
     .widget-base  {
       min-width: 10rem;
+      width: stretch;
       width: -webkit-fill-available;
       width: -moz-available;
-      width: fill-available;
     }
   }
 }

src/utils/ConfigSchema.json

@@ -193,6 +193,11 @@
           "default": "allesedv",
           "description": "Which service to use to resolve favicons. Set to local to do this locally instead"
         },
+        "defaultIcon": {
+          "title": "Default Icon",
+          "type": "string",
+          "description": "An icon to apply to any items which don't yet have the icon set"
+        },
         "layout": {
           "title": "Default Layout",
           "type": "string",