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

Adds menu to Config popup, adds delete and download functionality

This commit is contained in:
Alicia Sykes 2021-05-17 18:53:35 +01:00
parent 25dc8cc4ea
commit 8064a46b39
12 changed files with 162 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -170,6 +170,7 @@ It makes use of the following components, kudos to their respective authors
- [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
- [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
- [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei
- Forked from [JsonEditor](https://github.com/josdejong/jsoneditor) by @josdejong
### License 📜

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

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 739 B

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

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-download" class="svg-inline--fa fa-file-download fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M216 236.07c0-6.63-5.37-12-12-12h-24c-6.63 0-12 5.37-12 12v84.01h-48.88c-10.71 0-16.05 12.97-8.45 20.52l72.31 71.77c4.99 4.95 13.04 4.95 18.03 0l72.31-71.77c7.6-7.54 2.26-20.52-8.45-20.52H216v-84.01zM369.83 97.98L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zM255.95 51.99l76.09 76.08h-76.09V51.99zM336 464.01H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v287.95z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

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

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

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

@ -1,13 +1,33 @@
<template>
<Tabs>
<TabItem name="Config Editor">
<JsonEditor :sections="sections" />
<Tabs :navAuto="true" name="Add Item" ref="tabView">
<TabItem name="Config">
<div class="main-options-container">
<h2>Configuration Options</h2>
<a href="/conf.yml" download class="hyperlink-wrapper">
<button class="config-button center">
<DownloadIcon class="button-icon"/>
Download Config
</button>
</a>
<button class="config-button center" @click="goToEdit()">
<EditIcon class="button-icon"/>
Edit Sections
</button>
<button class="config-button center" @click="resetLocalSettings()">
<DeleteIcon class="button-icon"/>
Reset Local Settings
</button>
</div>
</TabItem>
<TabItem name="View/ Save YAML">
<pre>{{this.jsonParser(this.sections)}}</pre>
<TabItem name="Edit Sections">
<JsonEditor :sections="sections" />
</TabItem>
<TabItem name="View Raw YAML">
<pre>{{this.jsonParser(this.config)}}</pre>
<a class="download-button" href="/conf.yml" download>Download Config</a>
</TabItem>
<TabItem name="Add Item">
<AddItem :sections="sections" />
<AddItem :sections="sections" />
</TabItem>
</Tabs>
</template>
@ -17,6 +37,9 @@
import JsonToYaml from '@/utils/JsonToYaml';
import AddItem from '@/components/Configuration/AddItem';
import JsonEditor from '@/components/Configuration/JsonEditor';
import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
export default {
name: 'ConfigContainer',
@ -27,10 +50,28 @@ export default {
},
props: {
sections: Array,
config: Object,
},
components: {
AddItem,
JsonEditor,
DownloadIcon,
DeleteIcon,
EditIcon,
},
methods: {
goToEdit() {
const itemToSelect = this.$refs.tabView.navItems[1];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
},
resetLocalSettings() {
/* eslint-disable no-alert, no-restricted-globals */
const isTheUserSure = confirm('Are you sure?');
if (isTheUserSure) {
localStorage.clear();
}
/* eslint-enable no-alert, no-restricted-globals */
},
},
};
</script>
@ -42,7 +83,69 @@ pre {
background: var(--config-code-background);
}
a.config-button, button.config-button {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.25rem auto;
font-size: 1.2rem;
background: var(--config-settings-background);
color: var(--config-settings-color);
border: 1px solid var(--config-settings-color);
border-radius: var(--curve-factor);
text-decoration: none;
cursor: pointer;
margin: 0.5rem auto;
width: 18rem;
svg.button-icon {
path {
fill: var(--config-settings-color);
}
width: 1rem;
height: 1rem;
padding: 0.2rem;
}
&:hover {
background: var(--config-settings-color);
color: var(--config-settings-background);
svg path {
fill: var(--config-settings-background);
}
}
}
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);
}
}
.tab-item {
overflow-y: auto;
}
a.hyperlink-wrapper {
margin: 0 auto;
text-decoration: none;
}
.main-options-container {
display: flex;
flex-direction: column;
padding-top: 2rem;
background: var(--background-darker);
height: calc(100% - 2rem);
h2 {
margin: 1rem auto;
}
}
</style>

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

@ -6,7 +6,9 @@
height="650px"
/>
<button class="save-button" @click="save()">Save Changes</button>
<p class="note">
It is recommend to backup your existing confiruration before making any changes.
</p>
</div>
</template>
@ -46,32 +48,37 @@ export default {
.json-editor-outer {
text-align: center;
}
p.note {
font-size: 0.8rem;
color: var(--medium-grey);
margin: 0.2rem;
}
button.save-button {
padding: 0.5rem 1rem;
margin: 0.25rem auto;
font-size: 1.2rem;
background: var(--config-settings-background);
color: var(--config-settings-color);
border: 1px solid var(--config-settings-color);
background: var(--config-settings-color);
color: var(--config-settings-background);
border: 1px solid var(--config-settings-background);
border-radius: var(--curve-factor);
cursor: pointer;
&:hover {
background: var(--config-settings-color);
color: var(--config-settings-background);
background: var(--config-settings-background);
color: var(--config-settings-color);
}
}
.jsoneditor-menu {
background: var(--config-settings-background);
color: var(--config-settings-color);
background: var(--config-settings-color);
color: var(--config-settings-background);
}
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
background: var(--config-settings-background);
color: var(--config-settings-color);
}
.jsoneditor-poweredBy {
display: none;
}
</style>

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

@ -9,7 +9,7 @@
<!-- Modal containing all the configuration options -->
<modal :name="modalName" :resizable="true" width="80%" height="80%"
@closed="$emit('modalChanged', false)">
<ConfigContainer :sections="sections" />
<ConfigContainer :sections="sections" :config="combineConfig()" />
</modal>
</div>
</template>
@ -18,6 +18,7 @@
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
import ConfigContainer from '@/components/Configuration/ConfigContainer';
import { topLevelConfKeys } from '@/utils/defaults';
export default {
name: 'ConfigLauncher',
@ -32,12 +33,21 @@ export default {
},
props: {
sections: Array,
pageInfo: Object,
appConfig: Object,
},
methods: {
showEditor: function show() {
this.$modal.show(this.modalName);
this.$emit('modalChanged', true);
},
combineConfig() {
const conf = {};
conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo;
conf[topLevelConfKeys.SECTIONS] = this.sections;
return conf;
},
updateConfig() {
// this.$emit('iconSizeUpdated', iconSize);
},

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

@ -10,7 +10,8 @@
:confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
<LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
<ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
<ConfigLauncher :sections="sections" @modalChanged="modalChanged" />
<ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
@modalChanged="modalChanged" />
</div>
<KeyboardShortcutInfo />
</section>
@ -32,6 +33,7 @@ export default {
iconSize: String,
availableThemes: Object,
appConfig: Object,
pageInfo: Object,
sections: Array,
modalOpen: Boolean,
},
@ -101,6 +103,7 @@ export default {
div {
margin-left: 0.5rem;
opacity: var(--dimming-factor);
opacity: 1;
&:hover { opacity: 1; }
}
}

8
src/router.js
View File

@ -2,9 +2,12 @@ import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import conf from '../public/conf.yml'; // Main site configuration
import { pageInfo as defaultPageInfo } from './utils/defaults';
Vue.use(Router);
const { sections, pageInfo, appConfig } = conf;
const router = new Router({
routes: [
{
@ -12,8 +15,9 @@ const router = new Router({
name: 'home',
component: Home,
props: {
sections: conf.sections || [],
appConfig: conf.appConfig || {},
sections: sections || [],
pageInfo: pageInfo || defaultPageInfo,
appConfig: appConfig || {},
},
meta: {
title: 'Home Page',

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

@ -55,6 +55,6 @@
--welcome-popup-text-color: var(--primary);
--config-code-background: #fff;
--config-code-color: var(--background);
--config-settings-color: var(--background);
--config-settings-background: var(--primary);
--config-settings-color: var(--primary);
--config-settings-background: var(--background-darker);
}

5
src/utils/defaults.js
View File

@ -46,4 +46,9 @@ module.exports = {
THEME: 'theme',
CONF_SECTIONS: 'confSections',
},
topLevelConfKeys: {
PAGE_INFO: 'pageInfo',
APP_CONFIG: 'appConfig',
SECTIONS: 'sections',
},
};

4
src/views/Home.vue
View File

@ -9,8 +9,9 @@
:displayLayout="layout"
:iconSize="itemSizeBound"
:availableThemes="getExternalCSSLinks()"
:appConfig="appConfig"
:sections="getSections(sections)"
:appConfig="appConfig"
:pageInfo="pageInfo"
:modalOpen="modalOpen"
class="filter-container"
/>
@ -47,6 +48,7 @@ export default {
props: {
sections: Array, // Main site content
appConfig: Object, // Main site configuation (optional)
pageInfo: Object, // Page metadata (optional)
},
components: {
SettingsContainer,