File-handling clipboard styling

packages/file-handling/src/dbp-file-handling-clipboard.js

+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
+        `;
+    }
+}

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>

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>

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": {