mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-26 21:15:15 +00:00
Bootswatch to script setup
This commit is contained in:
Matthias
parent
e3d5ceff84
commit
b1ceb7158a
|
|
@ -29,117 +29,103 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
<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 { ThemeType } from '@/shared/themes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BootswatchThemeSelect',
|
||||
components: { ThemeLightDark },
|
||||
props: {
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const activeTheme = ref('');
|
||||
const themeList = ref<ThemeType[]>([]);
|
||||
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 = (e) => {
|
||||
setTheme(e.target.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);
|
||||
});
|
||||
};
|
||||
return {
|
||||
activeTheme,
|
||||
themeList,
|
||||
setTheme,
|
||||
handleClick,
|
||||
toggleNight,
|
||||
fetchApi,
|
||||
};
|
||||
const props = defineProps({
|
||||
simple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const activeTheme = ref('');
|
||||
const themeList = ref<ThemeType[]>([]);
|
||||
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 = (e) => {
|
||||
setTheme(e.target.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user