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;
}
body {
user-select: none;
}
.selectable-text {
user-select: text;
}
body.backdrop-effects-disabled {
/* Backdrop effects are disabled, replace the menu background color with the
* no-backdrop fallback color */

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

@ -31,29 +31,29 @@ export default function AboutDialog() {
<tbody>
<tr>
<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>
<th>{t("about.app_version")}</th>
<td className="app-version">{appInfo?.appVersion}</td>
<td className="app-version selectable-text">{appInfo?.appVersion}</td>
</tr>
<tr>
<th>{t("about.db_version")}</th>
<td className="db-version">{appInfo?.dbVersion}</td>
<td className="db-version selectable-text">{appInfo?.dbVersion}</td>
</tr>
<tr>
<th>{t("about.sync_version")}</th>
<td className="sync-version">{appInfo?.syncVersion}</td>
<td className="sync-version selectable-text">{appInfo?.syncVersion}</td>
</tr>
<tr>
<th>{t("about.build_date")}</th>
<td className="build-date">
<td className="build-date selectable-text">
{appInfo?.buildDate ? formatDateTime(appInfo.buildDate) : ""}
</td>
</tr>
<tr>
<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>}
</td>
</tr>
@ -76,8 +76,8 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
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 {
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 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}/>
</div>
</>

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

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

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

@ -37,7 +37,7 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
return (
<div className="inherited-attributes-widget">
<div className="inherited-attributes-container">
<div className="inherited-attributes-container selectable-text">
{inheritedAttributes?.length ? (
joinElements(inheritedAttributes.map(attribute => (
<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">
<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 className="note-info-item">
<span>{t("note_info_widget.created")}:</span>
<span>{formatDateTime(metadata?.dateCreated)}</span>
<span className="selectable-text">{formatDateTime(metadata?.dateCreated)}</span>
</div>
<div className="note-info-item">
<span>{t("note_info_widget.modified")}:</span>
<span>{formatDateTime(metadata?.dateModified)}</span>
<span className="selectable-text">{formatDateTime(metadata?.dateModified)}</span>
</div>
<div className="note-info-item">
<span>{t("note_info_widget.type")}:</span>
<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>
</div>
<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>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&

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

@ -1,5 +1,6 @@
.note-detail-doc-content {
padding: 15px;
user-select: text;
}
.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 }) => (
<tr>
<td>{mtime ? formatDateTime(mtime) : "-"}</td>
<td>{filePath}</td>
<td className="selectable-text">{filePath}</td>
</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 (
<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)} />
</pre>
</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
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}
dir={isRtl ? "rtl" : "ltr"}
html={blob?.content}