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: design of scrollbar in sidebar #8512

Closed

Conversation

WNomunomu
Copy link
Contributor

@WNomunomu WNomunomu commented Feb 22, 2024

タスク

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

概要

サイドバー内のスクロールバーがブラウザデフォルトのものになってしまっていたので、専用のスクロールバー(v6と同じもの)に置き換えた。

変更点

  • デフォルトのスクロールバーを非表示にするためにcssを追加した
  • StickyStretchableScrollerを用いて、新しくSidebarContentsWrapperコンポーネントを作成した。

screen shot

image

セルフチェック

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

} from '~/stores/ui';

import { DrawerToggler } from '../Common/DrawerToggler';
import { StickyStretchableScroller } from '../StickyStretchableScroller';
Copy link
Member

Choose a reason for hiding this comment

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

v6 で実装していたこの複雑すぎるコンポーネントはここでは必要ない(navbar がなくなったことで、高さを自動計算する必要がなくなった)

simplebar-react を使ってください
追加するコードもここまで大仰にはならないはず

style={{ maxHeight: simplebarMaxHeight }}
>
<SidebarContents />
</SimpleBar>
Copy link
Member

Choose a reason for hiding this comment

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

maxHeight の計算必要なのか?
simplebar-react の example を見るに、ref を指定して自動計算させることは可能に見える

@yuki-takei yuki-takei changed the base branch from dev/7.0.x to master March 28, 2024 09:04
@TatsuyaIse TatsuyaIse self-assigned this May 23, 2024
@TatsuyaIse TatsuyaIse marked this pull request as draft May 23, 2024 06:53
Copy link

reg-suit bot commented May 23, 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.

@yuki-takei yuki-takei closed this Sep 24, 2024
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.

3 participants