Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add: スマホ用のヘッダーを追加 #27

Merged
merged 9 commits into from
Jun 7, 2023
Merged

Add: スマホ用のヘッダーを追加 #27

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7de6322
Add: MobileHeaderBarを追加
sevenc-nanashi May 26, 2023
f007144
Code: 不要なimportを削除
sevenc-nanashi May 26, 2023
cd507c0
Change: ヘッダーの高さ周りを変更
sevenc-nanashi May 29, 2023
805fa18
Change: メニューの中身を変更
sevenc-nanashi May 29, 2023
098e771
Merge: main -> add/mobile-header-bar
sevenc-nanashi May 29, 2023
2a8f2e4
Merge: main -> add/mobile-header-bar
sevenc-nanashi Jun 3, 2023
1f67367
Merge branch 'main' of github.com:VOICEVOX/voicevox_mobile into add/m…
sevenc-nanashi Jun 3, 2023
ac73b9a
Discard changes to src/components/MenuItem.vue
sevenc-nanashi Jun 7, 2023
ba572c0
Add: TODOを追加
sevenc-nanashi Jun 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/components/CharacterOrderDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,10 +402,7 @@ const closeDialog = () => {
}

.main {
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});

display: flex;
flex-direction: row;
Expand Down
5 changes: 1 addition & 4 deletions src/components/DefaultStyleListDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,7 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
}

.main {
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});

display: flex;
flex-direction: row;
Expand Down
5 changes: 1 addition & 4 deletions src/components/DefaultStyleSelectDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,10 +256,7 @@ const closeDialog = () => {
}
}
.q-page {
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});
overflow-y: scroll;

