Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-14 17:25:52 +01:00
Code Issues Packages Projects Releases Activity

chore(react/type_widget): start porting attachment actions

Browse Source
This commit is contained in:
Elian Doran
2025-09-21 11:06:20 +03:00
parent ae1954c320
commit b7574b3ca7
3 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/client/src/widgets/buttons/attachments_actions.ts
View File

@@ -13,40 +13,8 @@ import type AttachmentDetailWidget from "../attachment_detail.js";
import type { NoteRow } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="dropdown attachment-actions">
<style>
.attachment-actions {
width: 35px;
height: 35px;
}
.attachment-actions .dropdown-menu {
width: 20em;
}
.attachment-actions .dropdown-item .bx {
position: relative;
top: 3px;
font-size: 120%;
margin-right: 5px;
}
.attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
color: var(--muted-text-color) !important;
background-color: transparent !important;
pointer-events: none; /* makes it unclickable */
}
</style>
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="icon-action icon-action-always-border bx bx-dots-vertical-rounded"
style="position: relative; top: 3px;"></button>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right">
<li data-trigger-command="openAttachment" class="dropdown-item"
title="${t("attachments_actions.open_externally_title")}"><span class="bx bx-file-find"></span> ${t("attachments_actions.open_externally")}</li>
<li data-trigger-command="openAttachmentCustom" class="dropdown-item"
title="${t("attachments_actions.open_custom_title")}"><span class="bx bx-customize"></span> ${t("attachments_actions.open_custom")}</li>
@@ -56,10 +24,8 @@ const TPL = /*html*/`
<li data-trigger-command="copyAttachmentLinkToClipboard" class="dropdown-item"><span class="bx bx-link">
</span> ${t("attachments_actions.copy_link_to_clipboard")}</li>
<div class="dropdown-divider"></div>
<li data-trigger-command="uploadNewAttachmentRevision" class="dropdown-item"><span class="bx bx-upload">
</span> ${t("attachments_actions.upload_new_revision")}</li>
@@ -69,13 +35,10 @@ const TPL = /*html*/`
<li data-trigger-command="deleteAttachment" class="dropdown-item">
<span class="bx bx-trash destructive-action-icon"></span> ${t("attachments_actions.delete_attachment")}</li>
<div class="dropdown-divider"></div>
<li data-trigger-command="convertAttachmentIntoNote" class="dropdown-item"><span class="bx bx-note">
</span> ${t("attachments_actions.convert_attachment_into_note")}</li>
</div>
<input type="file" class="attachment-upload-new-revision-input" style="display: none">
@@ -137,10 +100,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
}
}
async openAttachmentCommand() {
await openService.openAttachmentExternally(this.attachmentId, this.attachment.mime);
}
async openAttachmentCustomCommand() {
await openService.openAttachmentCustom(this.attachmentId, this.attachment.mime);
}

29
apps/client/src/widgets/type_widgets/Attachment.css
View File

@@ -101,4 +101,33 @@
.attachment-detail .attachment-wrapper {
flex-grow: 1;
}
/* #endregion */
/* #region Attachment actions */
.attachment-actions {
width: 35px;
height: 35px;
}
.attachment-actions .select-button {
position: relative;
top: 3px;
}
.attachment-actions .dropdown-menu {
width: 20em;
}
.attachment-actions .dropdown-item .bx {
position: relative;
top: 3px;
font-size: 120%;
margin-right: 5px;
}
.attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
color: var(--muted-text-color) !important;
background-color: transparent !important;
pointer-events: none; /* makes it unclickable */
}
/* #endregion */

25
apps/client/src/widgets/type_widgets/Attachment.tsx
View File

@@ -12,6 +12,10 @@ import utils from "../../services/utils";
import content_renderer from "../../services/content_renderer";
import { useTriliumEvent } from "../react/hooks";
import froca from "../../services/froca";
import Dropdown from "../react/Dropdown";
import Icon from "../react/Icon";
import { FormListItem } from "../react/FormList";
import open from "../../services/open";
/**
* Displays the full list of attachments of a note and allows the user to interact with them.
@@ -126,7 +130,7 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
<div className="attachment-detail-widget">
<div className="attachment-detail-wrapper">
<div className="attachment-title-line">
<div className="attachment-actions-container"></div>
<AttachmentActions attachment={attachment} />
<h4 className="attachment-title">
{!isFullDetail ? (
<NoteLink
@@ -150,3 +154,22 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
</div>
)
}
function AttachmentActions({ attachment }: { attachment: FAttachment }) {
return (
<div className="attachment-actions-container">
<Dropdown
className="attachment-actions"
text={<Icon icon="bx bx-dots-vertical-rounded" />}
buttonClassName="icon-action-always-border"
iconAction
>
<FormListItem
icon="bx bx-file-find"
title={t("attachments_actions.open_externally_title")}
onClick={(e) => open.openAttachmentExternally(attachment.attachmentId, attachment.mime)}
>{t("attachments_actions.open_externally")}</FormListItem>
</Dropdown>
</div>
)
}