Skip to content

Commit

Permalink
Add submenu.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hujiayucc
hujiayucc committed Oct 12, 2024
1 parent acfad16 commit 90d90ee
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 57 deletions.
171 changes: 114 additions & 57 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {changeLanguage} from "@/lang/i18n"

<script lang="ts">
import {CUSTOM_THEME_COLOR} from "@/config"
import {getTheme, setColorScheme, setTheme} from "mdui"
import {getTheme, Menu, setColorScheme, setTheme} from "mdui"
import i18n from "@/lang/i18n"
import type {Theme} from "mdui/internal/theme";
Expand Down Expand Up @@ -37,7 +37,9 @@ export default {
data() {
return {
isOpen: false,
appBarTitle: this.$t(title)
appBarTitle: this.$t(title),
displayIcon: (getTheme() === 'dark') ? 'dark_mode' : 'light_mode',
displayIconButton: (window.innerWidth >= 840)
}
},
methods: {
Expand Down Expand Up @@ -67,73 +69,128 @@ export default {
async changeTheme(theme: string) {
setTheme(theme as Theme)
localStorage.setItem('theme', theme)
},
async onCheckTheme() {
this.displayIcon = (getTheme() === 'dark') ? 'dark_mode' : 'light_mode';
(document.querySelector('.menu-theme') as Menu).value = [getTheme()]
}
},
mounted() {
window.onresize = () => {
this.displayIconButton = (window.innerWidth >= 840)
}
}
}
</script>
<template>
<div class="root-div">
<mdui-layout class="root-contained">
<mdui-top-app-bar scroll-behavior="elevate" scroll-target=".layout-main">
<mdui-button-icon class="menu-button" icon="menu" @click="menuButton"></mdui-button-icon>
<mdui-top-app-bar-title>{{ appBarTitle }}</mdui-top-app-bar-title>
<mdui-dropdown trigger="hover">
<mdui-button-icon icon="translate" slot="trigger"></mdui-button-icon>
<mdui-menu class="menu-transition" selects="single" :value="i18n.global.locale.value">
<mdui-menu-item value="zh" @click="changeLanguage('zh')">简体中文</mdui-menu-item>
<mdui-menu-item value="en" @click="changeLanguage('en')">English</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-layout class="root-contained">
<mdui-top-app-bar scroll-behavior="elevate" scroll-target=".layout-main">
<mdui-button-icon class="menu-button" icon="menu" @click="menuButton"></mdui-button-icon>
<mdui-top-app-bar-title>{{ appBarTitle }}</mdui-top-app-bar-title>

<mdui-dropdown v-if="!displayIconButton" trigger="hover" @close="onCheckTheme()">
<mdui-button-icon icon="more_vert" slot="trigger"></mdui-button-icon>
<mdui-menu class="more_vert">
<mdui-menu-item>
{{ $t('menu.submenu.language') }}
<mdui-menu-item slot="submenu" value="zh" @click="changeLanguage('zh')">简体中文</mdui-menu-item>
<mdui-menu-item slot="submenu" value="en" @click="changeLanguage('en')">English</mdui-menu-item>
</mdui-menu-item>

<mdui-dropdown trigger="hover">
<mdui-button-icon icon="light_mode" slot="trigger"></mdui-button-icon>
<mdui-menu class="menu-theme" selects="single" :value="getTheme()">
<mdui-menu-item class="light" value="light" @click="changeTheme('light')">{{ $t('menu.theme.light') }}</mdui-menu-item>
<mdui-menu-item class="dark" value="dark" @click="changeTheme('dark')">{{ $t('menu.theme.dark') }}</mdui-menu-item>
<mdui-divider></mdui-divider>
<mdui-menu-item class="auto" value="auto" @click="changeTheme('auto')">{{ $t('menu.theme.auto') }}</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
<mdui-menu-item>
{{ $t('menu.submenu.theme') }}
<mdui-menu-item slot="submenu" class="light" value="light" @click="changeTheme('light')">
{{ $t('menu.theme.light') }}
</mdui-menu-item>
<mdui-menu-item slot="submenu" class="dark" value="dark" @click="changeTheme('dark')">
{{ $t('menu.theme.dark') }}
</mdui-menu-item>
<mdui-menu-item slot="submenu" class="auto" value="auto" @click="changeTheme('auto')">
{{ $t('menu.theme.auto') }}
</mdui-menu-item>
</mdui-menu-item>

<mdui-dropdown trigger="hover">
<mdui-button-icon icon="color_lens" slot="trigger"></mdui-button-icon>
<mdui-card data-v-e56655cb="" class="card" variant="elevated">
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.preset') }}</div>
<div data-v-e56655cb="" class="color-preset">
<div data-v-e56655cb="" class="red" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="purple" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="blue" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="green" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="yellow" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="grey" @click="setColor($event)"></div>
</div>
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.custom') }}</div>
<input data-v-e56655cb="" type="color" class="color-custom" @input="handleColorChange">
</mdui-card>
</mdui-dropdown>
</mdui-top-app-bar>
<mdui-navigation-drawer class="navigation-drawer" contained :open="isOpen" @overlay-click="isOpen=false">
<mdui-list class="navigation-drawer-list">
<mdui-menu-item icon="home" @click="menuClick('/','menu.home')">
{{ $t('menu.home') }}
<mdui-menu-item>
{{ $t('menu.submenu.color') }}
<mdui-card slot="submenu" data-v-e56655cb="" class="card" variant="elevated">
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.preset') }}</div>
<div data-v-e56655cb="" class="color-preset">
<div data-v-e56655cb="" class="red" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="purple" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="blue" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="green" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="yellow" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="grey" @click="setColor($event)"></div>
</div>
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.custom') }}</div>
<input data-v-e56655cb="" type="color" class="color-custom" @input="handleColorChange">
</mdui-card>
</mdui-menu-item>
<mdui-menu-item icon="featured_play_list" @click="menuClick('/feature','menu.feature')">
{{ $t('menu.feature') }}
</mdui-menu>
</mdui-dropdown>

<mdui-dropdown v-if="displayIconButton" trigger="hover">
<mdui-button-icon icon="translate" slot="trigger"></mdui-button-icon>
<mdui-menu class="menu-transition" selects="single" :value="i18n.global.locale.value">
<mdui-menu-item value="zh" @click="changeLanguage('zh')">简体中文</mdui-menu-item>
<mdui-menu-item value="en" @click="changeLanguage('en')">English</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>

<mdui-dropdown v-if="displayIconButton" trigger="hover" @close="onCheckTheme()">
<mdui-button-icon slot="trigger" variant="standard" :icon="displayIcon"></mdui-button-icon>
<mdui-menu class="menu-theme" selects="multiple" :value="getTheme()">
<mdui-menu-item class="light" value="light" @click="changeTheme('light')">
{{ $t('menu.theme.light') }}
</mdui-menu-item>
<mdui-menu-item icon="alternate_email" @click="menuClick('/about','menu.about')">
{{ $t('menu.about') }}
<mdui-menu-item class="dark" value="dark" @click="changeTheme('dark')">
{{ $t('menu.theme.dark') }}
</mdui-menu-item>
</mdui-list>
</mdui-navigation-drawer>
<mdui-divider></mdui-divider>
<mdui-menu-item class="auto" value="auto" @click="changeTheme('auto')">
{{ $t('menu.theme.auto') }}
</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>

<mdui-dropdown v-if="displayIconButton" trigger="hover">
<mdui-button-icon icon="color_lens" slot="trigger"></mdui-button-icon>
<mdui-card data-v-e56655cb="" class="card" variant="elevated">
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.preset') }}</div>
<div data-v-e56655cb="" class="color-preset">
<div data-v-e56655cb="" class="red" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="purple" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="blue" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="green" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="yellow" @click="setColor($event)"></div>
<div data-v-e56655cb="" class="grey" @click="setColor($event)"></div>
</div>
<div data-v-e56655cb="" class="color-label">{{ $t('menu.color.custom') }}</div>
<input data-v-e56655cb="" type="color" class="color-custom" @input="handleColorChange">
</mdui-card>
</mdui-dropdown>
</mdui-top-app-bar>
<mdui-navigation-drawer class="navigation-drawer" contained :open="isOpen" @overlay-click="isOpen=false">
<mdui-list class="navigation-drawer-list">
<mdui-menu-item icon="home" @click="menuClick('/','menu.home')">
{{ $t('menu.home') }}
</mdui-menu-item>
<mdui-menu-item icon="featured_play_list" @click="menuClick('/feature','menu.feature')">
{{ $t('menu.feature') }}
</mdui-menu-item>
<mdui-menu-item icon="alternate_email" @click="menuClick('/about','menu.about')">
{{ $t('menu.about') }}
</mdui-menu-item>
</mdui-list>
</mdui-navigation-drawer>

<mdui-layout-main class="layout-main hide-scrollbar">
<RouterView/>
</mdui-layout-main>
</mdui-layout>
<mdui-bottom-app-bar scroll-target=".layout-main" scroll-behavior="hide" scroll-threshold="30">
<mdui-layout-main class="layout-main hide-scrollbar">
<RouterView/>
</mdui-layout-main>
</mdui-layout>
<mdui-bottom-app-bar scroll-target=".layout-main" scroll-behavior="hide" scroll-threshold="30">
<span class="footer-content-text">
Copyright © 2024 <a class="footer-content-text" href="https://github.com/hujiayucc" target="_blank">hujiayucc</a> All Rights Reserved.
</span>
</mdui-bottom-app-bar>
</div>
</mdui-bottom-app-bar>
</template>
5 changes: 5 additions & 0 deletions src/lang/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export default {
light: 'Light',
dark: 'Dark',
auto: 'System'
},
submenu: {
language: "Language Setting",
theme: "Mode Setting",
color: "Color Setting"
}
}
}
5 changes: 5 additions & 0 deletions src/lang/zh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export default {
light: "亮色模式",
dark: "暗色模式",
auto: "跟随系统"
},
submenu: {
language: "语言设置",
theme: "主题设置",
color: "颜色设置"
}
}
}

0 comments on commit 90d90ee

Please sign in to comment.