Fixed closing button and translation

packages/common/styles.js

@@ -773,6 +773,11 @@ export function getModalDialogCSS() {
             color: var(--dbp-override-danger-bg-color);
             cursor: pointer;
             transition: all 0.2s ease;
+            z-index: 1;
+        }
+        
+        .modal-close .close-icon svg, .close-icon{
+            pointer-events: none;
         }
 
         button.modal-close:focus {

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

@@ -91,6 +91,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 selectableRangeMode: "drag",
                 responsiveLayout: true,
                 placeholder:i18n.t('nextcloud-file-picker.no-data'),
+                resizableColumns:false,
                 columns: [
                     {title: "", field: "type", align:"center", headerSort:false, width:50, responsive:1, formatter: (cell, formatterParams, onRendered) => {
                             const icon_tag =  that.constructor.getScopedTagName("dbp-icon");
@@ -401,7 +402,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 grid-template-columns: auto auto;          
             }
             
-            .nextcloud-header button{
+            .nextcloud-header div button{
                 justify-self: start;
             }
             
@@ -418,6 +419,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             .nextcloud-logo-sm{
                 width: 40px;
                 justify-self: inherit;  
+                margin-right: 70px;
             }
             
             .m-inherit{
@@ -567,6 +569,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 .tabulator .tabulator-tableHolder{
                     white-space: inherit;
                 }
+                .button-wrapper{
+                    justify-self: end;
+                }
             }
 
         `;
@@ -580,9 +585,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             <div class="wrapper">
                 <link rel="stylesheet" href="${tabulatorCss}">
                 <div class="nextcloud-header">
-                    <button class="button is-small ${classMap({hidden: !this.isPickerActive})}"
-                        title="${i18n.t('nextcloud-file-picker.folder-up')}"
-                        @click="${() => { this.loadDirectory(this.getParentDirectoryPath()); }}"><dbp-icon name="arrow-left"></dbp-icon></button>
+                    <div class="button-wrapper ${classMap({hidden: !this.isPickerActive})}">
+                         <button class="button ${classMap({hidden: !this.isPickerActive})}"
+                            title="${i18n.t('nextcloud-file-picker.folder-up')}"
+                            @click="${() => { this.loadDirectory(this.getParentDirectoryPath()); }}"><dbp-icon name="arrow-left"></dbp-icon></button>
+                        <button class="button ${classMap({hidden: !this.isPickerActive})}"
+                            title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
+                            @click="${() => { this.loadDirectory(this.directoryPath); }}"><dbp-icon name="reload"></dbp-icon></button>     
+                    </div>
                     <div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}">
                          ${this.getCloudLogo()}
                     </div>

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

@@ -165,9 +165,11 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                                  class="${classMap({"active": this.activeDestination === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud")})}">
                                 <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                             </div>
+                            <button  title="${i18n.t('file-sink.modal-close')}" class="modal-close"  aria-label="Close modal" data-micromodal-close>
+                                <dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
+                            </button>
                         </nav>
                         <main class="modal-content" id="modal-picker-content">
-                            <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close></button>
                             <div class="source-main ${classMap({"hidden": this.activeDestination !== "local"})}">
                                 <div id="zip-download-block">
                                     <div class="block">
@@ -190,6 +192,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
                                                            lang="${this.lang}"
                                                            auth-url="${this.nextcloudAuthUrl}"
                                                            web-dav-url="${this.nextcloudWebDavUrl}"
+                                                           nextcloud-name="${this.nextcloudName}"
                                                            @dbp-nextcloud-file-picker-file-downloaded="${(event) => {
                                                                this.uploadToNextcloud(event.detail.file);
                                                            }}"></dbp-nextcloud-file-picker>

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

@@ -410,7 +410,9 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
                                 <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
                                 <p> ${this.nextcloudName} </p>
                             </div>
-                            <dbp-icon title="${i18n.t('file-source.modal-close')}" name="close" class="modal-close" aria-label="Close modal" data-micromodal-close></dbp-icon>
+                            <button title="${i18n.t('file-source.modal-close')}" class="modal-close"  aria-label="Close modal"  data-micromodal-close>
+                                <dbp-icon name="close" class="close-icon"></dbp-icon>
+                            </button>
                         </nav>
                         <main class="modal-content" id="modal-picker-content">
                             

packages/file-handling/src/i18n/de/translation.json

@@ -41,7 +41,7 @@
     "auth-info": "Eine neue Seite wird geöffnet, um Ihr Konto zu verbinden.",
     "connect-nextcloud": "{{name}} verbinden",
     "open-in-nextcloud": "In {{name}} öffnen",
-    "no-data": "In diesem Ordner befinden sich keine Daten vom benötigtem Typ.",
-    "select-folder": "Ordner auswählen"
+    "no-data": "In diesem Ordner befinden sich keine Daten vom benötigten Typ.",
+    "select-folder": "In diesem Ordner hochladen"
   }
 }

packages/file-handling/src/i18n/en/translation.json

@@ -42,6 +42,6 @@
     "connect-nextcloud": "Connect {{name}}",
     "open-in-nextcloud": "Open in {{name}}",
     "no-data": "No data avaible in this folder.",
-    "select-folder": "Select folder"
+    "select-folder": "Upload in selected folder"
   }
 }