SAP/abapGit
1
0
Fork 0
mirror of https://github.com/abapGit/abapGit.git synced 2025-05-01 04:08:27 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI: Sticky Top (#5061)

Browse Source 
* 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 <christianguenter@googlemail.com>
Co-authored-by: Lars Hvam <larshp@hotmail.com>
This commit is contained in:
Marc Bernard 2021-11-02 11:57:33 -04:00 committed by GitHub
parent e45bdfc4e4
commit ffbd178318
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/ui/zabapgit_css_common.w3mi.data.css
View File

@ -1258,3 +1258,43 @@ settings_tab tr:first-child td { border-top: 0px; }
.dialog .dialog-help { .dialog .dialog-help {
float: left; 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;
}

7
src/ui/zabapgit_css_theme_default.w3mi.data.css
View File

@ -90,7 +90,10 @@ div.panel.error {
div.dummydiv { background-color: var(--theme-container-background-color); } div.dummydiv { background-color: var(--theme-container-background-color); }
/* STRUCTURE DIVS, HEADER & FOOTER */ /* 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#header .page-title { color: var(--theme-greyscale-medium); }
div#footer .version { color: var(--theme-greyscale-medium); } div#footer .version { color: var(--theme-greyscale-medium); }
div#footer { border-top-color: var(--theme-container-border-color); } div#footer { border-top-color: var(--theme-container-border-color); }
@ -554,4 +557,4 @@ table.settings_tab input:focus {
.dialog input[readonly] { .dialog input[readonly] {
background-color: #f4f4f4; background-color: #f4f4f4;
color: var(--theme-greyscale-dark); color: var(--theme-greyscale-dark);
} }

29
src/ui/zabapgit_js_common.w3mi.data.js
View File

@ -1546,7 +1546,7 @@ function Hotkeys(oKeyMap){
return; return;
} }
// Or a SAP event // Or a SAP event link
var sUiSapEventHref = this.getSapEventHref(action); var sUiSapEventHref = this.getSapEventHref(action);
if (sUiSapEventHref) { if (sUiSapEventHref) {
submitSapeventForm({}, sUiSapEventHref, "post"); submitSapeventForm({}, sUiSapEventHref, "post");
@ -2370,3 +2370,30 @@ function memoizeScrollPosition(fn){
return fn.call(this, fn.args); return fn.call(this, fn.args);
}.bind(this); }.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 );
}
}

5
src/ui/zcl_abapgit_gui_page.clas.abap
View File

@ -335,8 +335,11 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ri_html->add( '<html lang="en">' ). ri_html->add( '<html lang="en">' ).
ri_html->add( html_head( ) ). ri_html->add( html_head( ) ).
ri_html->add( |<body class="{ ms_control-page_layout }">| ). ri_html->add( |<body class="{ ms_control-page_layout }">| ).
ri_html->add( title( ) ). ri_html->add( title( ) ).
ri_html->add( '<div class="not_sticky">' ).
ri_html->add( render_content( ) ). " TODO -> render child ri_html->add( render_content( ) ). " TODO -> render child
ri_html->add( render_hotkey_overview( ) ). 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( footer( lv_total ) ).
ri_html->add( '</div>' ).
li_script = scripts( ). li_script = scripts( ).
IF li_script IS BOUND AND li_script->is_empty( ) = abap_false. IF li_script IS BOUND AND li_script->is_empty( ) = abap_false.