diff options
Diffstat (limited to 'web/html/xui/component')
| -rw-r--r-- | web/html/xui/component/password.html | 4 | ||||
| -rw-r--r-- | web/html/xui/component/setting.html | 6 | ||||
| -rw-r--r-- | web/html/xui/component/themeSwitch.html | 26 |
3 files changed, 6 insertions, 30 deletions
diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html index ebea3be6..13dbfb51 100644 --- a/web/html/xui/component/password.html +++ b/web/html/xui/component/password.html @@ -4,12 +4,12 @@ :placeholder="placeholder" @input="$emit('input', $event.target.value)"> <template v-if="icon" #prefix> - <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + <a-icon :type="icon" style="font-size: 16px;" /> </template> <template #addonAfter> <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" - :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + style="font-size: 16px;" /> </template> </a-input> </template> diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html index 568f03de..82c0ae75 100644 --- a/web/html/xui/component/setting.html +++ b/web/html/xui/component/setting.html @@ -13,10 +13,10 @@ </a-col> <a-col :lg="24" :xl="12"> <template v-if="type === 'text'"> - <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input> + <a-input :value="value" @input="$emit('input', $event.target.value)" :placeholder="placeholder"></a-input> </template> <template v-else-if="type === 'number'"> - <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number> + <a-input-number :value="value" :step="step" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number> </template> <template v-else-if="type === 'switch'"> <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch> @@ -29,7 +29,7 @@ {{define "component/setting"}} <script> Vue.component('setting-list-item', { - props: ["type", "title", "desc", "value", "min"], + props: ["type", "title", "desc", "value", "min", "step", "placeholder"], template: `{{template "component/settingListItem"}}`, }); </script> diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html index 7cbedecf..4d5412e2 100644 --- a/web/html/xui/component/themeSwitch.html +++ b/web/html/xui/component/themeSwitch.html @@ -1,8 +1,6 @@ {{define "component/themeSwitchTemplate"}} <template> - <a-switch :default-checked="themeSwitcher.isDarkTheme" - checked-children="☀" - un-checked-children="🌙" + <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"> </a-switch> </template> @@ -10,39 +8,17 @@ {{define "component/themeSwitcher"}} <script> - const colors = { - dark: { - bg: "#242c3a", - text: "hsla(0,0%,100%,.65)" - }, - light: { - bg: '#f0f2f5', - text: "rgba(0, 0, 0, 0.7)", - } - } - function createThemeSwitcher() { const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; const theme = isDarkTheme ? 'dark' : 'light'; return { isDarkTheme, - bgStyle: `background: ${colors[theme].bg};`, - textStyle: `color: ${colors[theme].text};`, - darkClass: isDarkTheme ? 'ant-dark' : '', - darkCardClass: isDarkTheme ? 'ant-card-dark' : '', - darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '', get currentTheme() { return this.isDarkTheme ? 'dark' : 'light'; }, toggleTheme() { this.isDarkTheme = !this.isDarkTheme; - this.theme = this.isDarkTheme ? 'dark' : 'light'; localStorage.setItem('dark-mode', this.isDarkTheme); - this.bgStyle = `background: ${colors[this.theme].bg};`; - this.textStyle = `color: ${colors[this.theme].text};`; - this.darkClass = this.isDarkTheme ? 'ant-dark' : ''; - this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : ''; - this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : ''; }, }; } |