gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-06 14:44:25 +01:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(status_bar): code popup not displaying tooltips

Browse Source
This commit is contained in:
Elian Doran 2025-12-24 12:59:13 +02:00
parent 1d6766d9f3
commit e476a2d306
No known key found for this signature in database
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/react/FormCheckbox.tsx
View File

@ -27,11 +27,11 @@ export default function FormCheckbox({ name, disabled, label, currentValue, onCh
const tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, { const tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, {
html: true, html: true,
template: '<div class="tooltip tooltip-top" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' customClass: "tooltip-top"
}); });
return () => tooltipInstance?.dispose(); return () => tooltipInstance?.dispose();
}, [hint]); // Proper dependency }, [hint]);
const labelStyle = useMemo(() => const labelStyle = useMemo(() =>
hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined, hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined,

31
apps/client/src/widgets/type_widgets/options/code_notes.tsx
View File

@ -1,21 +1,23 @@
import "./code_notes.css";
import CodeMirror, { ColorThemes, getThemeById } from "@triliumnext/codemirror"; import CodeMirror, { ColorThemes, getThemeById } from "@triliumnext/codemirror";
import { default as codeNoteMimeTypes } from "@triliumnext/codemirror/src/syntax_highlighting";
import { MimeType } from "@triliumnext/commons";
import { byMimeType as codeBlockMimeTypes } from "@triliumnext/highlightjs/src/syntax_highlighting";
import { useEffect, useMemo, useRef } from "preact/hooks";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import mime_types from "../../../services/mime_types";
import Column from "../../react/Column"; import Column from "../../react/Column";
import FormCheckbox from "../../react/FormCheckbox"; import FormCheckbox from "../../react/FormCheckbox";
import FormGroup from "../../react/FormGroup"; import FormGroup from "../../react/FormGroup";
import FormSelect from "../../react/FormSelect"; import FormSelect from "../../react/FormSelect";
import { useStaticTooltip, useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks"; import { useStaticTooltip, useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
import OptionsSection from "./components/OptionsSection";
import { useEffect, useMemo, useRef } from "preact/hooks";
import codeNoteSample from "./samples/code_note.txt?raw";
import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants"; import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
import { MimeType } from "@triliumnext/commons";
import mime_types from "../../../services/mime_types";
import CheckboxList from "./components/CheckboxList";
import AutoReadOnlySize from "./components/AutoReadOnlySize"; import AutoReadOnlySize from "./components/AutoReadOnlySize";
import "./code_notes.css"; import CheckboxList from "./components/CheckboxList";
import { byMimeType as codeBlockMimeTypes } from "@triliumnext/highlightjs/src/syntax_highlighting"; import OptionsSection from "./components/OptionsSection";
import { default as codeNoteMimeTypes } from "@triliumnext/codemirror/src/syntax_highlighting"; import codeNoteSample from "./samples/code_note.txt?raw";
const SAMPLE_MIME = "application/typescript"; const SAMPLE_MIME = "application/typescript";
@ -27,7 +29,7 @@ export default function CodeNoteSettings() {
<CodeMimeTypes /> <CodeMimeTypes />
<AutoReadOnlySize option="autoReadonlySizeCode" label={t("code_auto_read_only_size.label")} /> <AutoReadOnlySize option="autoReadonlySizeCode" label={t("code_auto_read_only_size.label")} />
</> </>
) );
} }
function Editor() { function Editor() {
@ -42,7 +44,7 @@ function Editor() {
/> />
</FormGroup> </FormGroup>
</OptionsSection> </OptionsSection>
) );
} }
function Appearance() { function Appearance() {
@ -51,7 +53,7 @@ function Appearance() {
const themes = useMemo(() => { const themes = useMemo(() => {
return ColorThemes.map(({ id, name }) => ({ return ColorThemes.map(({ id, name }) => ({
id: "default:" + id, id: `default:${id}`,
name name
})); }));
}, []); }, []);
@ -130,7 +132,7 @@ function CodeMimeTypes() {
<OptionsSection title={t("code_mime_types.title")}> <OptionsSection title={t("code_mime_types.title")}>
<CodeMimeTypesList /> <CodeMimeTypesList />
</OptionsSection> </OptionsSection>
) );
} }
type MimeTypeWithDisabled = MimeType & { disabled?: boolean }; type MimeTypeWithDisabled = MimeType & { disabled?: boolean };
@ -152,8 +154,9 @@ export function CodeMimeTypesList() {
`; `;
}, },
selector: "label", selector: "label",
customClass: "tooltip-top",
placement: "left", placement: "left",
fallbackPlacements: [ "left" ], fallbackPlacements: [ "left", "right" ],
animation: false, animation: false,
html: true html: true
}); });