danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

revert changes to theme switch button.

Browse source
This commit is contained in:
ArabCoders 2025-01-29 16:32:53 +03:00
parent 0d8d9bb13f
commit 67543e6044
1 changed files with 15 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
ui/layouts/default.vue
View file

@ -19,28 +19,6 @@
</NuxtLink> </NuxtLink>
</div> </div>
<div class="navbar-item has-dropdown is-unselectable" :class="{ 'is-active': theme_open }"
@click.prevent="openCloseTheme" v-tooltip.bottom="'Change Theme'">
<a class="navbar-link is-arrowless">
<span class="icon"><i class="fas fa-repeat" /></span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item" :class="{ 'is-selected': 'auto' === selectedTheme }" @click="selectTheme('auto')">
<span class="icon"><i class="fas fa-sync" /></span>
<span>Auto</span>
</a>
<hr class="navbar-divider">
<a class="navbar-item" :class="{ 'is-selected': 'light' === selectedTheme }" @click="selectTheme('light')">
<span class="icon"><i class="fas fa-sun" /></span>
<span>Light</span>
</a>
<a class="navbar-item" :class="{ 'is-selected': 'dark' === selectedTheme }" @click="selectTheme('dark')">
<span class="icon"><i class="fas fa-moon" /></span>
<span>Dark</span>
</a>
</div>
</div>
<div class="navbar-item" v-if="!config.app.basic_mode"> <div class="navbar-item" v-if="!config.app.basic_mode">
<NuxtLink class="button is-dark has-tooltip-bottom" to="/console" v-tooltip.bottom="'Terminal'"> <NuxtLink class="button is-dark has-tooltip-bottom" to="/console" v-tooltip.bottom="'Terminal'">
<span class="icon"><i class="fa-solid fa-terminal" /></span> <span class="icon"><i class="fa-solid fa-terminal" /></span>
@ -59,6 +37,21 @@
</NuxtLink> </NuxtLink>
</div> </div>
<div class="navbar-item">
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
v-if="'auto' == selectedTheme" @click="selectTheme('light')">
<span class="icon has-text-warning"><i class="fas fa-sun" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
v-if="'light' == selectedTheme" @click="selectTheme('dark')">
<span class="icon"><i class="fas fa-moon" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
v-if="'dark' == selectedTheme" @click="selectTheme('auto')">
<span class="icon"><i class="fas fa-microchip" /></span>
</button>
</div>
<div class="navbar-item"> <div class="navbar-item">
<button class="button is-dark" @click="reloadPage"> <button class="button is-dark" @click="reloadPage">
<span class="icon"><i class="fas fa-refresh"></i></span> <span class="icon"><i class="fas fa-refresh"></i></span>
@ -101,8 +94,6 @@ const Year = new Date().getFullYear()
const selectedTheme = useStorage('theme', 'auto') const selectedTheme = useStorage('theme', 'auto')
const socket = useSocketStore() const socket = useSocketStore()
const config = useConfigStore() const config = useConfigStore()
const theme_open = ref(false)
const theme_inner_click = ref(false)
const applyPreferredColorScheme = scheme => { const applyPreferredColorScheme = scheme => {
if (!scheme || 'auto' === scheme) { if (!scheme || 'auto' === scheme) {
@ -165,23 +156,9 @@ watch(selectedTheme, value => {
const reloadPage = () => window.location.reload() const reloadPage = () => window.location.reload()
const selectTheme = theme => { const selectTheme = theme => {
theme_inner_click.value = true
theme_open.value = false
console.log('selectedTheme', selectedTheme.value, theme_open.value)
if (theme === selectedTheme.value) {
return
}
selectedTheme.value = theme selectedTheme.value = theme
if ('auto' === theme) { if ('auto' === theme) {
return reloadPage() return reloadPage()
} }
} }
const openCloseTheme = () => {
if (theme_inner_click.value) {
theme_inner_click.value = false
return
}
theme_open.value = !theme_open.value
}
</script> </script>