refactor: update context menu style

SSShooter · Oct 10, 2024 · d9a7720 · d9a7720
1 parent 9ca0d1d
commit d9a7720
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/src/plugin/contextMenu.less b/src/plugin/contextMenu.less
@@ -10,45 +10,46 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    font: 300 15px 'Roboto', sans-serif;
     color: var(--panel-color);
     box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    overflow: hidden;
     li {
       min-width: 200px;
       overflow: hidden;
       white-space: nowrap;
-      padding: 10px 14px;
+      padding: 6px 10px;
       background: var(--panel-bgcolor);
       border-bottom: 1px solid var(--panel-border-color);
+      cursor: pointer;
+      span {
+        line-height: 20px;
+      }
       a {
         color: #333;
         text-decoration: none;
       }
       &.disabled {
         display: none;
-        color: rgb(94, 94, 94);
-        background-color: rgb(247, 247, 247);
-        &:hover {
-          cursor: default;
-          background-color: rgb(247, 247, 247);
-        }
       }
       &:hover {
-        cursor: pointer;
-        filter: brightness(0.9);
-      }
-      &:first-child {
-        border-radius: 5px 5px 0 0;
+        filter: brightness(0.95);
       }
       &:last-child {
         border-bottom: 0;
-        border-radius: 0 0 5px 5px;
       }
       span:last-child {
         float: right;
       }
     }
   }
+  .key {
+    font-size: 10px;
+    background-color: #f1f1f1;
+    color: #333;
+    padding: 2px 5px;
+    border-radius: 3px;
+  }
 }
 
 .mind-elixir .tips {

diff --git a/src/plugin/contextMenu.ts b/src/plugin/contextMenu.ts
@@ -5,7 +5,17 @@ import { encodeHTML, isTopic } from '../utils/index'
 import dragMoveHelper from '../utils/dragMoveHelper'
 import './contextMenu.less'
 
-export default function (mind: MindElixirInstance, option: any) {
+type Options = {
+  focus?: boolean
+  link?: boolean
+  extend?: {
+    name: string
+    key?: string
+    onclick: (e: MouseEvent) => void
+  }[]
+}
+
+export default function (mind: MindElixirInstance, option: Options) {
   const createTips = (words: string) => {
     const div = document.createElement('div')
     div.innerText = words
@@ -15,15 +25,15 @@ export default function (mind: MindElixirInstance, option: any) {
   const createLi = (id: string, name: string, keyname: string) => {
     const li = document.createElement('li')
     li.id = id
-    li.innerHTML = `<span>${encodeHTML(name)}</span><span>${encodeHTML(keyname)}</span>`
+    li.innerHTML = `<span>${encodeHTML(name)}</span><span ${keyname ? 'class="key"' : ''}>${encodeHTML(keyname)}</span>`
     return li
   }
   const locale = i18n[mind.locale] ? mind.locale : 'en'
   const lang = i18n[locale]
-  const add_child = createLi('cm-add_child', lang.addChild, 'tab')
-  const add_parent = createLi('cm-add_parent', lang.addParent, '')
-  const add_sibling = createLi('cm-add_sibling', lang.addSibling, 'enter')
-  const remove_child = createLi('cm-remove_child', lang.removeNode, 'delete')
+  const add_child = createLi('cm-add_child', lang.addChild, 'Tab')
+  const add_parent = createLi('cm-add_parent', lang.addParent, 'Ctrl + Enter')
+  const add_sibling = createLi('cm-add_sibling', lang.addSibling, 'Enter')
+  const remove_child = createLi('cm-remove_child', lang.removeNode, 'Delete')
   const focus = createLi('cm-fucus', lang.focus, '')
   const unfocus = createLi('cm-unfucus', lang.cancelFocus, '')
   const up = createLi('cm-up', lang.moveUp, 'PgUp')