selfhosted
/
padloc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow drag & drop for attachments 

Enables adding an attachment to an item via drag & drop. An item needs to be selected/visible.

Works for electron, but not for Tauri (#386).

Fixes #379
This commit is contained in:
Bruno Bernardino 2022-02-25 15:21:58 +00:00
parent 22e82a9a7a
commit 7d7ec5b36a
No known key found for this signature in database
GPG Key ID: D1B0A69ADD114ECE
2 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -33,6 +33,7 @@
"pwa:start": "lerna run start --scope @padloc/pwa",
"server:start": "lerna run start --scope @padloc/server --stream",
"server:start-dry": "lerna run start-dry --stream --scope @padloc/server",
"electron:start": "lerna run start --scope @padloc/electron",
"electron:build": "lerna run build --scope @padloc/electron",
"web-extension:build": "lerna run build --scope @padloc/extension",
"cordova:start:android": "lerna run start:android",

71
packages/app/src/elements/item-view.ts
View File

@ -65,6 +65,9 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
@state()
private _fields: Field[] = [];
@state()
private _isDraggingFileToAttach: boolean = false;
@query("#nameInput")
private _nameInput: Input;
@ -234,6 +237,11 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
padding-bottom: calc(var(--inset-bottom) + 0.5em);
}
}
.dropzone {
border: dashed 2px var(--color-highlight);
border-radius: var(--scrollbar-width, 0.8em);
}
`,
];
@ -256,7 +264,12 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
const isFavorite = app.account!.favorites.has(this.itemId);
return html`
<div class="fullbleed vertical layout">
<div
class="fullbleed vertical layout"
@drop=${this.handleDrop}
@dragover=${this.handleDragOver}
@dragleave=${this.handleDragLeave}
>
<header class="animated padded center-aligning horizontal layout">
<pl-button
class="transparent slim back-button"
@ -358,7 +371,13 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
</header>
<pl-scroller class="stretch">
<div class="vertical layout fill-vertically content">
<div
class="fullbleed centering double-padded text-centering vertical layout subtle dropzone"
?hidden=${!this._isDraggingFileToAttach}
>
Drop file to attach to item.
</div>
<div class="vertical layout fill-vertically content" ?hidden=${this._isDraggingFileToAttach}>
<pl-tags-input
.editing=${this._editing}
.vault=${this._vault}
@ -556,9 +575,7 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
}
}
private async _attachFile() {
const file = this._fileInput.files![0];
this._fileInput.value = "";
private async _addFileAttachment(file: File) {
if (!file) {
return;
}
@ -577,6 +594,12 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
}
}
private async _attachFile() {
const file = this._fileInput.files![0];
this._fileInput.value = "";
this._addFileAttachment(file);
}
private async _openAttachment(info: AttachmentInfo) {
if (this._editing) {
return;
@ -619,6 +642,44 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
}
}
private async handleDrop(event: DragEvent) {
event.preventDefault();
this._isDraggingFileToAttach = true;
if (event.dataTransfer?.items) {
for (const transferItem of event.dataTransfer.items) {
// Only handle files
if (transferItem.kind === "file") {
const transferFile = transferItem.getAsFile();
if (transferFile) {
await this._addFileAttachment(transferFile);
}
}
}
} else if (event.dataTransfer?.files) {
for (const transferFile of event.dataTransfer.files) {
await this._addFileAttachment(transferFile);
}
}
this._isDraggingFileToAttach = false;
}
private async handleDragOver(event: DragEvent) {
event.preventDefault();
this._isDraggingFileToAttach = true;
}
private async handleDragLeave(event: DragEvent) {
event.preventDefault();
// Only cancel when it's leaving to a different element, since this fires while dragging inside the same element
// @ts-ignore event.relatedTarget.classList exists
if (!event.relatedTarget || !event.relatedTarget?.classList.contains("dropzone")) {
this._isDraggingFileToAttach = false;
}
}
private _drop(e: DragEvent) {
// console.log("drop", e, this._draggingIndex, this._dragOverIndex);
e.preventDefault();