Merge pull request #903 from TriliumNext/style/next/restyle-help-dialog-

Style Next: Restyle the help dialog
TriliumNext · Jan 8, 2025 · 6cedd03 · 6cedd03
2 parents cefc668 + e8fe290
commit 6cedd03
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 32 deletions.
diff --git a/src/public/app/widgets/dialogs/help.ts b/src/public/app/widgets/dialogs/help.ts
@@ -4,13 +4,13 @@ import { t } from "../../services/i18n.js";
 
 const TPL = `
 <div class="help-dialog modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
+    <div class="modal-dialog" role="document" style="min-width: 90%;">
         <div class="modal-content" style="height: auto;">
             <div class="modal-header">
                 <h5 class="modal-title">${t('help.fullDocumentation')}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}"></button>
             </div>
-            <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
+            <div class="modal-body" style="overflow: auto;">
                 <div class="help-cards row row-cols-md-3 g-3">
                     <div class="card">
                         <div class="card-body">
@@ -39,8 +39,7 @@ const TPL = `
                             <ul>
                                 <li>${t('help.newTabNoteLink')}</li>
                             </ul>
-
-                            ${t('help.onlyInDesktop')}:
+                            <h6>${t('help.onlyInDesktop')}:</h6>
                             <ul>
                                 <li><kbd data-command="openNewTab">${t('help.notSet')}</kbd> ${t('help.openEmptyTab')}</li>
                                 <li><kbd data-command="closeActiveTab">${t('help.notSet')}</kbd> ${t('help.closeActiveTab')}</li>

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
@@ -143,6 +143,16 @@
     --tooltip-background-color: rgba(67, 67, 67, 0.86);
     --tooltip-foreground-color: #ffffffeb;
     --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
+
+    --help-background-color: var(--menu-background-color);
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
+    --help-card-heading-color: #959595;
+    --help-kbd-shortcut-color: white;
+    --help-kbd-shortcut-background: #676767;
+    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .7);
+    --help-code-color: inherit;
+    --help-code-background: #565656;
 }
 
 /*

diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
@@ -142,4 +142,14 @@
     --tooltip-background-color: rgba(255, 255, 255, 0.85);
     --tooltip-foreground-color: #000000ba;
     --tooltip-shadow-color: rgba(0, 0, 0, .15);
+
+    --help-background-color: #fffc;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    --help-card-heading-color: #797979;
+    --help-kbd-shortcut-color: #3f3f3f;
+    --help-kbd-shortcut-background: white;
+    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    --help-code-color: black;
+    --help-code-background: #d7d5d5;
  }
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
@@ -55,6 +55,8 @@
     --timeline-bullet-vertical-pos: .75em;
     --timeline-connector-size: 4px;
 
+    --help-backdrop-blur: 10px;
+
     /* Theme capabilities */
     --tab-note-icons: true;
 }
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
@@ -1559,4 +1559,82 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 .search-result-widget-content .note-path {
     opacity: .75;
     font-weight: normal;
+}
+
+/* Help */
+
+.help-dialog .modal-content {
+    --modal-background-color: var(--help-background-color);
+    backdrop-filter: blur(var(--help-backdrop-blur));
+}
+
+.help-dialog .help-cards {
+    display: block;
+    columns: 3;
+    column-gap: 20px;
+}
+
+.help-dialog .card {
+    margin: 0;
+    width: auto;
+    border: none;
+    background: unset;
+    padding: 16px 8px;
+    break-inside: avoid-column;
+}
+
+.help-dialog .card-body {
+    box-shadow: var(--help-card-shadow);
+    border-radius: 6px;
+    background: var(--help-card-background);
+}
+
+.help-dialog .card-body h5,
+.help-dialog .card-body h6 {
+    color: var(--help-card-heading-color);
+    font-weight: 600;
+}
+
+.help-dialog .card-body h5 {
+    font-size: 20px;
+}
+
+.help-dialog .card-body h6 {
+    font-size: 15px;
+    padding-bottom: .5em;
+}
+
+/* Help card item */
+.help-dialog .help-cards ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.help-dialog .help-cards li + li {
+    margin-top: .4em;
+}
+
+/* Keyboard shortcut */
+.help-dialog .help-cards kbd {
+    box-shadow: var(--help-kbd-shortcut-shadow);
+    margin: 0 4px;
+    border: none;
+    border-radius: 4px;
+    padding: 2px 10px;
+    background: var(--help-kbd-shortcut-background);
+    color: var(--help-kbd-shortcut-color);
+    font-weight: 500;
+    letter-spacing: .5pt;
+}
+
+.help-dialog .help-cards kbd:first-child {
+    margin-left: 0;
+}
+
+/* Inline code - used for Markdown samples */
+.help-dialog .help-cards code {
+    border-radius: 4px;
+    background: var(--help-code-background);
+    padding: 0 8px;
+    color: var(--help-code-color);
 }
