client/keyboard shortcuts cheatsheet: add an edit button

Updated by "Cleanup translation files" add-on in Weblate.

Translation: Trilium Notes/Client
Translate-URL: https://hosted.weblate.org/projects/trilium/client/

apps/client/src/stylesheets/style.css

@@ -592,11 +592,6 @@ button.btn-sm {
     color: var(--left-pane-text-color);
 }
 
-.btn.active:not(.btn-primary) {
-    background-color: var(--button-disabled-background-color) !important;
-    opacity: 0.4;
-}
-
 .ck.ck-block-toolbar-button {
     transform: translateX(7px);
     color: var(--muted-text-color);

apps/client/src/stylesheets/theme-next-dark.css

@@ -41,6 +41,9 @@
     --cmd-button-keyboard-shortcut-color: white;
     --cmd-button-disabled-opacity: 0.5;
 
+    --button-group-active-button-background: #ffffff4e;
+    --button-group-active-button-text-color: white;
+
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);
     --icon-button-hover-color: var(--hover-item-text-color);

apps/client/src/stylesheets/theme-next-light.css

@@ -41,6 +41,9 @@
     --cmd-button-keyboard-shortcut-color: black;
     --cmd-button-disabled-opacity: 0.5;
 
+    --button-group-active-button-background: #00000026;
+    --button-group-active-button-text-color: black;
+
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);
     --icon-button-hover-color: var(--hover-item-text-color);

apps/client/src/stylesheets/theme-next/dialogs.css

@@ -25,6 +25,7 @@
 
 .modal .modal-header .btn-close,
 .modal .modal-header .help-button,
+.modal .modal-header .custom-title-bar-button,
 #toast-container .toast .toast-header .btn-close {
     display: flex;
     justify-content: center;
@@ -55,15 +56,17 @@
     font-family: boxicons;
 }
 
-.modal .modal-header .help-button {
+.modal .modal-header .help-button,
+.modal .modal-header .custom-title-bar-button {
     margin-inline-end: 0;
-    font-size: calc(var(--modal-control-button-size) * .75);
+    font-size: calc(var(--modal-control-button-size) * .70);
     font-family: unset;
     font-weight: bold;
 }
 
 .modal .modal-header .btn-close:hover,
 .modal .modal-header .help-button:hover,
+.modal .modal-header .custom-title-bar-button:hover,
 #toast-container .toast .toast-header .btn-close:hover {
     background: var(--modal-control-button-hover-background);
     color: var(--modal-control-button-hover-color);
@@ -71,6 +74,7 @@
 
 .modal .modal-header .btn-close:active,
 .modal .modal-header .help-button:active,
+.modal .modal-header .custom-title-bar-button:active,
 #toast-container .toast .toast-header .btn-close:active {
     transform: scale(.85);
 }

apps/client/src/stylesheets/theme-next/forms.css

@@ -146,6 +146,14 @@ button.btn.btn-success kbd {
     outline: 2px solid var(--input-focus-outline-color);
 }
 
+/* Button groups */
+
+/* Active button */
+:root .btn-group button.btn.active {
+    background-color: var(--button-group-active-button-background);
+    color: var(--button-group-active-button-text-color);
+}
+
 /* 
  * Input boxes
  */

apps/client/src/stylesheets/theme-next/shell.css

@@ -1448,6 +1448,14 @@ div.promoted-attribute-cell .multiplicity:has(span) span {
     justify-content: center;
 }
 
+div.promoted-attribute-cell.promoted-attribute-label-color {
+    justify-content: space-between;
+}
+
+div.promoted-attribute-cell.promoted-attribute-label-color .input-group {
+    width: auto;
+}
+
 /*
  * Floating buttons
  */

apps/client/src/translations/cn/translation.json

