diff options
| author | Rémy Raes <contact@remyraes.com> | 2022-10-12 20:55:50 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-12 20:55:50 +0200 |
| commit | 3ac693b6833d97ff190fe56170980218a98d593a (patch) | |
| tree | b1120ceb52a6e8ae7eea432b0bce6710e8118300 | |
| parent | ef95fbebe0e96b094ca57c9295a1ed5e48644b4f (diff) | |
| download | FlightCore-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.vue | 10 |
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> |