toolbar refactoring part1

This commit is contained in:
Alexander Tsybulsky 2017-03-04 21:54:37 +02:00 committed by sbcgua
parent 63a71f15fb
commit f3c496cd2f
7 changed files with 275 additions and 123 deletions

View File

@ -55,30 +55,21 @@ input:focus, textarea:focus {
.w40 { width: 40%; }
/* STRUCTURE DIVS, HEADER & FOOTER */
td.headpad { padding-top: 11px; }
td.logo { width: 164px; }
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#toc {
padding: 0.5em 1em;
background-color: #f2f2f2;
}
div#toc div.toc_grid {
margin: -0.3em 0em;
}
div#toc div.toc_grid a {
color: #ccc;
}
div#toc:hover div.toc_grid a {
color: #4078c0;
}
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;
@ -184,15 +175,15 @@ div.menu_vertical a {
position: absolute;
padding: 0px;
width: 16px;
height: 16px;
height: 100%;
bottom: 0px;
left: -16px;
right: 100%;
}
.dropdown:hover .minizone { display: block; }
.dropdown_angle .dropdown_content {
top: -1px;
}
.dropdown:hover .dropdown_content { display: block; }
.dropdown:hover .minizone { display: block; }
.dropdown_content a {
padding: 0.2em;
background-color: #f9f9f9;
@ -710,3 +701,115 @@ div.tutorial h2 {
font-size: 14pt;
color: #404040;
}
/* NEW MENU */
.nav-container ul
{
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
/*text-align: left;*/
}
.nav-container.float-right ul {
float: right;
/*text-align: right;*/
}
.nav-container ul a
{
display: block;
color: #444;
text-decoration: none;
font-size: 11pt;
line-height: 30px;
padding: 0 12px;
}
.nav-container ul li
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
.nav-container ul li.current-menu-item
{
font-weight: 700;
}
.nav-container ul ul li:hover
{
background: #f6f6f6;
/*color: #8cadd9;*/
}
.nav-container ul li:hover > a
{
/*color: #8cadd9;*/
color: #6692cc;
}
.nav-container ul ul
{
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background: #fff;
padding: 0;
box-shadow: 1px 1px 3px 0px #bbb;
}
.nav-container.float-right ul ul {
left: auto;
right: 0;
}
.nav-container ul ul li
{
float: none;
min-width: 160px;
}
.nav-container ul ul a
{
line-height: 120%;
padding: 8px 15px;
}
.nav-container ul ul ul
{
top: 0;
left: 100%;
}
.nav-container ul li:hover > ul
{
display: block;
}
.nav-container > ul > li > div.minizone {
display: none;
z-index: 1;
position: absolute;
padding: 0px;
width: 16px;
height: 100%;
bottom: 0px;
left: 100%;
}
.nav-container > ul > li:hover div.minizone { display: block; }
.nav-container.float-right > ul > li > div.minizone {
left: auto;
right: 100%;
}
.nav-container li a .octicon {
padding-right: 12px;
}

View File

@ -172,9 +172,11 @@ CONSTANTS: BEGIN OF gc_html_opt,
END OF gc_html_opt.
CONSTANTS: BEGIN OF gc_action_type,
sapevent TYPE c VALUE 'E',
url TYPE c VALUE 'U',
onclick TYPE c VALUE 'C',
sapevent TYPE c VALUE 'E',
url TYPE c VALUE 'U',
onclick TYPE c VALUE 'C',
separator TYPE c VALUE 'S',
dummy TYPE c VALUE '_',
END OF gc_action_type.
CONSTANTS: gc_newline TYPE abap_char1 VALUE cl_abap_char_utilities=>newline.

View File

@ -288,6 +288,7 @@ CLASS lcl_html IMPLEMENTATION.
DATA: lv_class TYPE string,
lv_href TYPE string,
lv_click TYPE string,
lv_id TYPE string,
lv_style TYPE string.
@ -307,14 +308,18 @@ CLASS lcl_html IMPLEMENTATION.
lv_class = | class="{ lv_class }"|.
ENDIF.
IF iv_act IS NOT INITIAL.
lv_href = ' href="#"'. " Default, dummy
IF iv_act IS NOT INITIAL OR iv_typ = gc_action_type-dummy.
CASE iv_typ.
WHEN gc_action_type-url.
lv_href = | href="{ iv_act }"|.
lv_href = | href="{ iv_act }"|.
WHEN gc_action_type-sapevent.
lv_href = | href="sapevent:{ iv_act }"|.
lv_href = | href="sapevent:{ iv_act }"|.
WHEN gc_action_type-onclick.
lv_href = | onclick="{ iv_act }"|.
lv_href = ' href="#"'.
lv_click = | onclick="{ iv_act }"|.
WHEN gc_action_type-dummy.
lv_href = ' href="#"'.
ENDCASE.
ENDIF.
@ -326,7 +331,7 @@ CLASS lcl_html IMPLEMENTATION.
lv_style = | style="{ iv_style }"|.
ENDIF.
rv_str = |<a{ lv_id }{ lv_class }{ lv_href }{ lv_style }>{ iv_txt }</a>|.
rv_str = |<a{ lv_id }{ lv_class }{ lv_href }{ lv_click }{ lv_style }>{ iv_txt }</a>|.
ENDMETHOD. "a
@ -375,37 +380,51 @@ CLASS lcl_html_toolbar DEFINITION FINAL.
IMPORTING
iv_txt TYPE string
io_sub TYPE REF TO lcl_html_toolbar OPTIONAL
iv_typ TYPE c DEFAULT gc_action_type-sapevent
iv_act TYPE string OPTIONAL
iv_ico TYPE string OPTIONAL
iv_opt TYPE c OPTIONAL
iv_typ TYPE c DEFAULT gc_action_type-sapevent,
iv_cur TYPE abap_bool OPTIONAL
iv_opt TYPE c OPTIONAL,
count
RETURNING VALUE(rv_count) TYPE i,
render
IMPORTING
iv_as_droplist_with_label TYPE string OPTIONAL
iv_no_separator TYPE abap_bool OPTIONAL
iv_vertical TYPE abap_bool OPTIONAL
iv_right TYPE abap_bool OPTIONAL
iv_sort TYPE abap_bool OPTIONAL
iv_as_angle TYPE abap_bool OPTIONAL
iv_add_minizone TYPE abap_bool OPTIONAL
RETURNING
VALUE(ro_html) TYPE REF TO lcl_html.
VALUE(ro_html) TYPE REF TO lcl_html,
render_as_droplist
IMPORTING
iv_label TYPE string
iv_right TYPE abap_bool OPTIONAL
iv_sort TYPE abap_bool OPTIONAL
iv_as_angle TYPE abap_bool OPTIONAL
RETURNING
VALUE(ro_html) TYPE REF TO lcl_html.
PRIVATE SECTION.
TYPES: BEGIN OF ty_item,
txt TYPE string,
act TYPE string,
ico TYPE string,
sub TYPE REF TO lcl_html_toolbar,
opt TYPE char1,
typ TYPE char1,
END OF ty_item.
TYPES:
BEGIN OF ty_item,
txt TYPE string,
act TYPE string,
ico TYPE string,
sub TYPE REF TO lcl_html_toolbar,
opt TYPE char1,
typ TYPE char1,
cur TYPE abap_bool,
END OF ty_item.
TYPES tt_items TYPE STANDARD TABLE OF ty_item.
DATA mt_items TYPE tt_items.
METHODS
render_items
IMPORTING
iv_sort TYPE abap_bool OPTIONAL
RETURNING
VALUE(ro_html) TYPE REF TO lcl_html.
ENDCLASS. "lcl_html_toolbar DEFINITION
*----------------------------------------------------------------------*
@ -420,8 +439,11 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
METHOD add.
DATA ls_item TYPE ty_item.
ASSERT iv_act IS INITIAL AND io_sub IS NOT INITIAL
OR iv_act IS NOT INITIAL AND io_sub IS INITIAL. " Only one supplied
ASSERT iv_typ = gc_action_type-separator " sep doesn't have action
OR iv_typ = gc_action_type-onclick " click may have no action (assigned in JS)
OR iv_typ = gc_action_type-dummy " dummy may have no action
OR iv_act IS INITIAL AND io_sub IS NOT INITIAL
OR iv_act IS NOT INITIAL AND io_sub IS INITIAL. " Only one supplied
ls_item-txt = iv_txt.
ls_item-act = iv_act.
@ -429,104 +451,130 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
ls_item-sub = io_sub.
ls_item-opt = iv_opt.
ls_item-typ = iv_typ.
ls_item-cur = iv_cur.
APPEND ls_item TO mt_items.
ENDMETHOD. "add
METHOD render. "TODO refactor
DATA: lv_class TYPE string,
lv_has_icons TYPE abap_bool,
lv_is_drop TYPE abap_bool.
FIELD-SYMBOLS <ls_item> LIKE LINE OF mt_items.
METHOD render.
DATA: lv_class TYPE string.
CREATE OBJECT ro_html.
lv_is_drop = boolc( iv_as_droplist_with_label IS NOT INITIAL OR iv_as_angle IS NOT INITIAL ).
IF lv_is_drop = abap_false. " Normal menu
IF iv_vertical = abap_true.
lv_class = 'menu_vertical' ##NO_TEXT.
ELSE.
lv_class = 'menu' ##NO_TEXT.
ENDIF.
ELSEIF iv_as_angle IS NOT INITIAL.
lv_class = 'dropdown dropdown_angle' ##NO_TEXT.
ELSE.
lv_class = 'dropdown' ##NO_TEXT.
lv_class = 'nav-container' ##NO_TEXT.
IF iv_right = abap_true.
lv_class = lv_class && ' float-right'.
ENDIF.
ro_html->add( |<div class="{ lv_class }">| ).
ro_html->add( render_items( iv_sort = iv_sort ) ).
ro_html->add( '</div>' ).
IF lv_is_drop = abap_true. " Dropdown
IF iv_as_angle = abap_true.
ro_html->add( '<div class="dropbtn_angle"></div>' ).
ELSE.
ro_html->add_a( iv_txt = iv_as_droplist_with_label
iv_class = 'dropbtn'
iv_act = '' ).
ENDIF.
ENDMETHOD. "render
IF iv_add_minizone = abap_true.
ro_html->add( '<div class="minizone"></div>' ).
ENDIF.
METHOD render_as_droplist.
ro_html->add( '<div class="dropdown_content">' ).
ro_html->add( '<div class="box">' ).
DATA: lv_class TYPE string.
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.
ro_html->add( |<div class="{ lv_class }">| ).
ro_html->add( '<ul><li>' ).
ro_html->add_a( iv_txt = iv_label
iv_typ = gc_action_type-dummy
iv_act = '' ).
ro_html->add( '<div class="minizone"></div>' ).
ro_html->add( render_items( iv_sort = iv_sort ) ).
ro_html->add( '</li></ul>' ).
ro_html->add( '</div>' ).
ENDMETHOD. "render_as_droplist
METHOD render_items.
DATA: lv_class TYPE string,
lv_icon TYPE string,
lv_has_icons TYPE abap_bool.
FIELD-SYMBOLS <item> LIKE LINE OF mt_items.
CREATE OBJECT ro_html.
IF iv_sort = abap_true.
SORT mt_items BY txt ASCENDING AS TEXT.
ENDIF.
" Check has icons
LOOP AT mt_items ASSIGNING <ls_item> WHERE ico IS NOT INITIAL.
LOOP AT mt_items ASSIGNING <item> WHERE ico IS NOT INITIAL.
lv_has_icons = abap_true.
EXIT.
ENDLOOP.
IF lv_has_icons = abap_true.
ro_html->add( '<table>' ).
ENDIF.
* IF lv_has_icons = abap_true.
* ro_html->add( '<table>' ).
* ENDIF.
ro_html->add( '<ul>' ).
" Render items
LOOP AT mt_items ASSIGNING <ls_item>.
LOOP AT mt_items ASSIGNING <item>.
CLEAR: lv_class, lv_icon.
IF <ls_item>-sub IS INITIAL.
* 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.
ro_html->add( '<tr>' ).
ro_html->add( |<td class="icon">{ lcl_html=>icon( <ls_item>-ico ) }</td>| ).
ro_html->add( '<td class="text">' ).
ENDIF.
ro_html->add_a( iv_txt = <ls_item>-txt
iv_act = <ls_item>-act
iv_opt = <ls_item>-opt
iv_typ = <ls_item>-typ ).
IF lv_has_icons = abap_true.
ro_html->add( '</td>' ).
ro_html->add( '</tr>' ).
ENDIF.
ELSE.
ro_html->add( <ls_item>-sub->render( iv_as_droplist_with_label = <ls_item>-txt ) ).
IF lv_has_icons = abap_true.
lv_icon = lcl_html=>icon( <item>-ico ).
ENDIF.
IF <item>-cur = abap_true.
lv_class = ' class="current-menu-item"'.
ENDIF.
ro_html->add( |<li{ lv_class }>| ).
IF <item>-sub IS INITIAL.
ro_html->add_a( iv_txt = lv_icon && <item>-txt
iv_typ = <item>-typ
iv_act = <item>-act
iv_opt = <item>-opt ).
ELSE.
ro_html->add_a( iv_txt = lv_icon && <item>-txt
iv_typ = gc_action_type-dummy
iv_act = ''
iv_opt = <item>-opt ).
ro_html->add( <item>-sub->render_items( iv_sort = iv_sort ) ).
ENDIF.
ro_html->add( '</li>' ).
* IF lv_has_icons = abap_true.
* ro_html->add( '</td>' ).
* ro_html->add( '</tr>' ).
* ENDIF.
ENDLOOP.
IF lv_has_icons = abap_true.
ro_html->add( '</table>' ).
ENDIF.
ro_html->add( '</ul>' ).
IF lv_is_drop = abap_true. " Dropdown
ro_html->add( '</div>' ).
ro_html->add( '</div>' ).
ENDIF.
* IF lv_has_icons = abap_true.
* ro_html->add( '</table>' ).
* ENDIF.
ro_html->add( '</div>' ).
ENDMETHOD. "render_items
ENDMETHOD. "render
ENDCLASS. "lcl_html_toolbar IMPLEMENTATION

View File

@ -100,7 +100,7 @@ CLASS lcl_gui_page IMPLEMENTATION.
IF ms_control-page_menu IS BOUND.
ro_html->add( '<td class="headpad right">' ). "#EC NOTEXT
ro_html->add( ms_control-page_menu->render( ) ).
ro_html->add( ms_control-page_menu->render( iv_right = abap_true ) ).
ro_html->add( '</td>' ). "#EC NOTEXT
ENDIF.

View File

@ -214,7 +214,7 @@ CLASS lcl_gui_page_db IMPLEMENTATION.
ro_html->add( |<td>{ <ls_data>-value }</td>| ).
ro_html->add( |<td class="data">{ explain_content( <ls_data> ) }</td>| ).
ro_html->add( '<td>' ).
ro_html->add( lo_toolbar->render( iv_vertical = abap_false ) ).
ro_html->add( lo_toolbar->render( ) ).
ro_html->add( '</td>' ).
ro_html->add( '</tr>' ).
ENDLOOP.

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_opt TYPE char1,
lv_cur TYPE abap_bool,
lv_key TYPE lcl_persistence_repo=>ty_repo-key,
lv_icon TYPE string,
lo_repo LIKE LINE OF it_repo_list,
@ -228,10 +228,9 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
LOOP AT it_repo_list INTO lo_repo.
lv_key = lo_repo->get_key( ).
lv_cur = abap_false.
IF lv_key = mv_show.
lv_opt = gc_html_opt-strong.
ELSE.
CLEAR lv_opt.
lv_cur = abap_true.
ENDIF.
lv_repo_title = lo_repo->get_name( ).
@ -246,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_opt = lv_opt ).
iv_cur = lv_cur ).
ENDIF.
IF lo_repo->is_offline( ) = abap_true.
@ -258,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_opt = lv_opt ).
iv_cur = lv_cur ).
ENDLOOP.
" Cleanup orphan favorites (for removed repos)
@ -278,7 +277,7 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
lcl_html=>icon( iv_name = 'star/blue' iv_alt = 'Favs' iv_hint = 'Favorites' )
}</td>| ).
ro_html->add( '<td class="pad-sides w100">' ). " Maximize width
ro_html->add( '<td class="pad-sides w100 favorites">' ). " Maximize width
IF lo_favbar->count( ) > 0.
ro_html->add( lo_favbar->render( iv_sort = abap_true ) ).
ELSE.
@ -288,11 +287,11 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
ENDIF.
ro_html->add( '</td>' ).
ro_html->add( '<td class="right">' ).
ro_html->add( lo_allbar->render(
iv_as_droplist_with_label = lcl_html=>icon( iv_name = 'three-bars/blue' iv_class = 'pad4px' )
iv_sort = abap_true
iv_add_minizone = abap_true ) ).
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_right = abap_true
iv_sort = abap_true ) ).
ro_html->add( '</td>' ).
ro_html->add( '</tr></table>' ).

View File

@ -240,7 +240,7 @@ 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( iv_as_angle = abap_true ).
ro_html = lo_tab_menu->render_as_droplist( iv_label = 'SET' iv_as_angle = abap_true ).
ENDMETHOD. "render_grid_menu
@ -356,7 +356,7 @@ CLASS lcl_gui_view_repo_content IMPLEMENTATION.
ENDIF.
ro_html->add( '<td class="right">' ).
ro_html->add( lo_toolbar->render( ) ).
ro_html->add( lo_toolbar->render( iv_right = abap_true ) ).
ro_html->add( '</td>' ).
ro_html->add( '</tr></table>' ).
ro_html->add( '</div>' ).