UI repo over tweaks (#5790)

* bugfix remove command

* bugfix diff shortcut

* wip

* working

* css clean ups

* linter fix

* css improvements

* font 90%

* css cleanups

src/ui/zabapgit_css_common.w3mi.data.css

@@ -188,8 +188,6 @@ div.log .icon { padding-right: 6px; }
 
 /* REPOSITORY */
 div.repo {
-  margin-top: 3px;
-  margin-bottom: 3px;
   padding: 0.5em 1em 0.5em 1em;
   position: relative;
 }
@@ -486,7 +484,8 @@ table.diff_tab {
   font-size: 10pt;
   width: 100%;
 }
-table.diff_tab td,th {
+table.diff_tab td,
+table.diff_tab th {
   padding-left: 0.5em;
   padding-right: 0.5em;
 }
@@ -615,7 +614,7 @@ div.db_list {
   overflow-x: auto;
 }
 
-table.db_tab{
+table.db_tab {
   table-layout: fixed;
 }
 table.db_tab pre {
@@ -626,23 +625,25 @@ table.db_tab pre {
   margin: 0px;
   width: 30em;
 }
-
 table.db_tab tr.firstrow td { padding-top: 0.5em; }
 table.db_tab th {
   text-align: left;
   padding: 0.5em;
+}
+table.db_tab thead tr {
   border-bottom: 1px solid;
 }
+table.db_tab tfoot tr {
+  border-top: 1px solid;
+}
 table.db_tab td {
   padding: 4px 8px;
   vertical-align: middle;
   word-break: break-all;
 }
-
 table.db_tab th.package {
     width: 45ch;
 }
-
 table.db_tab td.data {
   font-style: italic;
 }
@@ -1020,10 +1021,44 @@ table.commit tr .title {
 }
 
 /* Repo overview */
-.repo-overview { font-size: smaller; }
+.repo-overview { 
-.repo-overview tbody td { height: 2em; }
+  font-size: 90%;
-.ro-detail { display: none; }
+  padding: 0.5em 0.7em;
-.ro-go { font-size: 150%; }
+}
+.repo-overview-toolbar {
+  padding: 1em;
+  /*margin-top: -0.5em;*/
+}
+.repo-overview th {
+  text-align: left;
+  font-weight: normal;
+}
+.repo-overview table {
+  border: 1px solid;
+}
+.repo-overview thead tr {
+  border-bottom: 1px solid;
+  line-height: 1.5;
+}
+.repo-overview tfoot tr {
+  border-top: 1px solid;
+}
+.repo-overview tr.favorite .icon-star {
+  color: #5e8dc9 !important;
+}
+.repo-overview td,
+.repo-overview th { 
+  padding: 6px 6px; /* maybe use height ? */
+}
+.repo-overview .ro-detail { display: none; }
+.repo-overview .ro-go a {
+  padding: 0px 0.15em;
+}
+.repo-overview .ro-go a:hover { 
+  color: #ff721e;
+  text-decoration: none;
+}
+
 
 /* Branch Overview Page */
 .gitGraph-scrollWrapper, .gitGraph-Wrapper{

src/ui/zabapgit_css_theme_default.w3mi.data.css

@@ -6,12 +6,16 @@
   --theme-background-color: #E8E8E8;
   --theme-container-background-color: #f2f2f2;
   --theme-container-border-color: lightgrey;
+  --theme-table-background-color: white;
+  --theme-table-border-color: #ddd;
+  --theme-table-cell-border-color: #eee;
+
   --theme-primary-font: "72", Arial, Helvetica, sans-serif;
   --theme-primary-font-color: #333333;
   --theme-primary-font-color-reduced: #ccc;
   --theme-font-size: 12pt;
   --theme-link-color: #4078c0;
-  --theme-table-border-color: #eee;
+
   --theme-greyscale-dark: #808080;
   --theme-greyscale-medium: #b3b3b3;
   --theme-greyscale-light: #ccc;
@@ -136,20 +140,20 @@ span.branch_branch {
 
 /* REPOSITORY TABLE*/
 table.repo_tab {
-  border-color: #ddd;
+  border-color: var(--theme-table-border-color);
-  background-color: #fff;
+  background-color: var(--theme-table-background-color);
 }
 .repo_tab th {
   color: var(--theme-link-color);
   background-color: #edf2f9;
-  border-bottom-color: #ddd;
+  border-bottom-color: var(--theme-table-border-color);
 }
 .repo_tab td {
-  color: #333;
+  color: var(--theme-primary-font-color);
 }
 
 .repo_tab tr.object_row{
-  border-top-color: var(--theme-table-border-color);
+  border-top-color: var(--theme-table-cell-border-color);
 }
 .repo_tab .inactive      { color: orange; }
 .repo_tab tr.unsupported { color: var(--theme-greyscale-lighter); }
@@ -195,7 +199,7 @@ table.repo_tab {
 }
 .stage_tab td {
   color: var(--theme-greyscale-medium);
-  border-top-color: var(--theme-table-border-color);
+  border-top-color: var(--theme-table-cell-border-color);
 }
 .stage_tab td.status {
   color: var(--theme-primary-font-color-reduced);
@@ -307,7 +311,8 @@ span.state-block span.none {
 
 
 /* DIFF TABLE */
-table.diff_tab td,th {
+table.diff_tab td,
+table.diff_tab th {
   color: #444;
 }
 table.diff_tab thead.header th {
@@ -322,13 +327,13 @@ table.diff_tab thead.nav_line th {
 }
 table.diff_tab td.num, th.num {
   color: var(--theme-primary-font-color-reduced);
-  border-left-color: var(--theme-table-border-color);
+  border-left-color: var(--theme-table-cell-border-color);
-  border-right-color: var(--theme-table-border-color);
+  border-right-color: var(--theme-table-cell-border-color);
 }
 table.diff_tab td.patch, th.patch {
   color: var(--theme-primary-font-color-reduced);
-  border-left-color: var(--theme-table-border-color);
+  border-left-color: var(--theme-table-cell-border-color);
-  border-right-color: var(--theme-table-border-color);
+  border-right-color: var(--theme-table-cell-border-color);
 }
 
 /* STYLES for Syntax Highlighting */
@@ -358,6 +363,28 @@ div.debug_container {
   background-color: var(--theme-container-background-color);
 }
 
+/* Repo overview */
+
+.repo-overview { background-color: var(--theme-container-background-color); }
+.repo-overview table { 
+  background-color: var(--theme-table-background-color);
+  border-color: var(--theme-table-border-color);
+}
+.repo-overview th {
+  color: var(--theme-link-color);
+}
+.repo-overview thead tr {
+  background-color: #edf2f9;
+}
+.repo-overview thead tr,
+.repo-overview tfoot tr {
+  border-color: var(--theme-table-border-color);
+}
+.repo-overview a.remote_repo { color: var(--theme-primary-font-color-reduced); }
+.repo-overview a.remote_repo:hover { color: var(--theme-link-color); }
+.repo-overview tbody tr:hover td { background-color: hsla(214, 50%, 50%, 0.05); }
+.repo-overview tbody tr.selected { background-color: hsla(214, 50%, 75%, 0.33); }
+
 /* DB ENTRIES */
 div.db_list { background-color: #fff; }
 table.db_tab td      { color: #333; }
@@ -370,11 +397,10 @@ table.db_tab tbody tr:active td {
 }
 table.db_tab th {
   color: var(--theme-link-color);
-  border-bottom-color: #ddd;
 }
-
+table.db_tab thead tr,
-table.db_tab tr.selected {
+table.db_tab tfoot tr {
-  background-color: rgba(191, 191, 191, 1) !important;
+  border-color: #ddd;
 }
 table.db_tab a.remote_repo {
   color: var(--theme-primary-font-color-reduced);

src/ui/zabapgit_js_common.w3mi.data.js

@@ -250,8 +250,7 @@ function RepoOverViewHelper() {
   this.pageId = "RepoOverViewHelperState"; // constant is OK for this case
   this.isDetailsDisplayed = false;
   this.isOnlyFavoritesDisplayed = false;
-  this.detailCssClass = findStyleSheetByName(".ro-detail");
+  this.detailCssClass = findStyleSheetByName(".repo-overview .ro-detail");
-  this.actionCssClass = findStyleSheetByName(".ro-action");
   var icon = document.getElementById("icon-filter-detail");
   this.toggleFilterIcon(icon, this.isDetailsDisplayed);
   this.registerRowSelection();
@@ -284,26 +283,30 @@ RepoOverViewHelper.prototype.registerKeyboardShortcuts = function() {
     }
     var keycode = event.keyCode;
     var rows = Array.prototype.slice.call(self.getVisibleRows());
-    var selected = document.querySelector(".repo.selected");
+    var selected = document.querySelector(".repo-overview tr.selected");
     var indexOfSelected = rows.indexOf(selected);
+    var lastRow = rows.length - 1;
 
-    if (keycode == 13 && // "enter" to open
+    if (keycode == 13 && document.activeElement.tagName.toLowerCase() != "input") {
-       document.activeElement.tagName.toLowerCase() != "input") { // prevent opening if command field has focus
+      // "enter" to open, unless command field has focus
       self.openSelectedRepo();
-    } else if ((keycode == 52 || keycode == 100) && indexOfSelected > 0) {
+    } else if ((keycode == 52 || keycode == 56) && indexOfSelected > 0) {
-      // "4" for previous
+      // "4,8" for previous, digits are the numlock keys
+      // NB: numpad must be activated, keypress does not detect arrows
+      //     if we need arrows it will be keydown. But then mind the keycodes, they may change !
+      //     e.g. 100 is 'd' with keypress (and conflicts with diff hotkey), and also it is arrow-left keydown
       self.selectRowByIndex(indexOfSelected - 1);
-    } else if ((keycode == 54 || keycode == 102) && indexOfSelected < rows.length - 1) {
+    } else if ((keycode == 54 || keycode == 50) && indexOfSelected < lastRow) {
-      // "6" for next
+      // "6,2" for next
       self.selectRowByIndex(indexOfSelected + 1);
     }
   });
 };
 
 RepoOverViewHelper.prototype.openSelectedRepo = function () {
-  this.selectedRepoKey = document.querySelector(".repo.selected").dataset.key;
+  this.selectedRepoKey = document.querySelector(".repo-overview tr.selected").dataset.key;
   this.saveLocalStorage();
-  document.querySelector(".repo.selected td.ro-go a").click();
+  document.querySelector(".repo-overview tr.selected td.ro-go a").click();
 };
 
 RepoOverViewHelper.prototype.selectRowByIndex = function (index) {
@@ -324,7 +327,7 @@ RepoOverViewHelper.prototype.selectRowByIndex = function (index) {
 
 RepoOverViewHelper.prototype.selectRowByRepoKey = function (key) {
   var attributeQuery = "[data-key='" + key + "']";
-  var row = document.querySelector(".repo" + attributeQuery);
+  var row = document.querySelector(".repo-overview tbody tr" + attributeQuery);
   // navigation to already selected repo
   if (row.dataset.key === key && row.classList.contains("selected")) {
     return;
@@ -371,24 +374,24 @@ RepoOverViewHelper.prototype.updateActionLinks = function (selectedRow) {
 };
 
 RepoOverViewHelper.prototype.deselectAllRows = function () {
-  document.querySelectorAll(".repo").forEach(function (x) {
+  document.querySelectorAll(".repo-overview tbody tr").forEach(function (x) {
     x.classList.remove("selected");
   });
 };
 
 RepoOverViewHelper.prototype.getVisibleRows = function () {
-  return document.querySelectorAll(".repo:not(.nodisplay)");
+  return document.querySelectorAll(".repo-overview tbody tr:not(.nodisplay)");
 };
 
 RepoOverViewHelper.prototype.registerRowSelection = function () {
   var self = this;
-  document.querySelectorAll(".repo td:not(.ro-go)").forEach(function (repoListRowCell) {
+  document.querySelectorAll(".repo-overview tr td:not(.ro-go)").forEach(function (repoListRowCell) {
     repoListRowCell.addEventListener("click", function () {
       self.selectRowByRepoKey(this.parentElement.dataset.key);
     });
   });
 
-  document.querySelectorAll(".repo td.ro-go").forEach(function (openRepoIcon) {
+  document.querySelectorAll(".repo-overview tr td.ro-go").forEach(function (openRepoIcon) {
     openRepoIcon.addEventListener("click", function () {
       var selectedRow = this.parentElement;
       self.selectRowByRepoKey(selectedRow.dataset.key);

src/ui/zcl_abapgit_gui_page_repo_over.clas.abap

@@ -347,14 +347,16 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
       iv_txt   = |Remove|
       iv_title = |Remove abapGit's records of the repository (the system's |
               && |development objects will remain unaffected)|
-      iv_act   = |{ zif_abapgit_definitions=>c_action-repo_remove }{ lc_dummy_key }| ).
+      iv_act   = |{ zif_abapgit_definitions=>c_action-repo_remove }{ lc_dummy_key }|
+      iv_class    = |{ lc_action_class }|
+      iv_li_class = |{ lc_action_class }| ).
 
     lo_toolbar_more_sub->add(
       iv_txt      = |Uninstall|
       iv_title    = |Delete all development objects belonging to this package |
                  && |(and subpackages) from the system|
       iv_act      = |{ zif_abapgit_definitions=>c_action-repo_purge }{ lc_dummy_key }|
-      iv_class    = |{ lc_action_class } { lc_online_class }|
+      iv_class    = |{ lc_action_class }|
       iv_li_class = |{ lc_action_class }| ).
 
     lo_toolbar->add(
@@ -404,7 +406,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
 
   METHOD render_header_bar.
 
-    ii_html->add( |<div class="pad-1em" id="repo-overview-toolbar">| ).
+    ii_html->add( |<div class="repo-overview-toolbar">| ).
     ii_html->add( render_filter_bar( ) ).
     ii_html->add( render_action_toolbar( ) ).
     ii_html->add( |</div>| ).
@@ -414,8 +416,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
 
   METHOD render_repo_list.
 
-    ii_html->add( |<div class="db_list repo-overview">| ).
+    ii_html->add( |<table>| ).
-    ii_html->add( |<table class="db_tab">| ).
 
     render_table_header( ii_html ).
     render_table_body(
@@ -424,7 +425,6 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
     render_table_footer( ii_html ).
 
     ii_html->add( |</table>| ).
-    ii_html->add( |</div>| ).
 
   ENDMETHOD.
 
@@ -460,12 +460,15 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
   METHOD render_table_footer.
 
     IF mv_only_favorites = abap_true.
-      ii_html->add( `<tfoot><tr><td colspan="5">` ).
+      ii_html->add( `<tfoot>` ).
-      ii_html->add( `(Only favorites are shown. ` ).
+      ii_html->add( `<tr><td colspan="100%">` ).
-      ii_html->add( ii_html->a(
+      ii_html->add( |(Only favorites are shown. {
-        iv_txt   = |Show All|
+        ii_html->a(
-        iv_act   = |{ zif_abapgit_definitions=>c_action-toggle_favorites }?force_state={ abap_false }| ) ).
+          iv_txt   = |Show All|
-      ii_html->add( `)</td></tr></tfoot>` ).
+          iv_act   = |{ zif_abapgit_definitions=>c_action-toggle_favorites }?force_state={ abap_false }| )
+      })| ).
+      ii_html->add( `</td></tr>` ).
+      ii_html->add( `</tfoot>` ).
     ENDIF.
 
   ENDMETHOD.
@@ -539,7 +542,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
 
     _add_column(
       iv_tech_name      = 'GO'
-      iv_css_class      = 'ro-go'
+      iv_css_class      = 'ro-go wmin'
       iv_allow_order_by = abap_false ).
 
     ii_html->add( |<thead>| ).
@@ -563,31 +566,22 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
       lv_repo_type_icon TYPE string,
       lv_favorite_icon  TYPE string,
       lv_fav_tr_class   TYPE string,
-      lv_lock           TYPE string,
+      lv_lock           TYPE string.
-      lv_repo_go_link   TYPE string.
 
     lv_is_online_repo = boolc( is_repo-type = abap_false ).
 
     " Start of row
     IF is_repo-favorite = abap_true.
-      lv_fav_tr_class = ' favorite'.
+      lv_fav_tr_class = ' class="favorite"'.
     ELSE.
       lv_fav_tr_class = ''.
     ENDIF.
 
-    ii_html->add( |<tr class="repo{
+    ii_html->add( |<tr{ lv_fav_tr_class } data-key="{ is_repo-key }" data-offline="{ is_repo-type }">| ).
-      lv_fav_tr_class }" data-key="{
-      is_repo-key }" data-offline="{ is_repo-type }">| ).
 
     " Favorite
-    IF is_repo-favorite = abap_true.
-      lv_favorite_icon = 'star/blue'.
-    ELSE.
-      lv_favorite_icon = 'star/grey'.
-    ENDIF.
-
     lv_favorite_icon = ii_html->icon(
-      iv_name  = lv_favorite_icon
+      iv_name  = 'star/grey' " blue is added in css, based on TR style
       iv_class = 'pad-sides'
       iv_hint  = 'Click to toggle favorite' ).
 
@@ -673,15 +667,13 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
       iv_class = 'ro-detail'
       iv_content = |{ is_repo-key }| ).
 
-    " the link is clicked in javascript
+    " Go-to action
-    lv_repo_go_link = ii_html->a(
-      iv_txt   = ``
-      iv_act   = |{ c_action-select }?key={ is_repo-key }|
-      iv_class = 'hidden' ).
-
     ii_html->td(
-      iv_class   = 'ro-go'
+      iv_class = 'ro-go wmin'
-      iv_content = |<span class="link" title="Open">&rsaquo;{ lv_repo_go_link }</span>| ).
+      iv_content = ii_html->a(
+        iv_title = 'Open'
+        iv_txt   = '&rtrif;'
+        iv_act   = |{ c_action-select }?key={ is_repo-key }| ) ).
 
     ii_html->add( `</tr>` ).
 
@@ -829,11 +821,14 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
 
     CREATE OBJECT ri_html TYPE zcl_abapgit_html.
 
-    render_header_bar( ri_html ).
     zcl_abapgit_exit=>get_instance( )->wall_message_list( ri_html ).
+
+    ri_html->add( |<div class="repo-overview">| ).
+    render_header_bar( ri_html ).
     render_repo_list(
       ii_html     = ri_html
       it_overview = lt_overview ).
+    ri_html->add( |</div>| ).
 
     gui_services( )->register_event_handler( me ).
     register_deferred_script( render_scripts( ) ).