tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-23 13:45:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

🩹 Re: #259 - Remove CSS validation

Browse Source
This commit is contained in:
Alicia Sykes 2021-10-01 00:43:16 +01:00
parent 0bfca16dda
commit dbb036bf30
1 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
<div class="css-wrapper"> <div class="css-wrapper">
<h2 class="css-input-title">Custom CSS</h2> <h2 class="css-input-title">Custom CSS</h2>
<textarea class="css-editor" v-model="customCss" /> <textarea class="css-editor" v-model="customCss" />
<button class="save-button" @click="save()">{{ $t('config.css-save-btn') }}</button> <Button class="save-button" :click="save">{{ $t('config.css-save-btn') }}</button>
<p class="quick-note"> <p class="quick-note">
<b>{{ $t('config.css-note-label') }}:</b> <b>{{ $t('config.css-note-label') }}:</b>
{{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }} {{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }}
@ -19,6 +19,7 @@
<script> <script>
import CustomThemeMaker from '@/components/Settings/CustomThemeMaker'; import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
import Button from '@/components/FormElements/Button';
import { getTheme } from '@/utils/ConfigHelpers'; import { getTheme } from '@/utils/ConfigHelpers';
import { localStorageKeys } from '@/utils/defaults'; import { localStorageKeys } from '@/utils/defaults';
import { InfoHandler } from '@/utils/ErrorHandler'; import { InfoHandler } from '@/utils/ErrorHandler';
@ -29,6 +30,7 @@ export default {
config: Object, config: Object,
}, },
components: { components: {
Button,
CustomThemeMaker, CustomThemeMaker,
}, },
data() { data() {
@ -38,26 +40,21 @@ export default {
}; };
}, },
methods: { methods: {
/* A regex to validate the users CSS */
validate(css) {
return css === '' || css.match(/([#.@]?[\w.:> ]+)[\s]{[\r\n]?([A-Za-z\- \r\n\t]+[:][\s]*[\w ./()\-!]+;[\r\n]*(?:[A-Za-z\- \r\n\t]+[:][\s]*[\w ./()\-!]+;[\r\n]*(2)*)*)}/gmi);
},
/* Save custom CSS in browser, call inject, and show success message */ /* Save custom CSS in browser, call inject, and show success message */
save() { save() {
let msg = ''; // Get, and sanitize users CSS
if (this.validate(this.customCss)) { const css = this.customCss.replace(/<\/?[^>]+(>|$)/g, '');
const appConfig = { ...this.config.appConfig }; // Update app config, and apply settings locally
appConfig.customCss = this.customCss; const appConfig = { ...this.config.appConfig };
localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig)); appConfig.customCss = css;
msg = 'Changes saved successfully'; localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
InfoHandler('User syles has been saved', 'Custom CSS Update'); // Immidiatley inject new CSS
this.inject(this.customCss); this.inject(css);
if (this.customCss === '') setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals // If reseting styles, then refresh the page
} else { if (css === '') setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
msg = 'Error - Invalid CSS'; // Show status message
InfoHandler(msg, 'Custom CSS Update'); InfoHandler('User syles has been saved', 'Custom CSS Update');
} this.$toasted.show('Changes saved successfully');
this.$toasted.show(msg);
}, },
/* Formats CSS, and applies it to page */ /* Formats CSS, and applies it to page */
inject(userStyles) { inject(userStyles) {
@ -72,6 +69,7 @@ export default {
<style lang="scss"> <style lang="scss">
// Main layout
div.css-editor-outer { div.css-editor-outer {
text-align: center; text-align: center;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -87,22 +85,19 @@ div.css-editor-outer {
} }
} }
button.save-button { // Save button
padding: 0.5rem 1rem; button.save-button{
margin: 0.25rem auto;
font-size: 1.2rem;
background: var(--config-settings-color); background: var(--config-settings-color);
color: var(--config-settings-background); color: var(--config-settings-background);
border: 1px solid var(--config-settings-background); border: 1px solid var(--config-settings-background);
border-radius: var(--curve-factor); &:hover:not(:disabled) {
cursor: pointer;
&:hover {
background: var(--config-settings-background); background: var(--config-settings-background);
color: var(--config-settings-color); color: var(--config-settings-color);
border-color: var(--config-settings-color); border-color: var(--config-settings-color);
} }
} }
// CSS textarea input
.css-editor { .css-editor {
margin: 1rem auto; margin: 1rem auto;
padding: 0.5rem; padding: 0.5rem;
@ -121,6 +116,7 @@ button.save-button {
} }
} }
// Info note
p.quick-note { p.quick-note {
text-align: left; text-align: left;
width: 80%; width: 80%;
@ -131,6 +127,7 @@ p.quick-note {
border-radius: var(--curve-factor); border-radius: var(--curve-factor);
} }
// Theme editor
.color-config.theme-configurator-wrapper { .color-config.theme-configurator-wrapper {
border: 1px solid var(--config-settings-color); border: 1px solid var(--config-settings-color);
background: var(--config-settings-background); background: var(--config-settings-background);