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

Bootswatch to script setup

Browse Source
This commit is contained in:
Matthias 2023-03-23 18:23:14 +01:00
parent e3d5ceff84
commit b1ceb7158a
1 changed files with 89 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/BootswatchThemeSelect.vue
View File

@ -29,29 +29,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
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 { FTHTMLStyleElement } from '@/types/styleElement'; import { FTHTMLStyleElement } from '@/types/styleElement';
import { useSettingsStore } from '@/stores/settings'; import { useSettingsStore } from '@/stores/settings';
import { ThemeType } from '@/shared/themes'; import { ThemeType } from '@/shared/themes';
export default defineComponent({ const props = defineProps({
name: 'BootswatchThemeSelect',
components: { ThemeLightDark },
props: {
simple: { simple: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
}, });
setup(props) { const activeTheme = ref('');
const activeTheme = ref(''); const themeList = ref<ThemeType[]>([]);
const themeList = ref<ThemeType[]>([]); const settingsStore = useSettingsStore();
const settingsStore = useSettingsStore();
const setTheme = (themeName) => { const setTheme = (themeName) => {
// If theme is already active, do nothing. // If theme is already active, do nothing.
if (activeTheme.value === themeName) { if (activeTheme.value === themeName) {
return; return;
@ -98,19 +94,19 @@ export default defineComponent({
// Save the theme as localstorage // Save the theme as localstorage
settingsStore.currentTheme = themeName; settingsStore.currentTheme = themeName;
activeTheme.value = themeName; activeTheme.value = themeName;
}; };
onMounted(() => { onMounted(() => {
if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme); if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
}); });
const handleClick = (e) => { const handleClick = (e) => {
setTheme(e.target.name.trim()); setTheme(e.target.name.trim());
}; };
const toggleNight = () => { const toggleNight = () => {
setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap'); setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
}; };
const fetchApi = () => { 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
@ -129,17 +125,7 @@ export default defineComponent({
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
}; };
return {
activeTheme,
themeList,
setTheme,
handleClick,
toggleNight,
fetchApi,
};
},
});
</script> </script>
<style scoped></style> <style scoped></style>