mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-23 03:25:15 +00:00
Merge branch 'bootswatch_remove'
This commit is contained in:
Matthias
commit
83c8bdc1b1
|
|
@ -22,7 +22,6 @@
|
|||
"axios": "^1.3.4",
|
||||
"bootstrap": "^5.2.3",
|
||||
"bootstrap-vue-next": "^0.7.3",
|
||||
"bootswatch": "^5.2.3",
|
||||
"core-js": "^3.29.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"date-fns-tz": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<b-nav-item-dropdown
|
||||
v-if="!simple"
|
||||
id="my-nav-dropdown"
|
||||
text="Theme"
|
||||
toggle-class="nav-link-custom"
|
||||
right
|
||||
lazy
|
||||
>
|
||||
<b-dropdown-item v-if="themeList1.length === 0">
|
||||
<b-spinner small></b-spinner> Loading Themes...
|
||||
</b-dropdown-item>
|
||||
|
||||
<!-- TODO Add v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
|
||||
<b-dropdown-item-button
|
||||
v-for="(theme, key) in themeList1"
|
||||
:key="key"
|
||||
:active="activeTheme === theme.name"
|
||||
:title="theme.description"
|
||||
@click="handleClick(theme.name)"
|
||||
>{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
|
||||
>
|
||||
</b-nav-item-dropdown>
|
||||
<b-link v-else variant="outline-primary" class="nav-link" @click="toggleNight">
|
||||
<ThemeLightDark :size="16" />
|
||||
</b-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
|
||||
import { FTHTMLStyleElement } from '@/types/styleElement';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { themeList, ThemeType } from '@/shared/themes';
|
||||
|
||||
const props = defineProps({
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const activeTheme = ref('');
|
||||
const themeList1 = ref<ThemeType[]>(themeList);
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const setTheme = (themeName) => {
|
||||
// If theme is already active, do nothing.
|
||||
if (activeTheme.value === themeName) {
|
||||
return;
|
||||
}
|
||||
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
|
||||
const styles = document.getElementsByTagName('style');
|
||||
const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
|
||||
document.documentElement.setAttribute(
|
||||
'data-theme',
|
||||
themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
|
||||
);
|
||||
// Reset all bootswatch styles
|
||||
bw.forEach((style, index) => {
|
||||
(bw[index] as FTHTMLStyleElement).disabled = true;
|
||||
});
|
||||
if (props.simple && activeTheme.value) {
|
||||
// Only transition if simple mode is active
|
||||
document.documentElement.classList.add('ft-theme-transition');
|
||||
window.setTimeout(() => {
|
||||
document.documentElement.classList.remove('ft-theme-transition');
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
// Dynamic import for a different theme, to avoid loading ALL themes.
|
||||
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
|
||||
console.log('theme', mod);
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
const styles = document.getElementsByTagName('style');
|
||||
const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
|
||||
bw.forEach((style, index) => {
|
||||
if (!style.id) {
|
||||
// If its a style that was just imported and hasn't been assigned an id.
|
||||
bw[index].id = themeName;
|
||||
} else if (style.id === themeName) {
|
||||
// If it's a style that has been imported already.
|
||||
(bw[index] as FTHTMLStyleElement).disabled = false;
|
||||
} else {
|
||||
// All other style themes should be disabled.
|
||||
(bw[index] as FTHTMLStyleElement).disabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Save the theme as localstorage
|
||||
settingsStore.currentTheme = themeName;
|
||||
activeTheme.value = themeName;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
|
||||
});
|
||||
|
||||
const handleClick = (name: string) => {
|
||||
setTheme(name.trim());
|
||||
};
|
||||
const toggleNight = () => {
|
||||
setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
|
||||
};
|
||||
const fetchApi = () => {
|
||||
// Fetches boostswatch api and dynamically sets themes.
|
||||
// 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.error(error);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
48
src/components/ThemeSelect.vue
Normal file
48
src/components/ThemeSelect.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<b-link variant="outline-primary" class="nav-link" @click="toggleNight">
|
||||
<ThemeLightDark :size="16" />
|
||||
</b-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
|
||||
const activeTheme = ref('');
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const setTheme = (themeName) => {
|
||||
// If theme is already active, do nothing.
|
||||
if (activeTheme.value === themeName) {
|
||||
return;
|
||||
}
|
||||
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
|
||||
// const styles = document.getElementsByTagName('style');
|
||||
document.documentElement.setAttribute(
|
||||
'data-theme',
|
||||
themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
|
||||
);
|
||||
if (activeTheme.value) {
|
||||
// Only transition if simple mode is active
|
||||
document.documentElement.classList.add('ft-theme-transition');
|
||||
window.setTimeout(() => {
|
||||
document.documentElement.classList.remove('ft-theme-transition');
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
// Save the theme as localstorage
|
||||
settingsStore.currentTheme = themeName;
|
||||
activeTheme.value = themeName;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
|
||||
});
|
||||
|
||||
const toggleNight = () => {
|
||||
setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<router-link v-if="botStore.canRunBacktest" class="nav-link navbar-nav" to="/backtest"
|
||||
>Backtest</router-link
|
||||
>
|
||||
<BootswatchThemeSelect />
|
||||
<theme-select />
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import LoginModal from '@/views/LoginModal.vue';
|
||||
import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
|
||||
import ThemeSelect from '@/components/ThemeSelect.vue';
|
||||
import Favico from 'favico.js';
|
||||
import ReloadControl from '@/components/ftbot/ReloadControl.vue';
|
||||
import BotEntry from '@/components/BotEntry.vue';
|
||||
|
|
|
|||
|
|
@ -17,151 +17,6 @@ export const themeList: ThemeType[] = [
|
|||
dark: true,
|
||||
bootswatch: false,
|
||||
},
|
||||
{
|
||||
name: 'Cerulean',
|
||||
description: 'A calm blue sky',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
{
|
||||
name: 'Cosmo',
|
||||
description: 'An ode to Metro',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Cyborg',
|
||||
description: 'Jet black and electric blue',
|
||||
dark: true,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Darkly',
|
||||
description: 'Flatly in night mode',
|
||||
dark: true,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Flatly',
|
||||
description: 'Flat and modern',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Journal',
|
||||
description: 'Crisp like a new sheet of paper',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Litera',
|
||||
description: 'The medium is the message',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Lumen',
|
||||
description: 'Light and shadow',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Lux',
|
||||
description: 'A touch of class',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Materia',
|
||||
description: 'Material is the metaphor',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Minty',
|
||||
description: 'A fresh feel',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Pulse',
|
||||
description: 'A trace of purple',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Sandstone',
|
||||
description: 'A touch of warmth',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Simplex',
|
||||
description: 'Mini and minimalist',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Sketchy',
|
||||
description: 'A hand-drawn look for mockups and mirth',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Slate',
|
||||
description: 'Shades of gunmetal gray',
|
||||
dark: true,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Solar',
|
||||
description: 'A spin on Solarized',
|
||||
dark: true,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Spacelab',
|
||||
description: 'Silvery and sleek',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Superhero',
|
||||
description: 'The brave and the blue',
|
||||
dark: true,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'United',
|
||||
description: 'Ubuntu orange and unique font',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Yeti',
|
||||
description: 'A friendly foundation',
|
||||
dark: false,
|
||||
bootswatch: true,
|
||||
},
|
||||
];
|
||||
|
||||
export function storeCurrentTheme(themeName: string) {
|
||||
|
|
|
|||
|
|
@ -2001,11 +2001,6 @@ bootstrap@^5.2.3:
|
|||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
|
||||
integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
|
||||
|
||||
bootswatch@^5.2.3:
|
||||
version "5.2.3"
|
||||
resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.2.3.tgz#a12bef6ea1a54f1b5b55b472c11a846d1cb77239"
|
||||
integrity sha512-tvnW15WoOY2sEp1uT1ITDQiJy2TekQa+K+Q28WDXibleIxsY0nAoC9IylbnUPD7Q5vkCIclOuBHLVBblJYYPSA==
|
||||
|
||||
brace-expansion@^1.1.7:
|
||||
version "1.1.11"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user