From fb8d20726aefcd28301d2b13363baede4c89fdbf Mon Sep 17 00:00:00 2001 From: windingwind <33902321+windingwind@users.noreply.github.com> Date: Sun, 8 Sep 2024 20:15:47 +0200 Subject: [PATCH] add: template editor label --- addon/chrome/content/templateEditor.xhtml | 4 +- addon/locale/en-US/addon.ftl | 17 ++++- addon/locale/it-IT/addon.ftl | 17 ++++- addon/locale/ru-RU/addon.ftl | 17 ++++- addon/locale/tr-TR/addon.ftl | 17 ++++- addon/locale/zh-CN/addon.ftl | 17 ++++- src/modules/template/data.ts | 10 --- src/modules/template/editorWindow.ts | 81 ++++++++++++++++++++++- src/utils/locale.ts | 8 ++- 9 files changed, 167 insertions(+), 21 deletions(-) diff --git a/addon/chrome/content/templateEditor.xhtml b/addon/chrome/content/templateEditor.xhtml index ece678a..068b483 100644 --- a/addon/chrome/content/templateEditor.xhtml +++ b/addon/chrome/content/templateEditor.xhtml @@ -97,7 +97,7 @@ padding: 5px; } .list-viewport { - width: calc(20% - 10px); + width: calc(30% - 10px); height: 100%; overflow: hidden; } @@ -118,7 +118,7 @@ .preview-viewport { display: flex; flex-direction: column; - width: calc(40% - 10px); + width: calc(30% - 10px); padding: 5px; } .markdown-body { diff --git a/addon/locale/en-US/addon.ftl b/addon/locale/en-US/addon.ftl index bcbf6c5..9fbe0fd 100644 --- a/addon/locale/en-US/addon.ftl +++ b/addon/locale/en-US/addon.ftl @@ -18,7 +18,22 @@ menuEditor-resizeImage = Resize Image menuHelp-openUserGuide = Open Better Notes User Guide -templateEditor-templateName = Template Name +templateEditor-templateType = Type +templateEditor-templateName = Name + +templateEditor-templateDisplayName = + .QuickInsertV2 = Quick Insert (Link) + .QuickImportV2 = Quick Import (Embed) + .QuickNoteV5 = Quick Note (From Annotation) + .ExportMDFileNameV2 = Export MD File Name + .ExportMDFileHeaderV2 = Export MD File Header + .ExportMDFileContent = Export MD File Content + +templateEditor-templateDisplayType = + .system = Builtin + .item = Item + .text = Text + .unknown = ? editor-resizeImage-title = Resize Image editor-resizeImage-prompt = Resize image width to: diff --git a/addon/locale/it-IT/addon.ftl b/addon/locale/it-IT/addon.ftl index 7ae632c..07440df 100644 --- a/addon/locale/it-IT/addon.ftl +++ b/addon/locale/it-IT/addon.ftl @@ -18,7 +18,22 @@ menuEditor-resizeImage = Ridimensiona immagine menuHelp-openUserGuide = Open Better Notes User Guide -templateEditor-templateName = Template Name +templateEditor-templateType = Type +templateEditor-templateName = Name + +templateEditor-templateDisplayName = + .QuickInsertV2 = Quick Insert (Link) + .QuickImportV2 = Quick Import (Embed) + .QuickNoteV5 = Quick Note (From Annotation) + .ExportMDFileNameV2 = Export MD File Name + .ExportMDFileHeaderV2 = Export MD File Header + .ExportMDFileContent = Export MD File Content + +templateEditor-templateDisplayType = + .system = Builtin + .item = Item + .text = Text + .unknown = ? syncManager-noteName = Nome nota syncManager-lastSync = Ultima sincronizzazione diff --git a/addon/locale/ru-RU/addon.ftl b/addon/locale/ru-RU/addon.ftl index 5cc9034..0cdf310 100644 --- a/addon/locale/ru-RU/addon.ftl +++ b/addon/locale/ru-RU/addon.ftl @@ -18,7 +18,22 @@ menuEditor-resizeImage=Изменить размер изображения menuHelp-openUserGuide = Open Better Notes User Guide -templateEditor-templateName = Template Name +templateEditor-templateType = Type +templateEditor-templateName = Name + +templateEditor-templateDisplayName = + .QuickInsertV2 = Quick Insert (Link) + .QuickImportV2 = Quick Import (Embed) + .QuickNoteV5 = Quick Note (From Annotation) + .ExportMDFileNameV2 = Export MD File Name + .ExportMDFileHeaderV2 = Export MD File Header + .ExportMDFileContent = Export MD File Content + +templateEditor-templateDisplayType = + .system = Builtin + .item = Item + .text = Text + .unknown = ? editor-resizeImage-title = Resize Image editor-resizeImage-prompt = Resize image width to: diff --git a/addon/locale/tr-TR/addon.ftl b/addon/locale/tr-TR/addon.ftl index 098d473..8569eea 100644 --- a/addon/locale/tr-TR/addon.ftl +++ b/addon/locale/tr-TR/addon.ftl @@ -18,7 +18,22 @@ menuEditor-resizeImage = Resmi Boyutlandır menuHelp-openUserGuide = Better Notes Kullanıcı Rehberini Aç -templateEditor-templateName = Şablon Adı +templateEditor-templateType = Type +templateEditor-templateName = Name + +templateEditor-templateDisplayName = + .QuickInsertV2 = Quick Insert (Link) + .QuickImportV2 = Quick Import (Embed) + .QuickNoteV5 = Quick Note (From Annotation) + .ExportMDFileNameV2 = Export MD File Name + .ExportMDFileHeaderV2 = Export MD File Header + .ExportMDFileContent = Export MD File Content + +templateEditor-templateDisplayType = + .system = Builtin + .item = Item + .text = Text + .unknown = ? editor-resizeImage-title = Resmi Boyutlandır editor-resizeImage-prompt = Resmi Şuna Boyutlandır: diff --git a/addon/locale/zh-CN/addon.ftl b/addon/locale/zh-CN/addon.ftl index dd2ee95..186273a 100644 --- a/addon/locale/zh-CN/addon.ftl +++ b/addon/locale/zh-CN/addon.ftl @@ -18,7 +18,22 @@ menuEditor-resizeImage=缩放图片 menuHelp-openUserGuide = 打开Better Notes用户指南 -templateEditor-templateName = 模板名称 +templateEditor-templateType = 类型 +templateEditor-templateName = 名称 + +templateEditor-templateDisplayName = + .QuickInsertV2 = Quick Insert (插入链接) + .QuickImportV2 = Quick Import (嵌入链接笔记) + .QuickNoteV5 = Quick Note (从批注创建笔记) + .ExportMDFileNameV2 = Export MD File Name (导出MD文件名) + .ExportMDFileHeaderV2 = Export MD File Header (导出MD头) + .ExportMDFileContent = Export MD File Content (导出MD正文) + +templateEditor-templateDisplayType = + .system = Builtin + .item = Item + .text = Text + .unknown = ? editor-resizeImage-title = 缩放图片 editor-resizeImage-prompt = 缩放图片宽度为： diff --git a/src/modules/template/data.ts b/src/modules/template/data.ts index ee3d456..0c6f167 100644 --- a/src/modules/template/data.ts +++ b/src/modules/template/data.ts @@ -3,7 +3,6 @@ export { SYSTEM_TEMPLATE_NAMES, DEFAULT_TEMPLATES }; const SYSTEM_TEMPLATE_NAMES = [ "[QuickInsertV2]", - "[QuickBackLinkV2]", "[QuickImportV2]", "[QuickNoteV5]", "[ExportMDFileNameV2]", @@ -19,15 +18,6 @@ const DEFAULT_TEMPLATES = [ \${linkText} -

`, - }, - { - name: "[QuickBackLinkV2]", - text: `

- Referred in - - \${linkText} -

`, }, { diff --git a/src/modules/template/editorWindow.ts b/src/modules/template/editorWindow.ts index 046ba6b..7dbe365 100644 --- a/src/modules/template/editorWindow.ts +++ b/src/modules/template/editorWindow.ts @@ -32,6 +32,12 @@ export async function showTemplateEditor() { // Do not use setLocale, as it modifies the Zotero.Intl.strings // Set locales directly to columns columns: [ + { + dataKey: "type", + label: "templateEditor-templateType", + width: 60, + fixedWidth: true, + }, { dataKey: "name", label: "templateEditor-templateName", @@ -48,9 +54,7 @@ export async function showTemplateEditor() { disableFontSizeScaling: true, }) .setProp("getRowCount", () => addon.data.template.editor.templates.length) - .setProp("getRowData", (index) => ({ - name: addon.data.template.editor.templates[index] || "no data", - })) + .setProp("getRowData", getRowData) .setProp("onSelectionChange", (selection) => { updateEditor(); updatePreview(); @@ -70,6 +74,40 @@ export async function showTemplateEditor() { "getRowString", (index) => addon.data.template.editor.templates[index] || "", ) + .setProp("renderItem", (index, selection, oldElem, columns) => { + let div; + if (oldElem) { + div = oldElem; + div.innerHTML = ""; + } else { + div = document.createElement("div"); + div.className = "row"; + } + + div.classList.toggle("selected", selection.isSelected(index)); + div.classList.toggle("focused", selection.focused == index); + const rowData = getRowData(index); + + for (const column of columns) { + const span = document.createElement("span"); + // @ts-ignore + span.className = `cell ${column?.className}`; + const cellData = rowData[column.dataKey as keyof typeof rowData]; + span.textContent = cellData; + if (column.dataKey === "type") { + span.style.backgroundColor = getRowLabelColor(cellData); + span.style.borderRadius = "4px"; + span.style.paddingInline = "4px"; + span.style.textAlign = "center"; + span.textContent = getString( + "templateEditor-templateDisplayType", + cellData, + ); + } + div.append(span); + } + return div; + }) .render(); _window.document .querySelector("#create") @@ -145,6 +183,43 @@ async function refresh() { await updatePreview(); } +function getRowData(index: number) { + const rowData = addon.data.template.editor.templates[index]; + let templateType = "unknown"; + let templateDisplayName = rowData; + if (addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(rowData)) { + templateType = "system"; + templateDisplayName = getString( + "templateEditor-templateDisplayName", + // Exclude the first and last character, which are '[' and ']' + rowData.slice(1, -1), + ); + } else if (rowData.toLowerCase().startsWith("[item]")) { + templateType = "item"; + templateDisplayName = rowData.slice(6); + } else if (rowData.toLowerCase().startsWith("[text]")) { + templateType = "text"; + templateDisplayName = rowData.slice(6); + } + return { + name: templateDisplayName, + type: templateType, + }; +} + +function getRowLabelColor(type: string) { + switch (type) { + case "system": + return "var(--accent-yellow)"; + case "item": + return "var(--accent-green)"; + case "text": + return "var(--accent-azure)"; + default: + return "var(--accent-red)"; + } +} + function updateData() { addon.data.template.editor.templates = addon.api.template.getTemplateKeys(); } diff --git a/src/utils/locale.ts b/src/utils/locale.ts index b3c7c92..3165ec3 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -83,7 +83,13 @@ function _getString( return localStringWithPrefix; } if (branch && pattern.attributes) { - return pattern.attributes[branch] || localStringWithPrefix; + return ( + pattern.attributes[branch] || + pattern.attributes.find( + (attr: { name: string; value: string }) => attr.name === branch, + )?.value || + localStringWithPrefix + ); } else { return pattern.value || localStringWithPrefix; }