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

[ソング] Improve: エンジン起動前の画面を良い感じにする #1790

Merged
merged 19 commits into from
Feb 13, 2024

Conversation

sevenc-nanashi
Copy link
Member

@sevenc-nanashi sevenc-nanashi commented Jan 29, 2024

内容

エンジン起動前の画面を良い感じにします。
具体的には:

  • 「エンジン起動中・・・」の追加
  • ツールバーにスケルトンを表示

image

関連 Issue

close #1840

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

(なし)

その他

(なし)

@sevenc-nanashi sevenc-nanashi requested a review from a team as a code owner January 29, 2024 12:03
@sevenc-nanashi sevenc-nanashi requested review from y-chan and removed request for a team January 29, 2024 12:03
@sevenc-nanashi sevenc-nanashi marked this pull request as draft January 29, 2024 12:03
@sevenc-nanashi sevenc-nanashi changed the title [シング] Improve: エンジン起動前の画面を良い感じにする [ソング] Improve: エンジン起動前の画面を良い感じにする Jan 29, 2024
@sevenc-nanashi
Copy link
Member Author

sevenc-nanashi commented Jan 29, 2024

image

少し相談があり。
ここの歌い手欄、エンジン起動中はどういう表記がいいんでしょう?
こんな感じ...?
image

更新(2024/01/29 22:22):

https://quasar.dev/vue-components/skeleton/#usage
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.

良い感じ!!

ここの歌い手欄、エンジン起動中はどういう表記がいいんでしょう?

とりあえずスケルトンで良い気がしました!
細かいデザイン調整は全体見てになる気がしています。
あ、もし取り組んでくださるなら、コンポーネント化してくださるととても嬉しいです!!
(SingerHomeはかなり整ってるのでこのままを維持したく。。)

src/views/SingerHome.vue Outdated Show resolved Hide resolved
@sevenc-nanashi
Copy link
Member Author

sevenc-nanashi commented Jan 30, 2024

image

こんな感じになりました。(最初に背景が出てないのは開発版だからだと思います、ちゃんとビルドすれば直るかと)

VOICEVOX.Mozilla.Firefox.2024-01-30.22-11-01.mp4

@sevenc-nanashi sevenc-nanashi marked this pull request as ready for review January 30, 2024 13:13
Comment on lines 3 to 26
<character-menu-button>
<div class="character-menu-toggle">
<q-avatar
v-if="selectedStyleIconPath"
class="character-avatar"
size="3.5rem"
>
<img :src="selectedStyleIconPath" class="character-avatar-icon" />
</q-avatar>
<div class="character-info">
<div class="character-name">
{{ selectedCharacterName }}
</div>
<div class="character-style">
{{ selectedCharacterStyleDescription }}
</div>
</div>
<q-icon
name="arrow_drop_down"
size="sm"
class="character-menu-dropdown-icon"
/>
</div>
</character-menu-button>
Copy link
Member Author

Choose a reason for hiding this comment

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

ここで、選択中の表示をToolBar側から渡してるのって特別な理由があったりするんですか?

Copy link
Member

Choose a reason for hiding this comment

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

見回したけど特に思い当たりませんでした!
古のTalk時代からのコードなので、もしかしたら昔はpropsで渡してたのかも。
あるいはCharacterMenuButtonはPresentationコンポーネントを目指していたか。

@sevenc-nanashi
Copy link
Member Author

更新しました。

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.

ほぼ lgtm です!!
コードの移動を眺めてほぼほぼ行ごと移動だったことを確認しました。

src/components/Sing/CharacterMenuButton.vue Outdated Show resolved Hide resolved
src/components/Sing/CharacterMenuButton.vue Outdated Show resolved Hide resolved
src/components/Sing/CharacterMenuButton.vue Outdated Show resolved Hide resolved
src/views/SingerHome.vue Outdated Show resolved Hide resolved
Comment on lines 29 to 31
<div class="sing-playhead-position" :class="{ disabled: uiLocked }">
{{ playheadPositionStr }}
</div>
Copy link
Member Author

Choose a reason for hiding this comment

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

image
image

disable付けた方が雰囲気が出たのでdisableを付けています。

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.

ソング側のスクロールバーが表示されなくなってたので報告です 🙏

src/components/Sing/ToolBar.vue Outdated Show resolved Hide resolved
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.

📝 src/components/Sing/CharacterMenuButton/SelectedCharacter.vue 以外はmoveだということを再確認しました。
あとはそこだけかなと!

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.

LGTM!!!

いろいろ整理してくださってありがとうございます!!

コンフリクトが起こっていますが、こちらでちょこっと変更します!

Comment on lines +120 to +125
.character-style {
color: rgba(colors.$display-rgb, 0.6);
font-size: 0.75rem;
font-weight: bold;
line-height: 1rem;
}
Copy link
Member

Choose a reason for hiding this comment

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

@romot-co boldになってちょっと見た目変わったので共有です!
全体の調和でデザイン的な課題があればまた調整お願いできると・・・!!

@Hiroshiba Hiroshiba merged commit 33167d8 into VOICEVOX:main Feb 13, 2024
9 checks passed
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