From d040d212fc076829dd975345b8b6fafe8a6624b3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 31 Mar 2021 21:52:02 +0100
Subject: [PATCH] Adds option for custom section colors and additional styles

---
 src/components/Collapsable.vue | 6 +++++-
 src/components/ItemGroup.vue   | 2 ++
 src/data/conf.yml              | 4 ----
 src/views/Home.vue             | 3 +--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index 19cdb71b..f91dd6e8 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,5 +1,7 @@
 <template>
-  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`">
+  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
+    :style="`${color ? 'background: '+color : ''}; ${customStyles}`"
+  >
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -28,6 +30,8 @@ export default {
     collapsed: Boolean,
     cols: Number,
     rows: Number,
+    color: String,
+    customStyles: String,
   },
   data() {
     return {
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 36c76047..50b676a8 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -5,6 +5,8 @@
     :collapsed="displayData.collapsed"
     :cols="displayData.cols"
     :rows="displayData.rows"
+    :color="displayData.color"
+    :customStyles="displayData.customStyles"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
diff --git a/src/data/conf.yml b/src/data/conf.yml
index 6749997d..880b0a78 100644
--- a/src/data/conf.yml
+++ b/src/data/conf.yml
@@ -47,10 +47,6 @@ sections:
     iconType: img
     url: https://192.168.1.1/ui/wireguard/general
 - name: DNS Device
-  displayData:
-    collapsed: false
-    rows: 2
-    cols: 2
   collapsed: false
   items:
   - title: Pi-Hole
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a4c9d56a..c1d0fb1e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -59,8 +59,7 @@ export default {
       });
     },
     getDisplayData(section) {
-      const defaultDisplayData = { collapsed: null, rows: null, cols: null };
-      return !section.displayData ? defaultDisplayData : section.displayData;
+      return !section.displayData ? {} : section.displayData;
     },
   },
 };