db_display highlighting and CSS finetuning

Xml db display
This commit is contained in:
sbcgua 2017-01-26 10:56:01 +02:00 committed by GitHub
commit dfadb53c97
3 changed files with 40 additions and 19 deletions

View File

@ -537,16 +537,17 @@ table.diff_tab td.code {
overflow: visible;
}
table.diff_tab .code span.keyword { color: #0a69ce; }
table.diff_tab .code span.text { color: #48ce4f; }
table.diff_tab .code span.comment { color: #808080; font-style: italic; }
table.diff_tab .code span.xml_tag { color: #457ce3; }
table.diff_tab .code span.attr { color: #b777fb; }
table.diff_tab .code span.attr_val { color: #7a02f9; }
table.diff_tab tbody tr:first-child td { padding-top: 0.5em; }
table.diff_tab tbody tr:last-child td { padding-bottom: 0.5em; }
/* STYLES for Syntax Highlighting */
.syntax-hl span.keyword { color: #0a69ce; }
.syntax-hl span.text { color: #48ce4f; }
.syntax-hl span.comment { color: #808080; font-style: italic; }
.syntax-hl span.xml_tag { color: #457ce3; }
.syntax-hl span.attr { color: #b777fb; }
.syntax-hl span.attr_val { color: #7a02f9; }
/* DEBUG INFO STYLES */
div.debug_container {
padding: 0.5em;
@ -554,15 +555,17 @@ div.debug_container {
color: #444;
font-family: Consolas, Courier, monospace;
}
div.debug_container p {
margin: 0px;
}
/* DB ENTRIES */
div.db_list {
background-color: #f2f2f2;
background-color: #fff;
padding: 0.5em;
}
table.db_tab pre {
display: inline-block;
overflow: hidden;
@ -571,10 +574,11 @@ table.db_tab pre {
margin: 0px;
width: 30em;
}
table.db_tab tr.firstrow td { padding-top: 0.5em; }
table.db_tab th {
color: #888888;
text-align: left;
color: #888;
padding: 0.5em;
border-bottom: 1px #ddd solid;
}
@ -588,24 +592,34 @@ table.db_tab td.data {
font-style: italic;
}
table.db_tab tbody tr:hover, tr:active {
background-color: #f4f4f4;
}
/* DB ENTRY DISPLAY */
div.db_entry {
background-color: #f2f2f2;
padding: 0.5em;
}
div.db_entry pre {
display: block;
font-size: 10pt;
overflow: hidden;
word-wrap:break-word;
white-space: pre-wrap;
background-color: #eaeaea;
background-color: #fcfcfc;
border: 1px #eaeaea solid;
border-radius: 3px;
padding: 0.5em;
margin: 0.5em 0em;
width: 50em;
width: 60em;
}
div.db_entry table.toolbar {
width: 50em;
}
table.tag {
display: inline-block;
border: 1px #b3c1cc solid;

View File

@ -26,9 +26,11 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
METHOD render_content.
DATA: lv_data TYPE lcl_persistence_db=>ty_content-data_str,
ls_action TYPE lcl_persistence_db=>ty_content,
lv_action TYPE string.
DATA:
lo_highlighter TYPE REF TO lcl_syntax_highlighter,
lv_data TYPE lcl_persistence_db=>ty_content-data_str,
ls_action TYPE lcl_persistence_db=>ty_content,
lv_action TYPE string.
TRY.
lv_data = lcl_app=>db( )->read(
@ -37,13 +39,14 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
CATCH lcx_not_found ##NO_HANDLER.
ENDTRY.
" Create syntax highlighter
lo_highlighter = lcl_syntax_highlighter=>create( '*.xml' ).
ls_action-type = ms_key-type.
ls_action-value = ms_key-value.
lv_action = lcl_html_action_utils=>dbkey_encode( ls_action ).
lv_data = lcl_xml_pretty=>print( lv_data ).
lv_data = escape( val = lv_data
format = cl_abap_format=>e_html_attr ).
lv_data = lo_highlighter->process_line( lv_data ).
CREATE OBJECT ro_html.
@ -59,7 +62,7 @@ CLASS lcl_gui_page_db_display IMPLEMENTATION.
ro_html->add_a( iv_txt = 'Edit' iv_act = |{ gc_action-db_edit }?{ lv_action }| ).
ro_html->add( '</td></tr></table>' ).
ro_html->add( |<pre>{ lv_data }</pre>| ).
ro_html->add( |<pre class="syntax-hl">{ lv_data }</pre>| ).
ro_html->add( '</div>' ).
ENDMETHOD. "render_content
@ -185,12 +188,15 @@ CLASS lcl_gui_page_db IMPLEMENTATION.
ro_html->add( '<table class="db_tab">' ).
" Header
ro_html->add( '<thead>' ).
ro_html->add( '<tr>' ).
ro_html->add( '<th>Type</th>' ).
ro_html->add( '<th>Key</th>' ).
ro_html->add( '<th>Data</th>' ).
ro_html->add( '<th></th>' ).
ro_html->add( '</tr>' ).
ro_html->add( '</thead>' ).
ro_html->add( '<tbody>' ).
" Lines
LOOP AT lt_data ASSIGNING <ls_data>.
@ -216,6 +222,7 @@ CLASS lcl_gui_page_db IMPLEMENTATION.
ro_html->add( '</tr>' ).
ENDLOOP.
ro_html->add( '</tbody>' ).
ro_html->add( '</table>' ).
ro_html->add( '</div>' ).

View File

@ -239,7 +239,7 @@ CLASS lcl_gui_page_diff IMPLEMENTATION.
" Content
ro_html->add( '<div class="diff_content">' ). "#EC NOTEXT
ro_html->add( '<table class="diff_tab">' ). "#EC NOTEXT
ro_html->add( '<table class="diff_tab syntax-hl">' ). "#EC NOTEXT
ro_html->add( render_table_head( ) ).
ro_html->add( render_lines( is_diff ) ).
ro_html->add( '</table>' ). "#EC NOTEXT