Merge pull request #81 from Lissy93/snyk-upgrade-fd896a942c7568cefdd784c06a7012a0

[Snyk] Upgrade vue-material-tabs from 0.0.7 to 0.1.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -32,7 +32,7 @@
     "vue": "^2.6.10",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-js-modal": "^2.0.0-rc.6",
-    "vue-material-tabs": "^0.0.7",
+    "vue-material-tabs": "^0.1.2",
     "vue-prism-editor": "^1.2.2",
     "vue-router": "^3.0.3",
     "vue-select": "^3.11.2",

src/components/Configuration/ConfigContainer.vue

@@ -9,11 +9,11 @@
           Download Config
           </button>
         </a>
-        <button class="config-button center" @click="goToEdit()">
+        <button class="config-button center" @click="() => navigateToTab(2)">
           <EditIcon class="button-icon"/>
           Edit Config
         </button>
-        <button class="config-button center" @click="goToCustomCss()">
+        <button class="config-button center" @click="() => navigateToTab(3)">
           <CustomCssIcon class="button-icon"/>
           Edit Custom CSS
         </button>
@@ -119,18 +119,10 @@ export default {
     IconAbout,
   },
   methods: {
-    /* Seletcs the edit tab of the tab view */
-    goToEdit() {
-      const itemToSelect = this.$refs.tabView.navItems[2];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
-    },
-    goToMetaEdit() {
-      const itemToSelect = this.$refs.tabView.navItems[3];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
-    },
-    goToCustomCss() {
-      const itemToSelect = this.$refs.tabView.navItems[3];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    /* Progamatically navigates to a given tab by index */
+    navigateToTab(tabInxex) {
+      const itemToSelect = this.$refs.tabView.navItems[tabInxex];
+      this.$refs.tabView.activeTabItem(itemToSelect);
     },
     openRebuildAppModal() {
       this.$modal.show(modalNames.REBUILD_APP);
@@ -237,7 +229,7 @@ div.code-container {
   }
   .yaml-action-buttons {
     position: absolute;
-    top: 0.5rem;
+    top: 1.5rem;
     right: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -334,35 +326,50 @@ p.small-screen-note {
 </style>
 
 <style lang="scss">
+
+.tabs__content {
+  height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
+}
+
+.tab-item {
+  background: var(--config-settings-background) !important;
+}
+
 .tab__pagination {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-background) !important;
+  color: var(--config-settings-color) !important;
   .tab__nav__items .tab__nav__item {
     span {
-      color: var(--config-settings-color);
+      color: var(--config-settings-color) !important;
     }
     &:hover {
       background: var(--config-settings-color) !important;
       span {
-        color: var(--config-settings-background);
+        color: var(--config-settings-background) !important;
       }
     }
     &.active {
       span {
-        font-weight: bold;
+        font-weight: bold !important;
         color: var(--config-settings-color) !important;
       }
     }
   }
   .tab__nav__items .tab__nav__item.active {
-    border-bottom: 2px solid var(--config-settings-color);
+    border-bottom: 2px solid var(--config-settings-color) !important;
   }
   hr.tab__slider {
-    background: var(--config-settings-color);
+    background: var(--config-settings-color) !important;
   }
 }
 
-#conf-yaml .hljs-attr {
-  color: #9c03f5;
+#conf-yaml {
+  background: var(--white);
+  .hljs-attr {
+    color: #9c03f5;
+  }
 }
+
 </style>

yarn.lock

@@ -8899,10 +8899,10 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-material-tabs@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/vue-material-tabs/-/vue-material-tabs-0.0.7.tgz#5f3fa04ad35384af68582f7c89ad4cecac89207b"
-  integrity sha512-02X5paTksYKrGvSRpMdkctRO9qhvJFD5VEGxd0xjOX4sYz6mZSAez0Z/+aYf7Z5ziY+eJ9dMQmxaLn9DVKQRJw==
+vue-material-tabs@^0.1.2:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/vue-material-tabs/-/vue-material-tabs-0.1.5.tgz#255fc0beb27c005eaae61c1534d782a94c30c525"
+  integrity sha512-ZLFRCxaCS3TM8IwnxQA4S2CVj+tBaILb8fQZDg+Ix+9Zu+k16udrdhLU2GWvJEVPLspuCzKhCEXW4cIg59YkVw==
 
 vue-prism-editor@^1.2.2:
   version "1.2.2"