forked from VOICEVOX/voicevox
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add: MobileHeaderBarを追加 * Code: 不要なimportを削除 * Change: ヘッダーの高さ周りを変更 * Change: メニューの中身を変更 * Discard changes to src/components/MenuItem.vue * Add: TODOを追加
- Loading branch information
1 parent
7696153
commit 3792496
Showing
11 changed files
with
153 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <!-- TODO: PC版ヘッダーと統合する --> | ||
| <template> | ||
| <q-toolbar class="bg-primary text-white"> | ||
| <q-btn flat round dense> | ||
| <q-icon name="menu" /> | ||
| <q-menu transition-show="none" transition-hide="none"> | ||
| <q-list dense> | ||
| <menu-item | ||
| v-for="(item, index) in menudata" | ||
| :key="item.label" | ||
| :menudata="item" | ||
| v-model:selected="subMenuOpenFlags[index]" | ||
| /> | ||
| </q-list> | ||
| </q-menu> | ||
| </q-btn> | ||
| <q-space /> | ||
| <q-btn | ||
| v-for="button in headerButtons" | ||
| :key="button.icon" | ||
| :disable="button.disable" | ||
| flat | ||
| round | ||
| dense | ||
| @click="button.onClick" | ||
| :icon="button.icon" | ||
| /> | ||
| </q-toolbar> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { computed, ref } from "vue"; | ||
| import { MenuItemData } from "./MenuBar.vue"; | ||
| import MenuItem from "./MenuItem.vue"; | ||
| import { useStore } from "@/store"; | ||
| const store = useStore(); | ||
|
|
||
| const uiLocked = computed(() => store.getters.UI_LOCKED); | ||
| const canUndo = computed(() => store.getters.CAN_UNDO); | ||
| const canRedo = computed(() => store.getters.CAN_REDO); | ||
|
|
||
| const headerButtons = computed(() => [ | ||
| { | ||
| icon: "file_upload", | ||
| onClick: () => { | ||
| alert("TODO: 一つ保存する"); | ||
| }, | ||
| disable: uiLocked.value, | ||
| }, | ||
| { | ||
| icon: "undo", | ||
| onClick: () => { | ||
| store.dispatch("UNDO"); | ||
| }, | ||
| disable: !canUndo.value, | ||
| }, | ||
| { | ||
| icon: "redo", | ||
| onClick: () => { | ||
| store.dispatch("REDO"); | ||
| }, | ||
| disable: !canRedo.value, | ||
| }, | ||
| ]); | ||
|
|
||
| const menudata = ref<MenuItemData[]>([ | ||
| { | ||
| type: "button", | ||
| label: "選択している音声を書き出し", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| { | ||
| type: "button", | ||
| label: "すべての音声を書き出し", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| { | ||
| type: "button", | ||
| label: "すべての音声を繋げて書き出し", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| { | ||
| type: "separator", | ||
| }, | ||
| { | ||
| type: "button", | ||
| label: "テキストを繋げて書き出し", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| { | ||
| type: "button", | ||
| label: "テキスト読み込み", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| { | ||
| type: "separator", | ||
| }, | ||
| { | ||
| type: "button", | ||
| label: "メニューに戻る", | ||
| onClick: () => { | ||
| alert("TODO"); | ||
| }, | ||
| disableWhenUiLocked: true, | ||
| }, | ||
| ]); | ||
|
|
||
| const subMenuOpenFlags = ref<boolean[]>( | ||
| [...Array(menudata.value.length)].map(() => false) | ||
| ); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,17 @@ | ||
| $window-border-width: 2px; | ||
|
|
||
| $header-height: 66px; | ||
| $menubar-height: 24px; | ||
| $header-height: var(--header-height); | ||
| $menubar-height: var(--menubar-height); | ||
| body { | ||
| &:not([data-target="mobile"]) { | ||
| --header-height: 66px; | ||
| --menubar-height: 24px; | ||
| } | ||
| &[data-target="mobile"] { | ||
| --header-height: 50px; | ||
| --menubar-height: 0px; | ||
| } | ||
| } | ||
| $top-bar-height: "(#{$header-height} + #{$menubar-height} + #{$window-border-width})"; | ||
|
|
||
| $detail-view-splitter-cell-z-index: 2; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters