vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(UI): Sticky Tabs Header (#18906)

Browse source 
Co-authored-by: Shariq Ansari <30859809+shariquerik@users.noreply.github.com>
Co-authored-by: Shariq Ansari <sharique.rik@gmail.com>
This commit is contained in:
Maharshi Patel 2022-12-05 12:19:58 +05:30 • committed by GitHub
parent 41c8a808d0
commit 03afa99e6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frappe/public/js/frappe/form/layout.js
View file

@ -482,10 +482,37 @@ frappe.ui.form.Layout = class Layout {
}
setup_events() {
let last_scroll = 0;
let tabs_list = $(".form-tabs-list");
let tabs_content = this.tabs_content[0];
if (!tabs_list.length) return;
$(window).scroll(
frappe.utils.throttle(() => {
let current_scroll = document.documentElement.scrollTop;
if (current_scroll > 0 && last_scroll <= current_scroll) {
tabs_list.removeClass("form-tabs-sticky-down");
tabs_list.addClass("form-tabs-sticky-up");
} else {
tabs_list.removeClass("form-tabs-sticky-up");
tabs_list.addClass("form-tabs-sticky-down");
}
last_scroll = current_scroll;
}, 500)
);
this.tab_link_container.off("click").on("click", ".nav-link", (e) => {
e.preventDefault();
e.stopImmediatePropagation();
$(e.currentTarget).tab("show");
if (tabs_content.getBoundingClientRect().top < 100) {
tabs_content.scrollIntoView();
setTimeout(() => {
$(".page-head").css("top", "-15px");
$(".form-tabs-list").removeClass("form-tabs-sticky-down");
$(".form-tabs-list").addClass("form-tabs-sticky-up");
}, 3);
}
});
}

6
frappe/public/js/frappe/ui/page.js
View file

@ -47,8 +47,7 @@ frappe.ui.Page = class Page {
setup_scroll_handler() {
let last_scroll = 0;
window.addEventListener(
"scroll",
$(window).scroll(
frappe.utils.throttle(() => {
$(".page-head").toggleClass("drop-shadow", !!document.documentElement.scrollTop);
let current_scroll = document.documentElement.scrollTop;
@ -58,8 +57,7 @@ frappe.ui.Page = class Page {
$(".page-head").css("top", "var(--navbar-height)");
}
last_scroll = current_scroll;
}),
500
}, 500)
);
}

16
frappe/public/scss/desk/form.scss
View file

@ -319,8 +319,13 @@
}
.form-tabs-list {
position: sticky;
background-color: var(--card-bg);
z-index: 5;
transition: 0.5s top;
padding-left: var(--padding-xs);
border-bottom: 1px solid var(--border-color);
border-bottom: 2px solid var(--border-color);
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
.form-tabs {
.nav-item {
@ -338,6 +343,15 @@
}
}
}
.form-tab-content {
scroll-margin-top: calc(var(--navbar-height) + 52px);
}
.form-tabs-sticky-up {
top: calc(var(--navbar-height) - 1px);
}
.form-tabs-sticky-down {
top: calc(var(--navbar-height) + var(--page-head-height) - 1px);
}
.progress-area {
padding-top: var(--padding-md);