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.

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

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

Merged
merged 9 commits into from
Jun 7, 2023

Conversation

sevenc-nanashi
Copy link
Member

内容

スマホ用のヘッダーを追加します。
メニューの中身は全て「TODO」とalertするものになっています。

関連 Issue

(なし)

スクリーンショット・動画など

image

その他

(なし)

@sevenc-nanashi sevenc-nanashi requested a review from a team as a code owner May 29, 2023 13:17
@sevenc-nanashi sevenc-nanashi requested review from Hiroshiba and removed request for a team May 29, 2023 13:17
src/components/AcceptRetrieveTelemetryDialog.vue Outdated Show resolved Hide resolved
src/components/AudioAccent.vue Outdated Show resolved Hide resolved
src/components/AudioParameter.vue Outdated Show resolved Hide resolved
src/components/TitleBarButtons.vue Outdated Show resolved Hide resolved
},
]);

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.

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

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
アイコンを2つ表示する手もあるかもしれない。
保存アイコンの右下に♪アイコンなら音声保存とか。

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

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

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

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

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

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

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

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

こちらどうしましょう?
(特に急いでないですが、どちらがボール持っているのか認識違いが有り得そうだったので聞いてみた次第です)

現状の第一目標は使い勝手の確認だと思うので、いったん今のPRの形で取り込んで、このあたり考えるのを将来のmustなタスクとして積んでおくのも良いかもとか思いました。
アイコン化はPC版VOICEVOXにも需要あると思うので、知見が溜まっている今やっちゃうのが一番効率的だとは思います。
どちらでも!!

@sevenc-nanashi
Copy link
Member Author

ですね、TODOやIssueとして残す感じでいいと思います。

Quasarに乗っかれる感じでアイコン作れたら一番いいんですけどねー、色々と大変そう。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

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

了解です!! タスクリストはこちらでしたっけ
VOICEVOX/voicevox_project#10 (comment)

あ、リポジトリができたからこっちにタスクリスト移して頂いてもOKです。
↑のissue長いので発見しづらいかなーとか思っての提案です。どちらでも!!

src/components/MenuItem.vue Outdated Show resolved Hide resolved
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コメントあたりで十分だと思います。

@Hiroshiba
Copy link
Member

Hiroshiba commented Jun 7, 2023

タスクリストどうしましょう?

統合しておかないとあとあと相当しんどくなる(機能追加のたびに二重実装が必要になる・乖離が起こって取り返しがつかなくなるなど)ので、リリースまでの必須タスクだと思っています。
忘れないようにどこかに追記しておいていただきたく・・・!!

(認識がズレていそうだったら言っていただければ)

@sevenc-nanashi
Copy link
Member Author

タスクリストに追加しときます。

タスクリスト、このリポジトリに移動します?

@Hiroshiba
Copy link
Member

追加ありがとうございます!!

こっちに移動させても良いかもです!
というのも、作っていただいたタスクリストが結構下の方にあるのでちょっとアクセス性悪いかもと思ったためです。スクロール大変かなと。

まあ該当コメントをブックマークすれば良いだけかも。
@sevenc-nanashi さんのやりやすい方で!!

@Hiroshiba Hiroshiba merged commit 3792496 into VOICEVOX:main Jun 7, 2023
@sevenc-nanashi sevenc-nanashi mentioned this pull request Jun 8, 2023
23 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants