Repo overview UX/design (#2245)

* reorderings

* moving around disarranged tags

* draft

* toggleDetail js and tuning

* remove unnecessary firstrow

* tunings

src/ui/zcl_abapgit_gui_page_repo_over.clas.abap

@@ -126,7 +126,7 @@ ENDCLASS.
 
 
 
-CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
+CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
 
 
   METHOD add_direction_option.
@@ -335,37 +335,34 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
 
     CREATE OBJECT ro_html.
 
-    ro_html->add( |<div class="form-container">| ).
-
-    ro_html->add( |<form id="commit_form" class="grey70"|
-               && | method="post" action="sapevent:{ c_action-apply_filter }">| ).
-
     render_header_bar( ro_html ).
-
     render_table( io_html     = ro_html
                   it_overview = lt_overview ).
 
-    ro_html->add( |</div>| ).
-
   ENDMETHOD.
 
 
   METHOD render_header_bar.
 
-    io_html->add( |<div class="row">| ).
+    io_html->add( |<div class="form-container">| ).
+
+    io_html->add( |<form class="inline" method="post" action="sapevent:{ c_action-apply_filter }">| ).
 
     render_order_by( io_html ).
     render_order_by_direction( io_html ).
 
-    io_html->add( render_text_input( iv_name  = |filter|
+    io_html->add( render_text_input(
-                                     iv_label = |Filter: |
+      iv_name  = |filter|
-                                     iv_value = mv_filter ) ).
+      iv_label = |Filter: |
-
+      iv_value = mv_filter ) ).
     io_html->add( |<input type="submit" class="hidden-submit">| ).
-
-    io_html->add( |</div>| ).
-
     io_html->add( |</form>| ).
+
+    io_html->add( zcl_abapgit_html=>a(
+      iv_txt = 'Toggle detail'
+      iv_act = |toggleRepoListDetail()|
+      iv_typ = zif_abapgit_definitions=>c_action_type-onclick ) ).
+
     io_html->add( |</div>| ).
 
   ENDMETHOD.
@@ -429,33 +426,30 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
 
   METHOD render_table.
 
-    io_html->add( |<div class="db_list">| ).
+    io_html->add( |<div class="db_list repo-overview">| ).
-    io_html->add( |<table class="db_tab">| ).
+    io_html->add( |<table class="db_tab w100">| ).
 
     render_table_header( io_html ).
     render_table_body( io_html     = io_html
                        it_overview = it_overview  ).
 
-    io_html->add( |</tbody>| ).
     io_html->add( |</table>| ).
+    io_html->add( |</div>| ).
 
   ENDMETHOD.
 
 
   METHOD render_table_body.
 
-    DATA: lv_trclass       TYPE string,
+    DATA:
           lv_type_icon     TYPE string,
           lv_favorite_icon TYPE string.
 
     FIELD-SYMBOLS: <ls_overview> LIKE LINE OF it_overview.
 
-    LOOP AT it_overview ASSIGNING <ls_overview>.
+    io_html->add( '<tbody>' ).
 
-      CLEAR lv_trclass.
+    LOOP AT it_overview ASSIGNING <ls_overview>.
-      IF sy-tabix = 1.
-        lv_trclass = ' class="firstrow"' ##NO_TEXT.
-      ENDIF.
 
       IF <ls_overview>-type = abap_true.
         lv_type_icon = 'plug/darkgrey'.
@@ -469,16 +463,15 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
         lv_favorite_icon = 'star/grey'.
       ENDIF.
 
-      io_html->add( |<tr{ lv_trclass }>| ).
+      io_html->add( |<tr>| ).
-      io_html->add( |<td>| ).
+      io_html->add( |<td class="wmin">| ).
       io_html->add_a( iv_act = |{ zif_abapgit_definitions=>c_action-repo_toggle_fav }?{ <ls_overview>-key }|
                       iv_txt = zcl_abapgit_html=>icon( iv_name  = lv_favorite_icon
                                                        iv_class = 'pad-sides'
                                                        iv_hint  = 'Click to toggle favorite' ) ).
       io_html->add( |</td>| ).
-      io_html->add( |<td>{ zcl_abapgit_html=>icon( lv_type_icon )  }</td>| ).
+      io_html->add( |<td class="wmin">{ zcl_abapgit_html=>icon( lv_type_icon )  }</td>| ).
 
-      io_html->add( |<td>{ <ls_overview>-key }</td>| ).
       io_html->add( |<td>{ zcl_abapgit_html=>a( iv_txt = <ls_overview>-name
                                                 iv_act = |{ c_action-select }?{ <ls_overview>-key }| ) }</td>| ).
 
@@ -487,21 +480,22 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
                                          iv_act = |{ zif_abapgit_definitions=>c_action-url }?|
                                                && |{ <ls_overview>-url }| ) }</td>| ).
       ELSE.
-        io_html->add( |<td> </td>| ).
+        io_html->add( |<td></td>| ).
       ENDIF.
 
       io_html->add( |<td>{ <ls_overview>-package }</td>| ).
       io_html->add( |<td>{ <ls_overview>-branch }</td>| ).
