feat:フォロー/フォロワーを非公開としている場合、表示は「0」ではなく鍵アイコンを表示するように #10934

mappi-pr · 2023-06-01T03:25:23Z

What

Feat #10887
今までフォロー/フォロワーを非公開にしていた場合、
クライアント上での表示が0/0となっていましたが
これを非公開/非公開としたいです。

また、設定が非公開となっている場合でもフォロー一覧、フォロワー一覧へのリンクが貼られてしまっているため
これについても非公開の場合にはリンクしないようにしています。

Why

フォロー/フォロワーを非公開にしたユーザが真に0/0なのか、非公開状態なのか見分けがつかないため
また、これにより一部のユーザが他ユーザのフォロー状況を正しく認知できていないため

Additional info (optional)

表示の範囲

	自分自身	フォローしているユーザ	フォローしていないユーザ
公開	表示される	表示される	表示される
フォロワーのみ	表示される	表示される	「非公開」
非公開	表示される	「非公開」	「非公開」

コーディングについて

定数"isFfVisibility" を追加し無名関数で非公開状態のチェックをしてますが、
各画面で冗長的に処理が記載されております。
共通化すべきなど、Misskeyとしてのお作法がありましたらご教示いただけますでしょうか。

対応後イメージ

①ユーザページ

②フォロー一覧ページ

③タイムラインのポップアップ

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

… into feat_ffvisibulity

codecov · 2023-06-01T03:28:12Z

Codecov Report

Merging #10934 (c7c5121) into develop (84d3a06) will decrease coverage by 0.13%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #10934      +/-   ##
===========================================
- Coverage    77.33%   77.21%   -0.13%     
===========================================
  Files          907      737     -170     
  Lines        91480    70136   -21344     
  Branches      7546     7051     -495     
===========================================
- Hits         70748    54154   -16594     
+ Misses       20732    15982    -4750

see 170 files with indirect coverage changes

EbiseLutica · 2023-06-04T04:03:54Z

@mappi-pr PRありがとうございます🫶

定数"isFfVisibility" を追加し無名関数で非公開状態のチェックをしてますが、
各画面で冗長的に処理が記載されております。

各画面で共有するロジックは src/scripts に置いているので、そちらに共通化するとより良いかと思います！

「非公開」の表示ですが、漢字が並ぶのはデザイン上窮屈な印象を感じます - くらいで良いのかなと思っています

この辺は @syuilo の意見も気になるところです

私からは以上です 🙇🏻

syuilo · 2023-06-04T05:30:06Z

ti-lock とか表示させるのでもいいかも

mappi-pr · 2023-06-04T07:01:49Z

@EbiseLutica @syuilo
レビューいただきありがとうございます！

取り急ぎ表示の調整からさせていただきたく、
ti-lockで表示してみるとこんな感じになるのですが、いかがでしょうか・・・？

syuilo · 2023-06-04T07:04:11Z

YOSASOU

EbiseLutica · 2023-06-04T07:49:15Z

ti-lock めっちゃいいですね！！

（タップしたらがちゃがちゃ動いて欲しいって思った）

mappi-pr · 2023-06-05T06:26:12Z

@EbiseLutica @syuilo
修正が完了いたしましたので、再度レビューお願いできますでしょうか。

レビュー後改定点

1. 非公開の場合の表示を鍵アイコンに変更
非公開の場合の表示を「非公開」の文字列から、鍵アイコンで表示するように変更いたしました。
これに伴い、PR/Chengelogのタイトルを変更いたしました。

2. 関数isFfVisibilityを共通関数化
非表示チェックを共通関数化し、/src/scripts 配下に新規ファイルとして切り出しました。
これに伴い、Null除けを考慮して一部処理順を変更しております。
（ログイン時・非ログイン時ともに、画面表示可能なことを確認済です）

3.マウスホバー時のアニメーションの追加
各画面にて、鍵アイコンがホバーされたときにロックされているかのようなガチャガチャとしたアニメーションを追加しました。
これらのアニメーションは、設定の「UIのアニメーションを減らす」で制御可能にしております。

