🔀 Merge pull request #663 from Lissy93/FIX/user-suggestions-fixes-2.0.9

[FIX] User Suggestions & Bug Fixes Fixes #564 Fixes #590 Fixes #626 Fixes #629 Fixes #632 Fixes #640 Fixes #644 Fixes #645 Fixes #646 Fixes #651 Fixes #654 Fixes #655 Fixes #657 Fixes #659 Fixes #660
Lissy93 · May 20, 2022 · 78bed0f · 78bed0f
2 parents 545f645 + 6d2e37d
commit 78bed0f
Show file tree

Hide file tree

Showing 32 changed files with 251 additions and 118 deletions.
diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## ✨ 2.0.9 Adds Multi-Page Support [PR #663](https://github.com/Lissy93/dashy/pull/663)
+- Fix KeyCloak API URL (#564)
+- Fix guest has config access (#590)
+- Fix collapsible content in multi-page support (#626)
+- Fix layout and item size buttons ( #629)
+- Refactor make request in RSS widget (#632)
+- Fix material-design-icons header in schema (#640)
+- Add option to hide seconds in clock widget (#644)
+- Fix pageInfo not being read in router (#645)
+- Fix startingView not honored (#646)
+- Fix Status Check default (#651)
+- Add option to hide image in SportsScores Widget (#654)
+- Add Adventure-basic theme (#655)
+- Write docs for sub-items (#657)
+- Add Font-Awesome displaying as square to troubleshooting guide (#659)
+- Show expand / collapse in context menu (#660)
+- Only deploy new release when relevant files have changed
+
 ## ✨ 2.0.8 Adds Multi-Page Support [PR #617](https://github.com/Lissy93/dashy/pull/617)
 - Adds support for multiple pages per-dashboard
 - Adds new attribute at root of main config file: `pages`

diff --git a/.github/LATEST_CHANGELOG.md b/.github/LATEST_CHANGELOG.md
@@ -1,4 +1,17 @@
-## ✨ 2.0.8 Adds Multi-Page Support [PR #617](https://github.com/Lissy93/dashy/pull/617)
-- Adds support for multiple pages per-dashboard
-- Adds new attribute at root of main config file: `pages`
-- Updates router and nav-bar to automatically create paths for both local and remote configs
+## ✨ 2.0.9 Adds Multi-Page Support [PR #663](https://github.com/Lissy93/dashy/pull/663)
+- Fix KeyCloak API URL (#564)
+- Fix guest has config access (#590)
+- Fix collapsible content in multi-page support (#626)
+- Fix layout and item size buttons ( #629)
+- Refactor make request in RSS widget (#632)
+- Fix material-design-icons header in schema (#640)
+- Add option to hide seconds in clock widget (#644)
+- Fix pageInfo not being read in router (#645)
+- Fix startingView not honored (#646)
+- Fix Status Check default (#651)
+- Add option to hide image in SportsScores Widget (#654)
+- Add Adventure-basic theme (#655)
+- Write docs for sub-items (#657)
+- Add Font-Awesome displaying as square to troubleshooting guide (#659)
+- Show expand / collapse in context menu (#660)
+- Only deploy new release when relevant files have changed
diff --git a/.github/workflows/docker-build-publish.yml b/.github/workflows/docker-build-publish.yml
@@ -6,6 +6,11 @@ on:
   push:
     branches: ['master']
     tags: [v*]
+    paths:
+      - '**.js'
+      - 'src/**'
+      - 'public/**'
+      - 'services/**'
 
 env:
   DH_IMAGE: ${{ secrets.DOCKER_REPO }}

diff --git a/README.md b/README.md
@@ -408,14 +408,15 @@ Dashy supports multiple languages and locales. When available, your language sho
 - 🇳🇱 **Dutch**: `nl` - Contributed by **[@evroon](https://github.com/evroon)**
 - 🇲🇫 **French**: `fr` - Contributed by **[@EVOTk](https://github.com/EVOTk)**
 - 🇩🇪 **German**: `de` - Contributed by **[@Niklashere](https://github.com/Niklashere)**
+- 🇮🇹 **Italian**: `it` - Contributed by **[@alexdelprete](https://github.com/alexdelprete)**
 - 🇳🇴 **Norwegian Bokmål**: `nb` - Contributed by **[@rubjo](https://github.com/rubjo)**
 - 🇵🇱 **Polish**: `pl` - Contributed by **[@skaarj1989](https://github.com/skaarj1989)**
+- 🇵🇹 **Portuguese**: `pt` - Contributed by **[@LeoColman](https://github.com/LeoColman)**
 - 🇪🇸 **Spanish**: `es` - Contributed by **[@lu4t](https://github.com/lu4t)**
 - 🇸🇮 **Slovenian**: `sl` - Contributed by **[@UrekD](https://github.com/UrekD)**
 - 🇸🇪 **Swedish**: `sv` - Contributed by **[@BOZG](https://github.com/BOZG)**
-- 🇮🇹 **Italian**: `it` - Contributed by **[@alexdelprete](https://github.com/alexdelprete)**
-- 🇵🇹 **Portuguese**: `pt` - Contributed by **[@LeoColman](https://github.com/LeoColman)**
-- 🇷🇺 **Russian**: `ru` - Contributed by Anon
+- 🇹🇼 **Traditional Chinese**: `zh-TW` - Contributed by **[@stanly0726](https://github.com/stanly0726)**
+- 🇷🇺 **Russian**: `ru`
 - 🇦🇪 **Arabic**: `ar`
 - 🇮🇳 **Hindi**: `hi`
 - 🇯🇵 **Japanese**: `ja`

diff --git a/docs/authentication.md b/docs/authentication.md
@@ -146,6 +146,8 @@ appConfig:
       clientId: 'dashy'
 ```
 
+Note that if you are using Keycloak V 17 or older, you will also need to set `legacySupport: true` (also under `appConfig.auth.keycloak`). This is because the API endpoint was updated in later versions.
+
 ### 4. Add groups and roles (Optional)
 Keycloak allows you to assign users roles and groups. You can use these values to configure who can access various sections in Dashy.
 Keycloak server administration and configuration is a deep topic; please refer to the [server admin guide](https://www.keycloak.org/docs/latest/server_admin/index.html#assigning-permissions-and-access-using-roles-and-groups) to see details about creating and assigning roles and groups.

diff --git a/docs/configuring.md b/docs/configuring.md
@@ -163,6 +163,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`serverUrl`** | `string` | Required | The URL (or URL/ IP + Port) where your keycloak server is running
 **`realm`** | `string` | Required | The name of the realm (must already be created) that you want to use
 **`clientId`** | `string` | Required | The Client ID of the client you created for use with Dashy
+**`legacySupport`** | `boolean` | _Optional_ | If using Keycloak 17 or older, then set this to `true`
 
 **[⬆️ Back to Top](#configuring)**
 

diff --git a/docs/pages-and-sections.md b/docs/pages-and-sections.md
@@ -56,3 +56,43 @@ The following example shows creating a config, publishing it as a [Gist](https:/
 Only top-level fields supported by sub-pages are `pageInfo` and `sections`. The `appConfig` and `pages` will always be inherited from your main `conf.yml` file. Other than that, sub-pages behave exactly the same as your default view, and can contain sections, items, widgets and page info like nav links, title and logo.
 
 Note that since page paths are required by the router, they are set at build-time, not run-time, and so a rebuild (happens automatically) is required for changes to page paths to take effect (this only applies to changes to the `pages` array, rebuild isn't required for editing page content).
+
+
+## Sub-Items
+
+A normal section will contain zero or more items, for example:
+
+```yaml
+- name: Coding
+  icon: far fa-code
+  items:
+  - title: GitHub
+    url: https://github.com/
+  - title: StackOverflow
+    url: http://stackoverflow.com/
+```
+
+But items can also be grouped together, referred to as sub-items. This is useful for a group of less frequently used items, which you don't want to take up too much space, or for action buttons (_coming soon_).
+
+Item groups may also have an optional title.
+
+```yaml
+- name: Coding
+  icon: far fa-code
+  items:
+  - title: Normal Item 1
+  - title: Normal Item 2
+  - subItems:
+    - title: JavaScript
+      url: https://developer.mozilla.org
+      icon: si-javascript
+    - title: TypeScript
+      url: https://www.typescriptlang.org/docs
+      icon: si-typescript
+    - title: Svelt
+      url: https://svelte.dev/docs
+      icon: si-svelte
+    - title: Go
+      url: https://go.dev/doc
+      icon: si-go
+```
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
@@ -30,12 +30,13 @@
 - [Diagnosing Widget Errors](#widget-errors)
 - [Fixing Widget CORS Errors](#widget-cors-errors)
 - [Weather Forecast Widget 401](#weather-forecast-widget-401)
-- [Keycloak Redirect Error](#keycloak-redirect-error)
+- [Font Awesome Icons not Displaying](#font-awesome-icons-not-displaying)
 - [How-To Open Browser Console](#how-to-open-browser-console)
 - [Git Contributions not Displaying](#git-contributions-not-displaying)
 
 
 ---
+
 ## `Refused to Connect` in Modal or Workspace View
 
 This is not an issue with Dashy, but instead caused by the target app preventing direct access through embedded elements. 
@@ -214,6 +215,13 @@ You should also ensure that Keycloak is correctly configured, with a user, realm
 
 For more details on how to set headers, see the [Example Headers](/docs/management.md#setting-headers) in the management docs, or reference the documentation for your proxy.
 
+If you're running in Kubernetes, you will need to enable CORS ingress rules, see [docs](https://kubernetes.github.io/ingress-nginx/user-guide/nginx-configuration/annotations/#enable-cors), e.g:
+
+```
+nginx.ingress.kubernetes.io/cors-allow-origin: "https://dashy.example.com"
+nginx.ingress.kubernetes.io/enable-cors: "true"
+```
+
 See also: #479, #409, #507, #491, #341, #520
 
 ---
@@ -412,22 +420,19 @@ A future update will be pushed out, to use a free weather forecasting API.
 
 ---
 
-## Keycloak Redirect Error
+## Font Awesome Icons not Displaying
 
-Firstly, ensure that in your Keycloak instance you have populated the Valid Redirect URIs field ([screenshot](https://user-images.githubusercontent.com/1862727/148599768-db4ee4f8-72c5-402d-8f00-051d999e6267.png)) with the URL to your Dashy instance.
+Usually, Font Awesome will be automatically enabled if one or more of your icons are using Font-Awesome. If this is not happening, then you can always manually enable (or disable) Font Awesome by setting: [`appConfig`](/docs/configuring.md#appconfig-optional).`enableFontAwesome` to `true`.
 
-You may need to specify CORS headers on your Keycloak instance, to allow requests coming from Dashy, e.g:
+If you are trying to use a premium icon, then you must have a [Pro License](https://fontawesome.com/plans). You'll then need to specify your Pro plan API key under `appConfig.fontAwesomeKey`. You can find this key, by logging into your FA account, navigate to Account → [Kits](https://fontawesome.com/kits) → New Kit → Copy Kit Code. The code is a 10-digit alpha-numeric code, and is also visible within the new kit's URL, for example: `81e48ce079`.
 
-```
-Access-Control-Allow-Origin: https://dashy.example.com
-```
+Be sure that you're specifying the icon category and name correctly. You're icon should look be `[category] fa-[icon-name]`. The following categories are supported: `far` _(regular)_, `fas` _(solid)_, `fal`_(light)_, `fad` _(duo-tone)_ and `fab`_(brands)_. With the exception of brands, you'll usually want all your icons to be in from same category, so they look uniform.
 
-If you're running in Kubernetes, you will need to enable CORS ingress rules, see [docs](https://kubernetes.github.io/ingress-nginx/user-guide/nginx-configuration/annotations/#enable-cors), e.g:
+Ensure the icon you are trying to use, is available within [FontAwesome Version 5](https://fontawesome.com/v5/search).
 
-```
-nginx.ingress.kubernetes.io/cors-allow-origin: "https://dashy.example.com"
-nginx.ingress.kubernetes.io/enable-cors: "true"
-```
+Examples: `fab fa-raspberry-pi`, `fas fa-database`, `fas fa-server`, `fas fa-ethernet`
+
+Finally, check the [browser console](#how-to-open-browser-console) for any error messages, and raise a ticket if the issue persists.
 
 ---
 

diff --git a/docs/widgets.md b/docs/widgets.md
@@ -97,6 +97,7 @@ A simple, live-updating time and date widget with time-zone support. All fields
 **`format`** | `string` | _Optional_ | A country code for displaying the date and time in local format.<br>Specified as `[ISO-3166]-[ISO-639]`, for example: `en-AU`. See [here](https://www.fincher.org/Utilities/CountryLanguageList.shtml) for a full list of locales. Defaults to the browser / device's region
 **`customCityName`** | `string` |  _Optional_ | By default the city from the time-zone is shown, but setting this value will override that text
 **`hideDate`** | `boolean` |  _Optional_ | If set to `true`, the date and city will not be shown. Defaults to `false`
+**`hideSeconds`** | `boolean` |  _Optional_ | If set to `true`, seconds will not be shown. Defaults to `false`
 
 ##### Example
 
@@ -713,6 +714,7 @@ Show recent scores and upcoming matches from your favourite sports team. Data is
 **`pastOrFuture`** | `string` |  __Optional__ | Set to `past` to show scores for recent games, or `future` to show upcoming games. Defaults to `past`. You can change this within the UI
 **`apiKey`** | `string` | __Optional__ | Optionally specify your API key, which you can sign up for at [TheSportsDB.com](https://www.thesportsdb.com/)
 **`limit`** | `number` | __Optional__ | To limit output to a certain number of matches, defaults to `15`
+**`hideImage`** | `boolean` | __Optional__ | Set to `true` to not render the team / match banner image, defaults to `false`
 
 ##### Example
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@architect/sandbox": "^4.5.2",
+    "@babel/preset-env": "^7.17.10",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-plugin-pwa": "^4.5.15",
@@ -87,6 +88,12 @@
       "parser": "babel-eslint"
     }
   },
+  "babel": {
+    "presets": [
+      "@vue/app",
+      "@babel/preset-env"
+    ]
+  },
   "postcss": {
     "plugins": {
       "autoprefixer": {}

diff --git a/src/assets/interface-icons/section-expand-collapse.svg b/src/assets/interface-icons/section-expand-collapse.svg
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
@@ -195,6 +195,7 @@
     "section": {
       "open-section": "Open Section",
       "edit-section": "Edit",
+      "expand-collapse": "Expand / Collapse",
       "move-section": "Move To",
       "remove-section": "Remove"
     }

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
@@ -1,14 +1,16 @@
 <template>
   <div
-    :class="`collapsable ${rowColSpanClass} ${collapseClass} ${!cutToHeight ? 'full-height' : ''}`"
+    v-bind:class="[
+    { 'is-open': isExpanded, 'full-height': cutToHeight },
+    `collapsable ${rowColSpanClass}`
+    ]"
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
       :id="sectionKey"
       class="toggle"
       type="checkbox"
-      :checked="isExpanded"
-      @change="collapseChanged"
+      v-model="checkboxState"
       tabIndex="-1"
     >
     <label :for="sectionKey" class="lbl-toggle" tabindex="-1"
@@ -72,14 +74,42 @@ export default {
       const { rows, cols, checkSpanNum } = this;
       return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
     },
+    /* Used to fetch initial collapse state, and set new collapse state on change */
+    isExpanded: {
+      get() {
+        if (this.collapsed !== undefined) return !this.collapsed;
+        const collapseStateObject = this.locallyStoredCollapseStates();
+        if (collapseStateObject[this.uniqueKey] !== undefined) {
+          return collapseStateObject[this.uniqueKey];
+        }
+        return true;
+      },
+      set(newState) {
+        const collapseState = this.locallyStoredCollapseStates();
+        collapseState[this.uniqueKey] = newState;
+        localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
+      },
+    },
   },
   data: () => ({
-    isExpanded: false,
+    checkboxState: true,
   }),
   mounted() {
-    this.isExpanded = this.getCollapseState();
+    this.checkboxState = this.isExpanded;
+  },
+  watch: {
+    checkboxState(newState) {
+      this.isExpanded = newState;
+    },
+    uniqueKey() {
+      this.checkboxState = this.isExpanded;
+    },
   },
   methods: {
+    /* Either expand or collapse section, based on it's current state */
+    toggle() {
+      this.checkboxState = !this.checkboxState;
+    },
     /* Check that row & column span is valid, and not over the max */
     checkSpanNum(span, classPrefix) {
       const maxSpan = 6;
@@ -92,44 +122,14 @@ export default {
       return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
     },
     /* Returns local storage collapse state data, and if not yet set then initialized is */
-    initialiseStorage() {
-      const storageKey = localStorageKeys.COLLAPSE_STATE;
-      /* Initialize function will create and set a blank object to storage */
-      const initStorage = () => localStorage.setItem(storageKey, JSON.stringify({}));
+    locallyStoredCollapseStates() {
       // If not yet set, then call initialize
-      if (!localStorage[storageKey]) {
-        initStorage();
+      if (!localStorage[localStorageKeys.COLLAPSE_STATE]) {
+        localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify({}));
         return {};
       }
       // Otherwise, return value of local storage
-      return JSON.parse(localStorage[storageKey]);
-    },
-    /* If specified by user, return conf collapse state, otherwise check local storage */
-    getCollapseState() {
-      if (this.collapsed !== undefined) return !this.collapsed; // Check users config
-      const collapseStateObject = this.initialiseStorage(); // Check local storage
-      if (collapseStateObject[this.uniqueKey] !== undefined) {
-        return collapseStateObject[this.uniqueKey];
-      }
-      // Nothing specified, return Open
-      return true;
-    },
-    /* When section collapsed, update local storage, to remember for next time */
-    setCollapseState(id, newState) {
-      // Get the current localstorage collapse state object
-      const collapseState = JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
-      // Add the new state to it
-      collapseState[id] = newState;
-      // Stringify, and set the new object into local storage
-      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
-    },
-    /* Called when collapse state changes, trigger local storage update if needed */
-    collapseChanged(whatChanged) {
-      this.isExpanded = whatChanged.srcElement.checked;
-      if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
-        this.initialiseStorage();
-        this.setCollapseState(this.uniqueKey.toString(), this.isExpanded);
-      }
+      return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
     },
     openEditModal() {
       this.$emit('openEditSection');
@@ -216,7 +216,8 @@ export default {
       vertical-align: middle;
       margin-right: .7rem;
       transform: translateY(-2px);
-      transition: transform .2s ease-out;
+      opacity: 0.3;
+      transition: all 0.4s ease-in-out;
     }
   }
 
@@ -254,6 +255,16 @@ export default {
     top: 0.5rem;
     margin-left: 0.2rem;
     margin-right: 0.2rem;
+    opacity: 0.3;
+    transition: all 0.4s ease-in-out;
+  }
+
+  /* On section hover, set interface icons to full visible */
+  &:hover {
+    .edit-mode-item, label.lbl-toggle::before {
+      opacity: 1;
+      transition: all 0.2s ease-out;
+    }
   }
 
   /* Makes sections fill available space */