From 2b0d68368c9798c19b1bdf4255cec6d7e21cba9e Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Tue, 19 Nov 2024 11:08:20 +0800
Subject: [PATCH]  Add box icons to note menu

---
 .../app/widgets/buttons/note_actions.js       | 80 ++++++++++++-------
 1 file changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/public/app/widgets/buttons/note_actions.js b/src/public/app/widgets/buttons/note_actions.js
index bf24a6705..8c70d667d 100644
--- a/src/public/app/widgets/buttons/note_actions.js
+++ b/src/public/app/widgets/buttons/note_actions.js
@@ -10,44 +10,62 @@ import { t } from "../../services/i18n.js";
 
 const TPL = `
 <div class="dropdown note-actions">
-    <style>
+  <style>
     .note-actions {
-        width: 35px;
-        height: 35px;
-    }  
-    
+      width: 35px;
+      height: 35px;
+    }
+
     .note-actions .dropdown-menu {
-        min-width: 15em;
+      min-width: 15em;
     }
-    
+
+    .note-actions .dropdown-item .bx {
+      margin-right: 5px;
+    }
+
     .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
-        color: var(--muted-text-color) !important;
-        background-color: transparent !important;
-        pointer-events: none; /* makes it unclickable */
+      color: var(--muted-text-color) !important;
+      background-color: transparent !important;
+      pointer-events: none; /* makes it unclickable */
     }
-    </style>
 
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" 
-        aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded"></button>
+  </style>
 
-    <div class="dropdown-menu dropdown-menu-right">
-        <a data-trigger-command="convertNoteIntoAttachment" class="dropdown-item">${t('note_actions.convert_into_attachment')}</a>
-        <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> ${t('note_actions.re_render_note')}</a>
-        <a data-trigger-command="findInText" class="dropdown-item find-in-text-button">${t('note_actions.search_in_note')} <kbd data-command="findInText"></kbd></a>
-        <a data-trigger-command="showNoteSource" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> ${t('note_actions.note_source')}</a>
-        <a data-trigger-command="showAttachments" class="dropdown-item show-attachments-button"><kbd data-command="showAttachments"></kbd> ${t('note_actions.note_attachments')}</a>
-        <a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"
-           title="${t('note_actions.open_note_externally_title')}">
-            <kbd data-command="openNoteExternally"></kbd> 
-            ${t('note_actions.open_note_externally')}
-        </a>
-        <a data-trigger-command="openNoteCustom" class="dropdown-item open-note-custom-button"><kbd data-command="openNoteCustom"></kbd> ${t('note_actions.open_note_custom')}</a>
-        <a class="dropdown-item import-files-button">${t('note_actions.import_files')}</a>
-        <a class="dropdown-item export-note-button">${t('note_actions.export_note')}</a>
-        <a class="dropdown-item delete-note-button">${t('note_actions.delete_note')}</a>
-        <a data-trigger-command="printActiveNote" class="dropdown-item print-active-note-button"><kbd data-command="printActiveNote"></kbd> ${t('note_actions.print_note')}</a>
-        <a data-trigger-command="forceSaveRevision" class="dropdown-item save-revision-button"><kbd data-command="forceSaveRevision"></kbd> ${t('note_actions.save_revision')}</a>
-    </div>
+  <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+    class="icon-action bx bx-dots-vertical-rounded"></button>
+
+  <div class="dropdown-menu dropdown-menu-right">
+    <li data-trigger-command="convertNoteIntoAttachment" class="dropdown-item">
+      <span class="bx bx-paperclip"></span> ${t('note_actions.convert_into_attachment')}
+    </li>
+    <li data-trigger-command="renderActiveNote" class="dropdown-item render-note-button">
+      <span class="bx bx-extension"></span> ${t('note_actions.re_render_note')}<kbd data-command="renderActiveNote"></kbd>
+    </li>
+    <li data-trigger-command="findInText" class="dropdown-item find-in-text-button">
+      <span class='bx bx-search'></span> ${t('note_actions.search_in_note')}<kbd data-command="findInText"></kbd>
+    </li>
+    <li data-trigger-command="showNoteSource" class="dropdown-item show-source-button">
+      <span class="bx bx-code"></span> ${t('note_actions.note_source')}<kbd data-command="showNoteSource"></kbd>
+    </li>
+    <li data-trigger-command="showAttachments" class="dropdown-item show-attachments-button">
+      <span class="bx bx-paperclip"></span> ${t('note_actions.note_attachments')}<kbd data-command="showAttachments"></kbd>
+    </li>
+    <li data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button" title="${t('note_actions.open_note_externally_title')}">
+      <span class="bx bx-link-external"></span> ${t('note_actions.open_note_externally')}<kbd data-command="openNoteExternally"></kbd>
+    </li>
+    <li data-trigger-command="openNoteCustom" class="dropdown-item open-note-custom-button">
+      <span class="bx bxs-shapes"></span> ${t('note_actions.open_note_custom')}<kbd data-command="openNoteCustom"></kbd>
+    </li>
+    <li class="dropdown-item import-files-button"><span class="bx bx-import"></span> ${t('note_actions.import_files')}</li>
+    <li class="dropdown-item export-note-button"><span class="bx bx-export"></span> ${t('note_actions.export_note')}</li>
+    <li class="dropdown-item delete-note-button"><span class="bx bx-trash"></span> ${t('note_actions.delete_note')}</li>
+    <li data-trigger-command="printActiveNote" class="dropdown-item print-active-note-button">
+      <span class="bx bx-printer"></span> ${t('note_actions.print_note')}<kbd data-command="printActiveNote"></kbd></li>
+    <li data-trigger-command="forceSaveRevision" class="dropdown-item save-revision-button">
+      <span class="bx bx-save"></span> ${t('note_actions.save_revision')}<kbd data-command="forceSaveRevision"></kbd>
+    </li>
+  </div>
 </div>`;
 
 export default class NoteActionsWidget extends NoteContextAwareWidget {