Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-09-09 11:46:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

checkbox fixed

Browse source 
Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
MHSanaei 2024-02-28 01:18:59 +03:30
parent 6856638e2e
commit 0abca75c5d
3 changed files with 47 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/html/xui/common_sider.html
View file

@ -15,10 +15,6 @@
<a-icon type="tool"></a-icon>
<span><b>{{ i18n "menu.xray"}}</b></span>
</a-menu-item>
<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
<!-- <a-icon type="laptop"></a-icon>-->
<!-- <span>Client</span>-->
<!--</a-menu-item>-->
<a-menu-item key="{{ .base_path }}logout">
<a-icon type="logout"></a-icon>
<span><b>{{ i18n "menu.logout"}}</b></span>
@ -28,14 +24,7 @@
{{define "commonSider"}}
<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
<a-menu-item mode="inline">
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
<theme-switch>
</theme-switch>
<a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem;" id="ultradarktheme">Ultra</a-checkbox>
</a-menu-item>
</a-menu>
<theme-switch></theme-switch>
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
@click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
{{template "menuItems" .}}

97
web/html/xui/component/themeSwitch.html
View file

@ -1,70 +1,65 @@
{{define "component/themeSwitchTemplate"}}
<template>
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
@change="themeSwitcher.toggleTheme()">
</a-switch>
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
<a-menu-item mode="inline">
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()">
</a-switch>
<a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
:checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">
Ultra
</a-checkbox>
</a-menu-item>
</a-menu>
</template>
{{end}}
{{define "component/themeSwitcher"}}
<script>
function createThemeSwitcher() {
function createThemeSwitcher() {
const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
const theme = isDarkTheme ? 'dark' : 'light';
document.querySelector('body').setAttribute('class', theme)
return {
isDarkTheme,
get currentTheme() {
return this.isDarkTheme ? 'dark' : 'light';
},
toggleTheme() {
this.isDarkTheme = !this.isDarkTheme;
localStorage.setItem('dark-mode', this.isDarkTheme);
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
document.getElementById('message').className = themeSwitcher.currentTheme;
},
};
}
const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
if (isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
}
const themeSwitcher = createThemeSwitcher();
const theme = isDarkTheme ? 'dark' : 'light';
document.querySelector('body').setAttribute('class', theme);
return {
isDarkTheme,
isUltra,
get currentTheme() {
return this.isDarkTheme ? 'dark' : 'light';
},
toggleTheme() {
this.isDarkTheme = !this.isDarkTheme;
localStorage.setItem('dark-mode', this.isDarkTheme);
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
document.getElementById('message').className = themeSwitcher.currentTheme;
},
toggleUltra() {
this.isUltra = !this.isUltra;
if (this.isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
}
};
}
const themeSwitcher = createThemeSwitcher();
Vue.component('theme-switch', {
props: [],
template: `{{template "component/themeSwitchTemplate"}}`,
data: () => ({ themeSwitcher }),
mounted() {
this.$message.config({getContainer: () => document.getElementById('message')});
this.$message.config({ getContainer: () => document.getElementById('message') });
document.getElementById('message').className = themeSwitcher.currentTheme;
}
});
</script>
{{end}}
{{define "component/ultraDarkTheme"}}
<script>
const isUltraDarkThemeEnabled = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
document.addEventListener('DOMContentLoaded', function () {
const uthemeToggle = document.getElementById('ultradarktheme');
if (uthemeToggle) {
uthemeToggle.checked = isUltraDarkThemeEnabled;
function ultraToggleTheme() {
if (uthemeToggle.checked) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
localStorage.setItem('isUltraDarkThemeEnabled', 'true');
} else {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('isUltraDarkThemeEnabled', 'false');
}
}
uthemeToggle.addEventListener('change', ultraToggleTheme);
ultraToggleTheme();
} else {
console.error("Element with ID 'ultradarktheme' not found.");
}
});
</script>
{{end}}
{{end}}

1
web/html/xui/index.html
View file

@ -343,7 +343,6 @@
{{template "js" .}}
<script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
{{template "component/themeSwitcher" .}}
{{template "component/ultraDarkTheme" .}}
{{template "textModal"}}
<script>