Merge branch 'master' of github.com:Lissy93/dashy into FEATURE/minimal-view

src/components/Configuration/ConfigContainer.vue

@@ -79,9 +79,6 @@
 </template>
 
 <script>
-import hljs from 'highlight.js/lib/core';
-import yaml from 'highlight.js/lib/languages/yaml';
-import 'highlight.js/styles/mono-blue.css';
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
@@ -179,20 +176,11 @@ export default {
       element.click();
       document.body.removeChild(element);
     },
-    /* Highlights the YAML config in View config tab */
-    initiateStntaxHighlighter() {
-      hljs.registerLanguage('yaml', yaml);
-      const highlighted = hljs.highlight(this.jsonParser(this.config), { language: 'yaml' }).value;
-      document.getElementById('conf-yaml').innerHTML = highlighted;
-    },
     getLanguage() {
       const lang = getUsersLanguage();
       return lang ? `${lang.flag} ${lang.name}` : '';
     },
   },
-  mounted() {
-    this.initiateStntaxHighlighter();
-  },
 };
 </script>
 

src/components/Configuration/JsonEditor.vue

@@ -4,7 +4,6 @@
     <v-jsoneditor
       v-model="jsonData"
       :options="options"
-      height="500px"
     />
     <!-- Options raido, and save button -->
     <div class="save-options">
@@ -293,6 +292,10 @@ div.save-options {
   }
 }
 
+.jsoneditor-container.min-box {
+  height: 58vh;
+}
+
 .jsoneditor, .jsoneditor-menu {
   border-color: var(--primary);
 }

src/components/Settings/AppButtons.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="display-options">
-      <IconLogout @click="logout()" v-tooltip="tooltip('Sign Out')"
+      <IconLogout @click="logout()" v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
         class="layout-icon" tabindex="-2" />
     </div>
   </div>
@@ -19,7 +19,7 @@ export default {
   methods: {
     logout() {
       registerLogout();
-      this.$toasted.show('Logged Out');
+      this.$toasted.show(this.$t('login.logout-message'));
       setTimeout(() => {
         location.reload(true); // eslint-disable-line no-restricted-globals
       }, 500);

src/components/Settings/ConfigLauncher.vue

@@ -4,7 +4,7 @@
     <span>{{ $t('settings.config-launcher-label') }}</span>
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
-        v-tooltip="tooltip('Update configuration')" />
+        v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
     </div>
 
     <!-- Modal containing all the configuration options -->
@@ -73,6 +73,7 @@ export default {
   display: flex;
   flex-direction: column;
   color: var(--settings-text-color);
+  min-width: 3.2rem;
   svg {
     path {
       fill: var(--settings-text-color);

src/components/Settings/SettingsContainer.vue

@@ -37,7 +37,6 @@ import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
 import AppButtons from '@/components/Settings/AppButtons';
 import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
 import AppInfoModal from '@/components/Configuration/AppInfoModal';
-import { logout as registerLogout } from '@/utils/Auth';
 import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
 import IconClose from '@/assets/interface-icons/config-close.svg';
 import {
@@ -88,13 +87,6 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
-    logout() {
-      registerLogout();
-      this.$toasted.show('Logged Out');
-      setTimeout(() => {
-        location.reload(true); // eslint-disable-line no-restricted-globals
-      }, 100);
-    },
     isUserLoggedIn() {
       return !!localStorage[localStorageKeys.USERNAME];
     },
@@ -199,25 +191,6 @@ export default {
     }
   }
 
-    svg.logout-icon {
-      path {
-        fill: var(--settings-text-color);
-      }
-      width: 1rem;
-      height: 1rem;
-      margin: 0.35rem 0.2rem;
-      padding: 0.2rem;
-      text-align: center;
-      background: var(--background);
-      border: 1px solid var(--settings-text-color);;
-      border-radius: var(--curve-factor);
-      cursor: pointer;
-      &:hover, &.selected {
-        background: var(--settings-text-color);
-        path { fill: var(--background); }
-      }
-    }
-
   @include tablet {
     section {
       display: block;

src/components/Settings/ThemeSelector.vue

@@ -126,6 +126,7 @@ export default {
 <style lang="scss">
 
 @import 'vue-select/src/scss/vue-select.scss';
+@import '@/styles/style-helpers.scss';
 
 .theme-dropdown {
   div.vs__dropdown-toggle {
@@ -146,10 +147,13 @@ export default {
   }
   ul.vs__dropdown-menu {
     width: auto;
-    background: var(--background);
     z-index: 5;
     max-width: 13rem;
     overflow-x: hidden;
+    @extend .scroll-bar;
+    background: var(--background);
+    border-radius: var(--curve-factor);
+    border-top: 1px solid var(--settings-text-color);
   }
   li.vs__dropdown-option--highlight {
     background: var(--settings-text-color);