🔀 Merge pull request #319 from Lissy93/FIX/ui-editor-improvments

[FIX] UI Bug Fixes for Interactive Editor + Style Refactor
Fixes #301
Fixes #310 
Fixes #311 
Fixes #312

.github/.lycheeexclude

@@ -0,0 +1,14 @@
+# Ignore list, for automated broken link checking
+
+https://fonts.gstatic.com/**
+https://metager.org/meta/**
+https://developers.cloudflare.com/**
+
+http://localhost**
+https://localhost**
+http://192.168**
+https://192.168**
+file:///github/**
+http://[dashy-location]**
+https://[dashy-location]**
+**.local/**

.github/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 💄 1.9.1 - Editor and Theming Fixes and Improvements [PR #319](https://github.com/Lissy93/dashy/pull/319)
+- Bug fixes for interactive editor: #310, #311, #312
+- Adds option to modify text font through the UI
+- Adds two new themes: One Dark and Adventure
+- Theming stylesheet refactor, better inheritance
+
 ## 🐳 1.9.0 - Alpha of Dashy-Lite Docker Container [PR #306](https://github.com/Lissy93/dashy/pull/306)
 - Create an Alpine-based container, that serves the built app up with plain NGINX, instead of Node.
 - This is much lighter, but doesn't currently support any of the server-side actions (like status-checks, and writing changes to disk)

.github/pr-badge.yml

@@ -1,77 +1,6 @@
 # Config file for pull-request-badge. See: https://pullrequestbadge.com/ by @stefanbuck
 # Dynamically inserts status badges into PR description, based on certain conditions
 
-# Checks if the required sections are missing
-- label: ⚠️Missing
-  message: Category
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Category') === false
-- label: ⚠️Missing
-  message: Overview
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Overview') === false
-- label: ⚠️Missing
-  message: Quality Checklist
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Code Quality Checklist') === false
-- label: ⚠️Description
-  message: Incomplete
-  color: '#f25265'
-  when: $payload.pull_request.body.length < 25
-- label: ⚠️Missing
-  message: Label
-  color: '#f25265'
-  when: $labels.length == 0
-
-# Show note when task list has unfinished items
-- label: ⚠️Notice
-  message: Unchecked Tasks
-  when: $payload.pull_request.body.includes('- [ ] ')
-  color: '#f25265'
-
-# Show badge indicating PR status
-- label: Status
-  message: ✏️ Draft
-  when: $isDraft
-  color: '#ffa933'
-- label: Status
-  message: 🧱 Work in Progress
-  when: $payload.pull_request.title.includes('WIP')
-  color: '#29e3f4'
-- label: Status
-  message: ✅ Ready
-  color: '#3ef963'
-  when: $labels.includes('🔀 Ready for Merge')
-
-# Add size label based on very large or tiny PRs
-- label: PR Size
-  message: Extra Large
-  color: '#f9833e'
-  when: '$additions > 1000'
-- label: PR Size
-  message: Large
-  color: '#f4b546'
-  when: '$additions > 500 && $additions < 1000'
-- label: PR Size
-  message: Medium
-  color: '#f3ff59'
-  when: '$additions > 10 && $additions < 500'
-- label: PR Size
-  message: Quick
-  color: '#3eef8b'
-  when: '$additions < 10'
-
-# Show PR number, to destination and from destination
-- label: '#$prNumber'
-  message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
-  color: '#ab5afc'
-  url: 'https://github.com/$slug/tree/$branchName'
-
-# Show total code added minus deleted
-- label: New Code
-  message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
-  color: '#dddd00'
-
 # Show submitting user's username and profile link
 - label: 💕 Submitted by
   message: $payload.pull_request.user.login
@@ -125,6 +54,77 @@
   color: '#39b0fd'
   when: $labels.includes('🌐 Language')
 
+# Add size label based on very large or tiny PRs
+- label: PR Size
+  message: Extra Large
+  color: '#f9833e'
+  when: '$additions > 1000'
+- label: PR Size
+  message: Large
+  color: '#f4b546'
+  when: '$additions > 500 && $additions < 1000'
+- label: PR Size
+  message: Medium
+  color: '#f3ff59'
+  when: '$additions > 10 && $additions < 500'
+- label: PR Size
+  message: Quick
+  color: '#3eef8b'
+  when: '$additions < 10'
+
+# Show badge indicating PR status
+- label: Status
+  message: ✏️ Draft
+  when: $isDraft
+  color: '#ffa933'
+- label: Status
+  message: 🧱 Work in Progress
+  when: $payload.pull_request.title.includes('WIP')
+  color: '#29e3f4'
+- label: Status
+  message: ✅ Ready
+  color: '#3ef963'
+  when: $labels.includes('🔀 Ready for Merge')
+
+# Show PR number, to destination and from destination
+- label: '#$prNumber'
+  message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
+  color: '#ab5afc'
+  url: 'https://github.com/$slug/tree/$branchName'
+
+# Show total code added minus deleted
+- label: New Code
+  message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
+  color: '#dddd00'
+
+# Checks if the required sections are missing
+- label: ⚠️Missing
+  message: Category
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Category') === false
+- label: ⚠️Missing
+  message: Overview
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Overview') === false
+- label: ⚠️Missing
+  message: Quality Checklist
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Code Quality Checklist') === false
+- label: ⚠️Description
+  message: Incomplete
+  color: '#f25265'
+  when: $payload.pull_request.body.length < 25
+- label: ⚠️Missing
+  message: Label
+  color: '#f25265'
+  when: $labels.length == 0
+
+# Show note when task list has unfinished items
+- label: ⚠️Notice
+  message: Unchecked Tasks
+  when: $payload.pull_request.body.includes('- [ ] ')
+  color: '#f25265'
+
 # Show warning, when certain tags are applied
 - label: Warning
   message: ⛔ Do Not Merge

.github/workflows/docs-link-checker.yml

@@ -11,10 +11,15 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - name: Load Excludes
+        run: |
+          LYCHEE_EXCLUDE=$(sed -e :a  -e 'N;s/\n/ /;ta' .github/.lycheeexclude)
+          echo "LYCHEE_EXCLUDE=$LYCHEE_EXCLUDE" >> $GITHUB_ENV
+
       - name: Check for Broken Links
         uses: lycheeverse/[email protected]
         with:
-          args: --verbose -a 200,302,304,429 --no-progress **/*.md **/*.html
+          args: --verbose -a 200,302,304,429 --exclude ${{ env.LYCHEE_EXCLUDE }} --exclude-mail --no-progress **/*.md
         env:
           GITHUB_TOKEN: ${{secrets.BOT_GITHUB_TOKEN}}
           LYCHEE_OUT: .github/broken-link-report.md

