🎨 Add theme support

- Move root (var) style properties to `/assets/css/themes.scss`
- Improve mobile navigation
- Create section component for the collapsable sections.
- Create logo component, so color can be changed.

- Add settings page
- Add option to select theme color
- Add option to select theme background
- Add option to enable/disable multi-colored frames.

- Add settings to VueX Store
- Persist VueX store in LocalStorage.
This commit is contained in:
NBTX
2019-08-25 00:42:41 +01:00
parent 67f0600702
commit 02ef69f0f7
15 changed files with 810 additions and 404 deletions

3
store/index.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
}

51
store/postwoman.js Normal file
View File

@@ -0,0 +1,51 @@
export const SETTINGS_KEYS = [
/**
* The CSS class that should be applied to the root element.
* Essentially, the name of the background theme.
*/
"THEME_CLASS",
/**
* The hex color code for the currently active theme.
*/
"THEME_COLOR",
/**
* Whether or not THEME_COLOR is considered 'vibrant'.
*
* For readability reasons, if the THEME_COLOR is vibrant,
* any text placed on the theme color will have its color
* inverted from white to black.
*/
"THEME_COLOR_VIBRANT",
/**
* Normally, section frames are multicolored in the UI
* to emphasise the different sections.
* This setting allows that to be turned off.
*/
"DISABLE_FRAME_COLORS"
];
export const state = () => ({
settings: {}
});
export const mutations = {
applySetting (state, setting) {
if(setting == null || !(setting instanceof Array) || setting.length !== 2)
throw new Error("You must provide a setting (array in the form [key, value])");
let key = setting[0];
let value = setting[1];
// Do not just remove this check.
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
state.settings[key] = value;
}
};