Skip to content
Snippets Groups Projects
Commit e3a32238 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Edit select all button in nextcloudfilepicker and add collapsing columns

parent 732e2714
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 450
− 356
View file @ e3a32238
......@@ -110,6 +110,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
super.disconnectedCallback();
}
async firstUpdated() {
// Give the browser a chance to paint
await new Promise((r) => setTimeout(r, 0));
if (this._("#select_all")) {
let boundSelectHandler = this.selectAllFiles.bind(this);
this._("#select_all").addEventListener('click', boundSelectHandler);
}
}
connectedCallback() {
super.connectedCallback();
const that = this;
......@@ -122,38 +131,81 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
layout: "fitColumns",
selectable: this.maxSelectedItems,
selectableRangeMode: "drag",
responsiveLayout: true,
placeholder: this.directoriesOnly ? i18n.t('nextcloud-file-picker.no-data') : i18n.t('nextcloud-file-picker.no-data-type'),
responsiveLayout: "collapse",
responsiveLayoutCollapseStartOpen: false,
resizableColumns: false,
columns: [
{title: "", field: "type", align:"center", headerSort:false, width:50, responsive:1, formatter: (cell, formatterParams, onRendered) => {
{
formatter:"responsiveCollapse", width:32, minWidth:32, align:"center", resizable:false, headerSort:false},
{ //TODO add class="${classMap({hidden: this.directoriesOnly,'button-container': !this.directoriesOnly, 'select-all-icon': !this.directoriesOnly})}"
title: '<label class="button-container select-all-icon">' +
'<input type="checkbox" id="select_all" name="select_all" value="select_all">' +
'<span class="checkmark" id="select_all_checkmark"></span>' +
'</label>',
field: "type",
align: "center",
headerSort: false,
width: 50,
responsive: 1,
formatter: (cell, formatterParams, onRendered) => {
const icon_tag = that.getScopedTagName("dbp-icon");
let disabled = this.directoriesOnly ? "nextcloud-picker-icon-disabled" : "";
let icon = `<${icon_tag} name="empty-file" class="nextcloud-picker-icon ` + disabled + `"></${icon_tag}>`;
return (cell.getValue() === "directory") ? `<${icon_tag} name="folder" class="nextcloud-picker-icon"></${icon_tag}>` : icon;
}},
{title: i18n.t('nextcloud-file-picker.filename'), responsive: 0, widthGrow:5, minWidth: 150, field: "basename", sorter: "alphanum",
}
},
{
title: i18n.t('nextcloud-file-picker.filename'),
responsive: 0,
widthGrow: 5,
minWidth: 150,
field: "basename",
sorter: "alphanum",
formatter: (cell) => {
var data = cell.getRow().getData();
if (data.edit) {
cell.getElement().classList.add("fokus-edit");
}
return cell.getValue();
}},
{title: i18n.t('nextcloud-file-picker.size'), responsive: 4, widthGrow:1, minWidth: 50, field: "size", formatter: (cell, formatterParams, onRendered) => {
return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());}},
{title: i18n.t('nextcloud-file-picker.mime-type'), responsive: 2, widthGrow:1, minWidth: 20, field: "mime", formatter: (cell, formatterParams, onRendered) => {
}
},
{
title: i18n.t('nextcloud-file-picker.size'),
responsive: 4,
widthGrow: 1,
minWidth: 65,
field: "size",
formatter: (cell, formatterParams, onRendered) => {
return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());
}
},
{
title: i18n.t('nextcloud-file-picker.mime-type'),
responsive: 2,
widthGrow: 1,
minWidth: 35,
field: "mime",
formatter: (cell, formatterParams, onRendered) => {
if (typeof cell.getValue() === 'undefined') {
return "";
}
const [, fileSubType] = cell.getValue().split('/');
return fileSubType;
}},
{title: i18n.t('nextcloud-file-picker.last-modified'), responsive: 3, widthGrow:1, minWidth: 100, field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
}
},
{
title: i18n.t('nextcloud-file-picker.last-modified'),
responsive: 3,
widthGrow: 1,
minWidth: 100,
field: "lastmod",
sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
const a_timestamp = Date.parse(a);
const b_timestamp = Date.parse(b);
return a_timestamp - b_timestamp;
}, formatter:function(cell, formatterParams, onRendered) {
},
formatter: function (cell, formatterParams, onRendered) {
const d = Date.parse(cell.getValue());
const timestamp = new Date(d);
const year = timestamp.getFullYear();
......@@ -162,7 +214,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
const hours = ("0" + timestamp.getHours()).slice(-2);
const minutes = ("0" + timestamp.getMinutes()).slice(-2);
return date + "." + month + "." + year + " " + hours + ":" + minutes;
}},
}
},
{title: "rights", field: "props.permissions", visible: false},
{title: "acl", field: "props.acl-list.acl.acl-permissions", visible: false}
],
......@@ -185,8 +238,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
rowSelectionChanged: (data, rows) => {
if (data.length > 0 && this.directoriesOnly) {
this.folderIsSelected = i18n.t('nextcloud-file-picker.load-to-folder');
}
else {
} else {
this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
}
if (this.tabulatorTable && this.tabulatorTable.getSelectedRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length > 0) {
......@@ -194,9 +246,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} else {
this.selectBtnDisabled = true;
}
if (this._("#select_all_checkmark")) {
this._("#select_all_checkmark").title = this.checkAllSelected() ? i18n.t('clipboard.select-nothing') : i18n.t('clipboard.select-all');
}
this.requestUpdate();
},
rowClick: (e, row) => {
const data = row.getData();
......@@ -207,9 +260,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
const data = row.getData();
this.directoryClicked(e, data);
this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
}
else
{
} else {
switch (data.type) {
case "directory":
this.directoryClicked(e, data);
......@@ -224,8 +275,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
break;
}
}
}
else{
} else {
row.deselect();
}
},
......@@ -306,8 +356,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
onReceiveWindowMessage(event) {
if (this.webDavClient === null)
{
if (this.webDavClient === null) {
const data = event.data;
if (data.type === "webapppassword") {
......@@ -354,14 +403,20 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
// client is broken reload try to reset & reconnect
this.tabulatorTable.clearData();
this.webDavClient = null;
let reloadButton = html`${i18n.t('nextcloud-file-picker.something-went-wrong')} <button class="button"
let reloadButton = html`${i18n.t('nextcloud-file-picker.something-went-wrong')}
<button class="button"
title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
@click="${async () => { this.openFilePicker(); } }"><dbp-icon name="reload"></button>`;
@click="${async () => {
this.openFilePicker();
}}">
<dbp-icon name="reload">
</button>`;
this.loading = false;
this.statusText = reloadButton;
}
this.webDavClient
.getDirectoryContents(path, {details: true, data: "<?xml version=\"1.0\"?>" +
.getDirectoryContents(path, {
details: true, data: "<?xml version=\"1.0\"?>" +
"<d:propfind xmlns:d=\"DAV:\" xmlns:oc=\"http://owncloud.org/ns\" xmlns:nc=\"http://nextcloud.org/ns\" xmlns:ocs=\"http://open-collaboration-services.org/ns\">" +
" <d:prop>" +
" <d:getlastmodified />" +
......@@ -376,7 +431,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
" </nc:acl>" +
" </nc:acl-list>" +
" </d:prop>" +
"</d:propfind>"})
"</d:propfind>"
})
.then(contents => {
//console.log("------", contents);
this.loading = false;
......@@ -386,8 +442,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this._(".nextcloud-content").scrollTop = 0;
if (!this.activeDirectoryRights.includes("CK") && !this.activeDirectoryRights.includes("NV")) {
this._("#download-button").setAttribute("disabled", "true");
}
else {
} else {
this._("#download-button").removeAttribute("disabled");
}
}).catch(error => {
......@@ -399,16 +454,21 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.directoryPath = "";
this.loadDirectory("");
}
else {
} else {
this.loading = false;
this.statusText = html`<span class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
this.isPickerActive = false;
this.tabulatorTable.clearData();
this.webDavClient = null;
let reloadButton = html`${i18n.t('nextcloud-file-picker.something-went-wrong')} <button class="button"
let reloadButton = html`${i18n.t('nextcloud-file-picker.something-went-wrong')}
<button class="button"
title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
@click="${async () => { this.openFilePicker(); } }"><dbp-icon name="reload"></button>`;
@click="${async () => {
this.openFilePicker();
}}">
<dbp-icon name="reload">
</button>`;
this.loading = false;
this.statusText = reloadButton;
}
......@@ -446,8 +506,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
downloadFiles(files) {
files.forEach((fileData) => this.downloadFile(fileData));
this.tabulatorTable.deselectRow();
if (this._("#select_all"))
{
if (this._("#select_all")) {
this._("#select_all").checked = false;
}
const data = {"count": files.length};
......@@ -487,7 +546,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}).catch(error => {
console.error(error.message);
this.loading = false;
this.statusText = html`<span class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
});
}
......@@ -502,8 +562,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (!directory[0]) {
path = this.directoryPath;
}
else {
} else {
path = directory[0].filename;
}
this.loading = true;
......@@ -560,9 +619,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.loading = true;
this.statusText = i18n.t('nextcloud-file-picker.upload-to', {path: path});
await this.webDavClient
.putFileContents(path, file, { overwrite: false, onUploadProgress: progress => {
.putFileContents(path, file, {
overwrite: false, onUploadProgress: progress => {
/* console.log(`Uploaded ${progress.loaded} bytes of ${progress.total}`);*/
}}).then(function() {
}
}).then(function () {
that.uploadCount += 1;
that.fileList.shift();
that.uploadFile(directory);
......@@ -575,14 +636,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.uploadFileDirectory = directory;
this.abortUploadButton = true;
this.uploadFileAfterConflict();
}
else {
} else {
this.replaceModalDialog(file, directory);
}
}
});
}
else {
} else {
this.loadDirectory(this.directoryPath);
this.loading = false;
this.statusText = "";
......@@ -660,8 +719,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.uploadFileDirectory = directory;
this.abortUploadButton = true;
this.uploadFileAfterConflict();
}
else {
} else {
this.replaceModalDialog(file, directory);
}
}
......@@ -688,8 +746,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
let rows = this.tabulatorTable.searchRows("basename", "=", this.replaceFilename);
if (typeof rows[0] !== 'undefined' && rows[0]) {
file_perm = rows[0].getData().props.permissions;
}
else {
} else {
file_perm = "";
}
......@@ -795,7 +852,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
disableScroll: true,
onClose: modal => {
this.statusText = "";
this.loading = false;},
this.loading = false;
},
});
}
......@@ -803,8 +861,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (this.tabulatorTable) {
this.tabulatorTable.deselectRow();
}
if (this._("#select_all"))
{
if (this._("#select_all")) {
this._("#select_all").checked = false;
}
MicroModal.close(this._('#modal-picker'));
......@@ -820,8 +877,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
let splitFilename;
if (this.forAll && this.customFilename !== '') {
splitFilename = this.customFilename.split(".");
}
else {
} else {
splitFilename = this.replaceFilename.split(".");
}
......@@ -832,12 +888,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
let number = parseInt(numberString[0]);
this.fileNameCounter = number + 1;
nextFilename = splitBracket[0] + "(" + this.fileNameCounter + ")";
}
else {
} else {
nextFilename = splitFilename[0] + "(" + this.fileNameCounter + ")";
}
}
else {
} else {
nextFilename = splitFilename[0] + "(" + this.fileNameCounter + ")";
}
if (splitFilename.length > 1) {
......@@ -896,8 +950,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
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 {
} else {
this._('#add-folder-button').setAttribute("name", "close");
this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
this._('#new-folder').focus();
......@@ -919,15 +972,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
// this.loadDirectory(this.directoryPath);
const d = new Date();
let props = {permissions: 'RGDNVCK'};
this.tabulatorTable.addRow({type:"directory", filename: folderPath, basename:folderName, lastmod:d, props: props}, true);
this.tabulatorTable.addRow({
type: "directory",
filename: folderPath,
basename: folderName,
lastmod: d,
props: props
}, true);
this.statusText = i18n.t('nextcloud-file-picker.add-folder-success', {folder: folderName});
this.loading = false;
}).catch(error => {
this.loading = false;
if (error.message.search("405") !== -1) {
this.statusText = html`<span class="error"> ${i18n.t('nextcloud-file-picker.add-folder-error', {folder: folderName})} </span>`;
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.add-folder-error', {folder: folderName})} </span>`;
} else {
this.statusText = html`<span class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
this.statusText = html`<span
class="error"> ${i18n.t('nextcloud-file-picker.webdav-error', {error: error.message})} </span>`;
}
});
......@@ -985,21 +1046,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.directoryPath = '';
}
let htmlpath = [];
htmlpath[0] = html`<span class="breadcrumb"><a class="home-link" @click="${() => { this.loadDirectory(""); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><dbp-icon name="home"></dbp-icon> </a></span>`;
htmlpath[0] = html`<span class="breadcrumb"><a class="home-link" @click="${() => {
this.loadDirectory("");
}}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><dbp-icon name="home"></dbp-icon> </a></span>`;
const directories = this.directoryPath.split('/');
if (directories[1] === "") {
return htmlpath;
}
for(let i = 1; i < directories.length; i ++)
{
for (let i = 1; i < directories.length; i++) {
let path = "";
for(let j = 1; j <= i; j++)
{
for (let j = 1; j <= i; j++) {
path += "/";
path += directories[j];
}
htmlpath[i] = html`<span> › </span><span class="breadcrumb"><a @click="${() => { this.loadDirectory(path); }}" title="${i18n.t('nextcloud-file-picker.load-path-link', {path: directories[i]})}">${directories[i]}</a></span>`;
htmlpath[i] = html`<span> › </span><span class="breadcrumb"><a @click="${() => {
this.loadDirectory(path);
}}" title="${i18n.t('nextcloud-file-picker.load-path-link', {path: directories[i]})}">${directories[i]}</a></span>`;
}
return htmlpath;
......@@ -1023,7 +1086,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
${fileHandlingStyles.getFileHandlingCss()}
.visible {
display: unset;
}
......@@ -1037,7 +1099,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.nextcloud-header {
margin-bottom: 2rem;
display: inline-grid;
......@@ -1127,7 +1188,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.add-folder {
white-space: nowrap;
align-self: end;
......@@ -1271,11 +1331,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
}
.nextcloud-picker-icon{
top: 0px;
font-size: 1.4rem;
}
.spinner {
font-size: 0.7em;
}
......@@ -1324,32 +1379,29 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.select-all-icon {
position: absolute;
top: 17px;
left: 10px;
z-index: 100;
height: 40px;
height: 30px;
}
.checkmark {
height: 20px;
width: 20px;
left: 5px;
top: 1px;
left: 11px;
top: 4px;
}
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
and (max-device-width: 768px) {
.add-folder button {
float: right;
}
.add-folder {
position: absolute;
right: 0px;
}
.nextcloud-nav {
display: block;
}
......@@ -1468,15 +1520,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.select-all-icon {
top: 10px;
left: 10px;
height: 32px;
}
.checkmark {
height: 25px;
width: 25px;
left: 2px;
top: 6px;
left: 9px;
top: 2px;
}
}
......@@ -1506,7 +1557,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="block ${classMap({hidden: this.isPickerActive})}">
<button class="button is-primary"
title="${i18n.t('nextcloud-file-picker.open-nextcloud-file-picker', {name: this.nextcloudName})}"
@click="${async () => { this.openFilePicker(); } }">${i18n.t('nextcloud-file-picker.connect-nextcloud', {name: this.nextcloudName})}</button>
@click="${async () => {
this.openFilePicker();
}}">${i18n.t('nextcloud-file-picker.connect-nextcloud', {name: this.nextcloudName})}
</button>
</div>
<div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
<p class="m-inherit"><br>
......@@ -1521,46 +1575,61 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="add-folder ${classMap({hidden: !this.directoriesOnly})}">
<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" />
<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(); }}">
@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-open')}"
@click="${() => { this.openAddFolderDialogue(); }}">
@click="${() => {
this.openAddFolderDialogue();
}}">
<dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon>
</button>
</div>
</div>
<div class="table-wrapper">
<label class="${classMap({hidden: this.directoriesOnly, 'button-container': !this.directoriesOnly, 'select-all-icon': !this.directoriesOnly})}">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark" title="${this.checkAllSelected() ? i18n.t('nextcloud-file-picker.select-nothing-title') : i18n.t('nextcloud-file-picker.select-all-title')}"></span>
</label>
<table id="directory-content-table" class="force-no-select"></table>
</div>
</div>
<div class="nextcloud-footer ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-footer-grid">
<button id="download-button" class="button select-button is-primary ${classMap({hidden: ((!this.directoriesOnly) || (this.directoriesOnly && this.abortUploadButton && this.forAll))})}"
@click="${() => { this.sendDirectory(this.tabulatorTable.getSelectedData()); }}"
<button id="download-button"
class="button select-button is-primary ${classMap({hidden: ((!this.directoriesOnly) || (this.directoriesOnly && this.abortUploadButton && this.forAll))})}"
@click="${() => {
this.sendDirectory(this.tabulatorTable.getSelectedData());
}}"
?disabled="${this.selectBtnDisabled}">
<dbp-icon class="nav-icon" name="cloud-upload"></dbp-icon> ${this.folderIsSelected}</button>
<dbp-icon class="nav-icon" name="cloud-upload"></dbp-icon>
${this.folderIsSelected}
</button>
<button class="button select-button is-primary ${classMap({hidden: this.directoriesOnly})}"
@click="${() => { this.downloadFiles(this.tabulatorTable.getSelectedData()); }}"
@click="${() => {
this.downloadFiles(this.tabulatorTable.getSelectedData());
}}"
?disabled="${this.selectBtnDisabled}">
${(this.tabulatorTable && this.tabulatorTable.getSelectedRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length === 0) ? i18n.t('nextcloud-file-picker.select-files') : i18n.t('nextcloud-file-picker.select-files-btn', {count: this.tabulatorTable ? this.tabulatorTable.getSelectedRows().length : 0})}</button>
<button id="abortButton" class="button select-button hidden ${classMap({"visible": (this.directoriesOnly && this.forAll && this.abortUploadButton)})}"
title="${i18n.t('nextcloud-file-picker.abort')}" @click="${() => { this.abortUpload = true; }}">${i18n.t('nextcloud-file-picker.abort')}</button>
${(this.tabulatorTable && this.tabulatorTable.getSelectedRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length === 0) ? i18n.t('nextcloud-file-picker.select-files') : i18n.t('nextcloud-file-picker.select-files-btn', {count: this.tabulatorTable ? this.tabulatorTable.getSelectedRows().length : 0})}
</button>
<button id="abortButton"
class="button select-button hidden ${classMap({"visible": (this.directoriesOnly && this.forAll && this.abortUploadButton)})}"
title="${i18n.t('nextcloud-file-picker.abort')}" @click="${() => {
this.abortUpload = true;
}}">${i18n.t('nextcloud-file-picker.abort')}
</button>
<div class="block info-box ${classMap({hidden: this.statusText === ""})}">
<dbp-mini-spinner class="spinner ${classMap({hidden: this.loading === false})}"></dbp-mini-spinner>
<dbp-mini-spinner
class="spinner ${classMap({hidden: this.loading === false})}"></dbp-mini-spinner>
<span>${this.statusText}</span>
</div>
......@@ -1570,10 +1639,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="modal micromodal-slide" id="replace-modal" aria-hidden="true">
<div class="modal-overlay" tabindex="-2" data-micromodal-close>
<div class="modal-container" id="replace-modal-box" role="dialog" aria-modal="true" aria-labelledby="replace-modal-title" >
<div class="modal-container" id="replace-modal-box" role="dialog" aria-modal="true"
aria-labelledby="replace-modal-title">
<header class="modal-header">
<button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => {this.closeDialog();}}">
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
<button title="${i18n.t('file-sink.modal-close')}" class="modal-close"
aria-label="Close modal" @click="${() => {
this.closeDialog();
}}">
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close"
class="close-icon"></dbp-icon>
</button>
<h2 id="replace-modal-title">
${i18n.t('nextcloud-file-picker.replace-title-1')}
......@@ -1591,9 +1665,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${i18n.t('nextcloud-file-picker.replace-new_name')}:
</span>
<input type="radio" id="replace-new-name" class="radio-btn" name="replacement" value="new-name" checked @click="${() => {this.setInputFieldVisibility();}}">
<input type="radio" id="replace-new-name" class="radio-btn" name="replacement"
value="new-name" checked @click="${() => {
this.setInputFieldVisibility();
}}">
<span class="radiobutton"></span>
<input type="text" id="replace-filename" class="input" name="replace-filename" value="" onClick="this.select();">
<input type="text" id="replace-filename" class="input" name="replace-filename"
value="" onClick="this.select();">
</label>
</div>
......@@ -1602,27 +1680,43 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div>
<label class="button-container">
<span>${i18n.t('nextcloud-file-picker.replace-replace')}</span>
<input type="radio" id="replace-replace" name="replacement" value="replace" @click="${() => {this.setInputFieldVisibility();}}">
<input type="radio" id="replace-replace" name="replacement" value="replace"
@click="${() => {
this.setInputFieldVisibility();
}}">
<span class="radiobutton"></span>
</label>
</div>
<div>
<label class="button-container">
<span>${i18n.t('nextcloud-file-picker.replace-skip')}</span>
<input type="radio" class="radio-btn" name="replacement" value="ignore" @click="${() => {this.setInputFieldVisibility();}}">
<input type="radio" class="radio-btn" name="replacement" value="ignore"
@click="${() => {
this.setInputFieldVisibility();
}}">
<span class="radiobutton"></span>
</label>
</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.cancelOverwrite();}}">${this.getCancelText()}</button>
<button class="button select-button is-primary" @click="${() => {this.uploadFileAfterConflict();}}">OK</button>
<button class="button" data-micromodal-close aria-label="Close this dialog window"
@click="${() => {
this.cancelOverwrite();
}}">${this.getCancelText()}
</button>
<button class="button select-button is-primary" @click="${() => {
this.uploadFileAfterConflict();
}}">OK
</button>
</div>
<div>
<label class="button-container">
${i18n.t('nextcloud-file-picker.replace-mode-all')}
<input type="checkbox" id="replace_mode_all" name="replace_mode_all" value="replace_mode_all" @click="${() => {this.setRepeatForAllConflicts();}}">
<input type="checkbox" id="replace_mode_all" name="replace_mode_all"
value="replace_mode_all" @click="${() => {
this.setRepeatForAllConflicts();
}}">
<span class="checkmark"></span>
</label>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment