ダイアログをQuasarのものに置き換える #2286

sevenc-nanashi · 2024-10-08T09:37:51Z

内容

ブラウザ版のダイアログをQuasarのDialog Pluginを使って追加します。

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

その他

（なし）

Hiroshiba

あ～～～～～そういうことだったんですね。。。。。

フロントには既にダイアログ表示機能があるので、同じ機能が2つあることになりそうですね。。。。。

アラートダイアログ

voicevox/src/components/Dialog/Dialog.ts

Line 49 in 755d84b

export const showAlertDialog = async (

選ばせるダイアログ

voicevox/src/components/Dialog/Dialog.ts

Line 74 in 755d84b

export const showConfirmDialog = async (

ど、どうしましょう。。。。。。。

共通化を目指す
- storybookで確認できるのでたぶんこれが楽しい！
- でも既存のDialog.tsはもう一個ワーニング付きok/cancelダイアログがあるので、それも実装する必要はある
既存の関数を叩くようにする
とりあえず２種実装されてる状態にする

sevenc-nanashi · 2024-10-09T09:29:04Z

1にしました。

Hiroshiba

テストが落ちてるかも？

sevenc-nanashi · 2024-10-09T10:47:09Z

直ったはず？

package.json

Hiroshiba · 2024-10-12T22:49:17Z

ちょっとこっちの環境依存なのか確認したく。。
Storybookのダイアログ系が表示されなくなってるかも･･･？
npm ciしたりnpm iしたりいろいろやってみたのですが、表示されなかったので。。。（なぜかCIは通ってますが。。）

一旦確認の意図です。
もしどうやら表示されないとなると、Storybookでのテスト書くのが難しくなるけどとりあえず進むか、あるいはライブラリのバージョンを戻してみるか、逆にQuasarとかstorybookのバージョンを上げてみるとかになるのかなぁと考えています。

sevenc-nanashi · 2024-10-13T01:17:01Z

自分の環境だと出ましたね。

Hiroshiba · 2024-10-13T07:19:12Z

ご確認ありがとうございます 🙇 　ためしに別PCで開いたら見れました。。。 😇
問題なし！！

src/components/Dialog/TextDialog/common.ts

Hiroshiba

ちょっと途中までなのですがレビューしました！
シグネチャに関しての相談が1点あったので、一旦そこまで！

src/components/Dialog/TextDialog/MessageDialog.stories.ts

src/components/Dialog/TextDialog/QuestionDialog.stories.ts

src/components/Dialog/TextDialog/QuestionDialog.vue

[update snapshots]

Co-authored-by: Hiroshiba <[email protected]>

src/backend/browser/sandbox.ts

src/components/Dialog/TextDialog/QuestionDialog.vue

src/components/Dialog/Dialog.ts

Hiroshiba

すみません、細かいとこなんですがいくつかだけでコメントさせていただきました！！
ほぼLGTMです！！実装が楽しみ！！

Co-authored-by: Hiroshiba <[email protected]>

Hiroshiba

削除行のが多い！！！！素晴らしい！！！！！！！！
リファクタリングもしてくださってますね、ありがとうございます！！！！！

こちらでちょっと変更してマージしちゃおうかと思ったのですが、いくつか挙動の確認をしたい点があったので、コメントまで！！

src/components/Dialog/Dialog.ts

src/components/Dialog/TextDialog/QuestionDialog.vue

src/components/Dialog/TextDialog/MessageDialog.vue

src/components/Dialog/TextDialog/QuestionDialog.stories.ts

Hiroshiba · 2024-10-19T21:37:12Z

src/store/project.ts

+            await showAlertDialog({
              type: "info",
              title: "保存",
              message: `編集中のプロジェクトが ${filePath} に切り替わりました。`,


アラートなのかメッセージなのかわからなくないので、showMessageDialogでも良いかもですね！
デフォルトはtype: "info"ですし。

と思ったけど以前からSHOW_ALERT_DIALOGだった感じなんですね。
んじゃまあどちらでもということで！！！

Hiroshiba · 2024-10-19T21:44:41Z

src/store/project.ts

-      const result: number = await window.backend.showQuestionDialog({
+      const result: number = await showQuestionDialog({
        type: "info",
        title: "警告",
        message,
-        buttons: ["保存", "破棄", "キャンセル"],
-        cancelId: 2,
-        defaultId: 2,
+        buttons: ["キャンセル", "破棄", "保存"],
+        cancel: 0,
      });


（ただのコメントです）

あっっっっこれ逆だったんですね。。。。。。。。。。
感覚で覚えてる人が間違えそうだけど。。。。まあ保存とキャンセルが逆になる形だから問題にはならないか！！！

@sevenc-nanashi
マージ後ですみません！こちらのボタンの順番の変更ですが、理由をお聞きしたいです…！
特に理由が無ければ、以前のボタンの順番に戻すのがUX的に良いかなと思います…！
ちなみに、他のソフトで順番がどうなっているか確認してみたのですが、ほとんどのソフトで「保存、破棄、キャンセル」の順番になっていました！

ここですね：
https://github.com/VOICEVOX/voicevox/blob/main/docs/UX%E3%83%BBUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B9%E9%87%9D.md#%E7%B4%B0%E3%81%8B%E3%81%84%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3

キャンセルボタンは左

@sevenc-nanashi
ありがとうございます！

最近は右キャンセルではなく左キャンセル（右アクション）になってきている（Discordの議論）

ボイボの方針は左キャンセルで、実装も左キャンセルになっている

ので、以前と順番は変わりますが左キャンセルでも良さそうです！
（保存ボタンに色を付けると、迷いづらくなるかなと思います）

Discord では議論ありがとうございました！！！

少なくとも色をつけるのは必須だなと感じました！！
ということでリリースまでにはなんとかしたいなと考えてます。
とりあえず忘れないように0.22アプデのチェック項目リストに追加しておきました！ 🙏

バージョン0.22のアップデートメモ voicevox_project#57

src/components/Dialog/Dialog.ts

Co-authored-by: Hiroshiba <[email protected]>

Hiroshiba

LGTM！！！

複雑性を下げることができました、とても助かりました！！！

@takusea 新しくコンポーネントが増えたのでご連絡まで･･･！！
ダイアログは今こんな感じのデザインになっています。
src/components/Dialog/TextDialog/辺りにあります 🙏

キャンセル付きダイアログ（プロジェクトを保存せずに消そうとしたとき）

文字を変更したパターン（ショートカットキーを初期化しようとしたとき）

OKだけあるパターン（保存済みプロジェクトを「別の名前をつけて保存」したとき）

例えばデフォルトのボタンになっているものは色を付けても良いかも、とか！
あ、ちなみにQuasarを使ってることにこだわりはないです。

sevenc-nanashi added 2 commits October 8, 2024 18:21

Add: ブラウザ版にダイアログを追加

4159c46

Add: Storybookを追加

77aab3a

sevenc-nanashi requested a review from a team as a code owner October 8, 2024 09:37

sevenc-nanashi requested review from Hiroshiba and removed request for a team October 8, 2024 09:37

Hiroshiba reviewed Oct 8, 2024

View reviewed changes

Change: 既存のものを新しいダイアログを使う用にする

524f454

sevenc-nanashi added 3 commits October 9, 2024 18:50

Add: テストを追加

cf487e2

Improve: テキストを良い感じにする

bedeb98

Delete: 使われていないpropsを削除

564156b

Hiroshiba reviewed Oct 9, 2024

View reviewed changes

Fix: テストを修正

90e9c42

sevenc-nanashi requested a review from Hiroshiba October 11, 2024 05:33

Hiroshiba reviewed Oct 12, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

sevenc-nanashi added 3 commits October 13, 2024 16:59

Merge: main -> add/browser-dialog

4bb8647

Fix: package-lock.jsonを再構築

0a6687b

Fix: テストが落ちてるのを修正

b6afa6b

sevenc-nanashi requested a review from Hiroshiba October 14, 2024 10:46

Hiroshiba reviewed Oct 16, 2024

View reviewed changes

src/components/Dialog/TextDialog/common.ts Outdated Show resolved Hide resolved

Hiroshiba reviewed Oct 16, 2024

View reviewed changes

sevenc-nanashi and others added 5 commits October 17, 2024 06:27

Add: 複数行できるように

e790b61

Merge: upstream/main -> add/browser-dialog

5792b2d

（CI用）

29b9328

[update snapshots]

（スナップショットを更新）

67e10a7

Code: 空行を空ける

e6ee86f

Co-authored-by: Hiroshiba <[email protected]>

sevenc-nanashi added 2 commits October 17, 2024 07:13

Code: 空行を空ける（その2）

80cb962

Code: TODOを追加

0b61d22

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

src/backend/browser/sandbox.ts Outdated Show resolved Hide resolved

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

src/components/Dialog/TextDialog/QuestionDialog.vue Show resolved Hide resolved

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

src/components/Dialog/TextDialog/QuestionDialog.vue Outdated Show resolved Hide resolved

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

src/components/Dialog/Dialog.ts Outdated Show resolved Hide resolved

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

src/components/Dialog/Dialog.ts Outdated Show resolved Hide resolved

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

sevenc-nanashi and others added 6 commits October 19, 2024 23:42

Code: コメントを追加

1d0e534

Co-authored-by: Hiroshiba <[email protected]>

Delete: backendのアラート周りを爆破

26e41b1

Code: Lintのエラーを修正

f7c53fa

Merge: upstream/main -> add/browser-dialog

e217e92

Update: Storyを更新

1d21395

Fix: イベント名を修正

f76d481

sevenc-nanashi changed the title ~~Add: ブラウザ版にダイアログを追加~~ ダイアログをQuasarのものに置き換える Oct 19, 2024

sevenc-nanashi added 2 commits October 20, 2024 00:27

Fix: waitForを使う

8ba6947

Fix: onUpdateを監視する

71e78c0

Hiroshiba reviewed Oct 19, 2024

View reviewed changes

sevenc-nanashi and others added 7 commits October 20, 2024 06:53

Revert: デフォルトを戻す

f5db398

Co-authored-by: Hiroshiba <[email protected]>

Code: コメントを更新

d03ee90

Co-authored-by: Hiroshiba <[email protected]>

Fix: 条件の反転を修正

9d98019

Co-authored-by: Hiroshiba <[email protected]>

Code: コメントを更新

e21e618

Co-authored-by: Hiroshiba <[email protected]>

Code: 型の名前を変更

71b7273

Code: フォーマット

833d85e

Change: onHideを監視する

5e6632d

Hiroshiba approved these changes Oct 20, 2024

View reviewed changes

Hiroshiba merged commit ce0a0ae into VOICEVOX:main Oct 20, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ダイアログをQuasarのものに置き換える #2286

ダイアログをQuasarのものに置き換える #2286

sevenc-nanashi commented Oct 8, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

sevenc-nanashi commented Oct 9, 2024

Hiroshiba left a comment

sevenc-nanashi commented Oct 9, 2024

Hiroshiba commented Oct 12, 2024

sevenc-nanashi commented Oct 13, 2024

Hiroshiba commented Oct 13, 2024

Hiroshiba left a comment

Hiroshiba left a comment

Hiroshiba left a comment •

edited

Loading

Hiroshiba Oct 19, 2024

Hiroshiba Oct 19, 2024

sigprogramming Oct 23, 2024 •

edited

Loading

sevenc-nanashi Oct 23, 2024

sigprogramming Oct 23, 2024

Hiroshiba Oct 23, 2024

Hiroshiba left a comment •

edited

Loading

ダイアログをQuasarのものに置き換える #2286

ダイアログをQuasarのものに置き換える #2286

Conversation

sevenc-nanashi commented Oct 8, 2024 • edited Loading

内容

関連 Issue

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

その他

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

sevenc-nanashi commented Oct 9, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

sevenc-nanashi commented Oct 9, 2024

Hiroshiba commented Oct 12, 2024

sevenc-nanashi commented Oct 13, 2024

Hiroshiba commented Oct 13, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

Hiroshiba Oct 19, 2024

Choose a reason for hiding this comment

Hiroshiba Oct 19, 2024

Choose a reason for hiding this comment

sigprogramming Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

sevenc-nanashi Oct 23, 2024

Choose a reason for hiding this comment

sigprogramming Oct 23, 2024

Choose a reason for hiding this comment

Hiroshiba Oct 23, 2024

Choose a reason for hiding this comment

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

sevenc-nanashi commented Oct 8, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

Hiroshiba left a comment •

edited

Loading

sigprogramming Oct 23, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading