mirror of https://github.com/lissy93/dashy
✨ Updates view switcher to support multiple pages (#584)
This commit is contained in:
parent
036bc008c5
commit
1bc9964374
|
@ -25,24 +25,7 @@
|
|||
</modal>
|
||||
|
||||
<!-- Menu for switching view -->
|
||||
<div v-if="viewSwitcherOpen" class="view-switcher">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/home">
|
||||
<IconHome /><span>{{ $t('alternate-views.default') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/minimal">
|
||||
<IconMinimalView /><span>{{ $t('alternate-views.minimal') }}</span>
|
||||
</router-link>
|
||||
<li>
|
||||
<router-link to="/workspace">
|
||||
<IconWorkspaceView /><span>{{ $t('alternate-views.workspace') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ViewSwitcher v-if="viewSwitcherOpen" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -52,13 +35,11 @@ import ConfigContainer from '@/components/Configuration/ConfigContainer';
|
|||
import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
|
||||
import Keys from '@/utils/StoreMutations';
|
||||
import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
|
||||
import ViewSwitcher from '@/components/Settings/ViewSwitcher';
|
||||
// Import icons for config launcher buttons
|
||||
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
|
||||
import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-edit-mode.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',
|
||||
|
@ -71,12 +52,10 @@ export default {
|
|||
components: {
|
||||
ConfigContainer,
|
||||
LanguageSwitcher,
|
||||
ViewSwitcher,
|
||||
IconSpanner,
|
||||
IconInteractiveEditor,
|
||||
IconViewMode,
|
||||
IconHome,
|
||||
IconWorkspaceView,
|
||||
IconMinimalView,
|
||||
},
|
||||
computed: {
|
||||
sections() {
|
||||
|
@ -149,37 +128,4 @@ export default {
|
|||
min-width: 3.2rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="view-switcher">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="`/home/${subPagePath}`">
|
||||
<IconHome /><span>{{ $t('alternate-views.default') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="`/minimal/${subPagePath}`">
|
||||
<IconMinimalView /><span>{{ $t('alternate-views.minimal') }}</span>
|
||||
</router-link>
|
||||
<li>
|
||||
<router-link :to="`/workspace/${subPagePath}`">
|
||||
<IconWorkspaceView /><span>{{ $t('alternate-views.workspace') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 {
|
||||
components: {
|
||||
IconHome,
|
||||
IconWorkspaceView,
|
||||
IconMinimalView,
|
||||
},
|
||||
computed: {
|
||||
subPagePath() {
|
||||
return this.$route.path.split('/').pop() || '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.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.5rem 0 0;
|
||||
width: 1rem;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -3,7 +3,15 @@
|
|||
import { hideFurnitureOn } from '@/utils/defaults';
|
||||
|
||||
/* Returns false if page furniture should be hidden on said route */
|
||||
export const shouldBeVisible = (routeName) => !hideFurnitureOn.includes(routeName);
|
||||
export const shouldBeVisible = (routeName) => {
|
||||
let shouldShow = true;
|
||||
if (!routeName) return shouldShow; // Route name not specified.
|
||||
hideFurnitureOn.forEach((hideOn) => {
|
||||
// If route name on the no-show list, set visibility to false
|
||||
if (routeName.includes(hideOn)) shouldShow = false;
|
||||
});
|
||||
return shouldShow;
|
||||
};
|
||||
|
||||
/* Based on section title, item name and index, return a string value for ID */
|
||||
const makeItemId = (sectionStr, itemStr, index) => {
|
||||
|
|
Loading…
Reference in New Issue