feat(react/ribbon): port note properties

This commit is contained in:
Elian Doran 2025-08-22 17:41:45 +03:00
parent cee4714665
commit 70728c274e
No known key found for this signature in database
3 changed files with 25 additions and 55 deletions

View File

@ -0,0 +1,20 @@
import { t } from "../../services/i18n";
import { useNoteLabel } from "../react/hooks";
import { TabContext } from "./ribbon-interface";
/**
* TODO: figure out better name or conceptualize better.
*/
export default function NotePropertiesTab({ note }: TabContext) {
const [ pageUrl ] = useNoteLabel(note, "pageUrl");
return (
<div className="note-properties-widget" style={{ padding: "12px", color: "var(--muted-text-color)" }}>
{ pageUrl && (
<div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
{t("note_properties.this_note_was_originally_taken_from")} <a href={pageUrl} class="page-url external">{pageUrl}</a>
</div>
)}
</div>
)
}

View File

@ -12,6 +12,7 @@ import { CommandNames } from "../../components/app_context";
import FNote from "../../entities/fnote";
import ScriptTab from "./ScriptTab";
import EditedNotesTab from "./EditedNotesTab";
import NotePropertiesTab from "./NotePropertiesTab";
interface TitleContext {
note: FNote | null | undefined;
@ -67,9 +68,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
icon: "bx bx-book"
},
{
// NotePropertiesWidget
title: t("note_properties.info"),
icon: "bx bx-info-square"
icon: "bx bx-info-square",
content: NotePropertiesTab,
show: ({ note }) => !!note?.getLabelValue("pageUrl"),
activate: true
},
{
// FilePropertiesWidget

View File

@ -1,53 +0,0 @@
import type FNote from "../../entities/fnote.js";
import { t } from "../../services/i18n.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = /*html*/`
<div class="note-properties-widget">
<style>
.note-properties-widget {
padding: 12px;
color: var(--muted-text-color);
}
</style>
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
${t("note_properties.this_note_was_originally_taken_from")} <a class="page-url external"></a>
</div>
</div>`;
/**
* TODO: figure out better name or conceptualize better.
*/
export default class NotePropertiesWidget extends NoteContextAwareWidget {
private $pageUrl!: JQuery<HTMLElement>;
isEnabled() {
return this.note && !!this.note.getLabelValue("pageUrl");
}
getTitle() {
return {
show: this.isEnabled(),
activate: true,
};
}
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$pageUrl = this.$widget.find(".page-url");
}
async refreshWithNote(note: FNote) {
const pageUrl = note.getLabelValue("pageUrl");
this.$pageUrl
.attr("href", pageUrl)
.attr("title", pageUrl)
.text(pageUrl ?? "");
}
}