gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-30 04:24:24 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

style: disable text selection in UI

Browse Source
This commit is contained in:
Adorian Doran 2025-11-29 18:50:16 +02:00
parent a716151dd9
commit 3378746530
11 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/stylesheets/theme-next/base.css
View File

@ -99,6 +99,14 @@
--tree-item-dark-theme-min-color-lightness: 65; --tree-item-dark-theme-min-color-lightness: 65;
} }
body {
user-select: none;
}
.selectable-text {
user-select: text;
}
body.backdrop-effects-disabled { body.backdrop-effects-disabled {
/* Backdrop effects are disabled, replace the menu background color with the /* Backdrop effects are disabled, replace the menu background color with the
* no-backdrop fallback color */ * no-backdrop fallback color */

16
apps/client/src/widgets/dialogs/about.tsx
View File

@ -31,29 +31,29 @@ export default function AboutDialog() {
<tbody> <tbody>
<tr> <tr>
<th>{t("about.homepage")}</th> <th>{t("about.homepage")}</th>
<td><a className="tn-link external" href="https://github.com/TriliumNext/Trilium" style={forceWordBreak}>https://github.com/TriliumNext/Trilium</a></td> <td className="selectable-text"><a className="tn-link external" href="https://github.com/TriliumNext/Trilium" style={forceWordBreak}>https://github.com/TriliumNext/Trilium</a></td>
</tr> </tr>
<tr> <tr>
<th>{t("about.app_version")}</th> <th>{t("about.app_version")}</th>
<td className="app-version">{appInfo?.appVersion}</td> <td className="app-version selectable-text">{appInfo?.appVersion}</td>
</tr> </tr>
<tr> <tr>
<th>{t("about.db_version")}</th> <th>{t("about.db_version")}</th>
<td className="db-version">{appInfo?.dbVersion}</td> <td className="db-version selectable-text">{appInfo?.dbVersion}</td>
</tr> </tr>
<tr> <tr>
<th>{t("about.sync_version")}</th> <th>{t("about.sync_version")}</th>
<td className="sync-version">{appInfo?.syncVersion}</td> <td className="sync-version selectable-text">{appInfo?.syncVersion}</td>
</tr> </tr>
<tr> <tr>
<th>{t("about.build_date")}</th> <th>{t("about.build_date")}</th>
<td className="build-date"> <td className="build-date selectable-text">
{appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""} {appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""}
</td> </td>
</tr> </tr>
<tr> <tr>
<th>{t("about.build_revision")}</th> <th>{t("about.build_revision")}</th>
<td> <td className="selectable-text">
{appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>} {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
</td> </td>
</tr> </tr>
@ -76,8 +76,8 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
openService.openDirectory(directory); openService.openDirectory(directory);
}; };
return <a className="tn-link" href="#" onClick={onClick} style={style}>{directory}</a> return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>
} else { } else {
return <span style={style}>{directory}</span>; return <span className="selectable-text" style={style}>{directory}</span>;
} }
} }

2
apps/client/src/widgets/dialogs/revisions.tsx
View File

@ -208,7 +208,7 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
} }
</div>)} </div>)}
</div> </div>
<div className="revision-content use-tn-links" style={{ overflow: "auto", wordBreak: "break-word" }}> <div className="revision-content use-tn-links selectable-text" style={{ overflow: "auto", wordBreak: "break-word" }}>
<RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/> <RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/>
</div> </div>
</> </>

20
apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
View File

