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

toolbar refactoring part2

Browse Source
This commit is contained in:
Alexander Tsybulsky 2017-03-05 21:15:38 +02:00 committed by sbcgua
parent f3c496cd2f
commit ecdf53bf6d
6 changed files with 107 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/zabapgit_css_common.w3mi.data.css
View File

@ -59,45 +59,45 @@ div#header {
padding: 0.5em 0.5em;
border-bottom: 3px double lightgrey;
}
div#header td.headpad { padding-top: 11px; }
div#header td.logo { width: 164px; }
div#header td.logo { width: 164px; }
div#header td:not(.logo) { padding-top: 11px; } /* align with logo H */
div#header span.page_title {
font-weight: normal;
font-size: 18pt;
color: #bbb;
padding-left: 0.4em;
}
div#toc {
padding: 0.5em 1em;
background-color: #f2f2f2;
}
div#toc div.toc_grid { margin: -0.3em 0em; }
div#toc .favorites a { opacity: 0.5; }
div#toc .favorites:hover a { opacity: 1; }
div#toc div.toc_row {
margin: 0.3em 0em;
}
div#footer {
padding: 0.5em 1em;
border-top: 3px double lightgrey;
text-align: center;
}
div.dummydiv {
background-color: #f2f2f2;
padding: 0.5em 1em;
text-align: center;
}
span.version {
div#footer span.version {
display: block;
color: grey;
margin-top: 0.3em;
}
span.page_title {
font-weight: normal;
font-size: 18pt;
color: #bbb;
padding-left: 0.4em;
#debug-output {
text-align: right;
padding-right: 0.5em;
color: #ccc;
font-style: italic;
font-size: small;
}
div.dummydiv {
background-color: #f2f2f2;
padding: 0.5em 1em;
text-align: center;
}
/* ERROR LOG */
@ -109,101 +109,9 @@ div.log {
border: 1px #fdcece solid;
border-radius: 4px;
}
div.log > span { display:block; }
div.log .octicon { padding-right: 6px; }
/* MENU */
div.menu { display: inline; }
div.menu .menu_end { border-right: 0px !important; }
div.menu a {
padding-left: 0.5em;
padding-right: 0.5em;
font-size: 12pt;
}
div.menu > a {
border-right: 1px solid lightgrey;
}
div.menu > div.dropdown > a {
border-right: 1px solid lightgrey;
}
div.menu > a:last-child {
border-right: 0px !important;
}
div.menu > div.dropdown:last-child > a {
border-right: 0px !important;
}
div.menu_vertical { display: inline; }
div.menu_vertical a {
display: block;
font-size: 12pt;
}
/*DROP DOWN*/
.dropdown {
position: relative;
display: inline;
}
.dropdown_angle {
position: absolute !important;
right: -4px;
top: -1px;
}
.dropbtn_angle {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #4078c0;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.dropdown_content {
display: none;
z-index: 1;
position: absolute;
right: -12px;
top: 1em;
padding: 6px 10px 10px 10px;
white-space: nowrap;
}
.dropdown div.minizone {
display: none;
z-index: 1;
position: absolute;
padding: 0px;
width: 16px;
height: 100%;
bottom: 0px;
right: 100%;
}
.dropdown:hover .minizone { display: block; }
.dropdown_angle .dropdown_content {
top: -1px;
}
.dropdown:hover .dropdown_content { display: block; }
.dropdown_content a {
padding: 0.2em;
background-color: #f9f9f9;
text-decoration: none;
display: block;
border: none !important;
}
.dropdown_content div.box {
border-bottom: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
background-color: #f9f9f9;
padding: 2px;
}
.dropdown_content td { text-align: left; padding: 2px; }
.dropdown_content td a { padding: 0em 0.2em; }
.dropdown_content td.icon { padding: 0 3px 0 6px; }
.dropdown_content td.text { width: 100%; }
.dropdown_content a:hover { background-color: #f1f1f1 }
.dropdown:hover .dropbtn { color: #79a0d2; }
/* REPOSITORY */
div.repo {
margin-top: 3px;
@ -265,14 +173,6 @@ div.repo {
overflow: hidden;
}
#debug-output {
text-align: right;
padding-right: 0.5em;
color: #ccc;
font-style: italic;
font-size: small;
}
/* REPOSITORY TABLE*/
div.repo_container {
position: relative;
@ -703,7 +603,9 @@ div.tutorial h2 {
}
/* NEW MENU */
/* Special credits to example at https://codepen.io/philhoyt/pen/ujHzd */
/* container div, aligned left,
but with .float-right modifier alignes right */
.nav-container ul
{
list-style: none;
@ -711,24 +613,20 @@ div.tutorial h2 {
float: left;
margin: 0;
padding: 0;
/*text-align: left;*/
}
.nav-container.float-right ul {
float: right;
/*text-align: right;*/
}
.nav-container.float-right ul { float: right; }
.nav-container ul a
{
display: block;
color: #444;
text-decoration: none;
font-size: 11pt;
line-height: 30px;
padding: 0 12px;
}
/* submenues align to left or right border of the active item
depending on .float-right modifier */
.nav-container ul li
{
position: relative;
@ -736,22 +634,15 @@ div.tutorial h2 {
margin: 0;
padding: 0;
}
.nav-container.float-right ul ul { left: auto; right: 0; }
.nav-container ul li.current-menu-item
{
font-weight: 700;
}
.nav-container ul li.current-menu-item { font-weight: 700; }
.nav-container ul li:hover > ul { display: block; }
.nav-container ul ul li:hover { background-color: #f6f6f6; }
.nav-container ul ul li:hover
{
background: #f6f6f6;
/*color: #8cadd9;*/
}
.nav-container ul li:hover > a
{
/*color: #8cadd9;*/
color: #6692cc;
/* special selection style for 1st level items (see also .corner below) */
.nav-container > ul > li:hover > a {
background-color: rgba(255, 255, 255, 0.5);
}
.nav-container ul ul
@ -766,11 +657,6 @@ div.tutorial h2 {
box-shadow: 1px 1px 3px 0px #bbb;
}
.nav-container.float-right ul ul {
left: auto;
right: 0;
}
.nav-container ul ul li
{
float: none;
@ -789,11 +675,9 @@ div.tutorial h2 {
left: 100%;
}
.nav-container ul li:hover > ul
{
display: block;
}
/* Minizone to extent hover area,
aligned to the left or to the right of the selected item
depending on .float-right modifier */
.nav-container > ul > li > div.minizone {
display: none;
z-index: 1;
@ -810,6 +694,22 @@ div.tutorial h2 {
right: 100%;
}
.nav-container li a .octicon {
/* icons - text-align strictly left - otherwise look ugly
+ bite a bit of left padding for nicer look
+ forbids item text wrapping (maybe can be done differently) */
.nav-container ul ul li a .octicon {
padding-right: 12px;
margin-left: -3px;
}
.nav-container ul.with-icons li {
text-align: left;
white-space: nowrap;
}
/* Special .corner modifier - hangs menu at the top right corner
and cancels 1st level background coloring */
.nav-container.corner {
position: absolute;
right: 0px;
}
.nav-container.corner > ul > li:hover > a { background-color: inherit; }

33
src/zabapgit_html.prog.abap
View File

@ -398,7 +398,7 @@ CLASS lcl_html_toolbar DEFINITION FINAL.
iv_label TYPE string
iv_right TYPE abap_bool OPTIONAL
iv_sort TYPE abap_bool OPTIONAL
iv_as_angle TYPE abap_bool OPTIONAL
iv_corner TYPE abap_bool OPTIONAL
RETURNING
VALUE(ro_html) TYPE REF TO lcl_html.
@ -479,15 +479,13 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
CREATE OBJECT ro_html.
* IF iv_as_angle IS NOT INITIAL.
* lv_class = 'dropdown dropdown_angle' ##NO_TEXT.
* ELSE.
* ENDIF.
lv_class = 'nav-container' ##NO_TEXT.
IF iv_right = abap_true.
lv_class = lv_class && ' float-right'.
ENDIF.
IF iv_corner = abap_true.
lv_class = lv_class && ' corner'.
ENDIF.
ro_html->add( |<div class="{ lv_class }">| ).
ro_html->add( '<ul><li>' ).
@ -518,25 +516,16 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
" Check has icons
LOOP AT mt_items ASSIGNING <item> WHERE ico IS NOT INITIAL.
lv_has_icons = abap_true.
lv_class = ' class="with-icons"'.
EXIT.
ENDLOOP.
* IF lv_has_icons = abap_true.
* ro_html->add( '<table>' ).
* ENDIF.
ro_html->add( '<ul>' ).
ro_html->add( |<ul{ lv_class }>| ).
" Render items
LOOP AT mt_items ASSIGNING <item>.
CLEAR: lv_class, lv_icon.
* IF lv_has_icons = abap_true.
* ro_html->add( '<tr>' ).
* ro_html->add( |<td class="icon">{ lcl_html=>icon( <item>-ico ) }</td>| ).
* ro_html->add( '<td class="text">' ).
* ENDIF.
IF lv_has_icons = abap_true.
lv_icon = lcl_html=>icon( <item>-ico ).
ENDIF.
@ -560,20 +549,10 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
ENDIF.
ro_html->add( '</li>' ).
* IF lv_has_icons = abap_true.
* ro_html->add( '</td>' ).
* ro_html->add( '</tr>' ).
* ENDIF.
ENDLOOP.
ro_html->add( '</ul>' ).
* IF lv_has_icons = abap_true.
* ro_html->add( '</table>' ).
* ENDIF.
ENDMETHOD. "render_items

4
src/zabapgit_page.prog.abap
View File

@ -94,12 +94,12 @@ CLASS lcl_gui_page IMPLEMENTATION.
iv_act = gc_action-abapgit_home )
}</td>| ). "#EC NOTEXT
ro_html->add( |<td class="headpad"><span class="page_title"> &#x25BA; {
ro_html->add( |<td><span class="page_title"> &#x25BA; {
ms_control-page_title
}</span></td>| ). "#EC NOTEXT
IF ms_control-page_menu IS BOUND.
ro_html->add( '<td class="headpad right">' ). "#EC NOTEXT
ro_html->add( '<td class="right">' ). "#EC NOTEXT
ro_html->add( ms_control-page_menu->render( iv_right = abap_true ) ).
ro_html->add( '</td>' ). "#EC NOTEXT
ENDIF.

63
src/zabapgit_page_db.prog.abap
View File

@ -8,6 +8,10 @@ CLASS lcl_gui_page_db_display DEFINITION FINAL INHERITING FROM lcl_gui_page.
METHODS: constructor
IMPORTING is_key TYPE lcl_persistence_db=>ty_content.
CLASS-METHODS: render_record_banner
IMPORTING is_key TYPE lcl_persistence_db=>ty_content
RETURNING VALUE(rv_html) TYPE string.
PROTECTED SECTION.
METHODS render_content REDEFINITION.
@ -24,10 +28,19 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
ms_control-page_title = 'CONFIG DISPLAY'.
ENDMETHOD.
METHOD render_record_banner.
rv_html = |<table class="tag"><tr><td class="label">Type:</td>|
&& | <td>{ is_key-type }</td></tr></table>|
&& gc_newline
&& |<table class="tag"><tr><td class="label">Key:</td>|
&& | <td>{ is_key-value }</td></tr></table>|.
ENDMETHOD. "render_record_banner
METHOD render_content.
DATA:
lo_highlighter TYPE REF TO lcl_syntax_highlighter,
lo_toolbar TYPE REF TO lcl_html_toolbar,
lv_data TYPE lcl_persistence_db=>ty_content-data_str,
ls_action TYPE lcl_persistence_db=>ty_content,
lv_action TYPE string.
@ -48,17 +61,15 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
lv_data = lo_highlighter->process_line( lcl_xml_pretty=>print( lv_data ) ).
CREATE OBJECT ro_html.
CREATE OBJECT lo_toolbar.
lo_toolbar->add( iv_act = |{ gc_action-db_edit }?{ lv_action }|
iv_txt = 'Edit' ) ##NO_TEXT.
ro_html->add( '<div class="db_entry">' ).
ro_html->add( '<table class="toolbar"><tr><td>' ).
ro_html->add( |<table class="tag"><tr><td class="label">Type:</td>| &&
| <td>{ ms_key-type }</td></tr></table>| ).
ro_html->add( |<table class="tag"><tr><td class="label">Key:</td>| &&
| <td>{ ms_key-value }</td></tr></table>| ).
ro_html->add( '</td><td class="right">' ).
ro_html->add_a( iv_txt = 'Edit' iv_act = |{ gc_action-db_edit }?{ lv_action }| ).
ro_html->add( render_record_banner( ms_key ) ).
ro_html->add( '</td><td>' ).
ro_html->add( lo_toolbar->render( iv_right = abap_true ) ).
ro_html->add( '</td></tr></table>' ).
ro_html->add( |<pre class="syntax-hl">{ lv_data }</pre>| ).
@ -111,32 +122,26 @@ CLASS lcl_gui_page_db_edit IMPLEMENTATION.
CREATE OBJECT ro_html.
CREATE OBJECT lo_toolbar.
ro_html->add( '<div class="db_entry">' ).
" Banners
ro_html->add( |<table class="tag"><tr><td class="label">Type:</td>| &&
| <td>{ ms_key-type }</td></tr></table>| ).
ro_html->add( |<table class="tag"><tr><td class="label">Key:</td>| &&
| <td>{ ms_key-value }</td></tr></table>| ).
" Form
ro_html->add( |<form id="db_form" method="post" action="sapevent:{ gc_action-db_update }">| ).
ro_html->add( |<input type="hidden" name="type" value="{ ms_key-type }">| ).
ro_html->add( |<input type="hidden" name="value" value="{ ms_key-value }">| ).
ro_html->add( |<textarea rows="20" cols="100" name="xmldata">{ lv_data
}</textarea>| ).
ro_html->add( '</form>' ).
" Menu
lo_toolbar->add( iv_act = 'submitFormById(''db_form'');'
iv_txt = 'Save'
iv_typ = gc_action_type-onclick
iv_opt = gc_html_opt-strong ) ##NO_TEXT.
ro_html->add( '<div class="paddings">' ).
ro_html->add( lo_toolbar->render( ) ).
ro_html->add( '</div>' ).
ro_html->add( '<div class="db_entry">' ).
" Banners & Toolbar
ro_html->add( '<table class="toolbar"><tr><td>' ).
ro_html->add( lcl_gui_page_db_display=>render_record_banner( ms_key ) ).
ro_html->add( '</td><td>' ).
ro_html->add( lo_toolbar->render( iv_right = abap_true ) ).
ro_html->add( '</td></tr></table>' ).
" Form
ro_html->add( |<form id="db_form" method="post" action="sapevent:{ gc_action-db_update }">| ).
ro_html->add( |<input type="hidden" name="type" value="{ ms_key-type }">| ).
ro_html->add( |<input type="hidden" name="value" value="{ ms_key-value }">| ).
ro_html->add( |<textarea rows="20" cols="100" name="xmldata">{ lv_data }</textarea>| ).
ro_html->add( '</form>' ).
ro_html->add( '</div>' ). "db_entry

14
src/zabapgit_page_main.prog.abap
View File

@ -209,7 +209,7 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
METHOD render_toc.
DATA: lo_pback TYPE REF TO lcl_persistence_background,
lv_cur TYPE abap_bool,
lv_current TYPE abap_bool,
lv_key TYPE lcl_persistence_repo=>ty_repo-key,
lv_icon TYPE string,
lo_repo LIKE LINE OF it_repo_list,
@ -227,10 +227,10 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
lt_favorites = lcl_app=>user( )->get_favorites( ).
LOOP AT it_repo_list INTO lo_repo.
lv_key = lo_repo->get_key( ).
lv_cur = abap_false.
lv_key = lo_repo->get_key( ).
lv_current = abap_false.
IF lv_key = mv_show.
lv_cur = abap_true.
lv_current = abap_true.
ENDIF.
lv_repo_title = lo_repo->get_name( ).
@ -245,7 +245,7 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
DELETE lt_favorites INDEX sy-tabix. " for later cleanup
lo_favbar->add( iv_txt = lv_repo_title
iv_act = |{ c_actions-show }?{ lv_key }|
iv_cur = lv_cur ).
iv_cur = lv_current ).
ENDIF.
IF lo_repo->is_offline( ) = abap_true.
@ -257,7 +257,7 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
lo_allbar->add( iv_txt = lv_repo_title
iv_act = |{ c_actions-show }?{ lv_key }|
iv_ico = lv_icon
iv_cur = lv_cur ).
iv_cur = lv_current ).
ENDLOOP.
" Cleanup orphan favorites (for removed repos)
@ -289,7 +289,7 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
ro_html->add( '<td>' ).
ro_html->add( lo_allbar->render_as_droplist(
iv_label = lcl_html=>icon( iv_name = 'three-bars/blue' iv_class = 'pad4px' )
iv_label = lcl_html=>icon( iv_name = 'three-bars/blue' )
iv_right = abap_true
iv_sort = abap_true ) ).
ro_html->add( '</td>' ).

5
src/zabapgit_view_repo.prog.abap
View File

@ -240,7 +240,10 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
lo_tab_menu->add( iv_txt = 'With folders' iv_act = c_actions-toggle_folders ).
ENDIF.
ro_html = lo_tab_menu->render_as_droplist( iv_label = 'SET' iv_as_angle = abap_true ).
ro_html = lo_tab_menu->render_as_droplist(
iv_label = lcl_html=>icon( iv_name = 'settings/grey' )
iv_right = abap_true
iv_corner = abap_true ).
ENDMETHOD. "render_grid_menu