Diff - Add option to collapse files (#3248)

* Update zcl_abapgit_gui_page_diff.clas.abap

* Update zcl_abapgit_gui_page_diff.clas.abap

* Update zabapgit_css_common.w3mi.data.css

* Update zabapgit_css_common.w3mi.data.css

* test

* Update zabapgit_css_theme_default.w3mi.data.css

* Add collapse to css

* Add user select

* onDiffCollapse

* show source

* src

* Tries text

* hide/show

* uses nodisplay instead of hidden

* good hide

* ===

* Add button

* lint

* lint

* set function as global

* lint

* Exclude gui page diff

* remove extra space

* chevron

* pointer

* class

* Icons

* lint

* lint

* hide

Co-authored-by: Lars Hvam <larshp@hotmail.com>

src/ui/core/zcl_abapgit_html.clas.abap

@@ -19,9 +19,10 @@ CLASS zcl_abapgit_html DEFINITION
     CLASS-METHODS class_constructor.
     METHODS add_icon
       IMPORTING
-        !iv_name  TYPE string
+        !iv_name    TYPE string
-        !iv_hint  TYPE string OPTIONAL
+        !iv_hint    TYPE string OPTIONAL
-        !iv_class TYPE string OPTIONAL.
+        !iv_class   TYPE string OPTIONAL
+        !iv_onclick TYPE string OPTIONAL.
   PROTECTED SECTION.
   PRIVATE SECTION.
     CLASS-DATA: go_single_tags_re TYPE REF TO cl_abap_regex.
@@ -76,9 +77,10 @@ CLASS zcl_abapgit_html IMPLEMENTATION.
 
   METHOD add_icon.
 
-    add( icon( iv_name  = iv_name
+    add( icon( iv_name    = iv_name
-               iv_class = iv_class
+               iv_class   = iv_class
-               iv_hint  = iv_hint ) ).
+               iv_hint    = iv_hint
+               iv_onclick = iv_onclick  ) ).
 
   ENDMETHOD.
 
@@ -329,13 +331,17 @@ CLASS zcl_abapgit_html IMPLEMENTATION.
           lv_color      TYPE string,
           lv_class      TYPE string,
           lv_large_icon TYPE string,
-          lv_xpixel     TYPE i.
+          lv_xpixel     TYPE i,
+          lv_onclick    TYPE string.
 
     SPLIT iv_name AT '/' INTO lv_name lv_color.
 
     IF iv_hint IS NOT INITIAL.
       lv_hint  = | title="{ iv_hint }"|.
     ENDIF.
+    IF iv_onclick IS NOT INITIAL.
+      lv_onclick = | onclick="{ iv_onclick }"|.
+    ENDIF.
     IF iv_class IS NOT INITIAL.
       lv_class = | { iv_class }|.
     ENDIF.
@@ -348,7 +354,8 @@ CLASS zcl_abapgit_html IMPLEMENTATION.
       lv_large_icon = ' large'.
     ENDIF.
 
-    rv_str = |<i class="icon{ lv_large_icon } icon-{ lv_name }{ lv_color }{ lv_class }" { lv_hint }></i>|.
+    rv_str = |<i class="icon{ lv_large_icon } icon-{ lv_name }{ lv_color }|.
+    rv_str = |{ rv_str }{ lv_class }"{ lv_onclick }{ lv_hint }></i>|.
 
   ENDMETHOD.
 

src/ui/core/zif_abapgit_html.intf.abap

@@ -57,6 +57,7 @@ INTERFACE zif_abapgit_html PUBLIC.
       !iv_name      TYPE string
       !iv_hint      TYPE string OPTIONAL
       !iv_class     TYPE string OPTIONAL
+      !iv_onclick   TYPE string OPTIONAL
     RETURNING
       VALUE(rv_str) TYPE string .
 

src/ui/zabapgit_css_common.w3mi.data.css

@@ -36,6 +36,10 @@ input:focus, textarea:focus {
   border: 1px solid;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 /* MODIFIERS */
 .emphasis     { font-weight: bold !important; }
 .crossout     { text-decoration: line-through !important; }

src/ui/zabapgit_icon_font_css.w3mi.data.css

@@ -33,20 +33,24 @@
 .icon-box:before { content: "\f104"; }
 .icon-briefcase:before { content: "\f105"; }
 .icon-check:before { content: "\f106"; }
-.icon-cloud-upload-alt:before { content: "\f107"; }
+.icon-chevron-down:before { content: "\f107"; }
-.icon-code-branch:before { content: "\f108"; }
+.icon-chevron-left:before { content: "\f108"; }
-.icon-code-commit:before { content: "\f109"; }
+.icon-chevron-right:before { content: "\f109"; }
-.icon-cog:before { content: "\f10a"; }
+.icon-chevron-up:before { content: "\f10a"; }
-.icon-exclamation-circle:before { content: "\f10b"; }
+.icon-cloud-upload-alt:before { content: "\f10b"; }
-.icon-exclamation-triangle:before { content: "\f10c"; }
+.icon-code-branch:before { content: "\f10c"; }
-.icon-file-alt:before { content: "\f10d"; }
+.icon-code-commit:before { content: "\f10d"; }
-.icon-file-code:before { content: "\f10e"; }
+.icon-cog:before { content: "\f10e"; }
-.icon-file-image:before { content: "\f10f"; }
+.icon-exclamation-circle:before { content: "\f10f"; }
-.icon-file:before { content: "\f110"; }
+.icon-exclamation-triangle:before { content: "\f110"; }
-.icon-fire-alt:before { content: "\f111"; }
+.icon-file-alt:before { content: "\f111"; }
-.icon-folder:before { content: "\f112"; }
+.icon-file-code:before { content: "\f112"; }
-.icon-lock:before { content: "\f113"; }
+.icon-file-image:before { content: "\f113"; }
-.icon-plug:before { content: "\f114"; }
+.icon-file:before { content: "\f114"; }
-.icon-sliders-h:before { content: "\f115"; }
+.icon-fire-alt:before { content: "\f115"; }
-.icon-snowflake:before { content: "\f116"; }
+.icon-folder:before { content: "\f116"; }
-.icon-star:before { content: "\f117"; }
+.icon-lock:before { content: "\f117"; }
+.icon-plug:before { content: "\f118"; }
+.icon-sliders-h:before { content: "\f119"; }
+.icon-snowflake:before { content: "\f11a"; }
+.icon-star:before { content: "\f11b"; }

src/ui/zabapgit_js_common.w3mi.data.js

@@ -25,6 +25,7 @@
 /* exported enumerateTocAllRepos */
 /* exported enumerateJumpAllFiles */
 /* exported enumerateToolbarActions */
+/* exported onDiffCollapse */
 
 /**********************************************************
  * Polyfills
@@ -765,6 +766,25 @@ DiffHelper.prototype.highlightButton = function(state) {
   }
 };
 
+//Collapse/Expand diffs
+function onDiffCollapse(event) {
+  var source = event.target || event.srcElement;
+  var nextDiffContent = source.parentElement.nextElementSibling;
+  var hide;
+
+  if(source.classList.contains("icon-chevron-down")){
+    source.classList.remove("icon-chevron-down");
+    source.classList.add("icon-chevron-right");
+    hide = true;
+  } else {
+    source.classList.remove("icon-chevron-right");
+    source.classList.add("icon-chevron-down");
+    hide = false;
+  }
+
+  hide ? nextDiffContent.classList.add("nodisplay") : nextDiffContent.classList.remove("nodisplay");
+}
+
 // Add Bottom margin, so that we can scroll to the top of the last file
 function addMarginBottom(){
   document.getElementsByTagName("body")[0].style.marginBottom = screen.height + "px";

src/ui/zcl_abapgit_gui_page_diff.clas.abap

@@ -218,7 +218,7 @@ ENDCLASS.
 
 
 
-CLASS ZCL_ABAPGIT_GUI_PAGE_DIFF IMPLEMENTATION.
+CLASS zcl_abapgit_gui_page_diff IMPLEMENTATION.
 
 
   METHOD add_filter_sub_menu.
@@ -826,6 +826,12 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_DIFF IMPLEMENTATION.
 
     ro_html->add( '<div class="diff_head">' ).              "#EC NOTEXT
 
+    ro_html->add_icon(
+      iv_name    = 'chevron-down'
+      iv_hint    = 'Collapse/Expand'
+      iv_class   = 'cursor-pointer'
+      iv_onclick = 'onDiffCollapse(event)' ).
+
     IF is_diff-type <> 'binary'.
       ls_stats = is_diff-o_diff->stats( ).
       IF is_diff-fstate = c_fstate-both. " Merge stats into 'update' if both were changed