@@ -2098,7 +2098,6 @@
   "read-only-info": {
     "read-only-note": "当前正在查看一个只读笔记。",
     "auto-read-only-note": "这条笔记以只读模式显示便于快速加载。",
-    "auto-read-only-learn-more": "了解更多",
     "edit-note": "编辑笔记"
   },
   "note-color": {

apps/client/src/translations/de/translation.json

@@ -2097,7 +2097,6 @@
   "read-only-info": {
     "read-only-note": "Aktuelle Notiz wird im Lese-Modus angezeigt.",
     "auto-read-only-note": "Diese Notiz wird im Nur-Lesen-Modus angezeigt, um ein schnelleres Laden zu ermöglichen.",
-    "auto-read-only-learn-more": "Mehr erfahren",
     "edit-note": "Notiz bearbeiten"
   },
   "calendar_view": {

apps/client/src/translations/en/translation.json

@@ -112,6 +112,7 @@
   },
   "help": {
     "title": "Cheatsheet",
+    "editShortcuts": "Edit keyboard shortcuts",
     "noteNavigation": "Note navigation",
     "goUpDown": "go up/down in the list of notes",
     "collapseExpand": "collapse/expand node",

apps/client/src/translations/es/translation.json

@@ -2096,7 +2096,6 @@
   "read-only-info": {
     "read-only-note": "Actualmente, está viendo una nota de solo lectura.",
     "auto-read-only-note": "Esta nota se muestra en modo de solo lectura para una carga más rápida.",
-    "auto-read-only-learn-more": "Para saber más",
     "edit-note": "Editar nota"
   },
   "calendar_view": {

apps/client/src/translations/it/translation.json

@@ -2092,7 +2092,6 @@
   "read-only-info": {
     "read-only-note": "Stai visualizzando una nota di sola lettura.",
     "auto-read-only-note": "Questa nota viene visualizzata in modalità di sola lettura per un caricamento più rapido.",
-    "auto-read-only-learn-more": "Per saperne di più",
     "edit-note": "Modifica nota"
   },
   "calendar_view": {

apps/client/src/translations/ja/translation.json

@@ -2098,7 +2098,6 @@
   "read-only-info": {
     "read-only-note": "現在、読み取り専用のノートを表示しています。",
     "auto-read-only-note": "このノートは読み込みを高速化するために読み取り専用モードで表示されています。",
-    "auto-read-only-learn-more": "さらに詳しく",
     "edit-note": "ノートを編集"
   },
   "note-color": {

apps/client/src/translations/ro/translation.json

@@ -2097,7 +2097,6 @@
   "read-only-info": {
     "read-only-note": "Vizualizați o notiță în modul doar în citire.",
     "auto-read-only-note": "Această notiță este afișată în modul doar în citire din motive de performanță.",
-    "auto-read-only-learn-more": "Mai multe detalii",
     "edit-note": "Editează notița"
   },
   "calendar_view": {

apps/client/src/translations/tw/translation.json

@@ -2098,7 +2098,6 @@
   "read-only-info": {
     "read-only-note": "目前正在檢視唯讀筆記。",
     "auto-read-only-note": "此筆記以唯讀模式顯示以加快載入速度。",
-    "auto-read-only-learn-more": "了解更多",
     "edit-note": "編輯筆記"
   },
   "note-color": {

apps/client/src/widgets/dialogs/PopupEditor.css

@@ -33,8 +33,8 @@ body.mobile .modal.popup-editor-dialog .modal-dialog {
     align-items: center;
 }
 
-.modal.popup-editor-dialog .modal-header .title-row > * {
-    margin: 5px;
+.modal.popup-editor-dialog .modal-header .note-title-widget {
+    margin-top: 8px;
 }
 
 .modal.popup-editor-dialog .modal-body {
@@ -66,12 +66,17 @@ body.mobile .modal.popup-editor-dialog .modal-dialog {
     background-color: transparent;
 }
 
+.modal.popup-editor-dialog div.promoted-attributes-container {
+    margin-block: 0;
+}
+
 .modal.popup-editor-dialog .classic-toolbar-widget {
     position: sticky;
+    margin-inline: 8px;
     top: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
-    background: transparent;
+    background: var(--modal-background-color);
     z-index: 998;
     align-items: flex-start;
 }

apps/client/src/widgets/dialogs/PopupEditor.tsx

@@ -60,6 +60,11 @@ export default function PopupEditor() {
             <DialogWrapper>
                 <Modal
                     title={<TitleRow />}
+                    customTitleBarButtons={[{
+                        iconClassName: "bx-expand-alt",
+                        title: "Switch to full editor",
+                        onClick: () => {/* TO DO */}
+                    }]}
                     className="popup-editor-dialog"
                     size="lg"
                     show={shown}

apps/client/src/widgets/dialogs/help.tsx

@@ -1,7 +1,7 @@
 import Modal from "../react/Modal.jsx";
 import { t } from "../../services/i18n.js";
 import { ComponentChildren } from "preact";
-import { CommandNames } from "../../components/app_context.js";
+import appContext, { CommandNames } from "../../components/app_context.js";
 import RawHtml from "../react/RawHtml.jsx";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions.js";
@@ -14,6 +14,7 @@ export default function HelpDialog() {
     return (
         <Modal
             title={t("help.title")} className="help-dialog use-tn-links" minWidth="90%" size="lg" scrollable
+            customTitleBarButtons={[{title: t("help.editShortcuts"), iconClassName: "bxs-pencil", onClick: editShortcuts}]}
             onHidden={() => setShown(false)}
             show={shown}
         >
@@ -160,3 +161,7 @@ function Card({ title, children }: { title: string, children: ComponentChildren
         </div>
     )
 }
+
+function editShortcuts() {
+    appContext.tabManager.openContextWithNote("_optionsShortcuts", { activate: true });
+}

apps/client/src/widgets/react/Modal.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useEffect, useRef, useMemo } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { ComponentChildren } from "preact";
@@ -7,9 +8,16 @@ import { Modal as BootstrapModal } from "bootstrap";
 import { memo } from "preact/compat";
 import { useSyncedRef } from "./hooks";
 
+interface CustomTitleBarButton {
+    title: string;
+    iconClassName: string;
+    onClick: () => void;
+}
+
 interface ModalProps {
     className: string;
     title: string | ComponentChildren;
+    customTitleBarButtons?: (CustomTitleBarButton | null)[];
     size: "xl" | "lg" | "md" | "sm";
     children: ComponentChildren;
     /**
@@ -72,7 +80,7 @@ interface ModalProps {
     noFocus?: boolean;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
+export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
     const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
     const elementToFocus = useRef<Element | null>();
@@ -148,7 +156,17 @@ export default function Modal({ children, className, size, title, header, footer
                         {helpPageId && (
                             <button className="help-button" type="button" data-in-app-help={helpPageId} title={t("modal.help_title")}>?</button>
                         )}
+
+                        {titleBarButtons?.filter((b) => b !== null).map((titleBarButton) => (
+                            <button type="button"
+                                    className={clsx("custom-title-bar-button bx", titleBarButton.iconClassName)}
+                                    title={titleBarButton.title}
+                                    onClick={titleBarButton.onClick}>
+                            </button>
+                        ))}
+                        
                         <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")}></button>
+
                     </div>
 
                     {onSubmit ? (

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -1,5 +1,5 @@
 import { ConvertToAttachmentResponse } from "@triliumnext/commons";
-import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList";
 import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/utils";
 import { ParentComponent } from "../react/react_utils";
 import { t } from "../../services/i18n"
@@ -113,8 +113,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
 function DevelopmentActions({ note }: { note: FNote }) {
     return (
         <>
-            <FormDropdownDivider />
-            <FormListItem disabled>Development-only Actions</FormListItem>
+            <FormListHeader text="Development-only Actions" />
             <FormListItem
                 icon="bx bx-printer"
                 onClick={() => window.open(`/?print=#root/${note.noteId}`, "_blank")}

apps/website/src/translations/de/translation.json

@@ -21,7 +21,7 @@
         "note_structure_description": "Notizen lassen sich hierarchisch anordnen. Ordner sind nicht nötig, da jede Notiz Unternotizen enthalten kann. Eine einzelne Notiz kann an mehreren Stellen in der Hierarchie hinzugefügt werden.",
         "hoisting_description": "Trennen Sie Ihre persönlichen und beruflichen Notizen ganz einfach, indem Sie sie in einem Arbeitsbereich gruppieren. Dadurch wird Ihre Notizstruktur so fokussiert, dass nur ein bestimmter Satz von Notizen angezeigt wird.",
         "hoisting_title": "Arbeitsbereiche und Fokusansicht",
-        "attributes_description": "Nutzen Sie Verbindungen zwischen Notizen oder fügen Sie Labels hinzu, um die Kategorisierung zu erleichtern. Mit hervorgehobenen („promoted“) Attributen können Sie strukturierte Informationen erfassen, die sich direkt in Tabellen und Boards verwenden lassen."
+        "attributes_description": "Verwenden Sie Beziehungen zwischen Notizen oder fügen Sie Beschriftungen hinzu, um die Kategorisierung zu vereinfachen. Verwenden Sie hervorgehobene Attribute, um strukturierte Informationen einzugeben, die in Tabellen und Boards verwendet werden können."
     },
     "productivity_benefits": {
         "revisions_title": "Notizrevisionen",

apps/website/src/translations/ko/translation.json

@@ -87,6 +87,8 @@
         "description_arm64": "ARM 기반 리눅스 배포판에서 aarch64 아키텍처와 호환됩니다."
     },
     "note_types": {
-        "text_title": "텍스트 노트"
+        "text_title": "텍스트 노트",
+        "text_description": "노트는 WYSIWYG 편집기를 사용하며 표, 이미지, 수학 표현식, 구문 강조 기능의 코드 블록을 지원합니다. 특수문자를 사용한 마크다운 유사 구문이나 슬래시(/) 명령으로 텍스트 서식을 빠르게 지정할 수 있습니다.",
+        "code_title": "코드 노트"
     }
 }