-      io_html->add( |<td>{ <ls_overview>-created_by }</td>| ).
+      io_html->add( |<td class="ro-detail">{ <ls_overview>-deserialized_by }</td>| ).
-      io_html->add( |<td>{ <ls_overview>-created_at }</td>| ).
+      io_html->add( |<td class="ro-detail">{ <ls_overview>-deserialized_at }</td>| ).
-      io_html->add( |<td>{ <ls_overview>-deserialized_by }</td>| ).
+      io_html->add( |<td class="ro-detail">{ <ls_overview>-created_by }</td>| ).
-      io_html->add( |<td>{ <ls_overview>-deserialized_at }</td>| ).
+      io_html->add( |<td class="ro-detail">{ <ls_overview>-created_at }</td>| ).
-      io_html->add( |<td>| ).
+      io_html->add( |<td class="ro-detail">{ <ls_overview>-key }</td>| ).
-      io_html->add( |</td>| ).
       io_html->add( |</tr>| ).
 
     ENDLOOP.
 
+    io_html->add( |</tbody>| ).
+
   ENDMETHOD.
 
 
@@ -509,21 +503,19 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
 
     io_html->add( |<thead>| ).
     io_html->add( |<tr>| ).
-    io_html->add( |<th>Favorite</th>| ).
+    io_html->add( |<th class="wmin"></th>| ). " Fav icon
-    io_html->add( |<th>Type</th>| ).
+    io_html->add( |<th class="wmin"></th>| ). " Repo type
-    io_html->add( |<th>Key</th>| ).
     io_html->add( |<th>Name</th>| ).
     io_html->add( |<th>Url</th>| ).
     io_html->add( |<th>Package</th>| ).
     io_html->add( |<th>Branch name</th>| ).
-    io_html->add( |<th>Creator</th>| ).
+    io_html->add( |<th class="ro-detail">Deserialized by</th>| ).
-    io_html->add( |<th>Created at [{ mv_time_zone }]</th>| ).
+    io_html->add( |<th class="ro-detail">Deserialized at [{ mv_time_zone }]</th>| ).
-    io_html->add( |<th>Deserialized by</th>| ).
+    io_html->add( |<th class="ro-detail">Creator</th>| ).
-    io_html->add( |<th>Deserialized at [{ mv_time_zone }]</th>| ).
+    io_html->add( |<th class="ro-detail">Created at [{ mv_time_zone }]</th>| ).
-    io_html->add( |<th></th>| ).
+    io_html->add( |<th class="ro-detail">Key</th>| ).
     io_html->add( '</tr>' ).
     io_html->add( '</thead>' ).
-    io_html->add( '<tbody>' ).
 
   ENDMETHOD.
 
@@ -557,6 +549,11 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
   ENDMETHOD.
 
 
+  METHOD zif_abapgit_gui_page_hotkey~get_hotkey_actions.
+
+  ENDMETHOD.
+
+
   METHOD zif_abapgit_gui_page~on_event.
 
     DATA: lv_key  TYPE zif_abapgit_persistence=>ty_value.
@@ -605,10 +602,4 @@ CLASS zcl_abapgit_gui_page_repo_over IMPLEMENTATION.
     ENDCASE.
 
   ENDMETHOD.
-
-
-  METHOD zif_abapgit_gui_page_hotkey~get_hotkey_actions.
-
-  ENDMETHOD.
-
 ENDCLASS.

src/zabapgit_css_common.w3mi.data.css

@@ -69,9 +69,11 @@ input:focus, textarea:focus {
 .indent5em        { padding-left: 0.5em; }
 .pad4px           { padding: 4px; }
 .w100             { width: 100%; }
+.wmin             { width: 1%; }
 .w40              { width: 40%; }
 .float-right      { float: right; }
 .pad-right        { padding-right: 6px; }
+.inline           { display: inline; }
 
 /* PANELS */
 div.panel {
@@ -976,3 +978,16 @@ table.commit tr .title {
   font-weight: bold;
   vertical-align: top;
 }
+
+/* Repo overview */
+.repo-overview {
+  font-size: smaller;
+}
+
+.repo-overview tbody td {
+  height: 2em;
+}
+
+.ro-detail {
+  display: none;
+}

src/zabapgit_js_common.w3mi.data.js

@@ -1195,3 +1195,18 @@ BranchOverview.prototype.showCommit = function(event){
 BranchOverview.prototype.hideCommit = function (event){ // eslint-disable-line no-unused-vars
   this.toggleCommit();
 };
+
+// Repo overview
+function findStyleSheetByName(name) {
+  var classes = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
+  for (var i = 0; i < classes.length; i++) {
+    if (classes[i].selectorText === name) return classes[i];
+  }
+}
+
+function toggleRepoListDetail() {
+  var detailClass = findStyleSheetByName(".ro-detail");
+  if (detailClass) {
+    detailClass.style.display = detailClass.style.display === "none" ? "" : "none";
+  }
+}