diff --git a/docs/configuring.md b/docs/configuring.md index 9807070c..4c915893 100644 --- a/docs/configuring.md +++ b/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. diff --git a/docs/icons.md b/docs/icons.md index 2e97b7c3..b58481c1 100644 --- a/docs/icons.md +++ b/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)

@@ -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. diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 581d4a7a..feafb75d 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -14,16 +14,16 @@ :style="customStyle" > -

+
{{ item.title }}

{{ item.description }}

- @@ -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 */ diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index 60d6c188..f1659ed5 100644 --- a/src/components/LinkItems/Section.vue +++ b/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; } } } diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index 3506bf34..bce7ddfe 100644 --- a/src/utils/ConfigSchema.json +++ b/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",