lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-14 04:03:51 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

composition: ThemeSelect

Browse Source
This commit is contained in:
Matthias 2022-04-17 10:07:48 +02:00
parent be80da4f06
commit ffada86507
1 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/BootswatchThemeSelect.vue
View File

@ -31,14 +31,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import { defineComponent, ref, onMounted } from '@vue/composition-api';
import axios from 'axios'; import axios from 'axios';
import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue'; import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
import { themeList } from '@/shared/themes'; import { themeList } from '@/shared/themes';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { FTHTMLStyleElement } from '@/types/styleElement'; import { FTHTMLStyleElement } from '@/types/styleElement';
import { useActions } from 'vuex-composition-helpers';
export default Vue.extend({ export default defineComponent({
name: 'BootswatchThemeSelect', name: 'BootswatchThemeSelect',
components: { ThemeLightDark }, components: { ThemeLightDark },
props: { props: {
@ -47,27 +48,15 @@ export default Vue.extend({
default: true, default: true,
}, },
}, },
data() { setup(props) {
return { const activeTheme = ref('');
activeTheme: '', const themeList = ref([]);
themeList,
}; const { setCurrentTheme } = useActions(['setCurrentTheme']);
},
mounted() { const setTheme = (themeName) => {
// If a theme has been stored in localstorage, the theme will be set.
if (window.localStorage.theme) this.setTheme(window.localStorage.theme);
},
methods: {
...mapActions(['setCurrentTheme']),
handleClick(e) {
this.setTheme(e.target.name.trim());
},
toggleNight() {
this.setTheme(this.activeTheme === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
},
setTheme(themeName) {
// If theme is already active, do nothing. // If theme is already active, do nothing.
if (this.activeTheme === themeName) { if (activeTheme.value === themeName) {
return; return;
} }
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') { if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
@ -81,7 +70,7 @@ export default Vue.extend({
bw.forEach((style, index) => { bw.forEach((style, index) => {
(bw[index] as FTHTMLStyleElement).disabled = true; (bw[index] as FTHTMLStyleElement).disabled = true;
}); });
if (this.simple && this.activeTheme) { if (props.simple && activeTheme.value) {
// Only transition if simple mode is active // Only transition if simple mode is active
document.documentElement.classList.add('ft-theme-transition'); document.documentElement.classList.add('ft-theme-transition');
window.setTimeout(() => { window.setTimeout(() => {
@ -110,10 +99,21 @@ export default Vue.extend({
}); });
} }
// Save the theme as localstorage // Save the theme as localstorage
this.setCurrentTheme(themeName); setCurrentTheme(themeName);
this.activeTheme = themeName; activeTheme.value = themeName;
}, };
fetchApi() {
onMounted(() => {
if (window.localStorage.theme) setTheme(window.localStorage.theme);
});
const handleClick = (e) => {
setTheme(e.target.name.trim());
};
const toggleNight = () => {
setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
};
const fetchApi = () => {
// Fetches boostswatch api and dynamically sets themes. // Fetches boostswatch api and dynamically sets themes.
// Not used, but useful for updating the static array of themes if bootswatch dependency is outdated. // Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
axios axios
@ -132,7 +132,15 @@ export default Vue.extend({
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
}, };
return {
activeTheme,
themeList,
setTheme,
handleClick,
toggleNight,
fetchApi,
};
}, },
}); });
</script> </script>