🔥 Applies users colors to workspace, fixes spacing on CSS config view, and improves theme reset process

This commit is contained in:
Alicia Sykes 2021-07-18 17:57:11 +01:00
parent 514edcbde9
commit f5eb8f262c
3 changed files with 12 additions and 5 deletions

View File

@ -115,7 +115,7 @@ p.quick-note {
position: relative;
width: 80%;
max-width: 24rem;
margin: 2rem auto;
margin: 1rem auto;
box-shadow: none;
right: 0;
top: 0;

View File

@ -99,11 +99,15 @@ export default {
this.customColors = this.makeInitialData(mainCssVars);
this.$emit('closeThemeConfigurator');
},
/* Resets styles, and removes data for current theme from local storage */
resetAndSave() {
const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
delete priorSettings[this.themeToEdit];
localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
this.resetUnsavedColors();
this.customColors = this.makeInitialData(mainCssVars);
this.saveChanges();
this.$toasted.show(`Custom Colors for ${this.themeToEdit} Removed`);
},
/* Generates CSS for the currently applied variables, and copys to users clipboard */
exportToClipboard() {
const themeName = this.themeToEdit.replace(/^\w/, c => c.toUpperCase());
let clipboardText = `// Custom Colors for ${themeName}\n`;

View File

@ -10,7 +10,7 @@
import SideBar from '@/components/Workspace/SideBar';
import WebContent from '@/components/Workspace/WebContent';
import Defaults from '@/utils/defaults';
import { ApplyLocalTheme, GetTheme } from '@/utils/ThemeHelper';
import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
export default {
name: 'Workspace',
@ -22,6 +22,7 @@ export default {
url: '', // this.$route.query.url || '',
GetTheme,
ApplyLocalTheme,
ApplyCustomVariables,
}),
components: {
SideBar,
@ -32,7 +33,9 @@ export default {
this.url = url;
},
setTheme() {
this.ApplyLocalTheme(this.GetTheme());
const theme = this.GetTheme();
this.ApplyLocalTheme(theme);
this.ApplyCustomVariables(theme);
},
initiateFontAwesome() {
const fontAwesomeScript = document.createElement('script');