-
Notifications
You must be signed in to change notification settings - Fork 42
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
💄 feat: MessageInputTextAreaに縦の伸長を追加 #4375
base: master
Are you sure you want to change the base?
Conversation
Preview (prod) → https://4375-prod.traq-preview.trapti.tech/ |
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.
2024-10-15.202542.mp4
ちょっと触ってみたけど、focusしたときにサイズが変わるのは仕様としてわかりにくい気がするので、大きさを自分で変えられるとかの方がいいのかなと思った。(スマホのときの使いやすさは要検討)
編集の挙動はこれで良さそう。
src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
Outdated
Show resolved
Hide resolved
トグルボタンを用意してmax-heightの大小を切り替えられるようにする方針 |
6ef4f08
to
4566405
Compare
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #4375 +/- ##
=========================================
- Coverage 8.83% 8.81% -0.02%
=========================================
Files 671 671
Lines 29444 29508 +64
Branches 524 524
=========================================
Hits 2601 2601
- Misses 26837 26901 +64
Partials 6 6 ☔ View full report in Codecov by Sentry. |
MessageInputではonFocusのみ、MessageEditorでは常に伸長するように
MessageInputTextAreaコンポーネントにexists-height-limitプロパティを追加し、MessageEditorでfalseに設定しました。
4566405
to
53d3919
Compare
8c3a1a0
to
36c529b
Compare
…インディングによるインラインスタイルに変更
71532ed
to
11f96df
Compare
…ize.update が走るように
9247451
to
5f296a0
Compare
a922eff
to
0b29ec1
Compare
328b73e
to
9cf0a4a
Compare
スマホで動作を見てたんですが、ChevronDown (下向きのやつ) が現れる前と後で若干inputの幅が変わってガクッとなるのが気になりました 元の幅を変えないようにするのが良いかと思われます |
394573a
to
d0049bd
Compare
…除して、スマホのときに textAreaExpandButton の有無で input の幅が変わっていたバグを修正
…e.update が走っていなかったバグを修正
新規メッセージ入力ではトグルボタンで
max-height
を変更できるように、メッセージ編集ではmax-height: none
に