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.

Sign up for GitHub

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

Jump to bottom

feat: sticky foldable header #440

Merged
merged 1 commit into from
Dec 12, 2022
Merged

feat: sticky foldable header #440

merged 1 commit into from
Dec 12, 2022

Conversation

KuznetsovRoman
Copy link
Member

No description provided.

@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch from 4472220 to 9f0a44a Compare November 6, 2022 23:25
@KuznetsovRoman
Copy link
Member Author

KuznetsovRoman commented Nov 6, 2022 •
edited
Loading

Что сделано

  • Добавил sticky шапку с возможностью сворачивания по скроллу в HTML Report'е и GUI Report'е

Небольшой отчет: https://nda.ya.ru/t/sRWUxSV65fkcHw
Большой отчет: https://nda.ya.ru/t/oW2rAwhN5fkdJb

@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch from 9f0a44a to 15beb56 Compare November 7, 2022 17:18
sipayRT
sipayRT reviewed Nov 8, 2022
View reviewed changes
Copy link
Member

@sipayRT sipayRT left a comment

Choose a reason for hiding this comment

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

Давай все же попробуем сделать автоскрытие при скролле. Оно не должно сильно грузить систему. Для примера - https://www.npmjs.com/package/@codesyntax/ionic-react-header-collapse (можно поискать и готовые решения получше, я на поиск потратил всего пару минут)

lib/static/components/sticky-header/wrap-button.js Outdated Show resolved Hide resolved
lib/static/components/controls/gui-controls.js Outdated Show resolved Hide resolved
lib/static/components/controls/gui-controls.css Outdated Show resolved Hide resolved
@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch 3 times, most recently from ed6e2ca to 6505806 Compare November 23, 2022 19:53
@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch 10 times, most recently from 1af4432 to 8056614 Compare December 7, 2022 20:31
KuznetsovRoman
KuznetsovRoman commented Dec 7, 2022
View reviewed changes
lib/static/components/header/header.css
@@ -1,4 +1,5 @@
.header {
padding-top: 15px;
Copy link
Member Author

Choose a reason for hiding this comment

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

Добавил паддинг на хедер, убрал отступ сверху с .report По местоположению ничего не изменилось, но так при скролле не будет отступа перед хедером в 15px

lib/static/styles.css
@@ -22,7 +22,6 @@
.report {
font: 15px YS Text, Helvetica Neue, Arial, sans-serif;
line-height: 20px;
margin-top: 15px;
Copy link
Member Author

Choose a reason for hiding this comment

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

Добавил паддинг на хедер, убрал отступ сверху с .report По местоположению ничего не изменилось, но так при скролле не будет отступа перед хедером в 15px

lib/static/styles.css
@@ -285,7 +284,8 @@ main.container {
.tests-group__title:before,
.state-title:after,
.details__summary:after,
.error .details__summary:before {
.error .details__summary:before,
.sticky-header__wrap:before {
Copy link
Member Author

Choose a reason for hiding this comment

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

Это стрелка сворачивания

lib/static/components/sticky-header/gui.js
Comment on lines +6 to +10
const StickyHeader = () => (
<StickyHeaderTemplate>
<ControlButtons />
</StickyHeaderTemplate>
);
Copy link
Member Author

Choose a reason for hiding this comment

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

StickyHeader получился универсальный, поэтому версии для gui и для report отличаются только дочерними нодами.

lib/static/components/sticky-header/index.js
Comment on lines +7 to +8
const MAX_SHOW_HEADER = 10;
const MIN_HIDE_HEADER = 30;
Copy link
Member Author

Choose a reason for hiding this comment

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

Такой дебаунс: скрываем хедер, когда проскроллили вниз на 30 пикселей, а обратно возвращаем, когда до верху страницы максимум 10 пикселей.

lib/static/components/sticky-header/index.js
const shouldShow = scroll => (scroll < MAX_SHOW_HEADER && window.scrollY > MIN_HIDE_HEADER);
const shouldHide = scroll => (scroll > MIN_HIDE_HEADER && window.scrollY < MAX_SHOW_HEADER);
const shouldUpdate = scroll => shouldShow(scroll) || shouldHide(scroll);
const cb = scroll => shouldUpdate(scroll)
Copy link
Member Author

Choose a reason for hiding this comment

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

Тут используем коллбек в setState потому что коллбек сохранит только начальное scrollHeight, а значит, использовать его напрямую мы не можем, вот и используем такой коллбек, в который передается актуальное значение scroll. При вызовах setState реакт сравнивает по значению старый стейт и новый, и обновляет только если они не совпадают, поэтому если мы решили, что обновлять стейт не нужно, можем ему просто себя же передать

lib/static/components/sticky-header/sticky-header.less Outdated
Comment on lines 16 to 18
&::before {
transform: translateY(50%) rotate(180deg);
}
Copy link
Member Author

Choose a reason for hiding this comment

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

Центрируем и переворачиваем стрелочку

lib/static/components/sticky-header/sticky-header.less Outdated
}

.sticky-header__content {
transform: translateY(-100%) scaleY(0);
Copy link
Member Author

Choose a reason for hiding this comment

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

Помимо такого транслейта нужно все равно использовать scaleY(0). Так то при анимации он незаметен, но если его не использовать, то всякая штука может вылезать сверху страницы. Например, если кто-то раскрыл длинный браузерный список. Ну и на Яндекс браузерах отображалось не очень, потому что Яндекс браузер может "скроллить в отрицательный scrollY"

@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch from 8056614 to c27074d Compare December 8, 2022 08:17
DudaGod
DudaGod approved these changes Dec 8, 2022
View reviewed changes
Copy link
Member

@DudaGod DudaGod left a comment

Choose a reason for hiding this comment

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

/ok

lib/static/components/sticky-header/sticky-header.less Outdated
@@ -0,0 +1,45 @@
.sticky-header {
Copy link
Member

Choose a reason for hiding this comment

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

Тут я бы тоже stylus юзнул

@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch 7 times, most recently from 034d088 to ecfcbd9 Compare December 12, 2022 08:54
@KuznetsovRoman KuznetsovRoman force-pushed the HERMIONE-161.sticky_header branch from ecfcbd9 to f2aea96 Compare December 12, 2022 09:05
@KuznetsovRoman KuznetsovRoman merged commit 327b17a into master Dec 12, 2022
@KuznetsovRoman KuznetsovRoman deleted the HERMIONE-161.sticky_header branch December 12, 2022 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sipayRT sipayRT sipayRT left review comments

@DudaGod DudaGod DudaGod approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@KuznetsovRoman @sipayRT @DudaGod