From e50f554774cd65ea023e46286282c1c70773c46b Mon Sep 17 00:00:00 2001
From: ClemDee <clement.desableau@xwiki.com>
Date: Tue, 25 Jun 2019 13:37:20 +0200
Subject: [PATCH] Add Dropdown-submenu (beta)

---
 .../src/less2/include/contextmenu.less        | 13 +++++++
 www/drive/inner.js                            | 39 +++++++++++++++----
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less
index 2063a239e..30a9f7d98 100644
--- a/customize.dist/src/less2/include/contextmenu.less
+++ b/customize.dist/src/less2/include/contextmenu.less
@@ -19,6 +19,19 @@
                 }
             }
         }
+        .dropdown-submenu {
+            position: relative;
+            & .dropdown-menu {
+                top: -0.6rem;
+                left: 100%;
+                &.left {
+                    left: -10rem;
+                }
+            }
+            &:hover .dropdown-menu {
+                display: block;
+            }
+        }
         .cp-app-drive-context-noAction {
             font-style: italic;
             color: #aaa;
diff --git a/www/drive/inner.js b/www/drive/inner.js
index fb9bd4063..b38aa78a3 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -305,10 +305,10 @@ define([
                 'style': 'display:block;position:static;margin-bottom:5px;'
             }, [
                 h('span.cp-app-drive-context-noAction.dropdown-item.disabled', Messages.fc_noAction || "No action possible"),
-                h('li', h('a.cp-app-drive-context-open.dropdown-item', {
-                    'tabindex': '-1',
-                    'data-icon': faFolderOpen,
-                }, Messages.fc_open)),
+//                h('li', h('a.cp-app-drive-context-open.dropdown-item', {
+//                    'tabindex': '-1',
+//                    'data-icon': faFolderOpen,
+//                }, Messages.fc_open)),
                 h('li', h('a.cp-app-drive-context-openro.dropdown-item', {
                     'tabindex': '-1',
                     'data-icon': faReadOnly,
@@ -323,10 +323,22 @@ define([
                     'data-icon': "collapseAll",
                 }, Messages.fc_collapseAll)),
                 $separator.clone()[0],
-                h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', {
-                    'tabindex': '-1',
-                    'data-icon': faColor,
-                }, Messages.fc_color)),
+//                h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', {
+//                    'tabindex': '-1',
+//                    'data-icon': faColor,
+//                }, Messages.fc_color)),
+                h('li.dropdown-submenu', [
+                    h('a.cp-app-drive-context-color.dropdown-item.dropdown-toggle', {
+                        'tabindex': '-1',
+                        'data-icon': faColor,
+                    }, Messages.fc_color),
+                    h("ul.dropdown-menu", [
+                        h('li', h('a.cp-app-drive-context-open.dropdown-item', {
+                            'tabindex': '-1',
+                            'data-icon': faFolderOpen,
+                        }, Messages.fc_open))
+                    ])
+                ]),
                 h('li', h('a.cp-app-drive-context-download.dropdown-item', {
                     'tabindex': '-1',
                     'data-icon': faDownload,
@@ -423,6 +435,17 @@ define([
             }
             $(el).prepend($icon);
         });
+        $(menu).find(".dropdown-submenu").each(function (i, el) {
+            var $el = $(el);
+            var $sub = $el.find(".dropdown-menu");
+            $el.hover(function () {
+                setTimeout(function () { // wait for dom to update
+                    $sub.toggleClass("left", $el.offset().left + $el.outerWidth() + $sub.outerWidth() > $(window).width());
+                });
+            }, function () {
+                $sub.removeClass("left");
+            });
+        });
         return $(menu);
     };