-
Notifications
You must be signed in to change notification settings - Fork 309
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
[ソング] Improve: エンジン起動前の画面を良い感じにする #1790
Conversation
少し相談があり。 更新(2024/01/29 22:22): https://quasar.dev/vue-components/skeleton/#usage こんなのがありました。これのほうがそれっぽそう? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
良い感じ!!
ここの歌い手欄、エンジン起動中はどういう表記がいいんでしょう?
とりあえずスケルトンで良い気がしました!
細かいデザイン調整は全体見てになる気がしています。
あ、もし取り組んでくださるなら、コンポーネント化してくださるととても嬉しいです!!
(SingerHomeはかなり整ってるのでこのままを維持したく。。)
src/components/Sing/ToolBar.vue
Outdated
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここで、選択中の表示をToolBar側から渡してるのって特別な理由があったりするんですか?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
見回したけど特に思い当たりませんでした!
古のTalk時代からのコードなので、もしかしたら昔はpropsで渡してたのかも。
あるいはCharacterMenuButtonはPresentationコンポーネントを目指していたか。
更新しました。 |
There was a problem hiding this 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/ToolBar.vue
Outdated
<div class="sing-playhead-position" :class="{ disabled: uiLocked }"> | ||
{{ playheadPositionStr }} | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ソング側のスクロールバーが表示されなくなってたので報告です 🙏
There was a problem hiding this 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だということを再確認しました。
あとはそこだけかなと!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!!!
いろいろ整理してくださってありがとうございます!!
コンフリクトが起こっていますが、こちらでちょこっと変更します!
.character-style { | ||
color: rgba(colors.$display-rgb, 0.6); | ||
font-size: 0.75rem; | ||
font-weight: bold; | ||
line-height: 1rem; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@romot-co boldになってちょっと見た目変わったので共有です!
全体の調和でデザイン的な課題があればまた調整お願いできると・・・!!
内容
エンジン起動前の画面を良い感じにします。
具体的には:
関連 Issue
close #1840
スクリーンショット・動画など
(なし)
その他
(なし)