From 3b3d67c1754e833cb73104acacea163aa3b35fa9 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 18 Aug 2020 13:37:12 +0200
Subject: [PATCH] Changed 'Add Folder Button' view
---
.../src/dbp-nextcloud-file-picker.js | 68 +++++++++++++++++--
.../src/i18n/de/translation.json | 2 +
.../src/i18n/en/translation.json | 2 +
3 files changed, 67 insertions(+), 5 deletions(-)
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index b176141a..24db3f66 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -771,6 +771,22 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.forAll = this._("#replace_mode_all").checked;
}
+ /**
+ * Add new folder with webdav
+ *
+ */
+ openAddFolderDialogue() {
+ this._('#new-folder-wrapper').classList.toggle('hidden');
+ if (this._('#new-folder-wrapper').classList.contains('hidden')) {
+ this._('#add-folder-button').setAttribute("name","plus");
+ this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-open'));
+ }
+ else {
+ this._('#add-folder-button').setAttribute("name","close");
+ this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
+ }
+ }
+
/**
* Add new folder with webdav
*
@@ -782,6 +798,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.loading = false;
this.statusText = i18n.t('nextcloud-file-picker.webdav-error');
});
+ this._('#new-folder').value = '';
+ this.openAddFolderDialogue();
}
}
@@ -1043,6 +1061,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.add-folder{
padding-top: 10px;
+ white-space: nowrap;
}
#replace-modal-box {
@@ -1119,14 +1138,44 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
color: #aaa;
}
+ .inline-block{
+ display: inline-block;
+ }
+
+ .nextcloud-nav h2{
+ padding-top: 10px;
+ }
+
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
+ .nextcloud-nav{
+ position: relative;
+ }
+
+ .inline-block{
+ position: absolute;
+ width: 100%;
+ right: 0px;
+ top: 50px;
+ z-index: 1;
+ background-color: white;
+ }
+
+ .add-folder-button{
+ right: 0px;
+ position: absolute;
+ }
+
.nextcloud-nav h2 > a{
font-size: 1.3rem;
}
+
+ .nextcloud-nav h2{
+ padding-top: 8px;
+ }
.nextcloud-nav a{
font-size: 0.9rem;
@@ -1236,13 +1285,22 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-nav">
- <h2>${this.getBreadcrumb()}</h2>
+ <h2>${this.getBreadcrumb()}</h2>
<div class="add-folder ${classMap({hidden: !this.directoriesOnly})}">
- <input type="text" placeholder="${i18n.t('nextcloud-file-picker.new-folder-placeholder')}" name="new-folder" class="input" id="new-folder">
+ <div class="inline-block">
+ <div id="new-folder-wrapper" class="hidden">
+ <input type="text" placeholder="${i18n.t('nextcloud-file-picker.new-folder-placeholder')}" name="new-folder" class="input" id="new-folder" />
+ <button class="button add-folder-button"
+ title="${i18n.t('nextcloud-file-picker.add-folder')}"
+ @click="${() => { this.addFolder(); }}">
+ <dbp-icon name="checkmark-circle" class="nextcloud-add-folder"></dbp-icon>
+ </button>
+ </div>
+ </div>
<button class="button"
- title="${i18n.t('nextcloud-file-picker.add-folder')}"
- @click="${() => { this.addFolder(); }}">
- <dbp-icon name="plus" class="nextcloud-add-folder"></dbp-icon>
+ title="${i18n.t('nextcloud-file-picker.add-folder-open')}"
+ @click="${() => { this.openAddFolderDialogue(); }}">
+ <dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon>
</button>
</div>
</div>
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index 13033511..04d138d4 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -49,6 +49,8 @@
"no-data": "In diesem Ordner befinden sich keine Daten vom benötigten Typ.",
"select-folder": "In diesem Ordner hochladen",
"webdav-error": "Etwas ist schief gelaufen",
+ "add-folder-open": "Neuer Ordner Dialog öffnen",
+ "add-folder-close": "Neuer Ordner Dialog schließen",
"add-folder": "Neuen Ordner erstellen",
"new-folder-placeholder": "Neuer Ordner",
"load-in-folder": "Ins aktuelle Verzeichnis laden",
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index bb191c6d..f7573b13 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -50,6 +50,8 @@
"select-folder": "Upload in selected folder",
"webdav-error": "Something went wrong",
"add-folder": "Add new folder",
+ "add-folder-open": "Open new folder dialogue",
+ "add-folder-close": "Close new folder dialogue",
"new-folder-placeholder": "New folder",
"load-in-folder": "Load into the current directory",
"load-to-folder": "Upload to the selected folder",
--
GitLab