Branch Overview Page gitGraph Horizontal Top scrollbar (#2492)

* Adding HTML new elements to BOverview Page

* Adding gitGraph CSS propertires

* Adding gitGraph scroller function

* Set gitGraph Scroller css width dynamically

* Initialize Top Horizontal Scroller on GitGraph

* Adding setGitGraphScroller() to BOverview HTML

* Fixed HTML wrong TAG

* Adding some comments

* Fixing abaplint messages

* Refactoring Indentation for Travis

* Refactoring for Travis

* Removing trailing spaces for Travis

src/ui/zabapgit_css_common.w3mi.data.css

@@ -992,3 +992,22 @@ table.commit tr .title {
 .ro-detail {
   display: none;
 }
+
+/* Branch Overview Page */
+.gitGraph-scrollWrapper, .gitGraph-Wrapper{
+  overflow-y:hidden;
+}
+
+.gitGraph-scrollWrapper{
+  overflow-x: auto; 
+  height: 20px; 
+}
+
+.gitGraph-Wrapper{
+  overflow-x: hidden; 
+}
+ 
+.gitGraph-HTopScroller {
+  width:1000px; 
+  height: 20px; 
+}

src/ui/zabapgit_js_common.w3mi.data.js

@@ -1374,3 +1374,23 @@ BranchOverview.prototype.showCommit = function(event){
 BranchOverview.prototype.hideCommit = function (event){ // eslint-disable-line no-unused-vars
   this.toggleCommit();
 };
+
+// Initialize Top Horizontal Scroller on GitGraph
+function setGitGraphScroller(){ // eslint-disable-line no-unused-vars
+
+  // Get gitGraph Element Canvas Width
+  var gitGraphEl = document.getElementById("gitGraph");
+  var gitGraphWidth = gitGraphEl.offsetWidth;
+
+  // Initialize gitGraph-HTopScroller Element width as gitGraph
+  var HTopScrollerEl = document.querySelector(".gitGraph-HTopScroller");
+  HTopScrollerEl.style.width = gitGraphWidth + "px";
+
+}
+
+// Setup Top Horizontal Scroller on GitGraph event
+function GitGraphScroller() { // eslint-disable-line no-unused-vars
+  var gitGraphWrapperEl = document.querySelector(".gitGraph-Wrapper");
+  var gitGraphscrollWrapperEl = document.querySelector(".gitGraph-scrollWrapper");
+  gitGraphWrapperEl.scrollLeft = gitGraphscrollWrapperEl.scrollLeft;
+}

src/ui/zcl_abapgit_gui_page_boverview.clas.abap

@@ -90,8 +90,17 @@ CLASS zcl_abapgit_gui_page_boverview IMPLEMENTATION.
     ro_html->add( '<br>' ).
     ro_html->add( build_menu( )->render( ) ).
 
-* see http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
+
+    "CSS gitGraph-scrollWrapper, gitGraph-HTopScroller and gitGraph-Wrapper
+    " - Used to manage the Horizonal Scroll bar on top of gitGraph Element
+    ro_html->add( '<div class="gitGraph-scrollWrapper" onscroll="GitGraphScroller()">' ).
+    "see http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
+    ro_html->add( '<div class="gitGraph-HTopScroller"></div>' ).
+    ro_html->add( '</div>' ).
+
+    ro_html->add( '<div class="gitGraph-Wrapper">' ).
     ro_html->add( '<canvas id="gitGraph"></canvas>' ).
+    ro_html->add( '</div>' ).
 
     ro_html->add( '<script type="text/javascript" src="https://cdnjs.' &&
       'cloudflare.com/ajax/libs/gitgraph.js/1.14.0/gitgraph.min.js">' &&
@@ -180,6 +189,10 @@ CLASS zcl_abapgit_gui_page_boverview IMPLEMENTATION.
 
     ro_html->add( '</script>' ).
 
+    ro_html->add( '<script>' ).
+    ro_html->add( 'setGitGraphScroller();' ).
+    ro_html->add( '</script>' ).
+
     ro_html->add( render_commit_popups( ) ).
 
   ENDMETHOD.