From 90a331b989388bdfc067c801fb5a34df35946b2b Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Mon, 1 Apr 2019 21:11:20 +0200
Subject: [PATCH] some style fixes and refactoring for tree context menu

---
 .../javascripts/services/context_menu.js      | 30 +++++++-------
 .../javascripts/services/tree_context_menu.js |  5 ++-
 src/public/stylesheets/desktop.css            | 41 ++++++++++---------
 src/public/stylesheets/style.css              |  2 +-
 4 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/public/javascripts/services/context_menu.js b/src/public/javascripts/services/context_menu.js
index 7f9c6c95b..539f89d67 100644
--- a/src/public/javascripts/services/context_menu.js
+++ b/src/public/javascripts/services/context_menu.js
@@ -20,29 +20,31 @@ function initContextMenu(event, contextMenuItems, selectContextMenuItem) {
                     $icon.append("&nbsp;");
                 }
 
-                const $item = $("<li>")
-                    .addClass("dropdown-item");
-
-                const $link = $("<a>")
+                const $link = $("<span>")
                     .append($icon)
                     .append(" &nbsp; ") // some space between icon and text
-                    .prop("data-cmd", item.cmd)
                     .append(item.title);
 
-                $item.append($link);
+                const $item = $("<li>")
+                    .addClass("dropdown-item")
+                    .append($link)
+                    .attr("data-cmd", item.cmd)
+                    .click(function (e) {
+                        const cmd = $(e.target).closest(".dropdown-item").attr("data-cmd");
+
+                        e.originalTarget = event.target;
+
+                        selectContextMenuItem(e, cmd);
+
+                        // it's important to stop the propagation especially for sub-menus, otherwise the event
+                        // might be handled again by top-level menu
+                        return false;
+                    });
 
                 if (item.enabled !== undefined && !item.enabled) {
                     $link.addClass("disabled");
                 }
 
-                $link.click(async function (e) {
-                    const cmd = $(e.target).prop("data-cmd");
-
-                    e.originalTarget = event.target;
-
-                    await selectContextMenuItem(e, cmd);
-                });
-
                 if (item.items) {
                     $item.addClass("dropdown-submenu");
                     $link.addClass("dropdown-toggle");
diff --git a/src/public/javascripts/services/tree_context_menu.js b/src/public/javascripts/services/tree_context_menu.js
index d84af2179..8a3aeecda 100644
--- a/src/public/javascripts/services/tree_context_menu.js
+++ b/src/public/javascripts/services/tree_context_menu.js
@@ -173,7 +173,10 @@ function selectContextMenuItem(event, cmd) {
     else if (cmd.startsWith("insertChildNote")) {
         const type = cmd.split("_")[1];
 
-        treeService.createNote(node, node.data.noteId, 'into', { type: type });
+        treeService.createNote(node, node.data.noteId, 'into', {
+            type: type,
+            isProtected: node.data.isProtected
+        });
     }
     else if (cmd === "editBranchPrefix") {
         branchPrefixDialog.showDialog(node);
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index dfed75129..633b986e2 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -77,6 +77,27 @@ body {
 
 #context-menu-container .dropdown-item {
     padding: 0 7px 0 10px;
+    cursor: pointer;
+}
+
+li.dropdown-submenu:hover > ul.dropdown-menu {
+    display: block;
+}
+
+.dropdown-submenu {
+    position:relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -6px;
+}
+
+/* rotate caret on hover */
+.dropdown-menu > li > a:hover:after {
+    text-decoration: underline;
+    transform: rotate(-90deg);
 }
 
 .fancytree-loading span.fancytree-expander {
@@ -115,26 +136,6 @@ body {
     border-bottom: 1px dotted;
 }
 
-li.dropdown-submenu:hover > ul.dropdown-menu {
-    display: block;
-}
-
-.dropdown-submenu {
-    position:relative;
-}
-
-.dropdown-submenu > .dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-}
-
-/* rotate caret on hover */
-.dropdown-menu > li > a:hover:after {
-    text-decoration: underline;
-    transform: rotate(-90deg);
-}
-
 .refresh-search-button {
     cursor: pointer;
     position: relative;
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index b34242235..28210dd73 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -433,7 +433,7 @@ div.ui-tooltip {
     color: #888 !important;
 }
 
-.dropdown-menu a:hover:not(.disabled) {
+.dropdown-menu a:hover:not(.disabled), li.dropdown-item:hover:not(.disabled) {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     cursor: pointer;