[FIX] Section Height (colourful theme)

.github/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 🐛 2.0.1 - Fixes Section Height [PR #462](https://github.com/Lissy93/dashy/pull/462)
+- Adds `cutToHeight` to config schema (Re: #461)
+- Removes the full-height CSS from colorful theme
+- Improved config validation warnings in JSON editor
+- Removes empty Keycloak block from appConfig editor
+- Adds typechecking to search and clear search for Safari
+
 ## ⚡️ 2.0.0 - Small Fixes and Docker Multi-Arch Build [PR #451](https://github.com/Lissy93/dashy/pull/451)
 - Fixes full-height sections for mobile and Safari (Re: #432, #442)
 - Fixes empty section visible in search (Re: #447)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <[email protected]> (https://aliciasykes.com)",

src/components/Configuration/JsonEditor.vue

@@ -198,7 +198,7 @@ export default {
             errorMessages.push({
               type: 'validation',
               msg: `${this.$t('config-editor.warning-msg-validation')}: `
-                + `${error.error.keyword} ${error.error.message}`,
+                  + `${(error.error || error).dataPath} ${(error.error || error).message}`,
             });
             break;
           case 'error':

src/components/InteractiveEditor/EditAppConfig.vue

@@ -86,8 +86,15 @@ export default {
     /* Remove any attribute which has an undefined value before saving */
     removeUndefinedValues(rawAppConfig) {
       const raw = rawAppConfig;
-      const isEmpty = (value) => (value === undefined);
-      Object.keys(raw).forEach(key => isEmpty(raw[key]) && delete raw[key]);
+      const isEmptyObject = (obj) => (typeof obj === 'object' && Object.keys(obj).length === 0);
+      const isEmpty = (value) => (value === undefined || isEmptyObject(value));
+      // Delete empty values
+      Object.keys(raw).forEach(key => {
+        if (isEmpty(raw[key])) delete raw[key];
+      });
+      // If KC config empty, delete it
+      const kcConfig = raw.auth.keycloak;
+      if (!kcConfig.clientId && !kcConfig.realm && !kcConfig.serverUrl) delete raw.auth.keycloak;
       return raw;
     },
   },

src/components/Settings/SettingsContainer.vue

@@ -100,11 +100,13 @@ export default {
     this.settingsVisible = this.getSettingsVisibility();
   },
   methods: {
+    /* Emit event to begin/ continue searching */
     userIsTypingSomething(something) {
       this.$emit('user-is-searchin', something);
     },
+    /* Call function to clear search field, remove focus and reset results */
     clearFilterInput() {
-      this.$refs.SearchBar.clearFilterInput();
+      if (this.$refs.SearchBar) this.$refs.SearchBar.clearFilterInput();
     },
     getInitialTheme() {
       return this.appConfig.theme || '';
@@ -115,10 +117,12 @@ export default {
       if (typeof userThemes === 'string') return [userThemes];
       return userThemes;
     },
+    /* Show / hide settings */
     toggleSettingsVisibility() {
       this.settingsVisible = !this.settingsVisible;
       localStorage.setItem(localStorageKeys.HIDE_SETTINGS, this.settingsVisible);
     },
+    /* Get initial settings visibility, either from appConfig, local storage or browser type */
     getSettingsVisibility() {
       const screenWidth = document.body.clientWidth;
       if (screenWidth && screenWidth < 600) return false;

src/components/Workspace/SideBar.vue

@@ -64,10 +64,10 @@ export default {
     /* If an initial URL is specified, then open relevant section */
     openDefaultSection() {
       if (!this.initUrl) return;
-      const process = (url) => url.replace(/[^\w\s]/gi, '').toLowerCase();
+      const process = (url) => (url ? url.replace(/[^\w\s]/gi, '').toLowerCase() : undefined);
       const compare = (item) => (process(item.url) === process(this.initUrl));
-      this.sections.forEach((section, sectionIndex) => {
-        if (section.items.findIndex(compare) !== -1) this.openSection(sectionIndex);
+      this.sections.forEach((section, secIndex) => {
+        if (section.items && section.items.findIndex(compare) !== -1) this.openSection(secIndex);
       });
     },
   },

src/styles/color-themes.scss

@@ -353,9 +353,6 @@ html[data-theme='colorful'] {
   div.context-menu {
     border-color: var(--primary);
   }
-  .collapsable.is-open {
-    height: -webkit-fill-available;
-  }
 }
 
 html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] {

src/utils/ConfigSchema.json

@@ -530,6 +530,12 @@
                 "default": false,
                 "description": "If true, section needs to be clicked to open"
               },
+              "cutToHeight": {
+                "title": "Cut to Height",
+                "type": "boolean",
+                "default": false,
+                "description": "By default, sections will fill available space. Set this option to true to match section height with content height"
+              },
               "color": {
                 "title": "Color",
                 "type": "string",