diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js index b176141a997a06436847e053914cfaae1ce84be8..24db3f66f459e49fcecc049699b52355c3b05f98 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 130335118f262fa34db06308f264a71f864b2488..04d138d40ef310b9ba48446a2dbbe10ae14bbec2 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 bb191c6db085b131c4e25b43dffcead7752c1f4b..f7573b13ffd7b553508eff1ec104611659e8894d 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",