selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adds more themes, adds ability to hide unneeded components

This commit is contained in:
Alicia Sykes 2021-04-16 14:29:19 +01:00
parent 7f3e8dd818
commit c5f630849f
12 changed files with 116 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -2,13 +2,14 @@
<div id="dashy" data-theme="dark">
<Header :pageInfo="getPageInfo(pageInfo)" />
<router-view />
<Footer />
<Footer v-if="showFooter" />
</div>
</template>
<script>
import Header from '@/components/PageStrcture/Header.vue';
import Footer from '@/components/PageStrcture/Footer.vue';
import Defaults from '@/utils/defaults';
import conf from '@/data/conf.yml';
export default {
@ -19,6 +20,7 @@ export default {
},
data: () => ({
pageInfo: conf.pageInfo,
showFooter: Defaults.visibleComponents.footer,
}),
methods: {
/* Returns either page info from the config, or default values */

6
src/components/LinkItems/Collapsable.vue
View File

@ -93,7 +93,7 @@ export default {
padding: var(--item-group-padding);
margin: 10px;
border-radius: var(--curve-factor);
background: var(--primary);
background: var(--item-group-outer-background);
box-shadow: var(--item-group-shadow);
height: fit-content;
width: 100%;
@ -140,7 +140,7 @@ export default {
border-radius: var(--curve-factor);
transition: all 0.25s ease-out;
text-align: left;
color: var(--item-group-background);
color: var(--item-group-heading-text-color); //var(--item-group-background);
h3 {
margin: 0;
@ -150,7 +150,7 @@ export default {
}
.lbl-toggle:hover {
color: var(--background);
color: var(--item-group-heading-text-color-hover);
}
.lbl-toggle::before {

2
src/components/LinkItems/Item.vue
View File

@ -97,7 +97,7 @@ export default {
.item {
flex-grow: 1;
position: relative;
color: var(--primary);
color: var(--item-text-color);
vertical-align: middle;
margin: 0.5rem;
background: var(--item-background);

3
src/components/LinkItems/ItemOpenMethodIcon.vue
View File

@ -43,7 +43,8 @@ export default {
width: 1rem;
margin: 2px;
path {
fill: var(--primary);
// fill: var(--primary);
fill: currentColor;
}
}
&.top svg { top: 0; }

11
src/components/PageStrcture/Header.vue
View File

@ -1,13 +1,14 @@
<template>
<header>
<PageTitle :title="pageInfo.title" :description="pageInfo.description" />
<Nav class="nav"/>
<PageTitle :title="pageInfo.title" :description="pageInfo.description" v-if="titleVisible" />
<Nav class="nav" v-if="navVisible" />
</header>
</template>
<script>
import PageTitle from '@/components/PageStrcture/PageTitle.vue';
import Nav from '@/components/PageStrcture/Nav.vue';
import Defaults from '@/utils/defaults';
export default {
name: 'Header',
@ -18,6 +19,12 @@ export default {
props: {
pageInfo: Object,
},
data() {
return {
titleVisible: Defaults.visibleComponents.pageTitle,
navVisible: Defaults.visibleComponents.navigation,
};
},
};
</script>

4
src/components/Settings/LayoutSelector.vue
View File

@ -2,8 +2,8 @@
<div>
<span class="options-label">Layout</span>
<div class="display-options">
<IconDeafault @click="updateDisplayLayout('default')" v-tooltip="tooltip('Auto')"
:class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" tabindex="2" />
<IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
:class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="2" />
<IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
:class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="2" />
<IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"

17
src/components/Settings/SettingsContainer.vue
View File

@ -1,8 +1,9 @@
<template>
<section>
<SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
<div class="options-container">
<ThemeSelector :themes="availableThemes" :confTheme="getInitialTheme()"/>
<SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
<div class="options-container" v-if="settingsVisible">
<ThemeSelector :themes="availableThemes"
:confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
<LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
<ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
</div>
@ -11,6 +12,7 @@
</template>
<script>
import Defaults from '@/utils/defaults';
import SearchBar from '@/components/Settings/SearchBar';
import ThemeSelector from '@/components/Settings/ThemeSelector';
import LayoutSelector from '@/components/Settings/LayoutSelector';
@ -48,6 +50,15 @@ export default {
getInitialTheme() {
return this.appConfig.theme || '';
},
getUserThemes() {
return this.appConfig.cssThemes || [];
},
},
data() {
return {
searchVisible: Defaults.visibleComponents.searchBar,
settingsVisible: Defaults.visibleComponents.settings,
};
},
};
</script>

3
src/components/Settings/ThemeSelector.vue
View File

@ -20,6 +20,7 @@ export default {
props: {
themes: Object,
confTheme: String,
userThemes: Array,
},
watch: {
selectedTheme(newTheme) { this.updateTheme(newTheme); },
@ -29,7 +30,7 @@ export default {
selectedTheme: this.getInitialTheme(),
themeHelper: new ThemeHelper(),
loading: true,
builtInThemes: Defaults.builtInThemes,
builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
};
},
computed: {

27
src/styles/color-palette.scss
View File

@ -1,13 +1,15 @@
:root {
/* Basic*/
--background: #0b1021;
--background-darker: #05070e;
--primary: #5cabca;
--primary: #5cabca; // Main accent color
--background: #0b1021; // Page background
--background-darker: #05070e; // Used for navigation bar, footer and fills
/* Modified Colors */
--item-group-background: #0b1021cc;
--medium-grey: #5e6474;
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
@ -16,21 +18,24 @@
/* Other Variables */
--outline-color: none;
--curve-factor: 5px;
--curve-factor-navbar: 16px;
--dimming-factor: 0.8;
--curve-factor: 5px; // Border radius for most components
--curve-factor-navbar: 16px; // Border radius for header
--dimming-factor: 0.8; // Opacity for semi-transparent components
/* Settings for specific components */
--item-group-padding: 5px;
--item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23;
--item-group-shadow: var(--item-shadow);
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
--item-group-shadow: var(--item-shadow);
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
--settings-text-color: var(--primary);
/* Specific components, using variables allows them to be overridden individually */
--item-text-color: var(--primary);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
--settings-background: var(--background);
--settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
}

73
src/styles/color-themes.scss
View File

@ -1,26 +1,3 @@
html[data-theme='nord'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #BF616A; }
.collapsable:nth-child(2n) { background: #D08770; }
.collapsable:nth-child(3n) { background: #EBCB8B; }
.collapsable:nth-child(4n) { background: #A3BE8C; }
}
html[data-theme='nord-frost'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #8FBCBB; }
.collapsable:nth-child(2n) { background: #88C0D0; }
.collapsable:nth-child(3n) { background: #81A1C1; }
.collapsable:nth-child(4n) { background: #5E81AC; }
}
html[data-theme='callisto'] {
--background: #141b33;
@ -117,6 +94,30 @@ html[data-theme='high-contrast-dark'] {
--curve-factor: 0px;
}
html[data-theme='nord'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #BF616A; }
.collapsable:nth-child(2n) { background: #D08770; }
.collapsable:nth-child(3n) { background: #EBCB8B; }
.collapsable:nth-child(4n) { background: #A3BE8C; }
}
html[data-theme='nord-frost'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #8FBCBB; }
.collapsable:nth-child(2n) { background: #88C0D0; }
.collapsable:nth-child(3n) { background: #81A1C1; }
.collapsable:nth-child(4n) { background: #5E81AC; }
}
html[data-theme='material'] {
--primary: #29B6F6;
--settings-text-color: #01579b;
@ -135,4 +136,30 @@ html[data-theme='material'] {
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
}
html[data-theme='colorful'] {
--primary: #e8eae1;
--background: #0b1021;
--item-background: #05070e;
--item-background-hover: #0b1021;
--item-group-background: transparent;
--item-group-outer-background: #05070e;
--item-group-heading-text-color: #e8eae1;
--item-group-heading-text-color-hover: #fff;
.item:nth-child(1n) { color: #eb5cad; border: 1px solid #eb5cad; }
.item:nth-child(2n) { color: #985ceb; border: 1px solid #985ceb; }
.item:nth-child(3n) { color: #5c90eb; border: 1px solid #5c90eb; }
.item:nth-child(4n) { color: #5cdfeb; border: 1px solid #5cdfeb; }
.item:nth-child(5n) { color: #5ceb8d; border: 1px solid #5ceb8d; }
.item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
.item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
.item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
.item:hover, .item:focus {
opacity: 0.85;
outline: none;
background: currentColor;
span { color: #05070e; }
svg path { fill: #05070e; }
}
}

12
src/utils/defaults.js
View File

@ -1,5 +1,7 @@
module.exports = {
defaultTheme: 'Default',
iconSize: 'medium',
layout: 'auto',
defaultTheme: 'default',
builtInThemes: [
'nord',
'nord-frost',
@ -13,7 +15,15 @@ module.exports = {
'bee',
'raspberry-jam',
'tiger',
'colorful',
'high-contrast-light',
'high-contrast-dark',
],
visibleComponents: {
pageTitle: true,
navigation: true,
searchBar: true,
settings: true,
footer: true,
},
};

5
src/views/Home.vue
View File

@ -33,6 +33,7 @@
import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
import Defaults from '@/utils/defaults';
export default {
name: 'home',
@ -51,14 +52,14 @@ export default {
}),
computed: {
layoutOrientation: {
get: () => localStorage.layoutOrientation || 'default',
get: () => localStorage.layoutOrientation || Defaults.layout,
set: function setLayout(layout) {
localStorage.setItem('layoutOrientation', layout);
this.layout = layout;
},
},
iconSize: {
get: () => localStorage.iconSize || 'medium',
get: () => localStorage.iconSize || Defaults.iconSize,
set: function setIconSize(iconSize) {
localStorage.setItem('iconSize', iconSize);
this.itemSizeBound = iconSize;