mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-23 11:35:14 +00:00
Bootswatch to script setup
This commit is contained in:
Matthias
parent
e3d5ceff84
commit
b1ceb7158a
|
|
@ -29,117 +29,103 @@
|
||||||
</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',
|
simple: {
|
||||||
components: { ThemeLightDark },
|
type: Boolean,
|
||||||
props: {
|
default: true,
|
||||||
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 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>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user