diff --git a/src/public/translations/cn/translation.json b/src/public/translations/cn/translation.json
@@ -152,10 +152,10 @@
     "insertDateTime": "在插入点插入当前日期和时间",
     "jumpToTreePane": "跳转到树面板并滚动到活动笔记",
     "markdownAutoformat": "类Markdown自动格式化",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  等，后跟空格，自动转换为标题",
-    "bulletList": "<kbd>*</kbd> 或 <kbd>-</kbd> 后跟空格，自动转换为项目符号列表",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> 后跟空格，自动转换为编号列表",
-    "blockQuote": "一行以 <kbd>></kbd> 开头并后跟空格，自动转换为块引用",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  等，后跟空格，自动转换为标题",
+    "bulletList": "<code>*</code> 或 <code>-</code> 后跟空格，自动转换为项目符号列表",
+    "numberedList": "<code>1.</code> or <code>1)</code> 后跟空格，自动转换为编号列表",
+    "blockQuote": "一行以 <code>></code> 开头并后跟空格，自动转换为块引用",
     "troubleshooting": "故障排除",
     "reloadFrontend": "重新加载Trilium前端",
     "showDevTools": "显示开发者工具",

diff --git a/src/public/translations/de/translation.json b/src/public/translations/de/translation.json
@@ -143,10 +143,10 @@
     "insertDateTime": "Gebe das aktuelle Datum und die aktuelle Uhrzeit an der Einfügemarke ein",
     "jumpToTreePane": "Springe zum Baumbereich und scrolle zur aktiven Notiz",
     "markdownAutoformat": "Markdown-ähnliche Autoformatierung",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd> usw. gefolgt von Platz für Überschriften",
-    "bulletList": "<kbd>*</kbd> oder <kbd>-</kbd> gefolgt von Leerzeichen für Aufzählungsliste",
-    "numberedList": "<kbd>1.</kbd> oder <kbd>1)</kbd> gefolgt von Leerzeichen für nummerierte Liste",
-    "blockQuote": "Beginne eine Zeile mit <kbd>></kbd> gefolgt von einem Leerzeichen für Blockzitate",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code> usw. gefolgt von Platz für Überschriften",
+    "bulletList": "<code>*</code> oder <code>-</code> gefolgt von Leerzeichen für Aufzählungsliste",
+    "numberedList": "<code>1.</code> oder <code>1)</code> gefolgt von Leerzeichen für nummerierte Liste",
+    "blockQuote": "Beginne eine Zeile mit <code>></code> gefolgt von einem Leerzeichen für Blockzitate",
     "troubleshooting": "Fehlerbehebung",
     "reloadFrontend": "Trilium-Frontend neuladen",
     "showDevTools": "Entwicklertools anzeigen",

diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
@@ -153,10 +153,10 @@
     "insertDateTime": "insert current date and time at caret position",
     "jumpToTreePane": "jump away to the tree pane and scroll to active note",
     "markdownAutoformat": "Markdown-like autoformatting",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. followed by space for headings",
-    "bulletList": "<kbd>*</kbd> or <kbd>-</kbd> followed by space for bullet list",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> followed by space for numbered list",
-    "blockQuote": "start a line with <kbd>></kbd> followed by space for block quote",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. followed by space for headings",
+    "bulletList": "<code>*</code> or <code>-</code> followed by space for bullet list",
+    "numberedList": "<code>1.</code> or <code>1)</code> followed by space for numbered list",
+    "blockQuote": "start a line with <code>></code> followed by space for block quote",
     "troubleshooting": "Troubleshooting",
     "reloadFrontend": "reload Trilium frontend",
     "showDevTools": "show developer tools",

diff --git a/src/public/translations/es/translation.json b/src/public/translations/es/translation.json
@@ -153,10 +153,10 @@
     "insertDateTime": "insertar la fecha y hora actuales en la posición del cursor",
     "jumpToTreePane": "saltar al panel de árbol y desplazarse hasta la nota activa",
     "markdownAutoformat": "Autoformato tipo Markdown",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. seguido de espacio para encabezados",
-    "bulletList": "<kbd>*</kbd> o <kbd>-</kbd> seguido de espacio para la lista de viñetas",
-    "numberedList": "<kbd>1.</kbd> o <kbd>1)</kbd> seguido de espacio para la lista numerada",
-    "blockQuote": "comience una línea con <kbd>></kbd> seguido de espacio para el bloque de cita",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. seguido de espacio para encabezados",
+    "bulletList": "<code>*</code> o <code>-</code> seguido de espacio para la lista de viñetas",
+    "numberedList": "<code>1.</code> o <code>1)</code> seguido de espacio para la lista numerada",
+    "blockQuote": "comience una línea con <code>></code> seguido de espacio para el bloque de cita",
     "troubleshooting": "Solución de problemas",
     "reloadFrontend": "recargar la interfaz de Trilium",
     "showDevTools": "mostrar herramientas de desarrollador",

