Basic styling for filehandling clipboard

packages/file-handling/src/dbp-nextcloud-file-picker.js

@@ -1022,7 +1022,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 display: inline-grid;
                 width: 100%;
                 grid-template-columns: auto auto;          
-            }
+            } <table id="directory-content-table" class="force-no-select"></table>
 
             .nextcloud-header div button{
                 justify-self: start;

packages/file-handling/src/file-sink.js

@@ -214,6 +214,11 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
         }
     }
 
+    saveFilesToClipboard()
+    {
+        //save it
+    }
+
     closeDialog(e) {
         this.sendDestination();
         MicroModal.close(this._('#modal-picker'));
@@ -262,6 +267,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                                 <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                                 <p> ${this.nextcloudName} </p>
                             </div>
+                            <div title="Clipboard"
+                                 @click="${() => { this.activeTarget = "clipboard" }}"
+                                 class="${classMap({"active": this.activeTarget === "clipboard", hidden: !this.hasEnabledDestination("clipboard") })}">
+                                <dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
+                                <p>Clipboard</p>
+                            </div>
                         </nav>
                             <div class="modal-header">
                                 <button title="${i18n.t('file-sink.modal-close')}" class="modal-close"  aria-label="Close modal" @click="${() => { this.closeDialog();}}">
@@ -304,6 +315,17 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                                                                 this.finishedFileUpload(event);
                                                             }}"></dbp-nextcloud-file-picker>
                             </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"
+                                            ?disabled="${this.disabled}"
+                                            @click="${() => { this.saveFilesToClipboard(); }}">
+                                        ${this.buttonLabel || "Ablegen"}
+                                    </button>
+                                </div>
+                            </div>
                         </main>
                     </div>
                 </div>

packages/file-handling/src/file-source.js

@@ -398,6 +398,13 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
         MicroModal.close(this._('#modal-picker'));
     }
 
+    getClipboardFiles() {
+        let htmlpath = [];
+        htmlpath[0] =  html`ein file und danach select button`;
+
+        return htmlpath;
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -477,6 +484,12 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
                                 <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                                 <p> ${this.nextcloudName} </p>
                             </div>
+                            <div title="Clipboard"
+                                 @click="${() => { this.activeTarget = "clipboard" }}"
+                                 class="${classMap({"active": this.activeTarget === "clipboard", hidden: !this.hasEnabledSource("clipboard") })}">
+                                <dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
+                                <p>Clipboard</p>
+                            </div>
                             
                         </nav>
                         <div class="modal-header">
@@ -518,6 +531,13 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
                                     this.sendFileEvent(event.detail.file);
                                 }}"></dbp-nextcloud-file-picker>
                             </div>
+                            <div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard"})}">
+                                <div class="block clipboard-container">
+                                    <h2>Von der Zwischenablage auswählen</h2>
+                                    <p>Hier können Sie aus der zuvor temporär abgelegte Dateien auswählen.<br><br></p>
+                                    <p>${this.getClipboardFiles()}</p>
+                                </div>
+                            </div>
                         </main>
                     </div>
                 </div>

packages/file-handling/src/styles.js

@@ -70,6 +70,15 @@ export function getFileHandlingCss() {
         }
 
 
+        .clipboard-container{
+            height: 100%;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            width: 100%;
+            justify-content: center;
+        }
+
         /**************************\\
          Picker Styles
        \\**************************/