SAP/abapGit
1
0
Fork 0
mirror of https://github.com/abapGit/abapGit.git synced 2025-05-01 12:20:51 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI repo over tweaks (#5790)

Browse Source 
* bugfix remove command

* bugfix diff shortcut

* wip

* working

* css clean ups

* linter fix

* css improvements

* font 90%

* css cleanups
This commit is contained in:
Alexander Tsybulsky 2022-10-17 22:17:22 +03:00 committed by GitHub
parent 9bcbebb46b
commit d2ba4af805
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 137 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/ui/zabapgit_css_common.w3mi.data.css
View File

@ -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{

58
src/ui/zabapgit_css_theme_default.w3mi.data.css
View File

@ -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);

35
src/ui/zabapgit_js_common.w3mi.data.js
View File

@ -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);

65
src/ui/zcl_abapgit_gui_page_repo_over.clas.abap
View File

@ -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 class="db_tab">| ).
ii_html->add( |<table>| ).
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( `(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( `)</td></tr></tfoot>` ).
ii_html->add( `<tfoot>` ).
ii_html->add( `<tr><td colspan="100%">` ).
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( `</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_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( |<tr class="repo{
lv_fav_tr_class }" data-key="{
is_repo-key }" data-offline="{ is_repo-type }">| ).
ii_html->add( |<tr{ 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
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 = |<span class="link" title="Open">&rsaquo;{ lv_repo_go_link }</span>| ).
iv_class = 'ro-go wmin'
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( ) ).