tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-26 15:14:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ Adds custom theme configurator to the style tab of config menu

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-18 10:11:33 +01:00
parent 3ff830ea95
commit 04b98ae66c
1 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Configuration/CustomCss.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="json-editor-outer"> <div class="css-editor-outer">
<prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers /> <prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers />
<button class="save-button" @click="save()">Save Changes</button> <button class="save-button" @click="save()">Save Changes</button>
<p class="quick-note"> <p class="quick-note">
@ -7,10 +7,13 @@
Styles overides are only stored locally, so it is reccomended to make a copy of your CSS. Styles overides are only stored locally, so it is reccomended to make a copy of your CSS.
To remove all custom styles, delete the contents and hit Save Changes To remove all custom styles, delete the contents and hit Save Changes
</p> </p>
<CustomThemeMaker :themeToEdit="currentTheme" class="color-config" />
</div> </div>
</template> </template>
<script> <script>
import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
import { getTheme } from '@/utils/ConfigHelpers';
import { PrismEditor } from 'vue-prism-editor'; import { PrismEditor } from 'vue-prism-editor';
import { highlight, languages } from 'prismjs/components/prism-core'; import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-css'; import 'prismjs/components/prism-css';
@ -25,11 +28,13 @@ export default {
config: Object, config: Object,
}, },
components: { components: {
CustomThemeMaker,
PrismEditor, PrismEditor,
}, },
data() { data() {
return { return {
customCss: this.config.appConfig.customCss || '\n\n\n\n\n', customCss: this.config.appConfig.customCss || '\n\n\n\n\n',
currentTheme: getTheme(),
}; };
}, },
methods: { methods: {
@ -65,6 +70,11 @@ export default {
<style lang="scss"> <style lang="scss">
div.css-editor-outer {
text-align: center;
padding-bottom: 1rem;
}
button.save-button { button.save-button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0.25rem auto; margin: 0.25rem auto;
@ -98,4 +108,22 @@ p.quick-note {
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
} }
.color-config.theme-configurator-wrapper {
border: 1px solid var(--config-settings-color);
background: var(--config-settings-background);
color: var(--config-settings-color);
position: relative;
width: 80%;
max-width: 24rem;
margin: 2rem auto;
box-shadow: none;
right: 0;
top: 0;
max-height: unset;
.color-row-container {
text-align: left;
max-height: unset;
}
}
</style> </style>