From e4b3f7343ae27faf049fcc7a1bb0927253ab7c48 Mon Sep 17 00:00:00 2001
From: sbcgua <atsybulsky@sbcg.com.ua>
Date: Wed, 23 Nov 2016 14:38:09 +0200
Subject: [PATCH] dropdown hover forgiving zones #453

---
 src/zabapgit_html.prog.abap      | 21 ++++++++++++--
 src/zabapgit_page.prog.abap      | 47 ++++++++++++++++++++++----------
 src/zabapgit_page_main.prog.abap |  8 ++++--
 3 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/zabapgit_html.prog.abap b/src/zabapgit_html.prog.abap
index d4b0d9b13..784e91e9f 100644
--- a/src/zabapgit_html.prog.abap
+++ b/src/zabapgit_html.prog.abap
@@ -217,6 +217,7 @@ CLASS lcl_html_toolbar DEFINITION FINAL.
           iv_sort                   TYPE abap_bool OPTIONAL
           iv_as_angle               TYPE abap_bool OPTIONAL
           iv_with_icons             TYPE abap_bool OPTIONAL
+          iv_add_minizone           TYPE abap_bool OPTIONAL
         RETURNING
           VALUE(ro_html)            TYPE REF TO lcl_html_helper.
 
@@ -296,13 +297,23 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
         ENDIF.
         ro_html->add( |<a class="{ lv_class }">{ iv_as_droplist_with_label }</a>| ).
       ENDIF.
+
+      IF iv_add_minizone = abap_true.
+        ro_html->add( '<div class="minizone"></div>' ).
+      ENDIF.
+
       ro_html->add( '<div class="dropdown_content">' ).
+      ro_html->add( '<div class="box">' ).
     ENDIF.
 
     IF iv_sort = abap_true.
       SORT mt_items BY txt ASCENDING AS TEXT.
     ENDIF.
 
+    IF iv_with_icons = abap_true.
+      ro_html->add( '<table>' ).
+    ENDIF.
+
     LOOP AT mt_items ASSIGNING <ls_item>.
       lv_last = boolc( sy-tabix = lines( mt_items ) ).
 
@@ -315,7 +326,7 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
         ENDIF.
 
         IF iv_with_icons = abap_true.
-          ro_html->add( '<table><tr>' ).
+          ro_html->add( '<tr>' ).
           ro_html->add( |<td class="icon">{ <ls_item>-ico }</td>| ).
           ro_html->add( '<td width="100%">' ).
         ENDIF.
@@ -328,7 +339,7 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
 
         IF iv_with_icons = abap_true.
           ro_html->add( '</td>' ).
-          ro_html->add( '</tr></table>' ).
+          ro_html->add( '</tr>' ).
         ENDIF.
 
       ELSE.
@@ -339,8 +350,12 @@ CLASS lcl_html_toolbar IMPLEMENTATION.
 
     ENDLOOP.
 
+    IF iv_with_icons = abap_true.
+      ro_html->add( '</table>' ).
+    ENDIF.
+
     IF lv_is_drop = abap_true. " Dropdown
-      ro_html->add( '</div>' ).
+      ro_html->add( '</div></div>' ).
     ENDIF.
 
     ro_html->add( '</div>' ).
diff --git a/src/zabapgit_page.prog.abap b/src/zabapgit_page.prog.abap
index 0765dd3cf..0bbfad094 100644
--- a/src/zabapgit_page.prog.abap
+++ b/src/zabapgit_page.prog.abap
@@ -380,6 +380,7 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
     _add '.right            { text-align:right; }'.
     _add '.paddings         { padding: 0.5em 0.5em; }'.
     _add '.pad-sides        { padding: 0 0.3em; }'.
+    _add '.pad4px           { padding: 4px; }'.
 
     " Structure div styles: header, footer, toc
     _add '/* STRUCTURE DIVS, HEADER & FOOTER */'.
@@ -443,7 +444,7 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
     _add '  font-size: 12pt;'.
     _add '}'.
 
