fix regressions

src/public/app/widgets/buttons/calendar.js

@@ -88,7 +88,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         });
         this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
         this.$next.on('click', () => {
-        this.date.setMonth(this.date.getMonth() + 1);
+            this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
         this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
@@ -123,6 +123,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
 
             if (note) {
                 appContext.tabManager.getActiveContext().setNote(note.noteId);
+                this.dropdown.hide();
             }
             else {
                 toastService.showError(t("calendar.cannot_find_day_note"));
@@ -137,9 +138,9 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.firstDayOfWeek = options.getInt("firstDayOfWeek");
 
         // Generate the list of days of the week taking into consideration the user's selected first day of week.
-        let localeDaysOfWeek = [ ...DAYS_OF_WEEK ];
+        let localeDaysOfWeek = [...DAYS_OF_WEEK];
         const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
-        localeDaysOfWeek = [ ...localeDaysOfWeek, ...daysToBeAddedAtEnd ];
+        localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd];
         this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`));
     }
 
@@ -235,7 +236,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.$yearSelect.val(this.date.getFullYear());
     }
 
-    async entitiesReloadedEvent({loadResults}) {
+    async entitiesReloadedEvent({ loadResults }) {
         if (!loadResults.getOptionNames().includes("firstDayOfWeek")) {
             return;
         }

src/public/app/widgets/buttons/right_dropdown_button.js

@@ -30,6 +30,7 @@ export default class RightDropdownButtonWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$dropdownMenu = this.$widget.find(".dropdown-menu");
+        this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
         this.tooltip = new bootstrap.Tooltip(this.$tooltip);

src/public/app/widgets/ribbon_widgets/book_properties.js

@@ -18,7 +18,7 @@ const TPL = `
     <div style="display: flex; align-items: baseline">
         <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
         
-        <select class="view-type-select form-control form-control-sm">
+        <select class="view-type-select form-select form-select-sm">
             <option value="grid">${t("book_properties.grid")}</option>
             <option value="list">${t("book_properties.list")}</option>
         </select>

src/public/app/widgets/search_options/ancestor.js

@@ -13,7 +13,7 @@ const TPL = `
             
             <div style="margin-left: 10px; margin-right: 10px">${t('ancestor.depth_label')}:</div>
             
-            <select name="depth" class="form-control d-inline ancestor-depth" style="flex-shrink: 3">
+            <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
                 <option value="">${t('ancestor.depth_doesnt_matter')}</option>
                 <option value="eq1">${t('ancestor.depth_eq', {count: 1})} (${t('ancestor.direct_children')})</option>
                 <option value="eq2">${t('ancestor.depth_eq', {count: 2})}</option>

src/public/app/widgets/type_widgets/options/appearance/fonts.js

@@ -37,7 +37,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("fonts.font_family")}</label>
-            <select class="main-font-family form-control"></select>
+            <select class="main-font-family form-select"></select>
         </div>
     
         <div class="col-6">
@@ -55,7 +55,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="tree-font-family form-control"></select>
+            <select class="tree-font-family form-select"></select>
         </div>
     
         <div class="col-6">
@@ -73,7 +73,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="detail-font-family form-control"></select>
+            <select class="detail-font-family form-select"></select>
         </div>
         
         <div class="col-6">
@@ -91,7 +91,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>${t("fonts.font_family")}</label>
-            <select class="monospace-font-family form-control"></select>
+            <select class="monospace-font-family form-select"></select>
         </div>
     
         <div class="col-6">

src/public/app/widgets/type_widgets/options/appearance/i18n.js

@@ -10,12 +10,12 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("i18n.language")}</label>
-            <select class="locale-select form-control"></select>
+            <select class="locale-select form-select"></select>
         </div>
 
         <div class="col-6">
             <label>${t("i18n.first-day-of-the-week")}</label>
-            <select class="first-day-of-week-select form-control">
+            <select class="first-day-of-week-select form-select">
                 <option value="0">${t("i18n.sunday")}</option>
                 <option value="1">${t("i18n.monday")}</option>
             </select>

src/public/app/widgets/type_widgets/options/appearance/theme.js

@@ -10,7 +10,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-6">
             <label>${t("theme.theme_label")}</label>
-            <select class="theme-select form-control"></select>
+            <select class="theme-select form-select"></select>
         </div>
         
         <div class="col-6">

src/public/app/widgets/type_widgets/options/backup.js

@@ -12,19 +12,19 @@ const TPL = `
     <ul style="list-style: none">
         <li>
             <label>
-                <input type="checkbox" class="daily-backup-enabled">
+                <input type="checkbox" class="daily-backup-enabled form-check-input">
                 ${t('backup.enable_daily_backup')}
             </label>
         </li>
         <li>    
             <label>
-                <input type="checkbox" class="weekly-backup-enabled">
+                <input type="checkbox" class="weekly-backup-enabled form-check-input">
                 ${t('backup.enable_weekly_backup')}
             </label>
         </li>
         <li>
         <label>
-            <input type="checkbox" class="monthly-backup-enabled">
+            <input type="checkbox" class="monthly-backup-enabled form-check-input">
             ${t('backup.enable_monthly_backup')}
             </label>
         </li>

src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js

@@ -24,7 +24,7 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
             const id = "code-mime-type-" + (idCtr++);
 
             this.$mimeTypes.append($("<li>")
-                .append($('<input type="checkbox">')
+                .append($('<input type="checkbox" class="form-check-input">')
                     .attr("id", id)
                     .attr("data-mime-type", mimeType.mime)
                     .prop("checked", mimeType.enabled))

src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.js

@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t('vim_key_bindings.use_vim_keybindings_in_code_notes')}</h4>
     <label>
-        <input type="checkbox" class="vim-keymap-enabled">
+        <input type="checkbox" class="vim-keymap-enabled form-check-input">
         ${t('vim_key_bindings.enable_vim_keybindings')}
     </label>
 </div>`;

src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.js

@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t("wrap_lines.wrap_lines_in_code_notes")}</h4>
     <label>
-        <input type="checkbox" class="line-wrap-enabled">
+        <input type="checkbox" class="line-wrap-enabled form-check-input">
         ${t("wrap_lines.enable_line_wrap")}
     </label>
 </div>`;

src/public/app/widgets/type_widgets/options/other/network_connections.js

@@ -6,7 +6,7 @@ const TPL = `
     <h4>${t("network_connections.network_connections_title")}</h4>
         
     <label>
-        <input class="check-for-updates" type="checkbox" name="check-for-updates">
+        <input class="check-for-updates form-check-input" type="checkbox" name="check-for-updates">
         ${t("network_connections.check_for_updates")}
     </label>
 </div>`;

src/public/app/widgets/type_widgets/options/text_notes/heading_style.js

@@ -5,7 +5,7 @@ const TPL = `
 <div class="options-section">
     <h4>${t("heading_style.title")}</h4>
     
-    <select class="heading-style form-control">
+    <select class="heading-style form-select">
         <option value="plain">${t("heading_style.plain")}</option>
         <option value="underline">${t("heading_style.underline")}</option>
         <option value="markdown">${t("heading_style.markdown")}</option>

src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js

@@ -8,11 +8,11 @@ const TPL = `
     <p>${t("highlights_list.description")}</p>
 
     </div>
-        <label><input type="checkbox" class="highlights-list-check" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="color"> ${t("highlights_list.color")} &nbsp;</label>
-        <label><input type="checkbox" class="highlights-list-check" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")} &nbsp;</label>
+        <label><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")} &nbsp;</label>
     </div>
 
     <br/><br/>

src/public/stylesheets/calendar.css

@@ -100,6 +100,10 @@
   font-weight: bold;
 }
 
+.calendar-dropdown-widget a {
+  text-decoration: none;
+}
+
 .calendar-dropdown-widget .calendar-date-exists {
   text-decoration: underline !important;
 }
@@ -107,3 +111,4 @@
 .calendar-dropdown-widget .calendar-date:not(.calendar-date-active) {
   cursor: pointer;
 }
+

src/public/stylesheets/style.css

@@ -36,22 +36,78 @@ a, a:visited, a:hover {
     color: var(--link-color);
 }
 
-input, select, textarea {
+.note-list-widget a {
+    text-decoration: none;
+}
+
+.note-list-widget a:hover {
+    text-decoration: underline;
+}
+
+input,
+select,
+textarea,
+.form-control,
+.form-select {
     color: var(--input-text-color);
     background: var(--input-background-color);
 }
 
-#left-pane input, select, textarea {
+.form-control:focus {
+    color: var(--input-text-color);
+    background: var(--input-background-color);
+}
+
+.form-select {
+    background: var(--input-background-color) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") right .75rem center/15px 20px no-repeat;
+}
+
+/* Hide number input arrows */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox browser */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+/* Show number input arrows when focus or hover */
+input[type="number"]:focus::-webkit-inner-spin-button,
+input[type="number"]:focus::-webkit-outer-spin-button,
+input[type="number"]:hover::-webkit-inner-spin-button,
+input[type="number"]:hover::-webkit-outer-spin-button {
+    -webkit-appearance: inner-spin-button;
+}
+
+/* Restore default apperance */
+input[type="number"]:focus,
+input[type="number"]:hover {
+    appearance: auto;
+}
+
+#left-pane input,
+#left-pane select,
+#left-pane textarea {
     color: var(--left-pane-text-color);
     background: var(--left-pane-background-color);
 }
 
-input::placeholder {
+input::placeholder,
+.form-control::placeholder,
+#left-pane input::placeholder {
     color: var(--muted-text-color);
 }
 
-table td, table th {
+.table thead th,
+.table td,
+.table th {
+    /* Fix center vertical alignment of table cells */
+    vertical-align: middle;
     color: var(--main-text-color);
+    background: transparent;
 }
 
 .ck .todo-list__checkmark {
@@ -184,10 +240,15 @@ div.ui-tooltip {
     display: none;
 }
 
+.dropdown-divider {
+    background-color: var(--menu-text-color);
+}
+
 .dropdown-menu {
     border: 1px solid var(--dropdown-border-color);
     color: var(--menu-text-color) !important;
     background-color: var(--menu-background-color) !important;
+    font-size: inherit;
 }
 
 .dropdown-menu .disabled {
@@ -281,6 +342,10 @@ body .CodeMirror {
     border-color: var(--button-border-color);
 }
 
+.btn:hover {
+    border-color: var(--hover-item-border-color);
+}
+
 button.btn, button.btn-sm {
     font-size: inherit;
 }
@@ -686,6 +751,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 }
 
 .card {
+    color: inherit !important;
     background-color: inherit !important;
     border-color: var(--main-border-color) !important;
 }
@@ -717,7 +783,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     color: var(--main-text-color) !important;
     z-index: 9999999999 !important;
     pointer-events: all;
-    flex-basis: 0; /* otherwise toast is always at least 350px tall (happens since 4.5.1, perhaps a bug) */
 }
 
 .toast-header {
@@ -824,10 +889,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     cursor: row-resize;
 }
 
-.dropdown-menu {
-    font-size: inherit;
-}
-
 #context-menu-container {
     max-height: 100vh;
     /* !!! Cannot set overflow: auto, submenus will break !!! */
@@ -1089,7 +1150,6 @@ button.close:hover {
 }
 
 .options-number-input {
-    text-align: right;
     /* overriding settings from .form-control */
     width: 10em !important;
     flex-grow: 0 !important;
@@ -1099,12 +1159,6 @@ textarea {
     cursor: auto;
 }
 
-.table thead th,
-.table td, .table th {
-    /* Fix center vertical alignment of table cells */
-    vertical-align: middle;
-}
-
 .ck-powered-by-balloon {
     display: none !important;
 }

src/public/translations/cn/translation.json

@@ -1034,8 +1034,8 @@
     "title": "下拉菜单可用的MIME文件类型"
   },
   "vim_key_bindings": {
-    "use_vim_keybindings_in_code_notes": "",
-    "enable_vim_keybindings": ""
+    "use_vim_keybindings_in_code_notes": "Vim 快捷键",
+    "enable_vim_keybindings": "在代码笔记中启用 Vim 快捷键（不包含 ex 模式）"
   },
   "wrap_lines": {
     "wrap_lines_in_code_notes": "代码笔记自动换行",