Displays a tab view in the config modal, with raw YAML for downloading

README.md

@@ -162,12 +162,13 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. Inc
 
 ### Credits 🏆
 
-The app makes use of the following components, kudos to their respective authors
+And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
+
+It makes use of the following components, kudos to their respective authors
 - [`vue-select`](https://github.com/sagalbot/vue-select) - Dropdown component by @sagalbot
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
-
+- [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
-And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
 
 ### License 📜
 

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "connect": "^3.7.0",
     "register-service-worker": "^1.6.2",
+    "remedial": "^1.0.8",
     "serve-static": "^1.14.1",
     "v-tooltip": "^2.1.3",
     "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-router": "^3.0.3",
     "vue-select": "^3.11.2"
   },
@@ -61,4 +63,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

src/components/LinkItems/Item.vue

@@ -100,7 +100,6 @@ export default {
 
 .item {
   flex-grow: 1;
-  position: relative;
   color: var(--item-text-color);
   vertical-align: middle;
   margin: 0.5rem;
@@ -116,6 +115,7 @@ export default {
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
+    position: relative;
   }
   &:focus {
     outline: 2px solid var(--primary);

src/components/LinkItems/ItemIcon.vue

@@ -99,7 +99,7 @@ export default {
 <style lang="scss">
   .tile-icon {
       width: 60px;
-      filter: var(--item-icon-transform);
+      // filter: var(--item-icon-transform);
       &.broken { display: none; }
   }
   i.fas, i.fab, i.far, i.fal, i.fad {

src/components/Settings/ConfigEditor.vue

@@ -5,7 +5,16 @@
       <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
     </div>
     <modal :name="modalName" :resizable="true" width="80%" height="80%">
-      <p>Hello</p>
+      <Tabs>
+        <TabItem name="Edit">
+          <div class="first-tab">Todo</div>
+        </TabItem>
+        <TabItem name="Download">
+          <div class="second-tab">
+            <pre>{{this.jsonParser(this.sections)}}</pre>
+          </div>
+        </TabItem>
+      </Tabs>
     </modal>
   </div>
 </template>
@@ -13,6 +22,7 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import JsonToYaml from '@/utils/JsonToYaml';
 
 export default {
   name: 'ConfigEditor',
@@ -20,13 +30,14 @@ export default {
     return {
       modalName: 'CONF-EDITOR',
       input: '',
+      jsonParser: JsonToYaml,
     };
   },
   components: {
     IconSpanner,
   },
   props: {
-    initialConfig: Object,
+    sections: Array,
   },
   methods: {
     showEditor: function show() {

src/components/Settings/SettingsContainer.vue

@@ -6,7 +6,7 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigEditor />
+      <ConfigEditor :sections="sections" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -28,6 +28,7 @@ export default {
     iconSize: String,
     availableThemes: Object,
     appConfig: Object,
+    sections: Array,
   },
   components: {
     SearchBar,

src/main.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip component
 import VModal from 'vue-js-modal'; // Modal component
 import VSelect from 'vue-select'; // Select dropdown component
+import VTabs from 'vue-material-tabs'; // Tab view component, used on the config page
 
 import App from './App.vue';
 import router from './router';
@@ -10,6 +11,7 @@ import './registerServiceWorker';
 
 Vue.use(VTooltip);
 Vue.use(VModal);
+Vue.use(VTabs);
 Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;

src/utils/defaults.js

@@ -44,5 +44,6 @@ module.exports = {
     COLLAPSE_STATE: 'collapseState',
     ICON_SIZE: 'iconSize',
     THEME: 'theme',
+    CONF_SECTIONS: 'confSections',
   },
 };

src/views/Home.vue

@@ -9,13 +9,14 @@
       :iconSize="itemSizeBound"
       :availableThemes="getExternalCSSLinks()"
       :appConfig="appConfig"
+      :sections="getSections(sections)"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container orientation-${layout} item-size-${itemSizeBound}`">
       <ItemGroup
-        v-for="(section, index) in sections"
+        v-for="(section, index) in getSections(sections)"
         :key="index"
         :title="section.name"
         :displayData="getDisplayData(section)"
@@ -73,7 +74,16 @@ export default {
   methods: {
     /* Returns true if there is one or more sections in the config */
     checkTheresData(sections) {
-      return sections && sections.length >= 1;
+      const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
+      return (sections && sections.length >= 1) || (localSections && localSections.length >= 1);
+    },
+    /* Returns sections from local storage if available, otherwise uses the conf.yml */
+    getSections(sections) {
+      // If the user has stored sections in local storage, return those
+      const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
+      if (localSections && localSections.length >= 1) return localSections;
+      // Otherwise, return the usuall data from conf.yml
+      return sections;
     },
     /* Updates local data with search value, triggered from filter comp */
     searching(searchValue) {

yarn.lock

@@ -7314,6 +7314,11 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remedial@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
+  integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8756,6 +8761,11 @@ 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-resize@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-1.0.1.tgz#c120bed4e09938771d622614f57dbcf58a5147ee"