@ -17,24 +17,24 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
return ( return (
<div className="file-properties-widget"> <div className="file-properties-widget">
{note && ( {note && (
<table class="file-table"> <table className="file-table">
<tbody> <tbody>
<tr> <tr>
<th class="text-nowrap">{t("file_properties.note_id")}:</th> <th className="text-nowrap">{t("file_properties.note_id")}:</th>
<td class="file-note-id">{note.noteId}</td> <td className="file-note-id selectable-text">{note.noteId}</td>
<th class="text-nowrap">{t("file_properties.original_file_name")}:</th> <th className="text-nowrap">{t("file_properties.original_file_name")}:</th>
<td class="file-filename">{originalFileName ?? "?"}</td> <td className="file-filename selectable-text">{originalFileName ?? "?"}</td>
</tr> </tr>
<tr> <tr>
<th class="text-nowrap">{t("file_properties.file_type")}:</th> <th className="text-nowrap">{t("file_properties.file_type")}:</th>
<td class="file-filetype">{note.mime}</td> <td className="file-filetype selectable-text">{note.mime}</td>
<th class="text-nowrap">{t("file_properties.file_size")}:</th> <th className="text-nowrap">{t("file_properties.file_size")}:</th>
<td class="file-filesize">{formatSize(blob?.contentLength ?? 0)}</td> <td className="file-filesize selectable-text">{formatSize(blob?.contentLength ?? 0)}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={4}> <td colSpan={4}>
<div class="file-buttons"> <div className="file-buttons">
<Button <Button
icon="bx bx-download" icon="bx bx-download"
text={t("file_properties.download")} text={t("file_properties.download")}

6
apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
View File

@ -23,17 +23,17 @@ export default function ImagePropertiesTab({ note, ntxId }: TabContext) {
<div style={{ display: "flex", justifyContent: "space-evenly", margin: "10px" }}> <div style={{ display: "flex", justifyContent: "space-evenly", margin: "10px" }}>
<span> <span>
<strong>{t("image_properties.original_file_name")}:</strong>{" "} <strong>{t("image_properties.original_file_name")}:</strong>{" "}
<span>{originalFileName ?? "?"}</span> <span className="selectable-text">{originalFileName ?? "?"}</span>
</span> </span>
<span> <span>
<strong>{t("image_properties.file_type")}:</strong>{" "} <strong>{t("image_properties.file_type")}:</strong>{" "}
<span>{note.mime}</span> <span className="selectable-text">{note.mime}</span>
</span> </span>
<span> <span>
<strong>{t("image_properties.file_size")}:</strong>{" "} <strong>{t("image_properties.file_size")}:</strong>{" "}
<span>{formatSize(blob?.contentLength)}</span> <span className="selectable-text">{formatSize(blob?.contentLength)}</span>
</span> </span>
</div> </div>

2
apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
View File

@ -37,7 +37,7 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
return ( return (
<div className="inherited-attributes-widget"> <div className="inherited-attributes-widget">
<div className="inherited-attributes-container"> <div className="inherited-attributes-container selectable-text">
{inheritedAttributes?.length ? ( {inheritedAttributes?.length ? (
joinElements(inheritedAttributes.map(attribute => ( joinElements(inheritedAttributes.map(attribute => (
<InheritedAttribute <InheritedAttribute

10
apps/client/src/widgets/ribbon/NoteInfoTab.tsx
View File

@ -39,21 +39,21 @@ export default function NoteInfoTab({ note }: TabContext) {
<> <>
<div className="note-info-item"> <div className="note-info-item">
<span>{t("note_info_widget.note_id")}:</span> <span>{t("note_info_widget.note_id")}:</span>
<span className="note-info-id">{note.noteId}</span> <span className="note-info-id selectable-text">{note.noteId}</span>
</div> </div>
<div className="note-info-item"> <div className="note-info-item">
<span>{t("note_info_widget.created")}:</span> <span>{t("note_info_widget.created")}:</span>
<span>{formatDateTime(metadata?.dateCreated)}</span> <span className="selectable-text">{formatDateTime(metadata?.dateCreated)}</span>
</div> </div>
<div className="note-info-item"> <div className="note-info-item">
<span>{t("note_info_widget.modified")}:</span> <span>{t("note_info_widget.modified")}:</span>
<span>{formatDateTime(metadata?.dateModified)}</span> <span className="selectable-text">{formatDateTime(metadata?.dateModified)}</span>
</div> </div>
<div className="note-info-item"> <div className="note-info-item">
<span>{t("note_info_widget.type")}:</span> <span>{t("note_info_widget.type")}:</span>
<span> <span>
<span className="note-info-type">{note.type}</span>{' '} <span className="note-info-type">{note.type}</span>{' '}
{note.mime && <span className="note-info-mime">({note.mime})</span>} {note.mime && <span className="note-info-mime selectable-text">({note.mime})</span>}
</span> </span>
</div> </div>
<div className="note-info-item"> <div className="note-info-item">
@ -77,7 +77,7 @@ export default function NoteInfoTab({ note }: TabContext) {
/> />
)} )}
<span className="note-sizes-wrapper"> <span className="note-sizes-wrapper selectable-text">
<span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span> <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "} {" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 && {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&

1
apps/client/src/widgets/type_widgets/Doc.css
View File

@ -1,5 +1,6 @@
.note-detail-doc-content { .note-detail-doc-content {
padding: 15px; padding: 15px;
user-select: text;
} }
.note-detail-doc-content pre { .note-detail-doc-content pre {

2
apps/client/src/widgets/type_widgets/options/backup.tsx
View File

@ -104,7 +104,7 @@ export function BackupList({ backups }: { backups: DatabaseBackup[] }) {
backups.map(({ mtime, filePath }) => ( backups.map(({ mtime, filePath }) => (
<tr> <tr>
<td>{mtime ? formatDateTime(mtime) : "-"}</td> <td>{mtime ? formatDateTime(mtime) : "-"}</td>
<td>{filePath}</td> <td className="selectable-text">{filePath}</td>
</tr> </tr>
)) ))
) : ( ) : (

2
apps/client/src/widgets/type_widgets/options/text_notes.tsx
View File

@ -226,7 +226,7 @@ function CodeBlockPreview({ theme, wordWrap }: { theme: string, wordWrap: boolea
return ( return (
<div className="note-detail-readonly-text-content ck-content code-sample-wrapper"> <div className="note-detail-readonly-text-content ck-content code-sample-wrapper">
<pre className="hljs" style={{ marginBottom: 0 }}> <pre className="hljs selectable-text" style={{ marginBottom: 0 }}>
<code className="code-sample" style={codeStyle} dangerouslySetInnerHTML={getHtml(code)} /> <code className="code-sample" style={codeStyle} dangerouslySetInnerHTML={getHtml(code)} />
</pre> </pre>
</div> </div>

2
apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
View File

@ -55,7 +55,7 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
<> <>
<RawHtmlBlock <RawHtmlBlock
containerRef={contentRef} containerRef={contentRef}
className={clsx("note-detail-readonly-text-content ck-content use-tn-links", codeBlockWordWrap && "word-wrap")} className={clsx("note-detail-readonly-text-content ck-content use-tn-links selectable-text", codeBlockWordWrap && "word-wrap")}
tabindex={100} tabindex={100}
dir={isRtl ? "rtl" : "ltr"} dir={isRtl ? "rtl" : "ltr"}
html={blob?.content} html={blob?.content}