From 393b95254b9bb56047a71cca55aa59c317a5783f Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 2 Mar 2021 15:44:19 +0100
Subject: [PATCH] Basic styling for filehandling clipboard
---
.../src/dbp-nextcloud-file-picker.js | 2 +-
packages/file-handling/src/file-sink.js | 22 +++++++++++++++++++
packages/file-handling/src/file-source.js | 20 +++++++++++++++++
packages/file-handling/src/styles.js | 9 ++++++++
4 files changed, 52 insertions(+), 1 deletion(-)
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index a749dc56..80efe6b1 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/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;
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 4eccabfb..50cb923e 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/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>
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index a9b4c24e..0a60f517 100644
--- a/packages/file-handling/src/file-source.js
+++ b/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>
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 720bdd2d..723bf967 100644
--- a/packages/file-handling/src/styles.js
+++ b/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
\\**************************/
--
GitLab