packages/file-handling/package.json

@@ -43,7 +43,7 @@
         "lit": "^2.0.0",
         "material-design-icons-svg": "^3.0.0",
         "tabulator-tables": "^4.8.4",
-        "webdav": "4.8.0"
+        "webdav": "^4.8.0"
     },
     "scripts": {
         "clean": "rm dist/*",

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

@@ -174,7 +174,8 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
     async uploadToNextcloud(directory) {
         let that = this;
         const element = that._('#nextcloud-file-picker');
-        await element.uploadFiles(that.files, directory);
+        const files = [...this.files];
+        await element.uploadFiles(files, directory);
     }
 
     finishedFileUpload(event) {
@@ -214,10 +215,12 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
 
     loadWebdavDirectory() {
         const filePicker = this._('#nextcloud-file-picker');
-
         if (filePicker) {
+
             filePicker.checkLocalStorage().then((contents) => {
+
                 if (filePicker.webDavClient !== null) {
+
                     filePicker.loadDirectory(filePicker.directoryPath);
                 }
             });

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

@@ -85,7 +85,12 @@
         "recent-files-title": "Neueste Dateien",
         "my-recent-files-title": "Meine neuesten Dateien",
         "my-recent-files-link-text": "Meine neuesten Dateien",
-        "all-recent-files-link-text": "Alle neuesten Dateien"
+        "all-recent-files-link-text": "Alle neuesten Dateien",
+        "new-folder-dialog-title": "Neuen Ordner erstellen",
+        "new-folder-dialog-label": "Name eingeben:",
+        "new-folder-dialog-button-ok": "Übernehmen",
+        "new-folder-dialog-button-cancel": "Abbrechen",
+        "new-folder-dialog-default-name": "Neuer Ordner"
     },
     "clipboard": {
         "add-files": "Dateien der Zwischenablage hinzufügen",

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

@@ -86,7 +86,12 @@
         "recent-files-title": "Recent Files",
         "my-recent-files-title": "My Recent Files",
         "my-recent-files-link-text": "My Recent Files",
-        "all-recent-files-link-text": "All Recent Files"
+        "all-recent-files-link-text": "All Recent Files",
+        "new-folder-dialog-title": "Create a new folder",
+        "new-folder-dialog-label": "Enter a name:",
+        "new-folder-dialog-button-ok": "Apply",
+        "new-folder-dialog-button-cancel": "Cancel",
+        "new-folder-dialog-default-name": "New folder"
     },
     "clipboard": {
         "add-files": "Add files to clipboard",

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

@@ -1480,18 +1480,17 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
         const i18n = this._i18n;
         this.loading = true;
         this.statusText = i18n.t('nextcloud-file-picker.upload-to', {path: directory});
-        this.fileList = files;
-        this.forAll = false;
-        this.setRepeatForAllConflicts();
-        this.uploadFile(directory);
-
-        if (files.length > 0) {
+        this.fileList = [...files];
+        if (typeof this.fileList !== undefined && this.fileList.length > 0) {
             this.sendSetPropertyEvent('analytics-event', {
                 category: 'FileHandlingNextcloud',
                 action: 'UploadFiles',
                 name: files.length,
             });
         }
+        this.forAll = false;
+        this.setRepeatForAllConflicts();
+        this.uploadFile(directory);
     }
 
     /**
@@ -1522,31 +1521,28 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
             await this.webDavClient
                 .putFileContents(path, file, {
                     contentLength: file.size,
-                    overwrite: false,
-                    onUploadProgress: (progress) => {
-                        /* console.log(`Uploaded ${progress.loaded} bytes of ${progress.total}`);*/
-                    },
-                })
-                .then(function () {
-                    that.uploadCount += 1;
-                    that.fileList.shift();
-                    that.uploadFile(directory);
+                    overwrite: false
                 })
-                .catch((error) => {
-                    if (error.message.search('412') !== -1 || error.message.search('403') !== -1) {
-                        this.generatedFilename = this.getNextFilename();
-                        this._('#replace-filename').value = this.generatedFilename;
-                        if (this.forAll) {
-                            this.uploadFileObject = file;
-                            this.uploadFileDirectory = directory;
-                            this.abortUploadButton = true;
-                            this.uploadFileAfterConflict();
+                .then(function (success) {
+                    if (!success) {
+                        that.generatedFilename = that.getNextFilename();
+                        that._('#replace-filename').value = that.generatedFilename;
+                        if (that.forAll) {
+                            that.uploadFileObject = file;
+                            that.uploadFileDirectory = directory;
+                            that.abortUploadButton = true;
+                            that.uploadFileAfterConflict();
                         } else {
-                            this.replaceModalDialog(file, directory);
+                            that.replaceModalDialog(file, directory);
                         }
                     } else {
-                        throw error;
+                        that.uploadCount += 1;
+                        that.fileList.shift();
+                        that.uploadFile(directory);
                     }
+                })
+                .catch((error) => {
+                    throw error;
                 });
         } else {
             this.loadDirectory(this.directoryPath);
@@ -1881,116 +1877,48 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
         }
     }
 
+    /**
+     * Opens new folder modal
+     *
+     */
     addOpenFolderTableEntry() {
-        const i18n = this._i18n;
+        // Avoid row animation for previously created folders
         if (this._('.addRowAnimation')) {
             this._('.addRowAnimation').classList.remove('addRowAnimation');
         }
-        this.disableRowClick = true;
-
-        const d = new Date();
-        let props = {permissions: 'RGDNVCK'};
-        var row = {
-            type: 'directory',
-            filename: '',
-            basename: '',
-            lastmod: d,
-            props: props,
-        };
-
-        const that = this;
-
-        this.tabulatorTable
-            .addRow(row, true, 1)
-            .then(() => {
-                that._('#directory-content-table')
-                    .querySelector(
-                        'div.tabulator-tableHolder > div.tabulator-table > div.tabulator-row:nth-child(1)'
-                    )
-                    .setAttribute('id', 'new-folder-row');
-                that._('#new-folder-row').classList.toggle('highlighted');
-
-                that._('#new-folder-row')
-                    .querySelector(
-                        'div.tabulator-cell:nth-child(1) > div > span.tabulator-responsive-collapse-toggle-open'
-                    )
-                    .classList.add('new-folder-selected');
-                that._('#new-folder-row')
-                    .querySelector(
-                        'div.tabulator-cell:nth-child(1) > div > span.tabulator-responsive-collapse-toggle-close'
-                    )
-                    .classList.add('new-folder-selected');
-
-                // overwrite date
-                that
-                    ._('#new-folder-row')
-                    .querySelector('div.tabulator-cell:nth-child(6)').innerText = '';
-                if (
-                    that
-                        ._('#new-folder-row')
-                        .querySelector(
-                            'div.tabulator-responsive-collapse > table > tbody > tr:nth-child(1) > td:nth-child(2)'
-                        )
-                ) {
-                    that
-                        ._('#new-folder-row')
-                        .querySelector(
-                            'div.tabulator-responsive-collapse > table > tbody > tr:nth-child(1) > td:nth-child(2)'
-                        ).innerText = '';
-                }
 
-                // add input field
-                that._('#new-folder-row')
-                    .querySelector('div.tabulator-cell:nth-child(3)')
-                    .setAttribute('id', 'new-folder-cell');
-                that._('#new-folder-cell').innerHTML =
-                    '<input type="text" class="input" name="tf-new-folder" id="tf-new-folder" value="' +
-                    i18n.t('nextcloud-file-picker.new-folder-placeholder') +
-                    '" />';
-
-                let mimeElement = that._('#new-folder-row').querySelector('div.tabulator-cell[tabulator-field="mime"]');
-                if (window.getComputedStyle(mimeElement).display === "none") {
-                    that._('#tf-new-folder').classList.add('smaller');
-                }
+        this.disableRowClick = true;
 
-                const icon_tag = that.getScopedTagName("dbp-icon");
-                let html = `<${icon_tag} name="checkmark-circle" class="new-folder-checkmark-icon"></${icon_tag}>`;
-                that._('#new-folder-row').innerHTML  += '<button class="button" title="" id="new-folder-row-btn">' + html + '</button>';
-                    
-                that._('#tf-new-folder').addEventListener('keydown', ({key}) => {
-                    if (key === 'Enter') {
-                        that.addNewFolder();
-                    }
-                });
+        // that._('#new-folder-row').addEventListener('keydown', (event) => {
+        //     if (event.key === 'Escape') {
+        //         that.deleteNewFolderEntry();
+        //         event.stopPropagation();
+        //     }
+        // });
 
-                that._('#new-folder-row-btn').addEventListener("click", event => {
-                    that.addNewFolder();
-                    event.stopPropagation();
-                });
+        // Click handler should ignore first click
+        this.initateOpenNewFolder = true;
 
-                that._('#new-folder-row').addEventListener('keydown', (event) => {
-                    if (event.key === 'Escape') {
-                        that.deleteNewFolderEntry();
-                        event.stopPropagation();
-                    }
-                });
+        // Give the browser a chance to paint before selecting
+        setTimeout(() => {
+            this._('#tf-new-folder-dialog').select();
+        }, 0);
 
-                document.addEventListener('keydown', this.boundCancelNewFolderHandler);
+        MicroModal.show(this._('#new-folder-modal'), {
+            disableScroll: true,
+        });
 
-                that._('#new-folder-row').addEventListener('click', (event) => {
-                    event.stopPropagation();
-                });
+        this._('#tf-new-folder-dialog').addEventListener('keydown', ({key}) => { //TODO since we do not destroy the modal it is enough to do this once
+            if (key === 'Enter') {
+                this.addNewFolder();
+            }
+        });
 
-                that.initateOpenNewFolder = true;
+        this._('#new-folder-modal-box').addEventListener('click', (event) => { //TODO same here?
+            event.stopPropagation();
+        });
 
-                // give the browser a chance to paint before selecting
-                setTimeout(() => {
-                    this._('#tf-new-folder').select();
-                }, 0);
-            })
-            .catch((error) => {
-                console.log('error', error);
-            });
+        document.addEventListener('keydown', this.boundCancelNewFolderHandler);
 
         // during folder creation it should not be possible to click something
         document.addEventListener('click', this.boundClickOutsideNewFolderHandler);
@@ -2004,27 +1932,25 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
     }
 
     deleteNewFolderEntry() {
+        const i18n = this._i18n;
+
         if (this.initateOpenNewFolder) {
             this.initateOpenNewFolder = false;
             return;
         }
 
-        this._('#new-folder-row').classList.toggle('highlighted');
-
-        var row = this.tabulatorTable.getRowFromPosition(0);
-        if (row) {
-            row.delete();
-        }
-
         this.disableRowClick = false;
+        MicroModal.close(this._('#new-folder-modal'));
+
         document.removeEventListener('click', this.boundClickOutsideNewFolderHandler);
         document.removeEventListener('keydown', this.boundCancelNewFolderHandler);
+        this._('#tf-new-folder-dialog').value = i18n.t('nextcloud-file-picker.new-folder-dialog-default-name');
     }
 
     addNewFolder() {
         const i18n = this._i18n;
-        if (this._('#tf-new-folder').value !== '') {
-            let folderName = this._('#tf-new-folder').value;
+        if (this._('#tf-new-folder-dialog').value !== '') {
+            let folderName = this._('#tf-new-folder-dialog').value;
             if (typeof this.directoryPath === 'undefined') {
                 this.directoryPath = '';
             }
@@ -3060,6 +2986,44 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 font-size: 1.4em;
             }
 
+            #new-folder-modal-box {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                padding: 15px 20px 20px 20px;
+                max-height: 190px;
+                min-height: 190px;
+                min-width: 320px;
+                max-width: 400px;
+            }
+
+            #new-folder-modal-box header.modal-header {
+                padding: 0px;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            #new-folder-modal-box footer.modal-footer .modal-footer-btn  {
+                padding: 0px;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            #new-folder-modal-content {
+                display: block;
+                padding-left: 0px;
+                padding-right: 0px;
+                overflow: unset;
+            }
+
+            #new-folder-modal-content div .input {
+                width: 100%;
+            }
+
+            #new-folder-modal-content .nf-label {
+                padding-bottom: 2px;
+            }
+
             @media only screen and (orientation: portrait) and (max-width: 768px) {
                 .breadcrumb-arrow {
                     font-size: 1.6em;
@@ -3355,8 +3319,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                                         )}
                                     </a>
                                 </li>
-                                <li class="${classMap({hidden: !this.directoriesOnly,
-                                            inactive:
+                                <li class="${classMap({inactive:
                                                 this.isInRecent ||
                                                 this.isInFavorites ||
                                                 this.isInFilteredRecent ||
@@ -3575,6 +3538,69 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                     </div>
                 </div>
             </div>
+
+            <div class="modal micromodal-slide" id="new-folder-modal" aria-hidden="true">
+                <div class="modal-overlay" tabindex="-2" data-micromodal-close>
+                    <div
+                        class="modal-container"
+                        id="new-folder-modal-box"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="new-folder-modal-title">
+                        <header class="modal-header">
+                            <button
+                                title="${i18n.t('file-sink.modal-close')}"
+                                class="modal-close"
+                                aria-label="Close modal"
+                                @click="${() => {
+                                    this.deleteNewFolderEntry();
+                                }}">
+                                <dbp-icon
+                                    title="${i18n.t('file-sink.modal-close')}"
+                                    name="close"
+                                    class="close-icon"></dbp-icon>
+                            </button>
+                            <h3 id="new-folder-modal-title">
+                                ${i18n.t('nextcloud-file-picker.new-folder-dialog-title')}
+                            </h3>
+                        </header>
+                        <main class="modal-content" id="new-folder-modal-content">
+                            <div class="nf-label">
+                                ${i18n.t('nextcloud-file-picker.new-folder-dialog-label')}
+                            </div>
+                            <div>
+                                <input 
+                                    type="text" 
+                                    class="input" 
+                                    name="tf-new-folder-dialog" 
+                                    id="tf-new-folder-dialog" 
+                                    value="${i18n.t('nextcloud-file-picker.new-folder-dialog-default-name')}" 
+                                />
+                            </div>
+                        </main>
+                        <footer class="modal-footer">
+                            <div class="modal-footer-btn">
+                                <button
+                                    class="button"
+                                    data-micromodal-close
+                                    aria-label="Close this dialog window"
+                                    @click="${() => {
+                                        this.deleteNewFolderEntry();
+                                    }}">
+                                    ${i18n.t('nextcloud-file-picker.new-folder-dialog-button-cancel')}
+                                </button>
+                                <button
+                                    class="button select-button is-primary"
+                                    @click="${() => {
+                                        this.addNewFolder();
+                                    }}">
+                                    ${i18n.t('nextcloud-file-picker.new-folder-dialog-button-ok')}
+                                </button>
+                            </div>
+                        </footer>
+                    </div>
+                </div>
+            </div>
         `;
     }
 }

toolkit-showcase/rollup.config.js

@@ -24,6 +24,7 @@ const buildFull = (!watch && appEnv !== 'test') || process.env.FORCE_FULL !== un
 let useTerser = buildFull;
 let useBabel = buildFull;
 let checkLicenses = buildFull;
+let treeshake = buildFull;
 let useHTTPS = true;
 
 console.log('APP_ENV: ' + appEnv);
@@ -81,6 +82,7 @@ export default (async () => {
             format: 'esm',
             sourcemap: true,
         },
+        treeshake: treeshake,
         preserveEntrySignatures: false,
         plugins: [
             del({