diff --git a/src/ui/zabapgit_css_common.w3mi.data.css b/src/ui/zabapgit_css_common.w3mi.data.css index 7a58430d5..e94ca71d8 100644 --- a/src/ui/zabapgit_css_common.w3mi.data.css +++ b/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 tbody td { height: 2em; } -.ro-detail { display: none; } -.ro-go { font-size: 150%; } +.repo-overview { + font-size: 90%; + padding: 0.5em 0.7em; +} +.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{ diff --git a/src/ui/zabapgit_css_theme_default.w3mi.data.css b/src/ui/zabapgit_css_theme_default.w3mi.data.css index d63a97384..85b1e13b8 100644 --- a/src/ui/zabapgit_css_theme_default.w3mi.data.css +++ b/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; - background-color: #fff; + border-color: var(--theme-table-border-color); + 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-right-color: var(--theme-table-border-color); + border-left-color: var(--theme-table-cell-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-right-color: var(--theme-table-border-color); + border-left-color: var(--theme-table-cell-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 tr.selected { - background-color: rgba(191, 191, 191, 1) !important; +table.db_tab thead tr, +table.db_tab tfoot tr { + border-color: #ddd; } table.db_tab a.remote_repo { color: var(--theme-primary-font-color-reduced); diff --git a/src/ui/zabapgit_js_common.w3mi.data.js b/src/ui/zabapgit_js_common.w3mi.data.js index 02ae602a6..f5f75fec9 100644 --- a/src/ui/zabapgit_js_common.w3mi.data.js +++ b/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.actionCssClass = findStyleSheetByName(".ro-action"); + this.detailCssClass = findStyleSheetByName(".repo-overview .ro-detail"); 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 - document.activeElement.tagName.toLowerCase() != "input") { // prevent opening if command field has focus + if (keycode == 13 && document.activeElement.tagName.toLowerCase() != "input") { + // "enter" to open, unless command field has focus self.openSelectedRepo(); - } else if ((keycode == 52 || keycode == 100) && indexOfSelected > 0) { - // "4" for previous + } else if ((keycode == 52 || keycode == 56) && indexOfSelected > 0) { + // "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) { - // "6" for next + } else if ((keycode == 54 || keycode == 50) && indexOfSelected < lastRow) { + // "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); diff --git a/src/ui/zcl_abapgit_gui_page_repo_over.clas.abap b/src/ui/zcl_abapgit_gui_page_repo_over.clas.abap index 156bfb9fa..035f9190a 100644 --- a/src/ui/zcl_abapgit_gui_page_repo_over.clas.abap +++ b/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( |
| ). + ii_html->add( |
| ). ii_html->add( render_filter_bar( ) ). ii_html->add( render_action_toolbar( ) ). ii_html->add( |
| ). @@ -414,8 +416,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION. METHOD render_repo_list. - ii_html->add( |
| ). - ii_html->add( || ). + ii_html->add( |
| ). 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( |
| ). - ii_html->add( |
| ). 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( `` ). - ii_html->add( `(Only favorites are shown. ` ). - ii_html->add( ii_html->a( - iv_txt = |Show All| - iv_act = |{ zif_abapgit_definitions=>c_action-toggle_favorites }?force_state={ abap_false }| ) ). - ii_html->add( `)` ). + ii_html->add( `` ). + ii_html->add( `` ). + ii_html->add( |(Only favorites are shown. { + ii_html->a( + iv_txt = |Show All| + iv_act = |{ zif_abapgit_definitions=>c_action-toggle_favorites }?force_state={ abap_false }| ) + })| ). + ii_html->add( `` ). + ii_html->add( `` ). 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( || ). @@ -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_repo_go_link TYPE string. + lv_lock 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( || ). + ii_html->add( || ). " 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 - lv_repo_go_link = ii_html->a( - iv_txt = `` - iv_act = |{ c_action-select }?key={ is_repo-key }| - iv_class = 'hidden' ). - + " Go-to action ii_html->td( - iv_class = 'ro-go' - iv_content = |›{ lv_repo_go_link }| ). + iv_class = 'ro-go wmin' + iv_content = ii_html->a( + iv_title = 'Open' + iv_txt = '▸' + iv_act = |{ c_action-select }?key={ is_repo-key }| ) ). ii_html->add( `` ). @@ -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( |
| ). + render_header_bar( ri_html ). render_repo_list( ii_html = ri_html it_overview = lt_overview ). + ri_html->add( |
| ). gui_services( )->register_event_handler( me ). register_deferred_script( render_scripts( ) ).