-    " Drop down styles
+    " Dropdown styles :mechanics
     _add '/*DROP DOWN*/'.
     _add '.dropdown {'.
     _add '    position: relative;'.
@@ -466,31 +467,47 @@ CLASS lcl_gui_page_super IMPLEMENTATION.
     _add '    display: none;'.
     _add '    z-index: 1;'.
     _add '    position: absolute;'.
-    _add '    right: 0;'.
-*    _add '    top: 1.1em; /*IE7 woraround*/'.
-    _add '    background-color: #f9f9f9;'.
+    _add '    right: -12px;'.
+    _add '    top: 1em;'.
+    _add '    padding: 6px 10px 10px 10px;'.
     _add '    white-space: nowrap;'.
-*    _add '    min-width: 10em;'.
-    _add '    border-bottom: 1px solid lightgrey;'.
     _add '}'.
+    _add '.dropdown div.minizone {'.
+    _add '    display: none;'.
+    _add '    z-index: 1;'.
+    _add '    position: absolute;'.
+    _add '    padding: 0px;'.
+    _add '    width: 16px;'.
+    _add '    height: 16px;'.
+    _add '    bottom: 0px;'.
+    _add '    left: -16px;'.
+    _add '}'.
+
+    _add '.dropdown:hover .dropdown_content { display: block; }'.
+    _add '.dropdown:hover .minizone { display: block; }'.
+
+    " Dropdown styles :styling
     _add '.dropdown_content a {'.
     _add '    padding: 0.2em;'.
+    _add '    background-color: #f9f9f9;'.
     _add '    text-decoration: none;'.
     _add '    display: block;'.
+    _add '    border: none !important;'.
     _add '}'.
 
-    _add '.dropdown_content td {'. " TODO refactor
-    _add '    text-align: left;'.
-    _add '}'.
-    _add '.dropdown_content td a {'. " TODO refactor
-    _add '    padding: 0em 0.2em;'.
-    _add '}'.
-    _add '.dropdown_content td.icon {'. " TODO refactor
-    _add '    padding: 0 3px 0 6px;'.
+
+    _add '.dropdown_content div.box {'.
+    _add '    border-bottom: 1px solid #C0C0C0;'.
+    _add '    border-right: 1px solid #C0C0C0;'.
+    _add '    background-color: #f9f9f9;'.
+    _add '    padding: 2px;'.
     _add '}'.
 
+    _add '.dropdown_content td      { text-align: left; padding: 2px; }'. " TODO refactor
+    _add '.dropdown_content td a    { padding: 0em 0.2em; }'. " TODO refactor
+    _add '.dropdown_content td.icon { padding: 0 3px 0 6px; }'. " TODO refactor
+
     _add '.dropdown_content a:hover { background-color: #f1f1f1 }'.
-    _add '.dropdown:hover .dropdown_content { display: block; }'.
     _add '.dropdown:hover .dropbtn  { color: #79a0d2; }'.
 
     " REPOSITORY
diff --git a/src/zabapgit_page_main.prog.abap b/src/zabapgit_page_main.prog.abap
index 83623d221..61237c1f6 100644
--- a/src/zabapgit_page_main.prog.abap
+++ b/src/zabapgit_page_main.prog.abap
@@ -267,9 +267,11 @@ CLASS lcl_gui_page_main IMPLEMENTATION.
     ro_html->add( '</td>' ).
 
     ro_html->add( '<td class="right">' ).
-    ro_html->add( lo_allbar->render( iv_as_droplist_with_label = '<img src="img/burger">'
-                                     iv_sort                   = abap_true
-                                     iv_with_icons             = abap_true ) ).
+    ro_html->add( lo_allbar->render(
+      iv_as_droplist_with_label = '<img class="pad4px" src="img/burger">'
+      iv_sort                   = abap_true
+      iv_with_icons             = abap_true
+      iv_add_minizone           = abap_true ) ).
     ro_html->add( '</td>' ).
     ro_html->add( '</tr></table>' ).