> :deep(.scroll) {
Expand Down
10 changes: 2 additions & 8 deletions src/components/DictionaryManageDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,10 +747,7 @@ const toDialogClosedState = () => {
.word-list {
// menubar-height + header-height + window-border-width +
// 82(title & buttons) + 30(margin 15x2)
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width + 82px + 30px}
);
height: calc(100vh - #{vars.$top-bar-height + 82px + 30px});
width: 100%;
overflow-y: auto;
}
Expand Down Expand Up @@ -788,10 +785,7 @@ const toDialogClosedState = () => {
.word-editor {
display: flex;
flex-flow: column;
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
) !important;
height: calc(100vh - #{vars.$top-bar-height}) !important;
overflow: auto;
}

Expand Down
10 changes: 2 additions & 8 deletions src/components/EngineManageDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,10 +700,7 @@ const toDialogClosedState = () => {
.engine-list {
// menubar-height + header-height + window-border-width +
// 82(title & buttons) + 30(margin 15x2)
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width + 82px + 30px}
);
height: calc(100vh - #{vars.$top-bar-height + 82px + 30px});
width: 100%;
overflow-y: auto;
}
Expand All @@ -727,10 +724,7 @@ const toDialogClosedState = () => {
.engine-detail {
display: flex;
flex-flow: column;
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
) !important;
height: calc(100vh - #{vars.$top-bar-height}) !important;
overflow: auto;
}

Expand Down
5 changes: 1 addition & 4 deletions src/components/HotkeySettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,10 +373,7 @@ const resetHotkey = (action: string) => {

.hotkey-table {
width: calc(100vw - #{vars.$window-border-width * 2});
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});

> :deep(.scroll) {
overflow-y: scroll;
Expand Down
3 changes: 3 additions & 0 deletions src/components/MenuItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<q-item-section>{{ menudata.label }}</q-item-section>
<q-item-section
side
class="gt-sm"
Hiroshiba marked this conversation as resolved.
Show resolved Hide resolved
v-if="menudata.label != undefined && getMenuBarHotkey(menudata.label)"
>
{{ getMenuBarHotkey(menudata.label) }}
Expand Down Expand Up @@ -63,6 +64,7 @@
<q-item-section>{{ menudata.label }}</q-item-section>
<q-item-section
side
class="gt-sm"
v-if="menudata.label != undefined && getMenuBarHotkey(menudata.label)"
>
{{ getMenuBarHotkey(menudata.label) }}
Expand All @@ -75,6 +77,7 @@ import { ref, computed, watch } from "vue";
import type { MenuItemData } from "@/components/MenuBar.vue";
import { useStore } from "@/store";
import { HotkeyAction } from "@/type/preload";

const props = withDefaults(
defineProps<{
selected?: boolean;
Expand Down
125 changes: 125 additions & 0 deletions src/components/MobileHeaderBar.vue
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これ、メニューを開くボタンを追加して、それぞれのボタンにアイコンを設けて共通化したほうが追従楽なのではとか思いました！
本家のヘッダーだと自分の好きなように入れ替えれるので、ショートカットコマンドが一切無いスマホユーザー的にそのカスタマイズはかなりニーズがありそうかなと。

プロトタイプとしてイメージのためにとりあえずこの形ということなら、ファイル名をプロトタイプだとわかるようにしつつ、一番上にコメントを残すのはどうでしょう？

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど。
MenuBarのそれぞれのアクションにアイコンとかスマホ対応とかのデータを足す感じです？

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ですです。ついでに本家VOICEVOXもアイコン表示可能にできると嬉しいかもですね！！
（ヘッダーのボタンの表示を文字のみ・アイコンのみに設定変更できる、みたいなのを考えてます）

スマホ対応とかのデータ

あ、これって（いまのところは）「メニューに戻る」ボタンだけで合ってますか 👀
だったら、メニューに戻る機能だけはいったんスマホ版にだけ追加でも良いかも。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確認してみたら、大体アイコンさえなんとかなれば全部実装可能そうでした。
これはPC版もそうですが、連続再生と停止が同じボタンだと便利そう。（スペース節約的に）

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほどです！　スマホ化するにあたってアイコン割当は重要なので、ここで全部アイコン化してみても面白いかもですねぇ。

連続再生と停止が同じボタンだと便利そう

たしかにそうだと思います。実装の都合上こうなってますね･･･。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらどうしましょう。とりあえずdiscordのやり取りをコピペ。

名無し｡ — 今日 00:12
アイコンむずすぎ！！！！！！！！！！！
例えば書き出しをフロッピー（複数フロッピーとかある）にするとプロジェクト保存と被る、かといって書き出し的なアイコンは複数版がない

ヒホ — 今日 00:44
あ～～～　描かないといけないか。。。
まあとりあえずで同じアイコン使っても良いかもですね。。。

名無し｡ — 今日 00:57
進捗：iconSetマージが死ぬほどめんどくさいことがわかった
deepmerge入れるか…

ヒホ — 今日 01:10
アイコンを２つ表示する手もあるかもしれない。
保存アイコンの右下に♪アイコンなら音声保存とか。

名無し｡ — 今日 01:10
なるほど

イラレで作るか…
合成するやつを作ってもいいけど多分とてもとてもとてもめんどくさい（太さとか）

ヒホ — 今日 01:11
エディタ側で２つ表示しちゃうのを考えてましたｗ
（画像作るのもそれをメンテ可能にするのもそれをfont-awesomeのように指定できるようにするのもちょっと面倒そうなので）
進捗：privateリポジトリのコードをfetchできるようになった。actions/checkoutしたあとだとうまく行かない問題でドはまりしました。。

名無し｡ — 今日 01:12
うーん。右下のアイコンを単純な縮小でやると線とかの太さが変わって視認性が落ちたり周りと少し浮く可能性が
アイコン自作はあり
めっちゃ極端に書くとこう？
image

ヒホ — 今日 01:15
たしかにsolidなアイコンだとそうかも
視認性はおいといてたしかに違和感はありそう
image

ヒホ — 今日 01:24
google fontsのmaterial symbolsは太さ違いのがあるから太くするのは簡単にできそう。
これをVOICEVOXから簡単に使えるのかはわからないけど。。
image

Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<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);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

忘れないようにwarn書いとくのどうでしょ

Suggested change
store.dispatch("LOG_WARN", "PC版のヘッダーと統合するか要検討");

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

うーん、まぁTODOコメントあたりで十分だと思います。

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[]>([
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここら辺のメニュー内容、もっといいのがあると思います

{
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>
2 changes: 2 additions & 0 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ if (Capacitor.isNativePlatform()) {
console.log("Running in Electron");
}

document.body.setAttribute("data-target", import.meta.env.VITE_TARGET);

createApp(App)
.use(store, storeKey)
.use(router)
Expand Down
15 changes: 13 additions & 2 deletions src/styles/variables.scss
View file
Open in desktop
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;
5 changes: 1 addition & 4 deletions src/views/EditorHome.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -858,10 +858,7 @@ watch(activeAudioKey, (audioKey) => {
display: flex;

.q-splitter--horizontal {
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});
}
}

Expand Down
13 changes: 3 additions & 10 deletions src/views/MobileEditorHome.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<!-- FIXME: ロジックがEditorHome.vueからコピーされているので、良い感じに共通化する -->
<template>
<menu-bar />

<q-layout reveal elevated container class="layout-container">
<header-bar />
<mobile-header-bar />

<q-page-container>
<q-page class="main-row-panes">
<progress-dialog />

<!-- TODO: 複数エンジン対応 -->
<div
v-if="!isCompletedInitialStartup || allEngineState === 'STARTING'"
class="waiting-engine"
Expand Down Expand Up @@ -174,11 +171,10 @@ import draggable from "vuedraggable";
import { QResizeObserver, useQuasar } from "quasar";
import cloneDeep from "clone-deep";
import { useStore } from "@/store";
import HeaderBar from "@/components/HeaderBar.vue";
import MobileHeaderBar from "@/components/MobileHeaderBar.vue";
import AudioCell from "@/components/AudioCell.vue";
import AudioDetail from "@/components/AudioDetail.vue";
import AudioInfo from "@/components/AudioInfo.vue";
import MenuBar from "@/components/MenuBar.vue";
import HelpDialog from "@/components/HelpDialog.vue";
import SettingDialog from "@/components/SettingDialog.vue";
import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
Expand Down Expand Up @@ -839,10 +835,7 @@ const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {
display: flex;

.q-splitter--horizontal {
height: calc(
100vh - #{vars.$menubar-height + vars.$header-height +
vars.$window-border-width}
);
height: calc(100vh - #{vars.$top-bar-height});
}
}

Expand Down