Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 12:43:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add a dropwdown menu for switching between views

Browse Source
This commit is contained in:
Alicia Sykes 2021-08-14 15:20:53 +01:00
parent 02fcc5a059
commit e1cc17c7e0
2 changed files with 119 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Settings/ConfigLauncher.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="config-options">
<div class="config-options" v-click-outside="closeViewSwitcher">
<!-- Button and label -->
<span>{{ $t('settings.config-launcher-label') }}</span>
<span class="config-label">{{ $t('settings.config-launcher-label') }}</span>
<div class="config-buttons">
<IconSpanner @click="showEditor()" tabindex="-2"
v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
<IconViewMode @click="openChangeViewMenu()" tabindex="-2"
v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
</div>
<!-- Modal containing all the configuration options -->
@ -19,27 +21,55 @@
<LanguageSwitcher />
</modal>
<!-- Menu for switching view -->
<div v-if="viewSwitcherOpen" class="view-switcher">
<ul>
<li>
<router-link to="/home">
<IconHome /><span>Default</span>
</router-link>
</li>
<li>
<router-link to="/minimal">
<IconMinimalView /><span>Minimal</span>
</router-link>
<li>
<router-link to="/workspace">
<IconWorkspaceView /><span>Workspace</span>
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
import ConfigContainer from '@/components/Configuration/ConfigContainer';
import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
import IconHome from '@/assets/interface-icons/application-home.svg';
import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
export default {
name: 'ConfigLauncher',
data() {
return {
modalNames,
viewSwitcherOpen: false,
};
},
components: {
IconSpanner,
ConfigContainer,
LanguageSwitcher,
IconSpanner,
IconViewMode,
IconHome,
IconWorkspaceView,
IconMinimalView,
},
props: {
sections: Array,
@ -48,7 +78,6 @@ export default {
},
methods: {
showEditor: function show() {
// TODO: If users first time, then show note explaining that config is only stored locally
this.$modal.show(modalNames.CONF_EDITOR);
this.$emit('modalChanged', true);
},
@ -64,6 +93,12 @@ export default {
tooltip(content) {
return { content, trigger: 'hover focus', delay: 250 };
},
openChangeViewMenu() {
this.viewSwitcherOpen = !this.viewSwitcherOpen;
},
closeViewSwitcher() {
this.viewSwitcherOpen = false;
},
},
};
</script>
@ -93,4 +128,38 @@ export default {
}
}
}
.view-switcher {
position: absolute;
right: 1rem;
margin-top: 3rem;
z-index: 5;
background: var(--background);
border: 1px solid var(--settings-text-color);
border-radius: var(--curve-factor);
box-shadow: var(--settings-container-shadow);
ul {
list-style: none;
margin: 0;
padding: 0;
li {
cursor: pointer;
padding: 0.25rem 0.75rem;
a {
color: var(--settings-text-color);
text-decoration: none;
display: flex;
align-items: center;
}
&:hover {
background: var(--settings-text-color);
a { color: var(--background); }
}
svg {
margin: 0 0.25rem 0 0;
border: none;
}
}
}
}
</style>

47
src/views/Minimal.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
<!-- Buttons for config and home page -->
<div class="minimal-buttons">
<ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
@modalChanged="modalChanged" class="config-launcher" />
</div>
<!-- Page title and search bar -->
<div class="title-and-search">
<router-link to="/">
<h1>{{ pageInfo.title }}</h1>
@ -38,6 +44,7 @@
{{searchValue ? $t('home.no-results') : $t('home.no-data')}}
</div>
</div>
<div v-else class="no-data"> {{ $t('home.no-data') }} </div>
</div>
</template>
@ -48,6 +55,7 @@ import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue';
import MinimalSearch from '@/components/MinimalView/MinimalSearch.vue';
import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
import Defaults, { localStorageKeys } from '@/utils/defaults';
import ConfigLauncher from '@/components/Settings/ConfigLauncher';
export default {
name: 'home',
@ -60,6 +68,7 @@ export default {
MinimalSection,
MinimalHeading,
MinimalSearch,
ConfigLauncher,
},
data: () => ({
searchValue: '',
@ -178,6 +187,9 @@ export default {
ApplyCustomVariables(this.theme);
}
},
modalChanged(modalState) {
this.modalOpen = modalState;
},
},
mounted() {
this.initiateFontAwesome();
@ -193,10 +205,10 @@ export default {
.minimal-home {
display: flex;
flex-direction: column;
justify-content: center;
margin: 1rem auto;
padding-bottom: 1px;
min-height: calc(99.9vh - var(--footer-height));
padding-top: 10vh;
min-height: calc(99vh - var(--footer-height));
width: 90%;
max-width: 1000px;
background: var(--background);
@ -232,6 +244,13 @@ export default {
}
}
@include phone {
.item-group-container {
display: flex;
flex-direction: column;
}
}
.no-data {
font-size: 2rem;
color: var(--background);
@ -242,4 +261,28 @@ export default {
border-radius: var(--curve-factor);
}
.minimal-buttons {
position: absolute;
top: 0.5rem;
right: 1rem;
display: flex;
.home-page-icon {
color: var(--primary);
width: 1.5rem;
height: 1.5rem;
@extend .svg-button;
}
}
</style>
<style lang="scss">
.minimal-home .minimal-buttons {
.config-launcher span.config-label { display: none; }
svg { opacity: var(--dimming-factor); border: none; }
&:hover svg { opacity: 1; }
.view-switcher {
margin-top: 2rem;
right: 0;
}
}
</style>