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

Adds ability for user to add custom nav bar links plus UI improvments

This commit is contained in:
Alicia Sykes 2021-05-18 15:22:11 +01:00
parent 265a8b42ba
commit 5353c3ab90
8 changed files with 117 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="dashy" data-theme="dark">
<Header :pageInfo="getPageInfo(pageInfo)" />
<Header :pageInfo="pageInfo" />
<router-view />
<Footer v-if="showFooter" :text="getFooterText()" />
</div>
@ -19,10 +19,13 @@ export default {
Footer,
},
data: () => ({
pageInfo: conf.pageInfo || Defaults.pageInfo,
// pageInfo: this.getPageInfo(conf.pageInfo),
appConfig: conf.appConfig || Defaults.appConfig,
showFooter: Defaults.visibleComponents.footer,
}),
computed: {
pageInfo: function pi() { return this.getPageInfo(conf.pageInfo); },
},
methods: {
/* Returns either page info from the config, or default values */
getPageInfo(pageInfo) {
@ -38,7 +41,8 @@ export default {
return {
title: localPageInfo.title || pageInfo.title || defaults.title,
description: localPageInfo.description || pageInfo.description || defaults.description,
navLinks: pageInfo.navLinks || defaults.navLinks,
navLinks: localPageInfo.navLinks || pageInfo.navLinks || defaults.navLinks,
footerText: localPageInfo.footerText || pageInfo.footerText || defaults.footerText,
};
}
return defaults;

1
src/assets/interface-icons/add-new.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="plus-circle" class="svg-inline--fa fa-plus-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M384 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm120 16c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-48 0c0-110.5-89.5-200-200-200S56 145.5 56 256s89.5 200 200 200 200-89.5 200-200z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 599 B

1
src/assets/interface-icons/save-config.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="save" class="svg-inline--fa fa-save fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

31
src/components/Configuration/ConfigContainer.vue
View File

@ -26,7 +26,7 @@
<TabItem name="Edit Sections">
<JsonEditor :sections="sections" />
</TabItem>
<TabItem name="View Raw YAML">
<TabItem name="View Raw YAML" class="code-container">
<pre>{{this.jsonParser(this.config)}}</pre>
<a class="download-button" href="/conf.yml" download>Download Config</a>
</TabItem>
@ -102,7 +102,7 @@ export default {
pre {
color: var(--config-code-color);
background: var(--config-code-background);
padding: 0.5rem 1rem;
}
a.config-button, button.config-button {
@ -137,22 +137,27 @@ a.config-button, button.config-button {
}
}
a.download-button {
position: absolute;
top: 2px;
right: 2px;
padding: 0.25rem 0.5rem;
font-size: 1rem;
color: var(--config-settings-background);
border-radius: var(--curve-factor);
cursor: pointer;
&:hover {
background: var(--config-settings-color);
div.code-container {
background: var(--config-code-background);
a.download-button {
position: absolute;
top: 2px;
right: 2px;
padding: 0.25rem 0.5rem;
font-size: 1rem;
color: var(--config-code-color);
border-radius: var(--curve-factor);
cursor: pointer;
&:hover {
color: var(--config-code-background);
background: var(--config-settings-color);
}
}
}
.tab-item {
overflow-y: auto;
background: var(--config-settings-background);
}
a.hyperlink-wrapper {

80
src/components/Configuration/EditSiteMeta.vue
View File

@ -15,29 +15,59 @@
<input v-model="formElements.footerText" />
</div>
</div>
<button class="save-button" @click="save()">Save Changes</button>
<div class="form">
<h2>Nav Bar Links</h2>
<div class="add-nav-bar-link" v-for="(link, index) in formElements.navLinks" :key="index">
<div class="row">
<span>Link Text</span>
<input v-model="link.title" />
</div>
<div class="row">
<span>Link URL</span>
<input v-model="link.path" />
</div>
</div>
<button class="add-new-link" @click="addNavLinkRow()" >
<AddNewIcon />
Add New Link
</button>
</div>
<button class="save-button" @click="save()">
<SaveConfigIcon />
Save Changes
</button>
</div>
</template>
<script>
import { localStorageKeys } from '@/utils/defaults';
import AddNewIcon from '@/assets/interface-icons/add-new.svg';
import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
export default {
name: 'EditSiteMeta',
props: {
config: Object,
},
components: {
AddNewIcon,
SaveConfigIcon,
},
methods: {
save() {
const pageInfo = { ...this.config.pageInfo };
pageInfo.title = this.formElements.title;
pageInfo.description = this.formElements.description;
pageInfo.footerText = this.formElements.footerText;
pageInfo.navLinks = this.formElements.navLinks;
localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
this.$toasted.show('Changes seved succesfully');
this.$toasted.show('Changes saved succesfully');
setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
},
addNavLinkRow() {
this.formElements.navLinks.push({ title: '', path: '' });
},
},
data() {
return {
@ -45,6 +75,7 @@ export default {
title: this.config.pageInfo.title,
description: this.config.pageInfo.description,
footerText: this.config.pageInfo.footerText,
navLinks: this.config.pageInfo.navLinks,
},
};
},
@ -55,7 +86,7 @@ export default {
.site-meta-container {
display: flex;
flex-direction: column;
padding-top: 1rem;
padding: 1rem 0;
background: var(--background-darker);
height: calc(100% - 1rem);
h2 {
@ -67,6 +98,15 @@ export default {
div.form {
display: flex;
flex-direction: column;
width: fit-content;
margin: 0 auto 1rem auto;
padding-bottom: 1rem;
&:not(:last-child) {
border-bottom: 1px dashed var(--config-settings-color);
}
div.add-nav-bar-link {
margin: 0 auto;
}
div.row {
margin: 0.25rem auto;
display: flex;
@ -86,16 +126,26 @@ div.form {
min-width: 8rem;
font-size: 1.2rem;
&:focus {
box-shadow: 1px 1px 6px #00ccb4;
box-shadow: 1px 1px 6px var(--config-settings-color);
outline: none;
}
}
}
}
button {
display: flex;
align-items: center;
justify-content: center;
margin: 0.5rem auto;
svg {
width: 1.2rem;
margin: 0 0.2rem;
}
}
button.save-button {
padding: 0.5rem 1rem;
margin: 0.5rem auto;
font-size: 1.2rem;
width: 24rem;
background: var(--config-settings-background);
@ -108,4 +158,24 @@ button.save-button {
color: var(--config-settings-background);
}
}
button.add-new-link {
background: none;
text-decoration: underline;
font-size: 1rem;
padding: 0.25rem 0.5rem;
color: var(--config-settings-color);
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
&:hover {
border-color: var(--config-settings-color);
text-decoration: none;
}
&:active {
background: var(--config-settings-color);
color: var(--config-settings-background);
border-color: var(--config-settings-color);
}
}
</style>

5
src/components/Configuration/JsonEditor.vue
View File

@ -66,6 +66,7 @@ button.save-button {
&:hover {
background: var(--config-settings-background);
color: var(--config-settings-color);
border-color: var(--config-settings-color);
}
}
@ -82,4 +83,8 @@ button.save-button {
.jsoneditor-poweredBy {
display: none;
}
.jsoneditor-tree, pre.jsoneditor-preview {
background: #fff;
text-align: left;
}
</style>

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

@ -18,7 +18,7 @@
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
import ConfigContainer from '@/components/Configuration/ConfigContainer';
import { topLevelConfKeys } from '@/utils/defaults';
import { topLevelConfKeys, localStorageKeys } from '@/utils/defaults';
export default {
name: 'ConfigLauncher',
@ -46,11 +46,10 @@ export default {
conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo;
conf[topLevelConfKeys.SECTIONS] = this.sections;
conf[topLevelConfKeys.APP_CONFIG].theme = localStorage[localStorageKeys.THEME]
|| conf[topLevelConfKeys.APP_CONFIG].theme;
return conf;
},
updateConfig() {
// this.$emit('iconSizeUpdated', iconSize);
},
tooltip(content) {
return { content, trigger: 'hover focus', delay: 250 };
},
@ -88,4 +87,7 @@ export default {
.vm--modal {
box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
}
.vm--overlay {
background: #00000080;
}
</style>

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

@ -50,6 +50,8 @@ html[data-theme='raspberry-jam'] {
--item-background: #1c2636;
--item-group-background: #0b1021;
--nav-link-background-color: #0b1021;
--config-code-background: #0b1021;
--config-code-color: #eb2d6c;
}
html[data-theme='tiger'] {
@ -91,6 +93,7 @@ html[data-theme='high-contrast-light'] {
--primary: #000;
--outline-color: #000;
--curve-factor: 0px;
--config-code-color: #000;
}
html[data-theme='high-contrast-dark'] {
@ -147,6 +150,7 @@ html[data-theme='material'] {
--settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
--welcome-popup-background: #01579b;
--welcome-popup-text-color: #ffffff;
--config-code-color: #000;
}
html[data-theme='material-dark'] {