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

fix: 設定とコンパネでPageMetadataが切り替わらない問題など (taiyme/misskey#186) #13530

Closed
wants to merge 3 commits into from

Conversation

taiyme
Copy link
Contributor

@taiyme taiyme commented Mar 5, 2024

What

  • 設定/コンパネでPageMetadataが切り替わらない問題を修正しました
  • メニュー部分とメイン部分のスクロールを独立するようにしました

Image

Why

resolve #13450

ただし、以下の問題について根本的な修正は実施していません。
(いずれ別のPRで。 #12836 (comment) の実装を待ちたい)

ユーザーページだと「コントロールパネル」の名前が長いのでスマホで見ると照会のボタンが右に溢れている

Additional info (optional)

Cherry-picked from taiyme/misskey

Note:

  • admin/_header_.vue を削除し、MkPageHeaderに置き換えました
    • admin/_header_.vue で使用していたheaderActionsのasFullButtonオプションをMkPageHeaderで実装しました
  • MkStickyContainerのcalcなどの挙動を若干変更しました
    • setTimeoutを削除していますが、なにか意図を持って実施しているのであれば差し戻してください
    • (ただし、設定/コンパネのindex→childページ遷移時にvar(--stickyTop)分だけチラついてしまうが…)

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

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Mar 5, 2024
Copy link

codecov bot commented Mar 5, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.93%. Comparing base (e9e877f) to head (bec0014).

Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #13530      +/-   ##
===========================================
+ Coverage    77.90%   77.93%   +0.02%     
===========================================
  Files          185      185              
  Lines        25504    25531      +27     
  Branches       487      487              
===========================================
+ Hits         19870    19897      +27     
  Misses        5627     5627              
  Partials         7        7              

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

@tai-cha
Copy link
Contributor

tai-cha commented Mar 6, 2024

/preview

Copy link
Contributor

@tai-cha tai-cha left a comment

Choose a reason for hiding this comment

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

特段問題なさそうだと思ったのですが、フロントエンドのレビューはあまり得意ではないため他の人にもみて欲しいかも
(ところでこれdraftは外し忘れですかね?)

});

const cleanups: (() => void)[] = [];
const cleanup = () => {
for (const cl of cleanups) cl();
Copy link
Contributor

Choose a reason for hiding this comment

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

要素数が少ないので大きな差はないし特にコーディングルールがある認識でもないので好みの問題かもしれないですが

Suggested change
for (const cl of cleanups) cl();
cleanups.forEach(cl => cl());

Copy link
Contributor Author

Choose a reason for hiding this comment

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

個人的にはforEachで回す方が好みですが、既にfor...ofで実装されているコードがあったので、そちらに合わせました

for (const cl of cleanups) {

for (const cl of cleanups) {

@taiyme taiyme marked this pull request as ready for review March 6, 2024 04:56
@taiyme
Copy link
Contributor Author

taiyme commented Mar 6, 2024

draft外しました!

Comment on lines +367 to +372
@supports (height: 100cqh) {
height: 100cqh;
overflow: hidden; // fallback (overflow: clip)
overflow: clip;
contain: strict;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

自分のforkの都合でCSSのフォールバックを含んでいますが、misskey-dev/misskeyの方針では不要でしょうか?

Copy link
Contributor

Choose a reason for hiding this comment

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

これのフォールバックは入っていなかったはず

Comment on lines 362 to +372
height: 100%;
margin: 0 auto;
display: flex;
box-sizing: border-box;

@supports (height: 100cqh) {
height: 100cqh;
overflow: hidden; // fallback (overflow: clip)
overflow: clip;
contain: strict;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

フォールバックが不要であれば

Suggested change
height: 100%;
margin: 0 auto;
display: flex;
box-sizing: border-box;
@supports (height: 100cqh) {
height: 100cqh;
overflow: hidden; // fallback (overflow: clip)
overflow: clip;
contain: strict;
}
height: 100cqh;
overflow: clip;
contain: strict;
margin: 0 auto;
display: flex;
box-sizing: border-box;

@syuilo
Copy link
Member

syuilo commented Mar 7, 2024

/preview

@taiyme
Copy link
Contributor Author

taiyme commented Mar 7, 2024

スクロールの扱い的に、クラシックUIで都合が悪そう

@taiyme
Copy link
Contributor Author

taiyme commented Mar 19, 2024

コンフリクト解消

@syuilo
Copy link
Member

syuilo commented Apr 2, 2024

/preview

@taiyme
Copy link
Contributor Author

taiyme commented Apr 16, 2024

コンフリクト解消

@taiyme taiyme closed this Aug 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
4 participants