From 026eff9ec341bb371542a5be90327e881a908e27 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 6 Apr 2021 09:37:33 +0200
Subject: [PATCH] File-handling clipboard styling
---
.../src/dbp-file-handling-clipboard.js | 76 +++++++++++++++++++
packages/file-handling/src/file-sink.js | 38 +++++++++-
packages/file-handling/src/file-source.js | 7 +-
.../src/i18n/de/translation.json | 18 ++---
4 files changed, 128 insertions(+), 11 deletions(-)
create mode 100644 packages/file-handling/src/dbp-file-handling-clipboard.js
diff --git a/packages/file-handling/src/dbp-file-handling-clipboard.js b/packages/file-handling/src/dbp-file-handling-clipboard.js
new file mode 100644
index 00000000..7edac72e
--- /dev/null
+++ b/packages/file-handling/src/dbp-file-handling-clipboard.js
@@ -0,0 +1,76 @@
+import {i18n} from './i18n';
+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
+import {Icon, MiniSpinner} from '@dbp-toolkit/common';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import * as fileHandlingStyles from './styles';
+
+/**
+ * NextcloudFilePicker web component
+ */
+export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) {
+ constructor() {
+ super();
+ this.lang = 'de';
+ this.authUrl = '';
+ }
+
+ static get scopedElements() {
+ return {
+ 'dbp-icon': Icon,
+ 'dbp-mini-spinner': MiniSpinner,
+ };
+ }
+
+ /**
+ * See: https://lit-element.polymer-project.org/guide/properties#initialize
+ */
+ static get properties() {
+ return {
+ ...super.properties,
+ lang: { type: String },
+ authUrl: { type: String, attribute: 'auth-url' },
+ };
+
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ switch (propName) {
+ case "lang":
+ i18n.changeLanguage(this.lang);
+ break;
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ disconnectedCallback() {
+ }
+
+ connectedCallback() {
+ }
+
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getGeneralCSS()}
+ ${commonStyles.getButtonCSS()}
+ ${commonStyles.getTextUtilities()}
+ ${commonStyles.getModalDialogCSS()}
+ ${commonStyles.getRadioAndCheckboxCss()}
+ ${fileHandlingStyles.getFileHandlingCss()}
+
+ `;
+ }
+
+ render() {
+ return html`
+
+ HALLLOOOO
+ `;
+ }
+}
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 603b2bd1..b19b48ed 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -12,6 +12,7 @@ import MicroModal from "./micromodal.es";
import * as fileHandlingStyles from './styles';
import { send } from '@dbp-toolkit/common/notification';
import {humanFileSize} from '@dbp-toolkit/common/i18next';
+import * as utils from "../../../../../src/utils";
/**
@@ -252,6 +253,14 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
MicroModal.close(this._('#modal-picker'));
}
+ /**
+ * Open Filesink for multiple files
+ */
+ async openClipboardFileSink() {
+ this._("#file-sink-clipboard").files = this.clipBoardFiles.files;
+ this._("#file-sink-clipboard").setAttribute("dialog-open", "");
+ }
+
static get styles() {
// language=css
return css`
@@ -281,6 +290,10 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
padding: var(--FUPadding, 20px);
}
+ .clipboard-container.table{
+ justify-content: start;
+ }
+
.clipboard-container .inner{
overflow-y: auto;
text-align: center;
@@ -406,7 +419,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
}}"></dbp-nextcloud-file-picker>
</div>
<div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard" || isClipboardHidden})}">
- <div class="block clipboard-container">
+ <div class="block clipboard-container ${classMap({"table": this.clipBoardFiles && this.clipBoardFiles.files.length !== 0})}">
<div class="inner">
<h3>${i18n.t('file-sink.save-to-clipboard-title')}</h3>
<p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
@@ -419,6 +432,29 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
</div>
+
+ <!-- filesink for clipboard TODO übersetzen-->
+
+ <div clHALLLOOOOass="${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
+ <button id="clipboard-download-button"
+ class="button is-right clipboard-btn"
+ @click="${this.openClipboardFileSink}"
+ >Aktuellen Zwischenablageninhalt speichern</button>
+ </div>
+
+ <dbp-file-sink id="file-sink-clipboard"
+ context="${i18n.t('qualified-pdf-upload.save-field-label', {count: this.clipBoardFiles ? this.clipBoardFiles.files.length : 0})}"
+ filename="signed-documents.zip"
+ subscribe="initial-file-handling-state:initial-file-handling-state"
+ enabled-targets="local${this.showNextcloudFilePicker ? ",nextcloud" : ""}"
+ nextcloud-auth-url="${this.nextcloudWebAppPasswordURL}"
+ nextcloud-web-dav-url="${this.nextcloudWebDavURL}"
+ nextcloud-name="${this.nextcloudName}"
+ nextcloud-file-url="${this.nextcloudFileURL}"
+ lang="${this.lang}"
+ ></dbp-file-sink>
+
+
<div class="clipboard-data ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
<h4>${i18n.t('file-sink.clipboard-files')}</h4>
<p>${i18n.t('file-sink.clipboard-files-overwrite')}</p>
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 828eb685..5d2fd118 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -488,6 +488,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
if (this.enabledTargets.includes('clipboard')) {
this.generateClipboardTable();
+ this.showSelectAllButton = true;
}
const filePicker = this._('#modal-picker');
@@ -644,6 +645,10 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
flex-direction: column;
justify-content: center;
}
+
+ .clipboard-container .wrapper.table{
+ justify-content: start;
+ }
.clipboard-container .wrapper .inner{
overflow-y: auto;
@@ -754,7 +759,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="source-main ${classMap({"hidden": (this.activeTarget !== "clipboard" || isClipboardHidden)})}">
<div class="block clipboard-container">
- <div class="wrapper">
+ <div class="wrapper ${classMap({"table": this.clipboardFiles.files.length !== 0})}">
<div class="inner">
<h3>${i18n.t('file-source.clipboard-title')}</h3>
<p>${i18n.t('file-source.clipboard-body')}<br><br></p>
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index 6e9f9b3d..b59f1ecb 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -10,17 +10,17 @@
"intro": "Laden Sie mehrere Dateien mit dem Auswahldialog oder durch Ziehen und Fallenlassen in diesem Bereich hoch.",
"upload-label": "Dateiauswahl",
"upload-disabled-title": "Die Dateiauswahl ist während dem Hochladvorgang gesperrt!",
- "page-leaving-warn-dialogue": "Vorsicht! Es befinden sich noch ungenutzte Dateien im Clipboard. Wenn Sie auf 'OK' klicken, wird das bestehende Clipboard automatisch verworfen!",
+ "page-leaving-warn-dialogue": "Vorsicht! Es befinden sich noch ungenutzte Dateien in der Zwischenablage. Wenn Sie auf 'OK' klicken, wird die bestehende Zwischenablage automatisch verworfen!",
"file-source": {
"modal-select-files": "Dateien auswählen",
"modal-close": "Dialog schließen",
"nav-local": "Lokaler Computer",
"no-usable-files-in-zip": "ZIP Datei enthält keine verwendbaren Dateien",
"no-usable-files-hint": "Laden Sie eine ZIP Datei mit Dateien von folgendem Typ hoch: ",
- "clipboard-title": "Vom Clipboard auswählen",
- "clipboard-body": "Hier können Sie aus der zuvor temporär abgelegte Dateien auswählen.",
+ "clipboard-title": "Von der Zwischenablage auswählen",
+ "clipboard-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
"clipboard-select-btn": "Auswählen",
- "clipboard-no-files": "Aktuell befinden sich keine Dateien im Clipboard."
+ "clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage."
},
"file-sink": {
"local-intro": "{{count}} Datei herunterladen",
@@ -33,14 +33,14 @@
"upload-success-body": "Sie haben {{count}} Datei 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-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+ "save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage 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-title": "Dateien in der Zwischenablage 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 bestehende Clipboard automatisch verworfen!",
- "clipboard-files": "Aktuell vorhandene Dateien im Clipboard",
+ "save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
+ "clipboard-files": "Aktuell vorhandene Dateien in der Zwischenablage",
"clipboard-files-overwrite": "Folgende Dateien werden verworfen:"
},
"nextcloud-file-picker": {
--
GitLab