Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

chore(react/note_title): bring back styles

Browse Source
This commit is contained in:
Elian Doran
2025-08-21 10:34:30 +03:00
parent ca40360f7d
commit 9a4fdcaef2
3 changed files with 41 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/client/src/widgets/note_title.bak
View File

@@ -9,36 +9,6 @@ import shortcutService from "../services/shortcuts.js";
import utils from "../services/utils.js";
import type FNote from "../entities/fnote.js";
const TPL = /*html*/`
<div class="note-title-widget">
<style>
.note-title-widget {
flex-grow: 1000;
height: 100%;
}
.note-title-widget input.note-title {
font-size: 110%;
border: 0;
margin: 2px 0px;
min-width: 5em;
width: 100%;
}
body.mobile .note-title-widget input.note-title {
padding: 0;
}
body.desktop .note-title-widget input.note-title {
font-size: 180%;
}
.note-title-widget input.note-title.protected {
text-shadow: 4px 4px 4px var(--muted-text-color);
}
</style>
</div>`;
export default class NoteTitleWidget extends NoteContextAwareWidget {
private $noteTitle!: JQuery<HTMLElement>;
@@ -48,10 +18,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
constructor() {
super();
this.spacedUpdate = new SpacedUpdate(async () => {
});
this.deleteNoteOnEscape = false;
appContext.addBeforeUnloadListener(this);
@@ -92,10 +58,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
this.setProtectedStatus(note);
}
setProtectedStatus(note: FNote) {
this.$noteTitle.toggleClass("protected", !!note.isProtected);
}
async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
if (this.isNoteContext(noteContext.ntxId)) {
await this.spacedUpdate.updateNowIfNecessary();
@@ -122,17 +84,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
}
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isNoteReloaded(this.noteId) && this.note) {
// not updating the title specifically since the synced title might be older than what the user is currently typing
this.setProtectedStatus(this.note);
}
if (loadResults.isNoteReloaded(this.noteId, this.componentId)) {
this.refresh();
}
}
beforeUnloadEvent() {
return this.spacedUpdate.isAllSavedAndTriggerUpdate();
}

24
apps/client/src/widgets/note_title.css Normal file
View File

@@ -0,0 +1,24 @@
.note-title-widget {
flex-grow: 1000;
height: 100%;
}
.note-title-widget input.note-title {
font-size: 110%;
border: 0;
margin: 2px 0px;
min-width: 5em;
width: 100%;
}
.note-title-widget input.note-title.protected {
text-shadow: 4px 4px 4px var(--muted-text-color);
}
body.mobile .note-title-widget input.note-title {
padding: 0;
}
body.desktop .note-title-widget input.note-title {
font-size: 180%;
}

22
apps/client/src/widgets/note_title.tsx
View File

@@ -1,14 +1,17 @@
import { useEffect, useRef, useState } from "preact/hooks";
import { t } from "../services/i18n";
import FormTextBox from "./react/FormTextBox";
import { useNoteContext, useSpacedUpdate } from "./react/hooks";
import { useNoteContext, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks";
import protected_session_holder from "../services/protected_session_holder";
import server from "../services/server";
import "./note_title.css";
export default function NoteTitleWidget() {
const { note, noteId, componentId } = useNoteContext();
const [ title, setTitle ] = useState(note?.title);
useEffect(() => setTitle(note?.title), [ note?.title ]);
const [ isProtected, setProtected ] = useState(note?.isProtected);
useEffect(() => setTitle(note?.title), [ note?.noteId ]);
useEffect(() => setProtected(note?.isProtected), [ note?.isProtected ]);
const spacedUpdate = useSpacedUpdate(async () => {
if (!note) {
@@ -18,19 +21,28 @@ export default function NoteTitleWidget() {
await server.put<void>(`notes/${noteId}/title`, { title: title }, componentId);
});
useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
if (loadResults.isNoteReloaded(noteId) && note) {
setProtected(note.isProtected);
}
if (loadResults.isNoteReloaded(noteId, componentId)) {
setTitle(note?.title);
}
});
return (
<>
<div className="note-title-widget">
<FormTextBox
autocomplete="off"
currentValue={title}
placeholder={t("note_title.placeholder")}
className="note-title"
className={`note-title ${isProtected ? "protected" : ""}`}
tabIndex={100}
onChange={(newValue) => {
setTitle(newValue);
spacedUpdate.scheduleUpdate();
}}
/>
</>
</div>
);
}