mirror of https://github.com/lissy93/dashy
239 lines
6.5 KiB
Vue
239 lines
6.5 KiB
Vue
<template>
|
|
<section>
|
|
<SearchBar ref="SearchBar"
|
|
@user-is-searchin="userIsTypingSomething"
|
|
v-if="searchVisible"
|
|
:active="!modalOpen"
|
|
/>
|
|
<div class="options-outer">
|
|
<div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
|
|
<ThemeSelector :themes="availableThemes"
|
|
:confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
|
|
<LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
|
|
<ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
|
|
<ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
|
|
@modalChanged="modalChanged" />
|
|
<AppButtons v-if="isUserLoggedIn()" />
|
|
</div>
|
|
<div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
|
|
<button @click="toggleSettingsVisibility()"
|
|
v-tooltip="`${settingsVisible? 'Hide' : 'Open'} Settings Menu`" tabindex="-2">
|
|
<IconClose v-if="settingsVisible" />
|
|
<IconOpen v-else />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<KeyboardShortcutInfo />
|
|
<AppInfoModal />
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import SearchBar from '@/components/Settings/SearchBar';
|
|
import ConfigLauncher from '@/components/Settings/ConfigLauncher';
|
|
import ThemeSelector from '@/components/Settings/ThemeSelector';
|
|
import LayoutSelector from '@/components/Settings/LayoutSelector';
|
|
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 {
|
|
localStorageKeys,
|
|
visibleComponents as defaultVisibleComponents,
|
|
} from '@/utils/defaults';
|
|
|
|
export default {
|
|
name: 'SettingsContainer',
|
|
props: {
|
|
displayLayout: String,
|
|
iconSize: String,
|
|
availableThemes: Object,
|
|
appConfig: Object,
|
|
pageInfo: Object,
|
|
sections: Array,
|
|
modalOpen: Boolean,
|
|
},
|
|
components: {
|
|
SearchBar,
|
|
ConfigLauncher,
|
|
ThemeSelector,
|
|
LayoutSelector,
|
|
ItemSizeSelector,
|
|
AppButtons,
|
|
KeyboardShortcutInfo,
|
|
AppInfoModal,
|
|
IconOpen,
|
|
IconClose,
|
|
},
|
|
inject: ['visibleComponents'],
|
|
methods: {
|
|
userIsTypingSomething(something) {
|
|
this.$emit('user-is-searchin', something);
|
|
},
|
|
clearFilterInput() {
|
|
this.$refs.SearchBar.clearFilterInput();
|
|
},
|
|
updateDisplayLayout(layout) {
|
|
this.$emit('change-display-layout', layout);
|
|
},
|
|
updateIconSize(iconSize) {
|
|
this.$emit('change-icon-size', iconSize);
|
|
},
|
|
modalChanged(changedTo) {
|
|
this.$emit('change-modal-visibility', changedTo);
|
|
},
|
|
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];
|
|
},
|
|
/* Gets user themes if available */
|
|
getUserThemes() {
|
|
const userThemes = this.appConfig.cssThemes || [];
|
|
if (typeof userThemes === 'string') return [userThemes];
|
|
return userThemes;
|
|
},
|
|
toggleSettingsVisibility() {
|
|
this.settingsVisible = !this.settingsVisible;
|
|
localStorage.setItem(localStorageKeys.HIDE_SETTINGS, this.settingsVisible);
|
|
},
|
|
getSettingsVisibility() {
|
|
return JSON.parse(localStorage[localStorageKeys.HIDE_SETTINGS]
|
|
|| (this.visibleComponents || defaultVisibleComponents).settings);
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
settingsVisible: this.getSettingsVisibility(),
|
|
searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '@/styles/media-queries.scss';
|
|
|
|
section {
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: stretch;
|
|
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
|
box-shadow: var(--settings-container-shadow);
|
|
}
|
|
.options-outer {
|
|
display: flex;
|
|
position: relative;
|
|
flex: 1;
|
|
background: var(--settings-background);
|
|
border-radius: var(--curve-factor-navbar);
|
|
}
|
|
.options-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
padding: 0.5rem 1.5rem 0.5rem 1rem;
|
|
border-radius: var(--curve-factor-navbar) 0 0;
|
|
background: var(--settings-background);
|
|
div {
|
|
margin-left: 0.5rem;
|
|
opacity: var(--dimming-factor);
|
|
opacity: 1;
|
|
&:hover { opacity: 1; }
|
|
}
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
@include very-tiny-phone {
|
|
flex-direction: column;
|
|
align-items: baseline;
|
|
}
|
|
}
|
|
|
|
.show-hide-container {
|
|
display: flex;
|
|
// align-items: center;
|
|
background: var(--settings-background);
|
|
color: var(--settings-text-color);
|
|
width: 1.5rem;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
&.show-btn {
|
|
width: 2rem;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
@include phone {
|
|
top: -3rem !important;
|
|
}
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 2px 2px 0 2px;
|
|
margin: 2px;
|
|
border-radius: var(--curve-factor);
|
|
height: fit-content;
|
|
background: none;
|
|
border: none;
|
|
color: var(--settings-text-color);
|
|
cursor: pointer;
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
&:hover button {
|
|
background: var(--settings-text-color);
|
|
color: var(--settings-background);
|
|
}
|
|
}
|
|
|
|
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;
|
|
margin: 0 auto;
|
|
background: none;
|
|
.options-container {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include phone {
|
|
.options-container, .show-hide-button {
|
|
// display: none;
|
|
}
|
|
}
|
|
|
|
</style>
|