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

imprv: display page tree in page select modal with scrollbar #8514

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

WNomunomu
Copy link
Contributor

@WNomunomu WNomunomu commented Feb 22, 2024

タスク

https://redmine.weseek.co.jp/issues/140833

概要

  • PageSelectModalのPageTreeが画面のheightよりも長かった場合に、スクロールバーを用いて閲覧できるようにしました。

変更点

  • PageSelectModalにスクロールバーを設置するために、TreeForModalWrapperコンポーネントを作成しました。
  • defaultのスクロールバーを非表示にするためにscssを追加しました。
  • スクロールバーを適切に表示するためにPageSelectModalのpaddingを調整しました。

xd

https://xd.adobe.com/view/26f3cef5-06c1-4ed2-9871-b86d5d00adce-73a0/screen/374cb579-53cf-4856-8132-ed7cdf91c157/

スクリーンショット

image

セルフチェック

  • コンフリクト解消したか
  • 余計なコードは残っていないか
  • 適切にメモ化したか
  • 責務の問題はクリアしているか
  • CIは通っているか
  • PRの内容は適切にかけているか

<div
id="grw-page-select-modal-wrapper"
className={`${styles['tree-for-modal-wrapper']} overflow-y-scroll`}
style={{ height: '50vh' }}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

このheightについては、fumiya-sと相談して決めました。

Copy link
Member

Choose a reason for hiding this comment

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

height: '50vh' も PageSelectModal.module.scss に書いていいと思います

<div
id="grw-page-select-modal-wrapper"
className={`${styles['tree-for-modal-wrapper']} overflow-y-scroll`}
style={{ height: '50vh' }}
Copy link
Member

Choose a reason for hiding this comment

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

height: '50vh' も PageSelectModal.module.scss に書いていいと思います

@@ -0,0 +1,3 @@
.tree-for-modal-wrapper::-webkit-scrollbar {
Copy link
Member

Choose a reason for hiding this comment

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

-webkit-scrollbar が非推奨らしいのだけどこれでいいのかな?
https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-scrollbar

Copy link

reg-suit bot commented Feb 27, 2024

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪
⚫⚫⚫⚫
🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean? The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status? If reviewers approve this PR, the reg context status will be green automatically.

@@ -0,0 +1,3 @@
.grw-page-select-modal-wrapper {
height: 50vh;
}
Copy link
Member

Choose a reason for hiding this comment

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

これどこで使っているの?

Copy link
Contributor Author

@WNomunomu WNomunomu Feb 27, 2024

Choose a reason for hiding this comment

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

PageSelectModalのPageSelectModalWrapperコンポーネントのheightを設定するために使っています。
image

Copy link
Member

Choose a reason for hiding this comment

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

scoped css にしてください

@yuki-takei yuki-takei changed the base branch from dev/7.0.x to master March 28, 2024 09:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

2 participants