Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-12 20:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(client/ts): port note_icon

Browse Source
This commit is contained in:
Elian Doran 2025-01-18 01:14:47 +02:00
parent 043d92a1ab
commit 3db93cdf24
No known key found for this signature in database
2 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/entities/fnote.ts
View File

@ -515,10 +515,10 @@ class FNote {
}
/**
* @param [name] - label name to filter
* @param name - label name to filter
* @returns all note's labels (attributes with type label), including inherited ones
*/
getOwnedLabels(name: string) {
getOwnedLabels(name?: string) {
return this.getOwnedAttributes(LABEL, name);
}

54
src/public/app/widgets/note_icon.js → src/public/app/widgets/note_icon.ts
View File

@ -2,6 +2,8 @@ import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import attributeService from "../services/attributes.js";
import server from "../services/server.js";
import type FNote from "../entities/fnote.js";
import type { EventData } from "../components/app_context.js";
const TPL = `
<div class="note-icon-widget dropdown">
@ -79,7 +81,24 @@ const TPL = `
</div>
</div>`;
interface Icon {
className?: string;
name: string;
}
interface IconToCountCache {
iconClassToCountMap: Record<string, number>;
}
export default class NoteIconWidget extends NoteContextAwareWidget {
private $icon!: JQuery<HTMLElement>;
private $iconList!: JQuery<HTMLElement>;
private $iconCategory!: JQuery<HTMLElement>;
private $iconSearch!: JQuery<HTMLElement>;
private $notePathList!: JQuery<HTMLElement>;
private iconToCountCache!: Promise<IconToCountCache | null> | null;
doRender() {
this.$widget = $(TPL);
this.$icon = this.$widget.find("button.note-icon");
@ -87,7 +106,9 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
this.$iconList.on("click", "span", async (e) => {
const clazz = $(e.target).attr("class");
if (this.noteId && this.note) {
await attributeService.setLabel(this.noteId, this.note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass", clazz);
}
});
this.$iconCategory = this.$widget.find("select[name='icon-category']");
@ -113,18 +134,18 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
});
}
async refreshWithNote(note) {
async refreshWithNote(note: FNote) {
this.$icon.removeClass().addClass(`${note.getIcon()} note-icon`);
}
async entitiesReloadedEvent({ loadResults }) {
if (loadResults.isNoteReloaded(this.noteId)) {
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (this.noteId && loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
return;
}
for (const attr of loadResults.getAttributeRows()) {
if (attr.type === "label" && ["iconClass", "workspaceIconClass"].includes(attr.name) && attributeService.isAffecting(attr, this.note)) {
if (attr.type === "label" && ["iconClass", "workspaceIconClass"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note)) {
this.refresh();
break;
}
@ -141,14 +162,18 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
this.$iconList.append(
$(`<div style="text-align: center">`).append(
$(`<button class="btn btn-sm">${t("note_icon.reset-default")}</button>`).on("click", () =>
this.getIconLabels().forEach((label) => attributeService.removeAttributeById(this.noteId, label.attributeId))
this.getIconLabels().forEach((label) => {
if (this.noteId) {
attributeService.removeAttributeById(this.noteId, label.attributeId);
}
})
)
)
);
}
const categoryId = parseInt(this.$iconCategory.find("option:selected").val());
const search = this.$iconSearch.val().trim().toLowerCase();
const categoryId = parseInt(String(this.$iconCategory.find("option:selected")?.val()));
const search = String(this.$iconSearch.val())?.trim()?.toLowerCase();
const filteredIcons = icons.filter((icon) => {
if (categoryId && icon.category_id !== categoryId) {
@ -164,12 +189,14 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
return true;
});
if (iconToCount) {
filteredIcons.sort((a, b) => {
const countA = iconToCount[a.className] || 0;
const countB = iconToCount[b.className] || 0;
const countA = iconToCount[a.className ?? ""] || 0;
const countB = iconToCount[b.className ?? ""] || 0;
return countB - countA;
});
}
for (const icon of filteredIcons) {
this.$iconList.append(this.renderIcon(icon));
@ -180,20 +207,23 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
async getIconToCountMap() {
if (!this.iconToCountCache) {
this.iconToCountCache = server.get("other/icon-usage");
this.iconToCountCache = server.get<typeof this.iconToCountCache>("other/icon-usage");
setTimeout(() => (this.iconToCountCache = null), 20000); // invalidate cache after 20 seconds
}
return (await this.iconToCountCache).iconClassToCountMap;
return (await this.iconToCountCache)?.iconClassToCountMap;
}
renderIcon(icon) {
renderIcon(icon: Icon) {
return $("<span>")
.addClass("bx " + icon.className)
.attr("title", icon.name);
}
getIconLabels() {
if (!this.note) {
return [];
}
return this.note.getOwnedLabels().filter((label) => ["workspaceIconClass", "iconClass"].includes(label.name));
}
}