mirror of
https://github.com/freqtrade/frequi.git
synced 2024-09-20 09:31:10 +00:00
Refactor: Removed API fetch call (Kept method, for future updates), Added static theme list, Removed localStorage Check, removed unused lifecyclehooks and other variables.
This commit is contained in:
parent
aa2d1961af
commit
6a3a482b5d
|
@ -1,30 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <img :src="theme.thumbnail" style="height: 30px;" /> -->
|
||||
<b-nav-item-dropdown
|
||||
id="my-nav-dropdown"
|
||||
text="Theme"
|
||||
toggle-class="nav-link-custom"
|
||||
@show.once="fetchApi"
|
||||
right
|
||||
lazy
|
||||
>
|
||||
<b-dropdown-item v-if="themes.length === 0">
|
||||
<b-spinner small></b-spinner>
|
||||
Loading Themes...
|
||||
<b-spinner small></b-spinner> Loading Themes...
|
||||
</b-dropdown-item>
|
||||
|
||||
<!-- TODO Add v-b-tooltip.hover.right=="{ variant: 'info' }" for tooltip class rendered from bootswatch-->
|
||||
<!-- TODO Add v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
|
||||
<b-dropdown-item-button
|
||||
v-for="(theme, key) in themes"
|
||||
:key="key"
|
||||
@click="handleClick"
|
||||
:value="theme.cssCdn"
|
||||
:active="activeTheme === theme.name"
|
||||
v-b-tooltip.hover.right
|
||||
:title="theme.description"
|
||||
>{{ theme.name }}
|
||||
</b-dropdown-item-button>
|
||||
>{{ theme.name }}</b-dropdown-item-button
|
||||
>
|
||||
</b-nav-item-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -36,30 +32,110 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
activeTheme: '',
|
||||
themes: [],
|
||||
supportsLocalStorage: false,
|
||||
themes: [
|
||||
{
|
||||
name: 'Cerulean',
|
||||
description: 'A calm blue sky',
|
||||
},
|
||||
{
|
||||
name: 'Cosmo',
|
||||
description: 'An ode to Metro',
|
||||
},
|
||||
{
|
||||
name: 'Cyborg',
|
||||
description: 'Jet black and electric blue',
|
||||
},
|
||||
{
|
||||
name: 'Darkly',
|
||||
description: 'Flatly in night mode',
|
||||
},
|
||||
{
|
||||
name: 'Flatly',
|
||||
description: 'Flat and modern',
|
||||
},
|
||||
{
|
||||
name: 'Journal',
|
||||
description: 'Crisp like a new sheet of paper',
|
||||
},
|
||||
{
|
||||
name: 'Litera',
|
||||
description: 'The medium is the message',
|
||||
},
|
||||
{
|
||||
name: 'Lumen',
|
||||
description: 'Light and shadow',
|
||||
},
|
||||
{
|
||||
name: 'Lux',
|
||||
description: 'A touch of class',
|
||||
},
|
||||
{
|
||||
name: 'Materia',
|
||||
description: 'Material is the metaphor',
|
||||
},
|
||||
{
|
||||
name: 'Minty',
|
||||
description: 'A fresh feel',
|
||||
},
|
||||
{
|
||||
name: 'Pulse',
|
||||
description: 'A trace of purple',
|
||||
},
|
||||
{
|
||||
name: 'Sandstone',
|
||||
description: 'A touch of warmth',
|
||||
},
|
||||
{
|
||||
name: 'Simplex',
|
||||
description: 'Mini and minimalist',
|
||||
},
|
||||
{
|
||||
name: 'Sketchy',
|
||||
description: 'A hand-drawn look for mockups and mirth',
|
||||
},
|
||||
{
|
||||
name: 'Slate',
|
||||
description: 'Shades of gunmetal gray',
|
||||
},
|
||||
{
|
||||
name: 'Solar',
|
||||
description: 'A spin on Solarized',
|
||||
},
|
||||
{
|
||||
name: 'Spacelab',
|
||||
description: 'Silvery and sleek',
|
||||
},
|
||||
{
|
||||
name: 'Superhero',
|
||||
description: 'The brave and the blue',
|
||||
},
|
||||
{
|
||||
name: 'United',
|
||||
description: 'Ubuntu orange and unique font',
|
||||
},
|
||||
{
|
||||
name: 'Yeti',
|
||||
description: 'A friendly foundation',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
name: 'BootswatchThemeSelect',
|
||||
created() {
|
||||
// this.fetchApi();
|
||||
// We don't need to call the api here because it will be called once the show event is triggered from clicking on the dropdown.
|
||||
},
|
||||
mounted() {
|
||||
this.supportsLocalStorage = window.localStorage.length > 0;
|
||||
this.getTheme();
|
||||
// If a theme has been stored in localstorage, the theme will be set.
|
||||
if (window.localStorage.theme) this.setTheme(window.localStorage.theme);
|
||||
},
|
||||
updated() {},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.setTheme(e.target.innerText.trim());
|
||||
},
|
||||
setTheme(themeName) {
|
||||
// Change the stylesheet to a different theme
|
||||
// If theme is already active, do nothing.
|
||||
if (this.activeTheme === themeName) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Dynamic import for a different theme, to avoid loading ALL themes.
|
||||
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then(() => {
|
||||
const styles = document.getElementsByTagName('style');
|
||||
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
|
||||
|
@ -76,34 +152,26 @@ export default {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Save the theme as localstorage
|
||||
if (this.supportsLocalStorage) {
|
||||
console.log('Setting new theme as ', themeName);
|
||||
console.log('Setting theme as', themeName);
|
||||
window.localStorage.theme = themeName;
|
||||
}
|
||||
this.activeTheme = themeName;
|
||||
},
|
||||
getTheme() {
|
||||
// console.log('Looking in local storage for theme.');
|
||||
if (this.supportsLocalStorage) {
|
||||
const themeName = window.localStorage.theme;
|
||||
if (themeName) {
|
||||
console.log(`${themeName} theme found in localstorage`);
|
||||
this.setTheme(themeName);
|
||||
}
|
||||
}
|
||||
},
|
||||
fetchApi() {
|
||||
// Fetches boostswatch api and dynamically sets themes.
|
||||
// console.log('Calling bootswatch api');
|
||||
|
||||
// Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
|
||||
axios
|
||||
.get('https://bootswatch.com/api/4.json')
|
||||
.then((res) => {
|
||||
const { themes } = res.data;
|
||||
this.themes = themes;
|
||||
|
||||
// Use this code in the browser console and copy and paste the filteredThemes into this.themes
|
||||
// console.log(themes);
|
||||
// const filteredThemes = [];
|
||||
// themes.forEach((item) =>
|
||||
// filteredThemes.push({ name: item.name, description: item.description }),
|
||||
// );
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
|
|
Loading…
Reference in New Issue
Block a user