From ffbd17831887962f9eed0bd8247f33d2d95fac8b Mon Sep 17 00:00:00 2001 From: Marc Bernard <59966492+mbtools@users.noreply.github.com> Date: Tue, 2 Nov 2021 11:57:33 -0400 Subject: [PATCH] UI: Sticky Top (#5061) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * UI: Sticky Top With this change, the top bar will become sticky. Meaning, it remains on the top of the page when scrolling down. It's CSS + JS since IE does not support the "sticky" CSS feature. There's a bit of a "wiggle" when scrolling begins and alignment is not the best on the diff page (which has full width). Maybe some of you CSS wizards can figure these things out. Closes #5035 * Upload with LF + UTF8 * Remove todo - already includes changes of 5083 Co-authored-by: Christian Günter Co-authored-by: Lars Hvam --- src/ui/zabapgit_css_common.w3mi.data.css | 40 +++++++++++++++++++ .../zabapgit_css_theme_default.w3mi.data.css | 7 +++- src/ui/zabapgit_js_common.w3mi.data.js | 29 +++++++++++++- src/ui/zcl_abapgit_gui_page.clas.abap | 5 +++ 4 files changed, 78 insertions(+), 3 deletions(-) diff --git a/src/ui/zabapgit_css_common.w3mi.data.css b/src/ui/zabapgit_css_common.w3mi.data.css index 24b2d35f2..db1caf7b2 100644 --- a/src/ui/zabapgit_css_common.w3mi.data.css +++ b/src/ui/zabapgit_css_common.w3mi.data.css @@ -1258,3 +1258,43 @@ settings_tab tr:first-child td { border-top: 0px; } .dialog .dialog-help { float: left; } + +/* STICKY HEADERS */ + +/* https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */ +/* Note: We have to use JS since IE does not support CSS position:sticky */ + +/* The sticky class is added to the navbar with JS when it reaches its scroll position */ +.sticky { + position: fixed; + top: 0; + z-index: 10; + width: 100%; + padding: 0.5em; + margin-bottom: 3px; + max-height: 47px; + max-width: 1265px; /* if set to 1280px, then actual width will be 1296px (strange) */ +} + +.sticky_full_width { + position: fixed; + top: 0; + z-index: 10; + width: 100%; + padding: 0.5em 0.5em; + margin-bottom: 3px; + max-height: 47px; +} +.sticky_full_width .nav-container { + margin-right: 18px; +} + +/* Add some top padding to the page content to prevent sudden quick movement + as the navigation bar gets a new position at the top of the page */ +.sticky + .not_sticky { + padding-top: 50px; +} + +.sticky_full_width + .not_sticky { + padding-top: 50px; +} diff --git a/src/ui/zabapgit_css_theme_default.w3mi.data.css b/src/ui/zabapgit_css_theme_default.w3mi.data.css index cca664917..60fef5a9f 100644 --- a/src/ui/zabapgit_css_theme_default.w3mi.data.css +++ b/src/ui/zabapgit_css_theme_default.w3mi.data.css @@ -90,7 +90,10 @@ div.panel.error { div.dummydiv { background-color: var(--theme-container-background-color); } /* STRUCTURE DIVS, HEADER & FOOTER */ -div#header { border-bottom-color: var(--theme-container-border-color); } +div#header { + background-color: var(--theme-background-color); + border-bottom-color: var(--theme-container-border-color); +} div#header .page-title { color: var(--theme-greyscale-medium); } div#footer .version { color: var(--theme-greyscale-medium); } div#footer { border-top-color: var(--theme-container-border-color); } @@ -554,4 +557,4 @@ table.settings_tab input:focus { .dialog input[readonly] { background-color: #f4f4f4; color: var(--theme-greyscale-dark); -} +} \ No newline at end of file diff --git a/src/ui/zabapgit_js_common.w3mi.data.js b/src/ui/zabapgit_js_common.w3mi.data.js index c16088d20..580f73aa5 100644 --- a/src/ui/zabapgit_js_common.w3mi.data.js +++ b/src/ui/zabapgit_js_common.w3mi.data.js @@ -1546,7 +1546,7 @@ function Hotkeys(oKeyMap){ return; } - // Or a SAP event + // Or a SAP event link var sUiSapEventHref = this.getSapEventHref(action); if (sUiSapEventHref) { submitSapeventForm({}, sUiSapEventHref, "post"); @@ -2370,3 +2370,30 @@ function memoizeScrollPosition(fn){ return fn.call(this, fn.args); }.bind(this); } + +/* STICKY HEADERS */ + +/* https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */ +/* Note: We have to use JS since IE does not support CSS position:sticky */ + +// When the user scrolls the page, execute toggleSticky +window.onscroll = function() { toggleSticky() }; + +// Add the sticky class to the navbar when you reach its scroll position. +// Remove "sticky" when you leave the scroll position +function toggleSticky() { + var body = document.getElementsByTagName("body")[0]; + var header = document.getElementById("header"); + var sticky = header.offsetTop; + + var stickyClass = "sticky"; + if (body.classList.contains("full_width")) { + stickyClass = "sticky_full_width"; + } + + if (window.pageYOffset >= sticky) { + header.classList.add( stickyClass ); + } else { + header.classList.remove( stickyClass ); + } +} diff --git a/src/ui/zcl_abapgit_gui_page.clas.abap b/src/ui/zcl_abapgit_gui_page.clas.abap index 8be6a9cd0..4ce1cb5e4 100644 --- a/src/ui/zcl_abapgit_gui_page.clas.abap +++ b/src/ui/zcl_abapgit_gui_page.clas.abap @@ -335,8 +335,11 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION. ri_html->add( '' ). ri_html->add( html_head( ) ). ri_html->add( || ). + ri_html->add( title( ) ). + ri_html->add( '
' ). + ri_html->add( render_content( ) ). " TODO -> render child ri_html->add( render_hotkey_overview( ) ). @@ -351,6 +354,8 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION. ri_html->add( footer( lv_total ) ). + ri_html->add( '
' ). + li_script = scripts( ). IF li_script IS BOUND AND li_script->is_empty( ) = abap_false.