From f8e381086e2f1aff632610b578372c4d0a4b210d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 16 Mar 2021 15:03:05 +0100
Subject: [PATCH] Show clipboardfiles in filesink
---
packages/file-handling/src/file-sink.js | 82 ++++++++++++++++++-
packages/file-handling/src/file-source.js | 1 +
.../src/i18n/de/translation.json | 10 ++-
.../src/i18n/en/translation.json | 10 ++-
packages/file-handling/src/styles.js | 2 +-
5 files changed, 98 insertions(+), 7 deletions(-)
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 1993bd30..1c0bf555 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -11,6 +11,7 @@ import FileSaver from 'file-saver';
import MicroModal from "./micromodal.es";
import * as fileHandlingStyles from './styles';
import { send } from '@dbp-toolkit/common/notification';
+import {humanFileSize} from '@dbp-toolkit/common/i18next';
/**
@@ -36,6 +37,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
this.firstOpen = true;
this.initialFileHandlingState = {target: '', path: ''};
+ this.clipBoardFiles = {files: ''};
}
static get scopedElements() {
@@ -69,6 +71,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
nextcloudPath: {type: String, attribute: false},
initialFileHandlingState: {type: Object, attribute: 'initial-file-handling-state'},
+ clipBoardFiles: {type: Object, attribute: 'clipboard-files'},
};
}
@@ -221,7 +224,25 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.files.length !== 0) {
data = {"files": this.files};
this.sendSetPropertyEvent('clipboard-files', data);
+ this.closeDialog();
+ send({
+ "summary": i18n.t('file-sink.save-to-clipboard-title'),
+ "body": i18n.t('file-sink.save-to-clipboard-body', {count: this.files.length}),
+ "type": "success",
+ "timeout": 5,
+ });
+ console.log("--------------", this.clipBoardFiles);
}
+
+ }
+
+ getClipboardFiles() {
+ let files = [];
+ for(let i = 0; i < this.clipBoardFiles.files.length; i ++)
+ {
+ files[i] = html`<div class="clipboard-list"><strong>${this.clipBoardFiles.files[i].name}</strong> ${humanFileSize(this.clipBoardFiles.files[i].size)}</div>`;
+ }
+ return files;
}
closeDialog(e) {
@@ -250,6 +271,50 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
.block {
margin-bottom: 10px;
}
+
+ .warning-icon{
+ font-size: 2rem;
+ padding: 0 1rem;
+ }
+
+ .clipboard-btn{
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .warning-container{
+ display: flex;
+ max-width: 400px;
+ }
+
+ .clipboard-data h4{
+ margin-top: 2rem;
+ }
+
+ .clipboard-data p{
+ margin-bottom: 1rem;
+ }
+
+ .clipboard-list{
+ padding: 1rem 0;
+ border-top: 1px solid #eee;
+ }
+
+
+ @media only screen
+ and (orientation: portrait)
+ and (max-device-width: 765px) {
+ .clipboard-container p, .clipboard-container h3{
+ text-align: center;
+ }
+ .warning-container{
+ flex-direction: column;
+ align-items: center;
+ }
+ .warning-icon{
+ margin-bottom: 1rem;
+ }
+ }
`;
}
@@ -322,13 +387,22 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard"})}">
<div class="block clipboard-container">
- <h2>In Zwischenablage speicher</h2>
- <p>Hier können Sie Dateien temporär ablegen..<br><br></p>
- <button class="button is-primary"
+ <h3>${i18n.t('file-sink.save-to-clipboard-title')}</h3>
+ <p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
+ <button class="button is-primary clipboard-btn"
?disabled="${this.disabled}"
@click="${() => { this.saveFilesToClipboard(); }}">
- ${this.buttonLabel || "Ablegen"}
+ ${this.buttonLabel || i18n.t('file-sink.save-to-clipboard-btn', {count:this.files.length})}
</button>
+ <div class="warning-container">
+ <dbp-icon name="warning" class="warning-icon"></dbp-icon>
+ <p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
+ </div>
+ <div class="clipboard-data ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
+ <h4>Aktuell vorhandene Dateien im Clipboard</h4>
+ <p>Folgende Dateien werden überschrieben:</p>
+ ${this.getClipboardFiles()}
+ </div>
</div>
</div>
</main>
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 9634ee6d..ed7ccd1c 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -403,6 +403,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
}
getClipboardFiles() {
+ console.log("+++++++++++++++", this.clipBoardFiles);
let htmlpath = [];
htmlpath[0] = html`ein file und danach select button<br>`;
//console.log("############################", this.clipBoardFiles );
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index d6a874dd..0b3e9947 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -26,7 +26,15 @@
"nav-local": "Lokaler Computer",
"upload-success-title": "Erfolgreich hochgeladen",
"upload-success-body": "Sie haben {{count}} Datei erfolgreich in {{name}} hochgeladen.",
- "upload-success-body_plural": "Sie haben {{count}} Dateien erfolgreich in {{name}} hochgeladen."
+ "upload-success-body_plural": "Sie haben {{count}} Dateien erfolgreich in {{name}} hochgeladen.",
+ "save-to-clipboard-title": "Erfolgreich abgelegt",
+ "save-to-clipboard-body": "Sie haben {{count}} Datei im Clipboard temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+ "save-to-clipboard-body_plural": "Sie haben {{count}} Dateien im Clipboard temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+ "save-to-clipboard-btn": "{{count}} Datei ablegen",
+ "save-to-clipboard-btn_plural": "{{count}} Dateien ablegen",
+ "save-to-clipboard-title": "Dateien im Clipboard ablegen",
+ "save-to-clipboard-text": "Hier können Sie Dateien temporär ablegen.",
+ "save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird das Clipboard automatisch geleert!"
},
"nextcloud-file-picker": {
"open": "Nextcloud",
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index a5396952..28289180 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -26,7 +26,15 @@
"nav-local": "My device",
"upload-success-title": "Successful uploaded",
"upload-success-body": "You have successfully uploaded {{count}} file to {{name}}.",
- "upload-success-body_plural": "You have successfully uploaded {{count}} files to {{name}}."
+ "upload-success-body_plural": "You have successfully uploaded {{count}} files to {{name}}.",
+ "save-to-clipboard-title": "Cached successfully",
+ "save-to-clipboard-body": "You have temporarily stored {{count}} file in the clipboard. Don't forget to save it permanently.",
+ "save-to-clipboard-body_plural": "You have temporarily saved {{count}} files in the clipboard. Don't forget to save them permanently.",
+ "save-to-clipboard-btn": "{{count}} cache file",
+ "save-to-clipboard-btn_plural": "{{count}} cache files",
+ "save-to-clipboard-title": "Cache files in the clipboard ",
+ "save-to-clipboard-text": "Here you can cache files temporarily.",
+ "save-to-clipboard-warning": "Attention! When you close the browser, reload the page or add new files, the clipboard will automatically be emptied!"
},
"nextcloud-file-picker": {
"open": "Nextcloud",
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 723bf967..3ae37713 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -76,7 +76,7 @@ export function getFileHandlingCss() {
align-items: center;
flex-direction: column;
width: 100%;
- justify-content: center;
+ overflow-x: auto;
}
/**************************\\
--
GitLab