docs/status-indicators.md

@@ -65,7 +65,7 @@ If the status is always returning an error, despite the service being online, th
 If your service requires requests to include any authorization in the headers, then use the  `statusCheckHeaders` property, as described above.
 If you are still having issues, it may be because your target application is blocking requests from Dashy's IP. This is a [CORS error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), and can be fixed by setting the headers on your target app, to include:
 ```
-Access-Control-Allow-Origin: https://location-of-dashy/
+Access-Control-Allow-Origin: https://[dashy-location]/
 Vary: Origin
 ```
 If the URL you are checking is not using HTTPS, then you may need to disable the rejection of insecure requests. This can be done by setting `statusCheckAllowInsecure` to true for a given item.

package.json

@@ -1,8 +1,9 @@
 {
   "name": "Dashy",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "license": "MIT",
   "main": "server",
+  "author": "Alicia Sykes <[email protected]> (https://aliciasykes.com)",
   "scripts": {
     "start": "node server",
     "dev": "vue-cli-service serve",

src/assets/locales/en.json

@@ -101,6 +101,7 @@
     "export-button": "Export Custom Variables",
     "reset-button": "Reset Styles for",
     "show-all-button": "Show All Variables",
+    "change-fonts-button": "Change Fonts",
     "save-button": "Save",
     "cancel-button": "Cancel",
     "saved-toast": "{theme} Updated Successfully",

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -152,6 +152,7 @@ export default {
       }
       InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
       this.showToast(this.$t('config-editor.success-msg-local'), true);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
     writeToDisk() {
       // 1. Convert JSON into YAML
@@ -211,7 +212,7 @@ div.edit-mode-bottom-banner {
   /* Main sections */
   .edit-banner-section {
     padding: 0.5rem;
-    height: 100%;
+    height: 90%;
     /* Section sub-titles */
     p.section-sub-title {
       margin: 0;
@@ -234,7 +235,7 @@ div.edit-mode-bottom-banner {
       grid-template-columns: repeat(2, 1fr);
       button {
         margin: 0.25rem;
-        height: fit-content;
+        height: stretch;
       }
       p.section-sub-title {
         grid-column-start: span 2;

src/components/LinkItems/Collapsable.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
+    :class="`collapsable ${rowColSpanClass} ${collapseClass}`"
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
       :id="sectionKey"
       class="toggle"
       type="checkbox"
-      :checked="getCollapseState()"
+      :checked="isExpanded"
       @change="collapseChanged"
       tabIndex="-1"
     >
@@ -56,6 +56,19 @@ export default {
       if (this.isEditMode) return undefined;
       return `collapsible-${this.uniqueKey}`;
     },
+    collapseClass() {
+      return !this.isExpanded ? ' is-collapsed' : 'is-open';
+    },
+    rowColSpanClass() {
+      const { rows, cols, checkSpanNum } = this;
+      return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
+    },
+  },
+  data: () => ({
+    isExpanded: false,
+  }),
+  mounted() {
+    this.isExpanded = this.getCollapseState();
   },
   methods: {
     /* Check that row & column span is valid, and not over the max */
@@ -69,29 +82,28 @@ export default {
     sanitizeCustomStyles(userCss) {
       return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
     },
-    /* If not already done, then add object structure to local storage */
+    /* 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(
-        localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
-      );
-      if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
-      try { // Check storage is valid JSON, and has not been corrupted
-        JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
-      } catch {
+      const initStorage = () => localStorage.setItem(storageKey, JSON.stringify({}));
+      // If not yet set, then call initialize
+      if (!localStorage[storageKey]) {
         initStorage();
+        return {};
       }
-      return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
+      // Otherwise, return value of local storage
+      return JSON.parse(localStorage[storageKey]);
     },
-    /* If not specified by user, get last state from local storage */
+    /* If specified by user, return conf collapse state, otherwise check local storage */
     getCollapseState() {
-      if (this.collapsed !== undefined) return !this.collapsed;
-      const collapseStateObject = this.initialiseStorage();
-      let collapseState = !this.collapsed;
+      if (this.collapsed !== undefined) return !this.collapsed; // Check users config
+      const collapseStateObject = this.initialiseStorage(); // Check local storage
       if (collapseStateObject[this.uniqueKey] !== undefined) {
-        collapseState = collapseStateObject[this.uniqueKey];
+        return collapseStateObject[this.uniqueKey];
       }
-      return collapseState;
+      // Nothing specified, return Open
+      return true;
     },
     /* When section collapsed, update local storage, to remember for next time */
     setCollapseState(id, newState) {
@@ -104,9 +116,10 @@ export default {
     },
     /* 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(), whatChanged.srcElement.checked);
+        this.setCollapseState(this.uniqueKey.toString(), this.isExpanded);
       }
     },
     openEditModal() {