mov.mp4

改定後イメージ

①ユーザページ

②フォロー一覧ページ

③タイムラインのポップアップ

EbiseLutica

私からは問題なしです 🙆🏻‍♂️

syuilo · 2023-06-10T00:54:17Z

packages/frontend/src/components/MkUserInfo.vue

@@ -128,11 +142,43 @@ defineProps<{
 .statusItemValue {
 	font-size: 1em;
 	color: var(--accent);
+
+	> i {


CSS Modulesではこういうセレクタは書きたくないかも

syuilo · 2023-06-10T00:54:28Z

packages/frontend/src/components/MkUserPopup.vue

+	> div {
+		> i {
+			display: block;
+			margin: 0 auto;
+		}
+	}


@syuilo
ありがとうございます。
可読性と今後のメンテナンス性の観点でもう少し明示的かつ影響範囲が少ない形にしておきたいといったところ？と認識しました！

.keywiggleareaみたいに決め打ちのクラス名に適用される形で書き直してみる方針ではいかがでしょうか？

CSSセレクタの書き方、修正してみましたのでイメージあっていたかどうかご確認いただけますでしょうか。

https://github.com/misskey-dev/misskey/pull/10934/files/e999fa0ed4fde43681f8af52130144dea23fe790..a787219cce24f7c8ce63fe56ce04bd5160f6916f

acid-chicken · 2023-06-10T02:42:18Z

packages/frontend/src/components/MkUserInfo.vue

+		</template>
+		<template v-else>
+			<div :class="$style.statusItem">
+				<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></span>


Suggested change

{{ i18n.ts.following }}

{{ i18n.ts.following }}

ご指摘いただきありがとうございます！
各ファイル同様に6か所すべてに反映いたしました。

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

… into feat_ffvisibulity

syuilo · 2023-07-08T12:20:59Z

ちょっと調整してからマージ

syuilo · 2023-07-18T10:50:58Z

単純に要素ごと消す実装にしてみました 🙏🏻

mappi-pr · 2023-07-18T10:58:45Z

@syuilo
ありがとうございます💕

Close misskey-dev#10934 Resolve misskey-dev#10887

mappi-pr added 8 commits May 24, 2023 16:29

wip

563733a

wip

d600871

Update frontend

7c210b1

Merge branch 'misskey-dev:develop' into feat_ffvisibulity

41cc9ef

Lint

e641112

Lint

9fc5d56

Merge branch 'feat_ffvisibulity' of https://github.com/mappi-pr/misskey…

827a4d6

… into feat_ffvisibulity

Update CHANGELOG.md

e3a3451

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

github-actions bot requested review from acid-chicken and syuilo June 1, 2023 03:25

add common parts, change design

d59dddb

This comment was marked as resolved.

Sign in to view

mappi-pr added 4 commits June 4, 2023 22:40

add animation

fe8725f

fix

a9e059a

Lint

f06fe5a

fix,Lint,add animation

e9d36da

This comment was marked as outdated.

Sign in to view

mappi-pr added 2 commits June 5, 2023 12:02

Lint

38ae4ac

Update CHANGELOG.md

6d68eda

mappi-pr added 2 commits June 6, 2023 13:33

Merge branch 'develop' into feat_ffvisibulity

0c14354

Update CHANGELOG.md

af10b3c

EbiseLutica approved these changes Jun 7, 2023

View reviewed changes

mappi-pr added 6 commits June 9, 2023 18:24

Lint

2eb8836

Lint

84492de

Lint

e999fa0

Change css module

6df88ed

romove Unnecessary class

79746be

modified to camel case

a787219

syuilo reviewed Jun 10, 2023

View reviewed changes

acid-chicken reviewed Jun 10, 2023

View reviewed changes

mappi-pr and others added 2 commits June 10, 2023 15:24

Lint

4ef425e

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

Merge branch 'feat_ffvisibulity' of https://github.com/mappi-pr/misskey…

ff77e9f

… into feat_ffvisibulity

noridev mentioned this pull request Jun 11, 2023

Release: 13.13.2-cp-4.1.0 kokonect-link/cherrypick#74

Merged

mappi-pr added 3 commits June 12, 2023 09:43

Merge branch 'develop' into feat_ffvisibulity

1aaf66c

Merge branch 'develop' into feat_ffvisibulity

8b02b9f

Lint

c7c5121

syuilo closed this in 269cd56 Jul 18, 2023

mappi-pr deleted the feat_ffvisibulity branch July 18, 2023 10:58

yu256 pushed a commit to yu256/akatsukey that referenced this pull request Jul 21, 2023

enhance(frontend): フォロー/フォロワー非公開時の表示を改善

3bfbe5d

Close misskey-dev#10934 Resolve misskey-dev#10887

slofp pushed a commit to Secineralyr/misskey.dream that referenced this pull request Jul 21, 2023

enhance(frontend): フォロー/フォロワー非公開時の表示を改善

d2dec71

Close misskey-dev#10934 Resolve misskey-dev#10887

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat:フォロー/フォロワーを非公開としている場合、表示は「0」ではなく鍵アイコンを表示するように #10934

feat:フォロー/フォロワーを非公開としている場合、表示は「0」ではなく鍵アイコンを表示するように #10934

mappi-pr commented Jun 1, 2023

codecov bot commented Jun 1, 2023 •

edited

Loading

EbiseLutica commented Jun 4, 2023

syuilo commented Jun 4, 2023

mappi-pr commented Jun 4, 2023

syuilo commented Jun 4, 2023

EbiseLutica commented Jun 4, 2023 •

edited

Loading

This comment was marked as resolved.

This comment was marked as outdated.

mappi-pr commented Jun 5, 2023

EbiseLutica left a comment

syuilo Jun 10, 2023

syuilo Jun 10, 2023

mappi-pr Jun 10, 2023 •

edited

Loading

mappi-pr Jun 10, 2023

acid-chicken Jun 10, 2023

mappi-pr Jun 10, 2023

syuilo commented Jul 8, 2023

syuilo commented Jul 18, 2023

mappi-pr commented Jul 18, 2023

	<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{[$style.animation]: animation}"></i></span>
	<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{ [$style.animation]: animation }"></i></span>

feat:フォロー/フォロワーを非公開としている場合、表示は「0」ではなく鍵アイコンを表示するように #10934

feat:フォロー/フォロワーを非公開としている場合、表示は「0」ではなく鍵アイコンを表示するように #10934

Conversation

mappi-pr commented Jun 1, 2023

What

Why

Additional info (optional)

表示の範囲

コーディングについて

対応後イメージ

Checklist

codecov bot commented Jun 1, 2023 • edited Loading

Codecov Report

EbiseLutica commented Jun 4, 2023

syuilo commented Jun 4, 2023

mappi-pr commented Jun 4, 2023

syuilo commented Jun 4, 2023

EbiseLutica commented Jun 4, 2023 • edited Loading

This comment was marked as resolved.

This comment was marked as outdated.

mappi-pr commented Jun 5, 2023

レビュー後改定点

改定後イメージ

EbiseLutica left a comment

Choose a reason for hiding this comment

syuilo Jun 10, 2023

Choose a reason for hiding this comment

syuilo Jun 10, 2023

Choose a reason for hiding this comment

mappi-pr Jun 10, 2023 • edited Loading

Choose a reason for hiding this comment

mappi-pr Jun 10, 2023

Choose a reason for hiding this comment

acid-chicken Jun 10, 2023

Choose a reason for hiding this comment

mappi-pr Jun 10, 2023

Choose a reason for hiding this comment

syuilo commented Jul 8, 2023

syuilo commented Jul 18, 2023

mappi-pr commented Jul 18, 2023

codecov bot commented Jun 1, 2023 •

edited

Loading

EbiseLutica commented Jun 4, 2023 •

edited

Loading

mappi-pr Jun 10, 2023 •

edited

Loading