aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2022-10-12 20:55:50 +0200
committerGitHub <noreply@github.com>2022-10-12 20:55:50 +0200
commit3ac693b6833d97ff190fe56170980218a98d593a (patch)
treeb1120ceb52a6e8ae7eea432b0bce6710e8118300
parentef95fbebe0e96b094ca57c9295a1ed5e48644b4f (diff)
downloadFlightCore-3ac693b6833d97ff190fe56170980218a98d593a.tar.gz
FlightCore-3ac693b6833d97ff190fe56170980218a98d593a.zip
fix: App bar drag (#13)
* feat: dragging app bar drags the whole app The data-tauri-drag-region attribute cannot be put on menu bar directly because it contains elements, so we emulate its behavior with a mousedown listener. * fix: app cannot be dragged by background container * fix: type issues
-rw-r--r--src-vue/src/App.vue10
1 files changed, 9 insertions, 1 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 219862bd..2a2a176f 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -5,6 +5,7 @@ import PlayView from './views/PlayView.vue';
import SettingsView from './views/SettingsView.vue';
import { appWindow } from '@tauri-apps/api/window';
import { store } from './plugins/store';
+import { window as tauriWindow } from "@tauri-apps/api";
export default {
components: {
@@ -18,6 +19,13 @@ export default {
},
mounted: () => {
store.commit('initialize');
+
+ // Enable dragging entire app by dragging menu bar.
+ // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
+ document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
+ if ((e.target as Element).closest(".el-tabs__item")) return; // Disable drag when clicking menu items.
+ await tauriWindow.appWindow.startDragging();
+ });
},
methods: {
minimize() {
@@ -31,7 +39,7 @@ export default {
</script>
<template>
- <div id="fc_bg__container" data-tauri-drag-region />
+ <div id="fc_bg__container" />
<el-tabs v-model="$store.state.current_tab" class="fc_menu__tabs" type="card">
<el-tab-pane name="Play" label="Play"><PlayView /></el-tab-pane>
<el-tab-pane name="Changelog" label="Changelog"><ChangelogView /></el-tab-pane>