aboutsummaryrefslogtreecommitdiff
path: root/src-vue
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2022-12-22 23:14:42 +0100
committerGitHub <noreply@github.com>2022-12-22 23:14:42 +0100
commit77f043752d2937d91726e3e9aca7151c44c72d3b (patch)
tree18663261d608122703336bd92699a49f8dba35d2 /src-vue
parent5b4c70830f5b66f0d8f2ef62ceb77b2888c08b29 (diff)
downloadFlightCore-77f043752d2937d91726e3e9aca7151c44c72d3b.tar.gz
FlightCore-77f043752d2937d91726e3e9aca7151c44c72d3b.zip
feat: Maximize button + clean menubar layout (#119)
* feat: add a button to toggle window maximize status * fix: attach services container to bottom Container was fixed, but with no positioning indication, which fucked its location while going fullscreen. * refactor: encase menu in navigation container * fix: remove CSS ID duplication * refactor: put window controls inside menu bar * feat: add style to additional submenu * fix: don't color focused menu items * fix: restore menu bar debug indicator
Diffstat (limited to 'src-vue')
-rw-r--r--src-vue/src/App.vue70
-rw-r--r--src-vue/src/plugins/store.ts3
-rw-r--r--src-vue/src/style.css3
-rw-r--r--src-vue/src/views/PlayView.vue1
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 {