some style fixes and refactoring for tree context menu

src/public/javascripts/services/context_menu.js

@@ -20,29 +20,31 @@ function initContextMenu(event, contextMenuItems, selectContextMenuItem) {
                     $icon.append(" ");
                 }
 
-                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");

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);

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;

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;