diff --git a/src/public/translations/fr/translation.json b/src/public/translations/fr/translation.json
@@ -144,10 +144,10 @@
     "insertDateTime": "insérer la date et l'heure courante à la position du curseur",
     "jumpToTreePane": "passer au volet de l'arborescence et aller jusqu'à la note active",
     "markdownAutoformat": "Formatage automatique (comme Markdown)",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. suivi d'un espace pour les titres",
-    "bulletList": "<kbd>*</kbd> ou <kbd>-</kbd> suivi d'un espace pour la liste à puces",
-    "numberedList": "<kbd>1.</kbd> ou <kbd>1)</kbd> suivi d'un espace pour la liste numérotée",
-    "blockQuote": "commencez une ligne avec <kbd>></kbd> suivi d'un espace pour les guillemets",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. suivi d'un espace pour les titres",
+    "bulletList": "<code>*</code> ou <code>-</code> suivi d'un espace pour la liste à puces",
+    "numberedList": "<code>1.</code> ou <code>1)</code> suivi d'un espace pour la liste numérotée",
+    "blockQuote": "commencez une ligne avec <code>></code> suivi d'un espace pour les guillemets",
     "troubleshooting": "Dépannage",
     "reloadFrontend": "recharger l'interface Trilium",
     "showDevTools": "afficher les outils de développement",

diff --git a/src/public/translations/ro/translation.json b/src/public/translations/ro/translation.json
@@ -599,8 +599,8 @@
   "help": {
     "activateNextTab": "activează următorul tab",
     "activatePreviousTab": "activează tabul anterior",
-    "blockQuote": "începeți un rând cu <kbd>></kbd> urmat de spațiu pentru un bloc de citat",
-    "bulletList": "<kbd>*</kbd> sau <kbd>-</kbd> urmat de spațiu pentru o listă punctată",
+    "blockQuote": "începeți un rând cu <code>></code> urmat de spațiu pentru un bloc de citat",
+    "bulletList": "<code>*</code> sau <code>-</code> urmat de spațiu pentru o listă punctată",
     "close": "Închide",
     "closeActiveTab": "închide tabul activ",
     "collapseExpand": "<kbd>LEFT</kbd>, <kbd>RIGHT</kbd> - minimizează/expandează nodul",
@@ -621,7 +621,7 @@
     "fullDocumentation": "Instrucțiuni (documentația completă se regăsește <a class=\"external\" href=\"https://triliumnext.github.io/Docs/\">online</a>)",
     "goBackForwards": "mergi înapoi/înainte în istoric",
     "goUpDown": "<kbd>UP</kbd>, <kbd>DOWN</kbd> - mergi sus/jos în lista de notițe",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  etc. urmat de spațiu pentru titluri",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  etc. urmat de spațiu pentru titluri",
     "inPageSearch": "caută în interiorul paginii",
     "insertDateTime": "inserează data și timpul curente la poziția cursorului",
     "jumpToParentNote": "<kbd>Backspace</kbd> - sari la pagina părinte",
@@ -634,7 +634,7 @@
     "newTabNoteLink": "<kbd>CTRL+clic</kbd> - (sau clic mijlociu) pe o legătură către o notiță va deschide notița într-un tab nou",
     "notSet": "nesetat",
     "noteNavigation": "Navigarea printre notițe",
-    "numberedList": "<kbd>1.</kbd> sau <kbd>1)</kbd> urmat de spațiu pentru o listă numerotată",
+    "numberedList": "<kbd>1.</code> sau <code>1)</code> urmat de spațiu pentru o listă numerotată",
     "onlyInDesktop": "Doar pentru desktop (aplicația Electron)",
     "openEmptyTab": "deschide un tab nou",
     "other": "Altele",

diff --git a/src/public/translations/tw/translation.json b/src/public/translations/tw/translation.json
@@ -148,10 +148,10 @@
     "insertDateTime": "在插入點插入當前日期和時間",
     "jumpToTreePane": "跳轉到樹面板並滾動到活動筆記",
     "markdownAutoformat": "類Markdown自動格式化",
-    "headings": "<kbd>##</kbd>, <kbd>###</kbd>, <kbd>####</kbd>  等，後跟空格，自動轉換為標題",
-    "bulletList": "<kbd>*</kbd> 或 <kbd>-</kbd> 後跟空格，自動轉換為項目符號列表",
-    "numberedList": "<kbd>1.</kbd> or <kbd>1)</kbd> 後跟空格，自動轉換為編號列表",
-    "blockQuote": "一行以 <kbd>></kbd> 開頭並後跟空格，自動轉換為塊引用",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code>  等，後跟空格，自動轉換為標題",
+    "bulletList": "<code>*</code> 或 <code>-</code> 後跟空格，自動轉換為項目符號列表",
+    "numberedList": "<code>1.</code> or <code>1)</code> 後跟空格，自動轉換為編號列表",
+    "blockQuote": "一行以 <code>></code> 開頭並後跟空格，自動轉換為塊引用",
     "troubleshooting": "故障排除",
     "reloadFrontend": "重新加載Trilium前端",
     "showDevTools": "顯示開發者工具",