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

Change select all button in nextcloud-file-picker

parent 6f0258e8
No related branches found
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
+ 79
− 48
View file @ a339e1f9
...@@ -52,8 +52,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -52,8 +52,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.selectAllButton = true; this.selectAllButton = true;
this.abortUploadButton = false; this.abortUploadButton = false;
this.abortUpload = false; this.abortUpload = false;
this.isSelected = false;
this.authInfo = ''; this.authInfo = '';
this.numberOfSelectedFiles = 0;
} }
static get scopedElements() { static get scopedElements() {
...@@ -90,7 +91,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -90,7 +91,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
activeDirectoryACL: { type: String, attribute: false }, activeDirectoryACL: { type: String, attribute: false },
selectAllButton: { type: Boolean, attribute: false }, selectAllButton: { type: Boolean, attribute: false },
abortUploadButton: { type: Boolean, attribute: false }, abortUploadButton: { type: Boolean, attribute: false },
isSelected: { type: Boolean, attribute: false },
numberOfSelectedFiles: {type: Number, attribute: false },
}; };
} }
...@@ -209,11 +211,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -209,11 +211,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.directoryClicked(e, data); this.directoryClicked(e, data);
break; break;
case "file": case "file":
this.isSelected = this.tabulatorTable.getSelectedRows().length > 0; this.numberOfSelectedFiles = this.tabulatorTable !== null ? this.tabulatorTable.getSelectedRows().length : 0;
if (this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length) { if (this.tabulatorTable !== null
this.selectAllButton = false; && this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length) {
this._("#select_all").checked = true;
} else { } else {
this.selectAllButton = true; this._("#select_all").checked = false;
} }
break; break;
} }
...@@ -335,7 +338,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -335,7 +338,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
path = ''; path = '';
} }
console.log("load nextcloud directory", path); // console.log("load nextcloud directory", path);
this.selectAllButton = true; this.selectAllButton = true;
this.loading = true; this.loading = true;
this.statusText = i18n.t('nextcloud-file-picker.loadpath-nextcloud-file-picker', {name: this.nextcloudName}); this.statusText = i18n.t('nextcloud-file-picker.loadpath-nextcloud-file-picker', {name: this.nextcloudName});
...@@ -919,24 +922,29 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -919,24 +922,29 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} }
/** /**
* Select all files from tabulator table * Select or deselect all files from tabulator table
* *
*/ */
selectAll() { selectAllFiles() {
let allSelected = this.checkAllSelected();
if (allSelected) {
this.tabulatorTable.getSelectedRows().forEach(row => row.deselect());
this.numberOfSelectedFiles = 0;
} else {
this.tabulatorTable.selectRow(this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes))); this.tabulatorTable.selectRow(this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)));
if (this.tabulatorTable.getSelectedRows().length > 0) { this.numberOfSelectedFiles = this.tabulatorTable.getSelectedRows().length;
this.selectAllButton = false;
this.isSelected = true;
} }
} }
/** checkAllSelected() {
* Deselect files from tabulator table if (this.tabulatorTable) {
* let maxSelected = this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length;
*/ let selected = this.tabulatorTable.getSelectedRows().length;
deselectAll() { if (selected === maxSelected) {
this.selectAllButton = true; return true;
this.tabulatorTable.getSelectedRows().forEach(row => row.deselect()); }
}
return false;
} }
/** /**
...@@ -1113,11 +1121,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1113,11 +1121,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
height: 33px; height: 33px;
} }
#select-all-wrapper{
white-space: nowrap;
align-self: end;
}
.nextcloud-nav p{ .nextcloud-nav p{
align-self: center; align-self: center;
} }
...@@ -1276,11 +1279,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1276,11 +1279,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-right: 50px; padding-right: 50px;
} }
#select-all-wrapper{
text-align: right;
}
.nextcloud-nav a{ .nextcloud-nav a{
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -1301,6 +1299,30 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1301,6 +1299,30 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
text-align: left; text-align: left;
} }
.table-wrapper{
position: relative;
}
.button-container .checkmark::after{
left: 8px;
top: 3px;
width: 4px;
height: 11px;
}
.select-all-icon{
position: absolute;
top: 17px;
left: 10px;
z-index: 100;
height: 40px;
}
.checkmark{
height: 20px;
width:20px;
left: 5px;
}
...@@ -1424,6 +1446,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1424,6 +1446,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
display:none; display:none;
} }
.button-container .checkmark::after{
left: 11px;
top: 4px;
width: 8px;
height: 15px;
}
.select-all-icon{
top: 10px;
left: 10px;
}
.checkmark{
height: 30px;
width:30px;
}
} }
`; `;
} }
...@@ -1479,34 +1518,26 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1479,34 +1518,26 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon> <dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon>
</button> </button>
</div> </div>
<div id="select-all-wrapper" class="${classMap({hidden: this.directoriesOnly})}">
<button class="button ${classMap({hidden: !this.selectAllButton})}"
title="${i18n.t('nextcloud-file-picker.select-all-title')}"
@click="${() => { this.selectAll(); }}">
${i18n.t('nextcloud-file-picker.select-all')}
</button>
<button class="button ${classMap({hidden: this.selectAllButton})}"
title="${i18n.t('nextcloud-file-picker.select-nothing-title')}"
@click="${() => { this.deselectAll(); }}">
${i18n.t('nextcloud-file-picker.select-nothing')}
</button>
</div>
</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> <table id="directory-content-table" class="force-no-select"></table>
</div> </div>
</div>
<div class="nextcloud-footer ${classMap({hidden: !this.isPickerActive})}"> <div class="nextcloud-footer ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-footer-grid"> <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))})}" <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()); }}" @click="${() => { this.sendDirectory(this.tabulatorTable.getSelectedData()); }}"
?disabled="${!this.isSelected}"> ?disabled="${this.numberOfSelectedFiles === 0}">
<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})}" <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.isSelected}"> ?disabled="${!this.numberOfSelectedFiles > 0}">
${i18n.t('nextcloud-file-picker.select-files')}</button> ${i18n.t('nextcloud-file-picker.select-files')}</button>
<button id="abortButton" class="button select-button hidden ${classMap({"visible": (this.directoriesOnly && this.forAll && this.abortUploadButton)})}" <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> title="${i18n.t('nextcloud-file-picker.abort')}" @click="${() => { this.abortUpload = true; }}">${i18n.t('nextcloud-file-picker.abort')}</button>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment