feat(frontend): 絵文字ピッカーの実装 #12617

samunohito · 2023-12-10T00:27:55Z

What

#12560 の対応です。
この対応により、絵文字ピッカー・リアクションピッカーに以下の変化が発生します。

（あるユーザにとっては）絵文字ピッカーにリアクションデッキが復活する
（あるユーザにとっては）リアクションピッカーと絵文字ピッカーで別々のデッキを使用できる

related: #12337 , #12336

Why

fix #12560

Additional info (optional)

以下を確認しました

表示確認
- 設定→リアクションを開いたとき、コンソールに何らかのエラーが出ないこと（PC・スマホそれぞれ）
- スマホ表示時にボタンが不自然に重なったりしていないこと
- 表示文言が欠けていないこと
動作確認
- 設定→リアクション
  - 「リアクションデッキと同じ設定を使う」初期値
    - ONであること
  - リアクションデッキ操作
    - ＋ボタン→絵文字選択→絵文字が追加されること。また、絵文字デッキの内容が変わらないこと
    - 絵文字クリック→削除→絵文字が削除されること。また、絵文字デッキの内容が変わらないこと
    - プレビュー押下→リアクションデッキの内容が設定されたピッカーが表示されること
    - デフォルト押下→リアクションデッキがデフォルトの絵文字にリセットされること。また、絵文字デッキの内容が変わらないこと
    - サイズ・列数・高さの設定を変更→プレビュー押下で設定内容がピッカーに反映されること
  - 絵文字デッキ操作（「リアクションデッキと同じ設定を使う」はOFFにする）
    - ＋ボタン→絵文字選択→絵文字が追加されること。また、リアクションデッキの内容が変わらないこと
    - 絵文字クリック→削除→絵文字が削除されること。また、リアクションデッキの内容が変わらないこと
    - プレビュー押下→絵文字デッキの内容が設定されたピッカーが表示されること
    - デフォルト押下→絵文字デッキがデフォルトの絵文字にリセットされること。また、リアクションデッキの内容が変わらないこと
    - サイズ・列数・高さの設定を変更→プレビュー押下で設定内容がピッカーに反映されること
- ノート投稿画面
  - リアクションデッキと同じ設定を使うをOFF→ノート投稿画面から絵文字ピッカーを表示
    - リアクションデッキに設定した絵文字一覧が表示されること
  - リアクションデッキと同じ設定を使うをON→ノート投稿画面から絵文字ピッカーを表示
    - 絵文字デッキに設定した絵文字一覧が表示されること
- TLにあるノート
  - ＋ボタンを押下→リアクションピッカーを表示
    - リアクションデッキに設定した絵文字一覧が表示されること
    - 絵文字押下によりリアクションがつくこと
- 設定のインポート・エクスポート
  - 絵文字ピッカーの使用スイッチをエクスポートし、他のブラウザなどで設定を復元できること

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Add story of storybook
(If needed) Update CHANGELOG.md
(If possible) Add tests

# Conflicts: # packages/frontend/src/components/MkEmojiPicker.vue

codecov · 2023-12-10T04:32:12Z

Codecov Report

Attention: 8 lines in your changes are missing coverage. Please review.

Comparison is base (364efbe) 81.91% compared to head (4821535) 81.90%.

Files	Patch %	Lines
packages/frontend/src/scripts/emoji-picker.ts	33.33%	4 Missing ⚠️
packages/frontend/src/scripts/reaction-picker.ts	33.33%	4 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #12617      +/-   ##
===========================================
- Coverage    81.91%   81.90%   -0.01%     
===========================================
  Files          184      184              
  Lines        28282    28290       +8     
  Branches       503      503              
===========================================
+ Hits         23167    23171       +4     
- Misses        5115     5119       +4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

samunohito · 2023-12-10T12:08:17Z

@syuilo
openにしました、ご確認よろしくお願い致します 🙇‍♂️

samunohito · 2023-12-10T12:16:16Z

packages/frontend/src/components/MkPostForm.vue

-			focus();
+			setTimeout(() => {
+				focus();
+			}, 10);


絵文字ピッカーを閉じた後、フォーカスが当たらないのでついでに修正しました

nextTick ではダメだったという感じかしら

他の個所でsetTimeoutをつかって解決しているのを見かけたので、マネしました。
nextTickは試してないので、ちょっと試してみます

nextTickでいけました。感謝 🙏

samunohito · 2023-12-10T12:20:02Z

画面のレイアウトイメージ

syuilo · 2023-12-10T12:35:50Z

リアクション設定にあるのはおかしいから名前変えた方が良さそう
ワードミュートのようにタブ表示の方が合ってそう
「リアクションデッキと同じ設定を使う」は要らないかも

samunohito · 2023-12-10T23:07:41Z

リアクション設定にあるのはおかしいから名前変えた方が良さそう
ワードミュートのようにタブ表示の方が合ってそう

たしかに。なおします！

「リアクションデッキと同じ設定を使う」は要らないかも

以下の点から、あったほうがいいと考えます。
（ユーザが自由に設定できる領域の破壊的変更なので、段階を踏みたい）

2023.11.1から次リリースを適用したサーバのユーザが混乱する（設定したリアクションデッキが壊れたかのように映る）
大量の絵文字をリアクションデッキに登録して運用しており、絵文字デッキ用途と区別をしていないユーザにとって、イチからデッキを構築しなおすのは酷（このタイプのユーザは自分が観測した限りでもそこそこいる）

samunohito · 2023-12-10T23:07:46Z

～ちょっと余談～
2つのサーバでしか観測できていませんが、現行developの対応がリリースされて絵文字ピッカーからリアクションが消えた直後は本当に大混乱でした（バグを疑うユーザも多数…）。その状態でリリースされると波紋はさらに広がるかと思っており、この一連の対応はそれを強く危惧してのものです。

yuriha-chan · 2023-12-10T23:09:22Z

私の管理するサーバーでも同様の反応で、バグを疑ったり、設定が消えてしまったと不安になるユーザーが多かったです。

samunohito · 2023-12-10T23:33:08Z

ねんのため確認させてください。

タブのイメージなんですけど、↓ではなくて

↓で相違ありませんか？

syuilo · 2023-12-11T00:46:50Z

あー今ワードミュートのUI変わってるのか

タブというのはこういうやつ

syuilo · 2023-12-11T00:48:31Z

私の管理するサーバーでも同様の反応で、バグを疑ったり、設定が消えてしまったと不安になるユーザーが多かったです。

まだリリースされてない変更だから仕方なさそう
リリースされたらリリースノートが出るからそれ見てもらえば済むと思う

syuilo · 2023-12-11T00:51:03Z

（ユーザが自由に設定できる領域の破壊的変更なので、段階を踏みたい）

破壊的変更というよりはバグ修正という認識ですね
デッキの内容を同期する設定を増やすのではなく、リアクションデッキの設定をコピーするボタンの方が良さそう

syuilo · 2023-12-11T00:57:06Z

その方式であれば逆に絵文字デッキの内容をリアクションデッキにコピーする操作の実装余地も生まれるし

samunohito · 2023-12-11T01:17:53Z

なるほど。コピーする方針で実装しなおします（タブの件もいっしょに）
しばしお時間ください・・・

samunohito · 2023-12-11T13:21:27Z

@syuilo
ロジックはおいといて、ガワだけ先に直してみました。イメージに相違ございませんでしょうか

syuilo · 2023-12-11T22:25:44Z

そんな感じ👍

samunohito · 2023-12-12T02:15:48Z

@syuilo
諸々対応しました 🙏

syuilo · 2023-12-12T03:53:00Z

引き継ぎます

…o/misskey into pr/12617

syuilo · 2023-12-14T05:11:29Z

👍🏻 👍🏻

* 絵文字デッキの作成 * 細かい不備を修正 * fix lint * fix * fix CHANGELOG.md * fix setTimeout -> nextTick * fix misskey-dev#12617 (comment) * fix bug * fix CHANGELOG.md * fix CHANGELOG.md * wip * Update CHANGELOG.md * Update CHANGELOG.md * wip --------- Co-authored-by: syuilo <[email protected]>

samunohito added 2 commits December 9, 2023 20:53

絵文字デッキの作成

90c735f

細かい不備を修正

7b44bec

github-actions bot added the packages/frontend Client side specific issue/PR label Dec 10, 2023

Merge branch 'develop' into feature/add_emoji_deck

81e1795

# Conflicts: # packages/frontend/src/components/MkEmojiPicker.vue

fix lint

d28a38f

syuilo mentioned this pull request Dec 10, 2023

Release: 2023.12.0 #12564

Merged

samunohito added 2 commits December 10, 2023 20:42

fix

3f97bce

Merge branch 'develop' into feature/add_emoji_deck

6576197

samunohito marked this pull request as ready for review December 10, 2023 12:02

samunohito changed the title ~~[WIP] feat(frontend): 絵文字ピッカーの実装~~ feat(frontend): 絵文字ピッカーの実装 Dec 10, 2023

fix CHANGELOG.md

4481f6a

samunohito commented Dec 10, 2023

View reviewed changes

fix setTimeout -> nextTick

bcc2bdd

samunohito added 2 commits December 12, 2023 09:54

fix misskey-dev#12617 (comment)

b47b25b

fix bug

002fa38

samunohito added 3 commits December 12, 2023 11:09

fix CHANGELOG.md

4f0a820

fix CHANGELOG.md

227ced2

Merge branch 'develop' into feature/add_emoji_deck

5592f1a

Merge branch 'develop' into pr/12617

f9aaae6

syuilo added 6 commits December 13, 2023 11:09

wip

904db74

Update CHANGELOG.md

7d68dfc

Update CHANGELOG.md

68d5b4e

Merge branch 'develop' into feature/add_emoji_deck

5ae1c28

wip

b9b4c5c

Merge branch 'feature/add_emoji_deck' of https://github.com/samunohit…

4821535

…o/misskey into pr/12617

syuilo merged commit a92795d into misskey-dev:develop Dec 14, 2023
13 of 15 checks passed

samunohito deleted the feature/add_emoji_deck branch January 11, 2024 00:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): 絵文字ピッカーの実装 #12617

feat(frontend): 絵文字ピッカーの実装 #12617

samunohito commented Dec 10, 2023 •

edited

Loading

codecov bot commented Dec 10, 2023 •

edited

Loading

samunohito commented Dec 10, 2023

samunohito Dec 10, 2023

acid-chicken Dec 10, 2023

samunohito Dec 10, 2023

samunohito Dec 10, 2023

samunohito commented Dec 10, 2023

syuilo commented Dec 10, 2023

samunohito commented Dec 10, 2023

samunohito commented Dec 10, 2023

yuriha-chan commented Dec 10, 2023

samunohito commented Dec 10, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

samunohito commented Dec 11, 2023 •

edited

Loading

samunohito commented Dec 11, 2023

syuilo commented Dec 11, 2023

samunohito commented Dec 12, 2023

syuilo commented Dec 12, 2023

syuilo commented Dec 14, 2023

feat(frontend): 絵文字ピッカーの実装 #12617

feat(frontend): 絵文字ピッカーの実装 #12617

Conversation

samunohito commented Dec 10, 2023 • edited Loading

What

Why

Additional info (optional)

Checklist

codecov bot commented Dec 10, 2023 • edited Loading

Codecov Report

samunohito commented Dec 10, 2023

samunohito Dec 10, 2023

Choose a reason for hiding this comment

acid-chicken Dec 10, 2023

Choose a reason for hiding this comment

samunohito Dec 10, 2023

Choose a reason for hiding this comment

samunohito Dec 10, 2023

Choose a reason for hiding this comment

samunohito commented Dec 10, 2023

syuilo commented Dec 10, 2023

samunohito commented Dec 10, 2023

samunohito commented Dec 10, 2023

yuriha-chan commented Dec 10, 2023

samunohito commented Dec 10, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

syuilo commented Dec 11, 2023

samunohito commented Dec 11, 2023 • edited Loading

samunohito commented Dec 11, 2023

syuilo commented Dec 11, 2023

samunohito commented Dec 12, 2023

syuilo commented Dec 12, 2023

syuilo commented Dec 14, 2023

samunohito commented Dec 10, 2023 •

edited

Loading

codecov bot commented Dec 10, 2023 •

edited

Loading

samunohito commented Dec 11, 2023 •

edited

Loading