diff options
| -rw-r--r-- | src-vue/src/App.vue | 70 | ||||
| -rw-r--r-- | src-vue/src/plugins/store.ts | 3 | ||||
| -rw-r--r-- | src-vue/src/style.css | 3 | ||||
| -rw-r--r-- | src-vue/src/views/PlayView.vue | 1 |
4 files changed, 50 insertions, 27 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue index 9096110c..fc6992b7 100644 --- a/src-vue/src/App.vue +++ b/src-vue/src/App.vue @@ -23,6 +23,9 @@ export default { store.commit('initialize'); }, methods: { + async toggleMaximize() { + await appWindow.toggleMaximize(); + }, minimize() { appWindow.minimize() }, @@ -44,33 +47,48 @@ export default { <div class="app-inner"> <div id="fc_bg__container" :style="bgStyle"/> - <el-menu + <nav id="fc_menu-bar"> + <!-- Navigation items --> + <el-menu default-active="/" router mode="horizontal" - id="fc__menu_bar" + id="fc__menu_items" data-tauri-drag-region - > + > <el-menu-item index="/">Play</el-menu-item> <el-menu-item index="/changelog">Changelog</el-menu-item> <el-menu-item index="/mods">Mods</el-menu-item> <el-menu-item index="/thunderstoreMods">Thunderstore</el-menu-item> <el-menu-item index="/settings">Settings</el-menu-item> <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item> - </el-menu> - - <router-view></router-view> + </el-menu> - <div id="fc_window__controls"> + <!-- Window controls --> + <div id="fc_window__controls"> <el-button color="white" icon="SemiSelect" @click="minimize" circle /> + <el-button color="white" icon="FullScreen" @click="toggleMaximize" circle /> <el-button color="white" icon="CloseBold" @click="close" circle /> - </div> + </div> + </nav> + + <router-view></router-view> </div> </template> <style> +#fc_menu-bar { + position: fixed; + z-index: 1; + top: 0; + width: 100%; + height: var(--fc-menu_height); + background-image: radial-gradient(transparent 1px); + backdrop-filter: saturate(50%) blur(4px); +} + /* Borders reset */ -#fc__menu_bar { +#fc__menu_bar, #fc__menu_items { border: none !important; } .app-inner { @@ -79,23 +97,34 @@ export default { } /* Header item */ -#fc__menu_bar .el-menu-item { +#fc__menu_items { + height: 100%; + background-color: transparent; + float: left; + width: calc(100% - 148px); /* window controls container width */ +} + +#fc__menu_items .el-menu-item, #fc__menu_items .el-sub-menu__title { color: #b4b6b9; + border-color: white; +} + +.el-menu > .el-menu-item { text-transform: uppercase; border: none !important; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-weight: bold; font-size: large; + background-color: transparent !important; } -#fc__menu_bar .el-menu-item:hover { +#fc__menu_items .el-menu-item:hover, #fc__menu_items .el-sub-menu__title { color: #c6c9ce; background-color: transparent; } -#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus { +#fc__menu_items .el-menu-item.is-active, #fc__menu_items .el-sub-menu.is-active > .el-sub-menu__title { color: white !important; - background-color: transparent; } .app-inner > .fc__mods__container { @@ -104,13 +133,6 @@ export default { } /* Header menu */ -#fc__menu_bar { - background-image: radial-gradient(transparent 1px); - backdrop-filter: saturate(50%) blur(4px); - background-color: transparent; - height: var(--fc-menu_height); -} - .developer_build { background: repeating-linear-gradient( 45deg, @@ -123,11 +145,8 @@ export default { /* Window controls */ #fc_window__controls { - display: flex; - position: absolute; - top: 0; - right: 0; - height: var(--fc-menu_height); + float: right; + height: 100%; } #fc_window__controls > button { @@ -136,6 +155,7 @@ export default { margin: auto 5px; background: none; border: none; + height: 100%; } #fc_window__controls > button:hover { diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts index 3776a6c5..c22479e0 100644 --- a/src-vue/src/plugins/store.ts +++ b/src-vue/src/plugins/store.ts @@ -293,7 +293,8 @@ async function _initializeApp(state: any) { state.developer_mode = true; // Make menubar striped if debug build - let menu_bar_handle = document.querySelector('#fc__menu_bar'); + let menu_bar_handle = document.querySelector('#fc_menu-bar'); + console.log(menu_bar_handle); if (menu_bar_handle !== null) { menu_bar_handle.classList.toggle('developer_build'); } diff --git a/src-vue/src/style.css b/src-vue/src/style.css index 58fd1d6b..4401ac96 100644 --- a/src-vue/src/style.css +++ b/src-vue/src/style.css @@ -37,6 +37,7 @@ body { .fc-container { position: relative; - height: calc(100% - var(--fc-menu_height)); + padding-top: var(--fc-menu_height); + height: 100%; color: white; } diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue index 4413319f..670d8395 100644 --- a/src-vue/src/views/PlayView.vue +++ b/src-vue/src/views/PlayView.vue @@ -91,6 +91,7 @@ export default defineComponent({ position: fixed; padding: 10px 20px; color: #e8edef; + bottom: 43px; } .fc_version__line { |