diff --git a/packages/common/styles.js b/packages/common/styles.js
index 1cb6c1f9abab99544988aedb895b2137406ac33b..e7c50dcb8f2e61f92fecce8332463058016acd0f 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -576,7 +576,7 @@ export function getNotificationCSS() {
.notification.is-success {
background-color: var(--dbp-success-surface);
color: var(--dbp-on-success-surface);
- border-color: var(--dbp-surccess-surface-border-color);
+ border-color: var(--dbp-success-surface-border-color);
}
.notification.is-warning {
@@ -1397,3 +1397,198 @@ export function getLinkCss() {
}
`;
}
+
+export function getTabulatorStyles() {
+ // language=css
+ return css`
+
+
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
+ font-weight: normal;
+ font-size: 1rem;
+ }
+
+ .tabulator .tabulator-header,
+ .tabulator .tabulator-header,
+ .tabulator .tabulator-header .tabulator-col,
+ .tabulator,
+ .tabulator-row .tabulator-cell,
+ .tabulator-row.tabulator-row-even,
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+ background-color: unset;
+ background: unset;
+ color: unset;
+ border: none;
+ font-size: 1rem;
+ }
+
+ .tabulator-row,
+ .tabulator-row.tabulator-row-even {
+ background-color: var(--dbp-background);
+ }
+
+ .tabulator-row.tabulator-selectable.tabulator-selectable:hover {
+ background-color: var(--dbp-hover-background-color, var(--dbp-background));
+ color: var(--dbp-hover-color, var(--dbp-content));
+ }
+
+ .tabulator-row.tabulator-selectable.tabulator-selected:hover,
+ .tabulator-row.tabulator-selected {
+ background-color: var(--dbp-hover-background-color, var(--dbp-content-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-content-surface));
+ }
+
+ .tabulator-row,
+ .tabulator-row.tabulator-row-even {
+ border-top: 1px solid #eee;
+ color: var(--dbp-content);
+ }
+
+ .tabulator-row.tabulator-row-even.tabulator-selected {
+ color: var(--dbp-hover-color, var(--dbp-on-content-surface));
+ }
+
+ .tabulator-header {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
+ /* Toggle Button Styles */
+ .tabulator-row .tabulator-responsive-collapse {
+ border: none;
+ }
+
+ .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
+ height: 100%;
+ width: 100%;
+ background-color: unset;
+ }
+
+ .tabulator-responsive-collapse-toggle-open,
+ .tabulator-responsive-collapse-toggle-close {
+ content: none;
+ visibility: hidden;
+ }
+
+
+ .tabulator-responsive-collapse-toggle-open::after,
+ .tabulator-responsive-collapse-toggle-close::after {
+ content: '\\00a0\\00a0\\00a0\\00a0\\00a0';
+ background-color: var(--dbp-content);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center -2px;
+ mask-position: center center;
+ margin: 0 0 0 4px;
+ padding: 0 0 0.25% 0;
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ visibility: visible;
+ }
+
+ .tabulator-responsive-collapse-toggle-open::after {
+ -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yOS42LDk3LjZsNDQuMi00NC40YzAuOS0wLjksMS4zLTIuMSwxLjMtMy4zYzAtMS4yLTAuNS0yLjQtMS4zLTMuM0wyOS42LDIuNGMtMS4xLTEuMS0yLjgtMS4xLTMuOSwwCgljLTAuNSwwLjUtMC44LDEuMi0wLjgsMS45YzAsMC43LDAuMywxLjQsMC44LDEuOWw0My42LDQzLjZMMjUuNyw5My43Yy0xLjEsMS4xLTEuMSwyLjgsMCwzLjlDMjYuOCw5OC43LDI4LjUsOTguNywyOS42LDk3LjZ6Ii8+Cjwvc3ZnPgo=');
+ mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yOS42LDk3LjZsNDQuMi00NC40YzAuOS0wLjksMS4zLTIuMSwxLjMtMy4zYzAtMS4yLTAuNS0yLjQtMS4zLTMuM0wyOS42LDIuNGMtMS4xLTEuMS0yLjgtMS4xLTMuOSwwCgljLTAuNSwwLjUtMC44LDEuMi0wLjgsMS45YzAsMC43LDAuMywxLjQsMC44LDEuOWw0My42LDQzLjZMMjUuNyw5My43Yy0xLjEsMS4xLTEuMSwyLjgsMCwzLjlDMjYuOCw5OC43LDI4LjUsOTguNywyOS42LDk3LjZ6Ii8+Cjwvc3ZnPgo=');
+ }
+
+ .tabulator-responsive-collapse-toggle-close::after {
+ -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yLjQsMjkuNmw0NC40LDQ0LjJjMC45LDAuOSwyLjEsMS4zLDMuMywxLjNjMS4yLDAsMi40LTAuNSwzLjMtMS4zbDQ0LjItNDQuMmMxLjEtMS4xLDEuMS0yLjgsMC0zLjkKCWMtMC41LTAuNS0xLjItMC44LTEuOS0wLjhjLTAuNywwLTEuNCwwLjMtMS45LDAuOEw1MC4xLDY5LjNMNi4zLDI1LjdjLTEuMS0xLjEtMi44LTEuMS0zLjksMEMxLjMsMjYuOCwxLjMsMjguNSwyLjQsMjkuNnoiLz4KPC9zdmc+Cg==');
+ mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yLjQsMjkuNmw0NC40LDQ0LjJjMC45LDAuOSwyLjEsMS4zLDMuMywxLjNjMS4yLDAsMi40LTAuNSwzLjMtMS4zbDQ0LjItNDQuMmMxLjEtMS4xLDEuMS0yLjgsMC0zLjkKCWMtMC41LTAuNS0xLjItMC44LTEuOS0wLjhjLTAuNywwLTEuNCwwLjMtMS45LDAuOEw1MC4xLDY5LjNMNi4zLDI1LjdjLTEuMS0xLjEtMi44LTEuMS0zLjksMEMxLjMsMjYuOCwxLjMsMjguNSwyLjQsMjkuNnoiLz4KPC9zdmc+Cg==');
+ margin-left: 6px;
+ }
+
+ .tabulator-responsive-collapse-toggle-open:hover::after,
+ .tabulator-responsive-collapse-toggle-close:hover::after {
+ background-color: var(--dbp-hover-color, var(--dbp-content));
+ }
+
+ .tabulator-selected .tabulator-responsive-collapse-toggle-open::after,
+ .tabulator-selected .tabulator-responsive-collapse-toggle-close::after {
+ background-color: var(--dbp-hover-color, var(--dbp-on-content-surface));
+ }
+
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles .tabulator-responsive-collapse-toggle-close::after,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles:hover .tabulator-responsive-collapse-toggle-close::after,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles .tabulator-responsive-collapse-toggle-open::after,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles:hover .tabulator-responsive-collapse-toggle-open::after {
+ background-color: var(--dbp-content);
+ }
+
+ /* Define the style when the column is not sorted */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-top: none;
+ border-bottom: 6px solid var(--dbp-muted);
+ }
+
+ /* Define the style when the column is sorted in ascending order */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-top: none;
+ border-bottom: 6px solid var(--dbp-accent);
+ }
+
+ /* Define the style when the column is sorted in descending order */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-bottom: none;
+ border-top: 6px solid var(--dbp-accent);
+ color: var(--dbp-accent);
+ }
+
+ .tabulator-row, .tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-odd{
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .tabulator-row .tabulator-cell{
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+
+ .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
+ color: var(--dbp-muted);
+ font-size: 1rem;
+ font-weight: initial;
+ text-align: center;
+ }
+
+ .tabulator-placeholder {
+ border-top: 1px solid var(--dbp-muted);
+ padding-top: 10px;
+ }
+
+ .tabulator-row.no-select.tabulator-selected {
+ background-color: var(--dbp-background);
+ color: var(--dbp-muted);
+ }
+
+ .no-select,
+ .tabulator-row.tabulator-selected.no-select:hover,
+ .tabulator-row.no-select:hover,
+ .tabulator-row.tabulator-selectable.no-select:hover {
+ cursor: unset;
+ }
+
+ .no-select-styles,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles:hover,
+ .no-select,
+ .tabulator-row.tabulator-selected.no-select:hover,
+ .tabulator-row.no-select:hover,
+ .tabulator-row.tabulator-selectable.no-select:hover,
+ .tabulator-row.tabulator-selected.no-select-styles:hover,
+ .tabulator-row.no-select-styles:hover,
+ .tabulator-row.tabulator-selectable.no-select-styles:hover{
+ color: var(--dbp-content);
+ background-color: var(--dbp-background);
+ }
+
+ .tabulator .tabulator-tableholder{
+ overflow: inherit;
+ }
+
+ @media only screen and (orientation: portrait) and (max-width: 768px) {
+
+ }
+
+ `;
+}
+
diff --git a/packages/file-handling/package.json b/packages/file-handling/package.json
index 20436adb6354e32ef0d418919bdb6538e02df2a9..1ec5cc67bbacf741af543b1602708ed0a6566377 100644
--- a/packages/file-handling/package.json
+++ b/packages/file-handling/package.json
@@ -42,7 +42,7 @@
"jszip": "^3.5.0",
"lit": "^2.0.0",
"material-design-icons-svg": "^3.0.0",
- "tabulator-tables": "^4.8.4",
+ "tabulator-tables": "^5.1.7",
"webdav": "^4.8.0"
},
"scripts": {
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index a55110e2344e538e38216a4625049d11e868c426..7016b99b4e2431e803307db553fa129a988a1cbe 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -4,8 +4,8 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import * as fileHandlingStyles from '@dbp-toolkit/file-handling/src/styles';
-import {Icon} from '@dbp-toolkit/common';
-import Tabulator from 'tabulator-tables';
+import {Icon, getShadowRootDocument} from '@dbp-toolkit/common';
+import {TabulatorFull as Tabulator} from 'tabulator-tables';
import {humanFileSize} from '@dbp-toolkit/common/i18next';
import {name as pkgName} from '@dbp-toolkit/file-handling/package.json';
import {send} from '@dbp-toolkit/common/notification';
@@ -26,6 +26,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this.clipboardSelectBtnDisabled = true;
this.tabulatorTable = null;
this._onReceiveBeforeUnload = this.onReceiveBeforeUnload.bind(this);
+ this.boundSelectHandler = this.selectAllFiles.bind(this);
this.filesToSave = [];
this.numberOfSelectedFiles = 0;
this.enabledTargets = 'local';
@@ -36,6 +37,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this.nextcloudWebDavURL = '';
this.nextcloudName = '';
this.nextcloudFileURL = '';
+ this.nextcloudAuthInfo = '';
this.nextcloudStoreSession = false;
this.authInfo = '';
@@ -102,25 +104,18 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this._i18n.changeLanguage(this.lang);
break;
case 'clipboardFiles':
- this.generateClipboardTable();
-
+ if (this.tabulatorTable)
+ this.generateClipboardTable();
break;
}
});
super.update(changedProperties);
}
- 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);
- }
- }
-
toggleCollapse(e) {
const table = this.tabulatorTable;
+ // give a chance to draw the table
+ // this is for getting more hight in tabulator table, when toggle is called
setTimeout(function () {
table.redraw();
}, 0);
@@ -133,20 +128,20 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this.updateComplete.then(() => {
// see: http://tabulator.info/docs/4.7
this.tabulatorTable = new Tabulator(this._('#clipboard-content-table'), {
- //if you delete the wrapper around the table you need to set a heigh here
layout: 'fitColumns',
selectable: true,
- selectableRangeMode: 'drag',
+ placeholder: i18n.t('clipboard.no-data'),
responsiveLayout: 'collapse',
responsiveLayoutCollapseStartOpen: false,
- resizableColumns: false,
- placeholder: i18n.t('clipboard.no-data'),
+ columnHeaderVertAlign: 'middle',
+ columnDefaults: {
+ vertAlign: 'middle',
+ hozAlign: 'left',
+ resizable: false,
+ },
columns: [
{
- width: 32,
- minWidth: 32,
- align: 'center',
- resizable: false,
+ minWidth: 40,
headerSort: false,
formatter: 'responsiveCollapse',
},
@@ -157,14 +152,19 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
'<span class="checkmark" id="select_all_checkmark"></span>' +
'</label>',
field: 'type',
- align: 'center',
- headerSort: false,
+ hozAlign: 'center',
width: 50,
+ headerSort: false,
responsive: 1,
formatter: (cell, formatterParams, onRendered) => {
const icon_tag = that.getScopedTagName('dbp-icon');
- let icon = `<${icon_tag} name="empty-file" class="nextcloud-picker-icon"></${icon_tag}>`;
- return icon;
+ let icon =
+ `<${icon_tag} name="empty-file" class="nextcloud-picker-icon ` +
+ `"></${icon_tag}>`;
+ let div = getShadowRootDocument(this).createElement('div');
+ div.innerHTML = icon;
+ return div;
+
},
},
{
@@ -175,11 +175,10 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
field: 'name',
sorter: 'alphanum',
formatter: (cell) => {
- let data = cell.getRow().getData();
- if (data.edit) {
- cell.getElement().classList.add('fokus-edit');
- }
- return cell.getValue();
+ let div = getShadowRootDocument(this).createElement('div');
+ div.classList.add('filename');
+ div.innerHTML = cell.getValue();
+ return div;
},
},
{
@@ -189,9 +188,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
minWidth: 84,
field: 'size',
formatter: (cell, formatterParams, onRendered) => {
- return cell.getRow().getData().type === 'directory'
- ? ''
- : humanFileSize(cell.getValue());
+ return humanFileSize(cell.getValue());
},
},
{
@@ -235,65 +232,14 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
{column: 'name', dir: 'asc'},
{column: 'type', dir: 'asc'},
],
- rowClick: (e, row) => {
- this.numberOfSelectedFiles =
- this.tabulatorTable !== null
- ? this.tabulatorTable.getSelectedRows().length
- : 0;
- if (
- this.tabulatorTable !== null &&
- this.tabulatorTable.getSelectedRows().length ===
- this.tabulatorTable
- .getRows()
- .filter((row) => this.checkFileType(row.getData())).length
- ) {
- this._('#select_all').checked = true;
- } else {
- this._('#select_all').checked = false;
- }
- },
- rowSelectionChanged: (data, rows) => {
- if (this.tabulatorTable && this.tabulatorTable.getSelectedRows().length > 0) {
- this.clipboardSelectBtnDisabled = false;
- } else {
- this.clipboardSelectBtnDisabled = true;
- }
-
- if (this._('#select_all_checkmark')) {
- this._('#select_all_checkmark').title = this.checkAllSelected()
- ? i18n.t('clipboard.select-nothing')
- : i18n.t('clipboard.select-all');
- }
- },
- dataLoaded: () => {
- if (this.tabulatorTable !== null) {
- const that = this;
- setTimeout(function () {
- if (that._('.tabulator-responsive-collapse-toggle-open')) {
- that._a('.tabulator-responsive-collapse-toggle-open').forEach(
- (element) =>
- element.addEventListener(
- 'click',
- that.toggleCollapse.bind(that)
- )
- );
- }
-
- if (that._('.tabulator-responsive-collapse-toggle-close')) {
- that._a('.tabulator-responsive-collapse-toggle-close').forEach(
- (element) =>
- element.addEventListener(
- 'click',
- that.toggleCollapse.bind(that)
- )
- );
- }
- }, 0);
- }
- },
});
- that.generateClipboardTable();
+
+ this.tabulatorTable.on("tableBuilt", this.tableBuiltFunction.bind(this));
+ this.tabulatorTable.on("rowClick", this.rowClickFunction.bind(this));
+ this.tabulatorTable.on("rowSelectionChanged", this.rowSelectionChangedFunction.bind(this));
+ this.tabulatorTable.on("dataLoaded", this.dataLoadedFunction.bind(this));
});
+
//Register only one beforeunload Event for the clipboard warning
if (!window.clipboardWarning) {
window.addEventListener('beforeunload', this._onReceiveBeforeUnload, false);
@@ -301,10 +247,88 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
+ tableBuiltFunction() {
+ this.tabulatorTable.addRow([{}]).then(function (row) {
+ row.delete();
+ });
+
+ this.generateClipboardTable();
+ if (this._('#select_all')) {
+ this._('#select_all').addEventListener('click', this.boundSelectHandler);
+ }
+ }
+
+ rowClickFunction(e, row) {
+ this.numberOfSelectedFiles =
+ this.tabulatorTable !== null
+ ? this.tabulatorTable.getSelectedRows().length
+ : 0;
+ if (
+ this.tabulatorTable !== null &&
+ this.tabulatorTable.getSelectedRows().length ===
+ this.tabulatorTable
+ .getRows()
+ .filter((row) => this.checkFileType(row.getData())).length
+ ) {
+ this._('#select_all').checked = true;
+ } else {
+ this._('#select_all').checked = false;
+ }
+ }
+
+ rowSelectionChangedFunction(data, rows) {
+ const i18n = this._i18n;
+
+ if (this.tabulatorTable && this.tabulatorTable.getSelectedRows().length > 0) {
+ this.clipboardSelectBtnDisabled = false;
+ } else {
+ this.clipboardSelectBtnDisabled = true;
+ }
+
+ if (this._('#select_all_checkmark')) {
+ this._('#select_all_checkmark').title = this.checkAllSelected()
+ ? i18n.t('clipboard.select-nothing')
+ : i18n.t('clipboard.select-all');
+ }
+ }
+
+ dataLoadedFunction() {
+ if (this.tabulatorTable !== null) {
+
+ const that = this;
+ setTimeout(function () {
+ if (that._('.tabulator-responsive-collapse-toggle-open')) {
+ that._a('.tabulator-responsive-collapse-toggle-open').forEach(
+ (element) =>
+ element.addEventListener(
+ 'click',
+ that.toggleCollapse.bind(that)
+ )
+ );
+ }
+
+ if (that._('.tabulator-responsive-collapse-toggle-close')) {
+ that._a('.tabulator-responsive-collapse-toggle-close').forEach(
+ (element) =>
+ element.addEventListener(
+ 'click',
+ that.toggleCollapse.bind(that)
+ )
+ );
+ }
+ }, 0);
+
+ }
+ }
+
disconnectedCallback() {
//We doesn't want to deregister this event, because we want to use this event over activities
//window.removeEventListener('beforeunload', this._onReceiveBeforeUnload);
super.disconnectedCallback();
+ this.tabulatorTable.off("tableBuilt");
+ this.tabulatorTable.off("rowClick");
+ this.tabulatorTable.off("rowSelectionChanged");
+ this.tabulatorTable.off("dataLoaded");
}
/**
@@ -389,7 +413,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
*/
generateClipboardTable() {
this.numberOfSelectedFiles = 0;
- if (this.clipboardFiles.files) {
+ if (this.clipboardFiles.files && this.tabulatorTable) {
let data = [];
for (let i = 0; i < this.clipboardFiles.files.length; i++) {
data[i] = {
@@ -401,10 +425,9 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
};
}
- if (this.tabulatorTable !== null) {
- this.tabulatorTable.clearData();
- this.tabulatorTable.setData(data);
- }
+ this.tabulatorTable.clearData();
+ this.tabulatorTable.setData(data);
+
}
if (this._('#select_all')) {
this._('#select_all').checked = false;
@@ -641,92 +664,92 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
<div class="flex-container additional-button-container">
<div class="btn-flex-container-mobile">
<button
- id="clipboard-add-files-button"
- @click="${() => {
- this.openFileSource();
- }}"
- class="button ${classMap({
- hidden: this.mode === MODE_FILE_SINK || this.mode === MODE_FILE_SOURCE,
- })}"
- title="${i18n.t('clipboard.add-files')}"
- ?disabled="${this.buttonsDisabled}">
+ id="clipboard-add-files-button"
+ @click="${() => {
+ this.openFileSource();
+ }}"
+ class="button ${classMap({
+ hidden: this.mode === MODE_FILE_SINK || this.mode === MODE_FILE_SOURCE,
+ })}"
+ title="${i18n.t('clipboard.add-files')}"
+ ?disabled="${this.buttonsDisabled}">
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
${i18n.t('clipboard.add-files-btn')}
</button>
<button
- id="clipboard-remove-files-button"
- @click="${() => {
- this.clearClipboard();
- }}"
- class="button"
- title="${this.numberOfSelectedFiles > 0
- ? i18n.t('clipboard.remove-count', {count: this.numberOfSelectedFiles})
- : i18n.t('clipboard.remove-all')}"
- ?disabled="${buttonsAreDisabled}">
+ id="clipboard-remove-files-button"
+ @click="${() => {
+ this.clearClipboard();
+ }}"
+ class="button"
+ title="${this.numberOfSelectedFiles > 0
+ ? i18n.t('clipboard.remove-count', {count: this.numberOfSelectedFiles})
+ : i18n.t('clipboard.remove-all')}"
+ ?disabled="${buttonsAreDisabled}">
${this.numberOfSelectedFiles > 0
- ? i18n.t('clipboard.remove-count-btn', {
- count: this.numberOfSelectedFiles,
- })
- : i18n.t('clipboard.remove-all-btn')}
+ ? i18n.t('clipboard.remove-count-btn', {
+ count: this.numberOfSelectedFiles,
+ })
+ : i18n.t('clipboard.remove-all-btn')}
</button>
</div>
<div class="btn-flex-container-mobile">
<button
- id="clipboard-save-files-button"
- @click="${() => {
- this.openFileSink();
- }}"
- ?disabled="${buttonsAreDisabled}"
- class="button"
- title="${this.numberOfSelectedFiles > 0
- ? i18n.t('clipboard.save-count', {count: this.numberOfSelectedFiles})
- : i18n.t('clipboard.save-all')}">
+ id="clipboard-save-files-button"
+ @click="${() => {
+ this.openFileSink();
+ }}"
+ ?disabled="${buttonsAreDisabled}"
+ class="button"
+ title="${this.numberOfSelectedFiles > 0
+ ? i18n.t('clipboard.save-count', {count: this.numberOfSelectedFiles})
+ : i18n.t('clipboard.save-all')}">
${this.numberOfSelectedFiles > 0
- ? i18n.t('clipboard.save-count-btn', {
- count: this.numberOfSelectedFiles,
- })
- : i18n.t('clipboard.save-all-btn')}
+ ? i18n.t('clipboard.save-count-btn', {
+ count: this.numberOfSelectedFiles,
+ })
+ : i18n.t('clipboard.save-all-btn')}
</button>
</div>
</div>
<dbp-file-source
- id="file-source-clipboard"
- context="${i18n.t('clipboard.add-files')}"
- allowed-mime-types="${this.allowedMimeTypes}"
- nextcloud-auth-url="${this.nextcloudWebAppPasswordURL}"
- nextcloud-web-dav-url="${this.nextcloudWebDavURL}"
- nextcloud-name="${this.nextcloudName}"
- nextcloud-file-url="${this.nextcloudFileURL}"
- nexcloud-auth-info="${this.nextcloudAuthInfo}"
- ?nextcloud-store-session="${this.nextcloudStoreSession}"
- enabled-targets="${this.allowNesting
- ? this.enabledTargets
- : this.enabledTargets.replace('clipboard', '')}"
- decompress-zip
- lang="${this.lang}"
- text="${i18n.t('clipboard.upload-area-text')}"
- button-label="${i18n.t('clipboard.upload-button-label')}"
- @dbp-file-source-file-selected="${this.saveFilesToClipboardEvent}"
- @dbp-nextcloud-file-picker-number-files="${this.finishedSaveFilesToClipboard}"
- @dbp-file-source-file-upload-finished="${this
- .finishedSaveFilesToClipboard}"></dbp-file-source>
+ id="file-source-clipboard"
+ context="${i18n.t('clipboard.add-files')}"
+ allowed-mime-types="${this.allowedMimeTypes}"
+ nextcloud-auth-url="${this.nextcloudWebAppPasswordURL}"
+ nextcloud-web-dav-url="${this.nextcloudWebDavURL}"
+ nextcloud-name="${this.nextcloudName}"
+ nextcloud-file-url="${this.nextcloudFileURL}"
+ nexcloud-auth-info="${this.nextcloudAuthInfo}"
+ ?nextcloud-store-session="${this.nextcloudStoreSession}"
+ enabled-targets="${this.allowNesting
+ ? this.enabledTargets
+ : this.enabledTargets.replace('clipboard', '')}"
+ decompress-zip
+ lang="${this.lang}"
+ text="${i18n.t('clipboard.upload-area-text')}"
+ button-label="${i18n.t('clipboard.upload-button-label')}"
+ @dbp-file-source-file-selected="${this.saveFilesToClipboardEvent}"
+ @dbp-nextcloud-file-picker-number-files="${this.finishedSaveFilesToClipboard}"
+ @dbp-file-source-file-upload-finished="${this
+ .finishedSaveFilesToClipboard}"></dbp-file-source>
<dbp-file-sink
- id="file-sink-clipboard"
- context="${this.numberOfSelectedFiles > 0
- ? i18n.t('clipboard.save-count', {count: this.numberOfSelectedFiles})
- : i18n.t('clipboard.save-all')}"
- filename="clipboard-documents.zip"
- allowed-mime-types="${this.allowedMimeTypes}"
- enabled-targets="${this.allowNesting
- ? this.enabledTargets
- : this.enabledTargets.replace('clipboard', '')}"
- nextcloud-auth-url="${this.nextcloudWebAppPasswordURL}"
- nextcloud-web-dav-url="${this.nextcloudWebDavURL}"
- nextcloud-name="${this.nextcloudName}"
- nextcloud-file-url="${this.nextcloudFileURL}"
- nexcloud-auth-info="${this.nextcloudAuthInfo}"
- ?nextcloud-store-session="${this.nextcloudStoreSession}"
- lang="${this.lang}"></dbp-file-sink>
+ id="file-sink-clipboard"
+ context="${this.numberOfSelectedFiles > 0
+ ? i18n.t('clipboard.save-count', {count: this.numberOfSelectedFiles})
+ : i18n.t('clipboard.save-all')}"
+ filename="clipboard-documents.zip"
+ allowed-mime-types="${this.allowedMimeTypes}"
+ enabled-targets="${this.allowNesting
+ ? this.enabledTargets
+ : this.enabledTargets.replace('clipboard', '')}"
+ nextcloud-auth-url="${this.nextcloudWebAppPasswordURL}"
+ nextcloud-web-dav-url="${this.nextcloudWebDavURL}"
+ nextcloud-name="${this.nextcloudName}"
+ nextcloud-file-url="${this.nextcloudFileURL}"
+ nexcloud-auth-info="${this.nextcloudAuthInfo}"
+ ?nextcloud-store-session="${this.nextcloudStoreSession}"
+ lang="${this.lang}"></dbp-file-sink>
`;
}
@@ -751,7 +774,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
</div>
<div>
${this.getAdditionalButtons()}
- <link rel="stylesheet" href="${tabulatorCss}" />
+ <link rel="stylesheet" href="${tabulatorCss}"/>
<div class="table-wrapper">
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
@@ -759,11 +782,11 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
</div>
<div class="clipboard-footer">
<button
- class="button select-button is-primary"
- title="${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}"
- @click="${() => {
- this.saveFilesToClipboard();
- }}">
+ class="button select-button is-primary"
+ title="${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}"
+ @click="${() => {
+ this.saveFilesToClipboard();
+ }}">
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}
</button>
@@ -793,7 +816,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
</div>
<div>
${this.getAdditionalButtons()}
- <link rel="stylesheet" href="${tabulatorCss}" />
+ <link rel="stylesheet" href="${tabulatorCss}"/>
<div class="table-wrapper">
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
@@ -801,18 +824,18 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
</div>
<div class="clipboard-footer">
<button
- class="button select-button is-primary"
- ?disabled="${this.clipboardSelectBtnDisabled}"
- @click="${() => {
- this.sendClipboardFiles(this.tabulatorTable.getSelectedData());
- }}">
+ class="button select-button is-primary"
+ ?disabled="${this.clipboardSelectBtnDisabled}"
+ @click="${() => {
+ this.sendClipboardFiles(this.tabulatorTable.getSelectedData());
+ }}">
${this.tabulatorTable && this.tabulatorTable.getSelectedRows().length > 0
- ? i18n.t('clipboard.source-btn', {
- count: this.tabulatorTable
- ? this.tabulatorTable.getSelectedRows().length
- : 0,
- })
- : i18n.t('clipboard.source-btn-none')}
+ ? i18n.t('clipboard.source-btn', {
+ count: this.tabulatorTable
+ ? this.tabulatorTable.getSelectedRows().length
+ : 0,
+ })
+ : i18n.t('clipboard.source-btn-none')}
</button>
</div>
</div>
@@ -828,8 +851,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
+ ${commonStyles.getTabulatorStyles()}
${fileHandlingStyles.getFileHandlingCss()}
-
a {
border-bottom: var(--dbp-border);
padding: 0;
@@ -968,20 +991,21 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
display: block;
}
- .checkmark {
+ /* .checkmark {
height: 25px;
width: 25px;
left: 9px;
top: 2px;
}
+
.button-container .checkmark::after {
left: 8px;
top: 2px;
width: 8px;
height: 15px;
}
-
+*/
.select-all-icon {
height: 32px;
}
@@ -1017,7 +1041,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
return html`
<div>
${this.getAdditionalButtons()}
- <link rel="stylesheet" href="${tabulatorCss}" />
+ <link rel="stylesheet" href="${tabulatorCss}"/>
<div class="table-wrapper">
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index 5b50edbacb8c968d0167847d6597a4cdc0aa5ef2..bafcdd52be7be6a41fa22081c06aa444d1246d2a 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -8,7 +8,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import {createClient, parseXML} from 'webdav/web';
import {classMap} from 'lit/directives/class-map.js';
import {humanFileSize} from '@dbp-toolkit/common/i18next';
-import Tabulator from 'tabulator-tables';
+import {TabulatorFull as Tabulator} from 'tabulator-tables';
import MicroModal from './micromodal.es';
import {name as pkgName} from './../package.json';
import * as fileHandlingStyles from './styles';
@@ -65,7 +65,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.isInRecent = false;
this.userName = '';
this.menuHeightBreadcrumb = -1;
- this.menuHeightAdditional = -1;
this.boundCloseBreadcrumbMenuHandler = this.hideBreadcrumbMenu.bind(this);
this.initateOpenBreadcrumbMenu = false;
@@ -76,6 +75,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.disableRowClick = false;
this.boundRefreshOnWindowSizeChange = this.refreshOnWindowSizeChange.bind(this);
this.boundCancelNewFolderHandler = this.cancelNewFolder.bind(this);
+ this.boundSelectHandler = this.selectAllFiles.bind(this);
}
static get scopedElements() {
@@ -146,20 +146,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
disconnectedCallback() {
window.removeEventListener('message', this._onReceiveWindowMessage);
window.removeEventListener('resize', this.boundRefreshOnWindowSizeChange);
- 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);
- }
- if (this.directoriesOnly && this._('#select_all_wrapper')) {
- this._('#select_all_wrapper').classList.remove('button-container');
- this._('#select_all_wrapper').classList.add('hidden');
- }
+ // deregister tabulator table callback events
+ this.tabulatorTable.off("tableBuilt");
+ this.tabulatorTable.off("rowSelectionChanged");
+ this.tabulatorTable.off("rowClick");
+ this.tabulatorTable.off("rowAdded");
+ this.tabulatorTable.off("dataLoaded");
+ super.disconnectedCallback();
}
connectedCallback() {
@@ -173,23 +167,24 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.updateComplete.then(() => {
// see: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.addEventListener('message', this._onReceiveWindowMessage);
- // see: http://tabulator.info/docs/4.7
+ // see: http://tabulator.info/docs/5.1
this.tabulatorTable = new Tabulator(this._('#directory-content-table'), {
layout: 'fitColumns',
selectable: this.maxSelectedItems,
- selectableRangeMode: 'drag',
placeholder: this.directoriesOnly
? i18n.t('nextcloud-file-picker.no-data')
: i18n.t('nextcloud-file-picker.no-data-type'),
responsiveLayout: 'collapse',
responsiveLayoutCollapseStartOpen: false,
- resizableColumns: false,
+ columnHeaderVertAlign: 'middle',
+ columnDefaults: {
+ vertAlign: 'middle',
+ hozAlign: 'left',
+ resizable: false,
+ },
columns: [
{
- width: 32,
- minWidth: 32,
- align: 'center',
- resizable: false,
+ minWidth: 40,
headerSort: false,
formatter: 'responsiveCollapse',
},
@@ -199,10 +194,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
'<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,
+ hozAlign: 'center',
width: 50,
+ headerSort: false,
responsive: 1,
formatter: (cell, formatterParams, onRendered) => {
const icon_tag = that.getScopedTagName('dbp-icon');
@@ -230,11 +226,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
field: 'basename',
sorter: 'alphanum',
formatter: (cell) => {
- var data = cell.getRow().getData();
- if (data.edit) {
- cell.getElement().classList.add('fokus-edit');
- }
- return cell.getValue();
+ let div = getShadowRootDocument(this).createElement('div');
+ div.classList.add('filename');
+ div.innerHTML = cell.getValue();
+ return div;
},
},
{
@@ -295,132 +290,25 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
rowFormatter: (row) => {
let data = row.getData();
if (!this.checkFileType(data, this.allowedMimeTypes)) {
- row.getElement().classList.add('no-select');
+ row.getElement().classList.add('no-select'); // TODO check this
row.getElement().classList.remove('tabulator-selectable');
}
if (this.directoriesOnly && typeof data.mime !== 'undefined') {
row.getElement().classList.add('no-select');
row.getElement().classList.remove('tabulator-selectable');
}
- },
- rowSelectionChanged: (data, rows) => {
- if (!this.disableRowClick) {
- if (data.length > 0 && this.directoriesOnly) {
- this.folderIsSelected = i18n.t('nextcloud-file-picker.load-to-folder');
- } else {
- this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
- }
- if (
- !this.directoriesOnly &&
- this.tabulatorTable &&
- this.tabulatorTable
- .getSelectedRows()
- .filter(
- (row) =>
- row.getData().type != 'directory' &&
- this.checkFileType(row.getData(), this.allowedMimeTypes)
- ).length > 0
- ) {
- this.selectBtnDisabled = false;
- } 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();
- if (
- !row.getElement().classList.contains('no-select') &&
- !this.disableRowClick
- ) {
- if (this.directoriesOnly) {
- // comment out if you want to navigate through folders with double click
- const data = row.getData();
- this.directoryClicked(e, data);
- this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
- } else {
- switch (data.type) {
- case 'directory':
- this.directoryClicked(e, data);
- break;
- case 'file':
- if (
- this.tabulatorTable !== null &&
- 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 {
- this._('#select_all').checked = false;
- }
- break;
- }
- }
- } else {
- row.deselect();
- }
- },
- rowDblClick: (e, row) => {
- // comment this in for double click directory change
- /* if (this.directoriesOnly) {
- const data = row.getData();
- this.directoryClicked(e, data);
- this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
- }*/
- },
- rowAdded: (row) => {
- // console.log('row added');
- if (!this.disableRowClick) {
- row.getElement().classList.toggle('addRowAnimation');
- }
- },
- dataLoaded: () => {
- if (this.tabulatorTable !== null) {
- const that = this;
- setTimeout(function () {
- if (that._('.tabulator-responsive-collapse-toggle-open')) {
- that._a('.tabulator-responsive-collapse-toggle-open').forEach(
- (element) =>
- element.addEventListener(
- 'click',
- that.toggleCollapse.bind(that)
- )
- );
- }
- if (that._('.tabulator-responsive-collapse-toggle-close')) {
- that._a('.tabulator-responsive-collapse-toggle-close').forEach(
- (element) =>
- element.addEventListener(
- 'click',
- that.toggleCollapse.bind(that)
- )
- );
- }
- }, 0);
+ if (!this.directoriesOnly && typeof data.mime === 'undefined') {
+ row.getElement().classList.add('no-select-styles');
}
},
});
- // Strg + click select mode on desktop
- /*if (this.tabulatorTable.browserMobile === false) {
- this.tabulatorTable.options.selectableRangeMode = "click";
- }*/
+ this.tabulatorTable.on("tableBuilt", this.tableBuiltFunction.bind(this));
+ this.tabulatorTable.on("rowSelectionChanged", this.rowSelectionChangedFunction.bind(this));
+ this.tabulatorTable.on("rowClick", this.rowClickFunction.bind(this));
+ this.tabulatorTable.on("rowAdded", this.rowAddedFunction.bind(this));
+ this.tabulatorTable.on("dataLoaded", this.dataLoadedFunction.bind(this));
if (
typeof this.allowedMimeTypes !== 'undefined' &&
@@ -429,19 +317,132 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
) {
this.tabulatorTable.setFilter(this.checkFileType, this.allowedMimeTypes);
}
- // comment this in to show only directories in filesink
- /*
- if (typeof this.directoriesOnly !== 'undefined' && this.directoriesOnly) {
- this.tabulatorTable.setFilter([
- {field:"type", type:"=", value:"directory"},
- ]);
- }
- */
window.addEventListener('resize', this.boundRefreshOnWindowSizeChange);
});
}
+ tableBuiltFunction() {
+ if (this._('#select_all')) {
+ this._('#select_all').addEventListener('click', this.boundSelectHandler);
+ }
+ if (this.directoriesOnly && this._('#select_all_wrapper')) {
+ this._('#select_all_wrapper').classList.remove('button-container');
+ this._('#select_all_wrapper').classList.add('hidden');
+ }
+ }
+
+ rowSelectionChangedFunction(data, rows) {
+ const i18n = this._i18n;
+
+ if (!this.disableRowClick) {
+ if (data.length > 0 && this.directoriesOnly) {
+ this.folderIsSelected = i18n.t('nextcloud-file-picker.load-to-folder');
+ } else {
+ this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
+ }
+ if (
+ !this.directoriesOnly &&
+ this.tabulatorTable &&
+ this.tabulatorTable
+ .getSelectedRows()
+ .filter(
+ (row) =>
+ row.getData().type != 'directory' &&
+ this.checkFileType(row.getData(), this.allowedMimeTypes)
+ ).length > 0
+ ) {
+ this.selectBtnDisabled = false;
+ } 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();
+ }
+ }
+
+ rowClickFunction(e, row) {
+ const i18n = this._i18n;
+ const data = row.getData();
+ if (
+ !row.getElement().classList.contains('no-select') &&
+ !this.disableRowClick
+ ) {
+ if (this.directoriesOnly) {
+ // comment out if you want to navigate through folders with double click
+ const data = row.getData();
+ this.directoryClicked(e, data);
+ this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
+ } else {
+ switch (data.type) {
+ case 'directory':
+ this.directoryClicked(e, data);
+ break;
+ case 'file':
+ if (
+ this.tabulatorTable !== null &&
+ 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 {
+ this._('#select_all').checked = false;
+ }
+ break;
+ }
+ }
+ } else {
+ row.deselect();
+ }
+ }
+
+ rowAddedFunction(row) {
+ if (!this.disableRowClick) {
+ row.getElement().classList.toggle('addRowAnimation');
+ }
+ }
+
+ dataLoadedFunction(data) {
+ if (this.tabulatorTable !== null) {
+ const that = this;
+ setTimeout(function () {
+ if (that._('.tabulator-responsive-collapse-toggle-open')) {
+ that._a('.tabulator-responsive-collapse-toggle-open').forEach(
+ (element) =>
+ element.addEventListener(
+ 'click',
+ that.toggleCollapse.bind(that)
+ )
+ );
+ }
+
+ if (that._('.tabulator-responsive-collapse-toggle-close')) {
+ that._a('.tabulator-responsive-collapse-toggle-close').forEach(
+ (element) =>
+ element.addEventListener(
+ 'click',
+ that.toggleCollapse.bind(that)
+ )
+ );
+ }
+ }, 0);
+
+ }
+ }
+
/**
* Request a re-render every time isLoggedIn()/isLoading() changes
*/
@@ -458,14 +459,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (this.isLoggedIn() && !this._loginCalled) {
this._loginCalled = true;
- this.loginCallback();
+ this.checkLocalStorage();
}
}
- loginCallback() {
- this.checkLocalStorage();
- }
-
/**
* Returns if a person is set in or not
*
@@ -633,6 +630,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
toggleCollapse(e) {
const table = this.tabulatorTable;
+ // give a chance to draw the table
+ // this is for getting more hight in tabulator table, when toggle is called
setTimeout(function () {
table.redraw();
}, 0);
@@ -777,12 +776,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
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>`;
+ '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>`;
this.loading = false;
this.statusText = reloadButton;
}
@@ -859,14 +861,17 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
let reloadButton = html`${i18n.t(
- 'nextcloud-file-picker.something-went-wrong'
- )} <button class="button"
- title="${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;
}
@@ -907,12 +912,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
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>`;
+ '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>`;
this.loading = false;
this.statusText = reloadButton;
}
@@ -1018,14 +1026,17 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
let reloadButton = html`${i18n.t(
- 'nextcloud-file-picker.something-went-wrong'
- )} <button class="button"
- title="${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;
}
@@ -1067,12 +1078,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
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>`;
+ '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>`;
this.loading = false;
this.statusText = reloadButton;
}
@@ -1181,14 +1195,17 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.tabulatorTable.clearData();
this.webDavClient = null;
let reloadButton = html`${i18n.t(
- 'nextcloud-file-picker.something-went-wrong'
- )} <button class="button"
- title="${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;
}
@@ -1230,11 +1247,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
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();
- }}">
+ class="button"
+ title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
+ @click="${async () => {
+ this.openFilePicker();
+ }}">
<dbp-icon name="reload"></dbp-icon>
</button>
`;
@@ -1321,11 +1338,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
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();
- }}">
+ class="button"
+ title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
+ @click="${async () => {
+ this.openFilePicker();
+ }}">
<dbp-icon name="reload"></dbp-icon>
</button>
`;
@@ -1889,13 +1906,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.disableRowClick = true;
- // that._('#new-folder-row').addEventListener('keydown', (event) => {
- // if (event.key === 'Escape') {
- // that.deleteNewFolderEntry();
- // event.stopPropagation();
- // }
- // });
-
// Click handler should ignore first click
this.initateOpenNewFolder = true;
@@ -1960,6 +1970,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.webDavClient
.createDirectory(folderPath)
.then((contents) => {
+ this.tabulatorTable.setSort();
const d = new Date();
let props = {permissions: 'RGDNVCK'};
this.tabulatorTable.addRow(
@@ -1991,8 +2002,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.statusText = html`
<span class="error">
${i18n.t('nextcloud-file-picker.webdav-error', {
- error: error.message,
- })}
+ error: error.message,
+ })}
</span>
`;
}
@@ -2020,6 +2031,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.createDirectory(folderPath)
.then((contents) => {
// this.loadDirectory(this.directoryPath);
+ this.tabulatorTable.setSort();
const d = new Date();
let props = {permissions: 'RGDNVCK'};
this.tabulatorTable.addRow(
@@ -2069,6 +2081,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
*/
selectAllFiles() {
let allSelected = this.checkAllSelected();
+
if (allSelected) {
this.tabulatorTable.getSelectedRows().forEach((row) => row.deselect());
} else {
@@ -2111,21 +2124,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
}
- /**
- * Returns the parent directory path
- *
- * @returns {string} parent directory path
- */
- getParentDirectoryPath() {
- if (typeof this.directoryPath === 'undefined') {
- this.directoryPath = '';
- }
- let path = this.directoryPath.replace(/\/$/, '');
- path = path.replace(path.split('/').pop(), '').replace(/\/$/, '');
-
- return path === '' ? '/' : path;
- }
-
/**
* Returns the directory path as clickable breadcrumbs
*
@@ -2140,11 +2138,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
htmlpath[0] = html`
<span class="breadcrumb">
<a
- class="home-link"
- @click="${() => {
- this.loadDirectory('');
- }}"
- title="${i18n.t('nextcloud-file-picker.folder-home')}">
+ class="home-link"
+ @click="${() => {
+ this.loadDirectory('');
+ }}"
+ title="${i18n.t('nextcloud-file-picker.folder-home')}">
<dbp-icon name="home"></dbp-icon>
</a>
</span>
@@ -2155,10 +2153,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="first">›</span>
<span class="breadcrumb special">
<a
- @click="${() => {
- this.loadFavorites();
- }}"
- title="${i18n.t('nextcloud-file-picker.favorites-title')}">
+ @click="${() => {
+ this.loadFavorites();
+ }}"
+ title="${i18n.t('nextcloud-file-picker.favorites-title')}">
${i18n.t('nextcloud-file-picker.favorites-title')}
</a>
</span>
@@ -2168,10 +2166,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="first">›</span>
<span class="breadcrumb special">
<a
- @click="${() => {
- this.loadAllRecentFiles();
- }}"
- title="${i18n.t('nextcloud-file-picker.recent-files-title')}">
+ @click="${() => {
+ this.loadAllRecentFiles();
+ }}"
+ title="${i18n.t('nextcloud-file-picker.recent-files-title')}">
${i18n.t('nextcloud-file-picker.recent-files-title')}
</a>
</span>
@@ -2181,10 +2179,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="first">›</span>
<span class="breadcrumb special">
<a
- @click="${() => {
- this.loadMyRecentFiles();
- }}"
- title="${i18n.t('nextcloud-file-picker.my-recent-files-title')}">
+ @click="${() => {
+ this.loadMyRecentFiles();
+ }}"
+ title="${i18n.t('nextcloud-file-picker.my-recent-files-title')}">
${i18n.t('nextcloud-file-picker.my-recent-files-title')}
</a>
</span>
@@ -2207,12 +2205,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="first breadcrumb-arrow">›</span>
<span class="breadcrumb">
<a
- @click="${() => {
- this.loadDirectory(path);
- }}"
- title="${i18n.t('nextcloud-file-picker.load-path-link', {
- path: directories[i],
- })}">
+ @click="${() => {
+ this.loadDirectory(path);
+ }}"
+ title="${i18n.t('nextcloud-file-picker.load-path-link', {
+ path: directories[i],
+ })}">
${directories[i]}
</a>
</span>
@@ -2222,12 +2220,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="breadcrumb-arrow">›</span>
<span class="breadcrumb">
<a
- @click="${() => {
- this.loadDirectory(path);
- }}"
- title="${i18n.t('nextcloud-file-picker.load-path-link', {
- path: directories[i],
- })}">
+ @click="${() => {
+ this.loadDirectory(path);
+ }}"
+ title="${i18n.t('nextcloud-file-picker.load-path-link', {
+ path: directories[i],
+ })}">
${directories[i]}
</a>
</span>
@@ -2257,12 +2255,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
path_temp[i] = html`
<li class="breadcrumb-${i}" id="breadcrumb-${i}">
<a
- @click="${() => {
- this.loadDirectory(path);
- }}"
- title="${i18n.t('nextcloud-file-picker.load-path-link', {
- path: directories[i],
- })}">
+ @click="${() => {
+ this.loadDirectory(path);
+ }}"
+ title="${i18n.t('nextcloud-file-picker.load-path-link', {
+ path: directories[i],
+ })}">
<dbp-icon name="folder" class="breadcrumb-folder"></dbp-icon>
${directories[i]}
</a>
@@ -2277,10 +2275,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span class="first breadcrumb-arrow">›</span>
<span class="breadcrumb">
<a
- class="extended-breadcrumb-link"
- @click="${() => {
- this.toggleBreadcrumbMenu();
- }}">
+ class="extended-breadcrumb-link"
+ @click="${() => {
+ this.toggleBreadcrumbMenu();
+ }}">
. . .
</a>
<div class="breadcrumb-menu">
@@ -2327,12 +2325,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
menu.setAttribute(
'style',
'position: fixed;top: ' +
- topValue +
- 'px;height: ' +
- actualHeight +
- 'px;max-width: ' +
- maxWidth +
- 'px;overflow-y: auto;'
+ topValue +
+ 'px;height: ' +
+ actualHeight +
+ 'px;max-width: ' +
+ maxWidth +
+ 'px;overflow-y: auto;'
);
menu.scrollTop = 0;
this._('.nextcloud-content').setAttribute('style', 'overflow:hidden;');
@@ -2407,7 +2405,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
_atChangeInput(event) {
- if (this._("#new-folder-confirm-btn") )
+ if (this._("#new-folder-confirm-btn"))
this._("#new-folder-confirm-btn").disabled = this._('#tf-new-folder-dialog') && this._('#tf-new-folder-dialog').value === '';
}
@@ -2419,17 +2417,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
+ ${commonStyles.getTabulatorStyles()}
${fileHandlingStyles.getFileHandlingCss()}
-
- #new-folder-row .button {
- background-color: var(--dbp-success);
- color: var(--dbp-on-success-surface);
- border: 1px solid var(--dbp-on-success-surface);
- position: absolute;
- right: 10px;
- top: 8px;
- }
-
.breadcrumb-folder {
padding-right: 5px;
color: var(--dbp-muted);
@@ -2437,24 +2426,28 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-top: 7px;
}
- .tabulator-header {
- padding-top: 8px;
- padding-bottom: 0;
+ .breadcrumb.special a {
+ overflow: visible;
}
- .tabulator-placeholder span {
- padding: 14px !important; /*TODO find a better way*/
- white-space: normal;
+ .breadcrumb-menu {
+ display: inline;
}
- .tabulator-placeholder {
- border-top: 1px solid var(--dbp-muted);
+ .breadcrumb {
+ border-bottom: var(--dbp-border);
}
- #new-folder-row.highlighted {
- background: var(--dbp-success-surface);
- color: var(--dbp-on-success-surface);
- position: relative;
+ .breadcrumb:last-child,
+ .breadcrumb:first-child {
+ border-bottom: none;
+ }
+
+ .breadcrumb a {
+ display: inline-block;
+ height: 33px;
+ vertical-align: middle;
+ line-height: 33px;
}
span.first {
@@ -2471,10 +2464,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding: 7px;
}
- .breadcrumb.special a {
- overflow: visible;
- }
-
.extended-breadcrumb-menu li a {
max-width: none;
display: inline;
@@ -2483,6 +2472,27 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-nav {
position: relative;
width: 100%;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .nextcloud-nav p {
+ align-self: center;
+ }
+
+ .nextcloud-nav h2 {
+ padding-top: 10px;
+ }
+
+ .nextcloud-nav a {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 130px;
+ }
+
+ .nextcloud-nav a.home-link {
+ font-size: 1.4em;
}
.nextcloud-header.hidden {
@@ -2491,10 +2501,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-header {
padding-bottom: 7px;
+ width: 100%;
}
- .breadcrumb-menu {
- display: inline;
+ .nextcloud-header div button {
+ justify-self: start;
}
.extended-breadcrumb-menu li {
@@ -2531,21 +2542,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
position: absolute;
background-color: var(--dbp-background);
z-index: 1000;
- /** display: grid; **/
- }
-
- .button-container.filter-user {
- line-height: 28px;
- padding-left: 40px;
- }
-
- .tabulator-row.no-select.tabulator-selected {
- background-color: var(--dbp-background);
- color: var(--dbp-muted);
}
input[type='text']#tf-new-folder:focus {
- /* font-weight: 300; */
border: none;
background: transparent;
height: 100%;
@@ -2594,10 +2593,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
width: calc(100% - 42px);
}
- .new-folder-selected::after {
- filter: invert(100%);
- }
-
.visible {
display: unset;
}
@@ -2615,7 +2610,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
- padding-left: 4px; /** align with */
+ padding-left: 4px;
}
.extended-menu li {
@@ -2669,14 +2664,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
cursor: default;
}
- .nextcloud-header {
- width: 100%;
- }
-
- .nextcloud-header div button {
- justify-self: start;
- }
-
.nextcloud-intro {
text-align: center;
}
@@ -2693,8 +2680,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
height: 100%;
width: 100%;
background-image: var(
- --dbp-override-image-nextcloud,
- url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M69.3 86.1l-46.1 0C11 85.9 1.1 75.9 1.1 63.7c0-11.8 9.1-21.4 20.6-22.4 0.5-15.2 13-27.4 28.3-27.4 3.4 0 6.6 0.5 9.2 1.6 6.2 2.1 11.4 6.4 14.8 12 6.5 1 12.7 4.3 16.9 9.1 5 5.5 7.8 12.6 7.8 19.9C98.8 72.8 85.6 86.1 69.3 86.1zM23.6 80.6h45.7c13.3 0 24-10.8 24-24 0-6-2.3-11.8-6.4-16.2 -3.7-4.2-9.1-6.9-14.9-7.5l-1.4-0.2L70 31.4c-2.8-5.1-7.2-8.9-12.6-10.7l-0.1 0c-2-0.8-4.5-1.2-7.2-1.2 -12.6 0-22.9 10.3-22.9 22.9v4.5h-3.6c-9.3 0-17 7.6-17 17C6.6 73 14.3 80.6 23.6 80.6z'/%3E%3C/svg%3E")
+ --dbp-override-image-nextcloud,
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M69.3 86.1l-46.1 0C11 85.9 1.1 75.9 1.1 63.7c0-11.8 9.1-21.4 20.6-22.4 0.5-15.2 13-27.4 28.3-27.4 3.4 0 6.6 0.5 9.2 1.6 6.2 2.1 11.4 6.4 14.8 12 6.5 1 12.7 4.3 16.9 9.1 5 5.5 7.8 12.6 7.8 19.9C98.8 72.8 85.6 86.1 69.3 86.1zM23.6 80.6h45.7c13.3 0 24-10.8 24-24 0-6-2.3-11.8-6.4-16.2 -3.7-4.2-9.1-6.9-14.9-7.5l-1.4-0.2L70 31.4c-2.8-5.1-7.2-8.9-12.6-10.7l-0.1 0c-2-0.8-4.5-1.2-7.2-1.2 -12.6 0-22.9 10.3-22.9 22.9v4.5h-3.6c-9.3 0-17 7.6-17 17C6.6 73 14.3 80.6 23.6 80.6z'/%3E%3C/svg%3E")
);
background-repeat: no-repeat;
background-position: center;
@@ -2720,10 +2707,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
position: relative;
}
- .wrapper-select {
- justify-content: inherit;
- }
-
.select-button {
justify-self: end;
}
@@ -2735,11 +2718,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
-webkit-overflow-scrolling: touch;
}
- .nextcloud-nav {
- display: flex;
- justify-content: space-between;
- }
-
.nextcloud-footer {
background-color: var(--dbp-background);
width: 100%;
@@ -2760,10 +2738,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
margin-right: -11px;
}
- .nextcloud-nav p {
- align-self: center;
- }
-
#replace-modal-box {
display: flex;
flex-direction: column;
@@ -2827,22 +2801,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-bottom: 15px;
}
- .breadcrumb {
- border-bottom: var(--dbp-border);
- }
-
- .breadcrumb:last-child,
- .breadcrumb:first-child {
- border-bottom: none;
- }
-
- .breadcrumb a {
- display: inline-block;
- height: 33px;
- vertical-align: middle;
- line-height: 33px;
- }
-
input:disabled + label {
color: var(--dbp-muted);
}
@@ -2851,19 +2809,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
display: inline-block;
}
- .nextcloud-nav h2 {
- padding-top: 10px;
- }
-
- .no-select,
- .tabulator-row.tabulator-selected.no-select:hover,
- .tabulator-row.no-select:hover,
- .tabulator-row.tabulator-selectable.no-select:hover {
- cursor: unset;
- color: var(--dbp-content);
- background-color: var(--dbp-background);
- }
-
.inline-block {
position: absolute;
right: 0px;
@@ -2921,12 +2866,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
padding-right: 50px;
}
- .nextcloud-nav a {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 130px;
- }
#replace-modal-box .modal-header {
padding: 0px;
@@ -2941,35 +2880,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
text-align: left;
}
+ #replace-modal .checkmark {
+ height: 20px;
+ width: 20px;
+ left: 15px;
+ top: 5px;
+ }
+
.table-wrapper {
- position: relative;
+ max-width: 100%;
+ width: 100%;
}
- .button-container .checkmark::after {
- left: 6px;
- top: 1px;
- width: 5px;
- height: 11px;
- }
.select-all-icon {
height: 30px;
}
- .checkmark {
- height: 20px;
- width: 20px;
- left: 11px;
- top: 4px;
- }
-
- #replace-modal .checkmark {
- height: 20px;
- width: 20px;
- left: 1px;
- top: 0px;
- }
-
.remember-container {
display: inline-block;
line-height: 28px;
@@ -2982,15 +2909,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.more-menu {
height: 22.4px;
- /*top: 4px;*/
width: 19px;
margin-top: 4px;
}
- .nextcloud-nav a.home-link {
- font-size: 1.4em;
- }
-
#new-folder-modal-box {
display: flex;
flex-direction: column;
@@ -3008,7 +2930,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
justify-content: space-between;
}
- #new-folder-modal-box footer.modal-footer .modal-footer-btn {
+ #new-folder-modal-box footer.modal-footer .modal-footer-btn {
padding: 0px;
display: flex;
justify-content: space-between;
@@ -3030,56 +2952,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
@media only screen and (orientation: portrait) and (max-width: 768px) {
- .breadcrumb-arrow {
- font-size: 1.6em;
- vertical-align: middle;
- padding-bottom: 3px;
- padding-left: 2px;
- padding-right: 2px;
- /**padding: 0px 2px 2px 3px;*/
- }
.nextcloud-header {
padding-bottom: 0px;
- }
-
- .extended-breadcrumb-link {
- margin-top: -4px; /**TODO -3px; -2px;*/
- font-size: 1.2em !important; /**TODO for demo purpose only */
- font-weight: 400;
- }
-
- .extended-menu {
- top: 0px;
- }
-
- .breadcrumb .extended-breadcrumb-menu a {
- /* overflow: visible; */
- display: inherit;
- }
-
- .additional-menu button {
- float: right;
- }
-
- .additional-menu {
- position: inherit; /** absolute */
- right: 0px;
- margin-right: -12px;
- }
-
- .inline-block {
- width: inherit;
- position: absolute;
- right: 52px;
- z-index: 1;
- background-color: var(--dbp-background);
- bottom: 0px;
- }
-
- .add-folder-button {
- right: 0px;
- position: absolute;
+ grid-area: header-l;
+ margin-bottom: 0px;
}
.nextcloud-nav h2 > a {
@@ -3107,20 +2984,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
margin: 0 auto;
}
- .button-wrapper {
- justify-self: start;
- }
-
- .wrapper {
- display: flex;
- justify-content: space-between;
- }
-
- .nextcloud-header {
- grid-area: header-l;
- margin-bottom: 0px;
- }
-
.nextcloud-content,
.nextcloud-intro {
grid-area: content;
@@ -3140,6 +3003,67 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
left: 0px;
}
+ .nextcloud-footer-grid {
+ display: flex;
+ justify-content: center;
+ flex-direction: column-reverse;
+ }
+
+ .breadcrumb-arrow {
+ font-size: 1.6em;
+ vertical-align: middle;
+ padding-bottom: 3px;
+ padding-left: 2px;
+ padding-right: 2px;
+ }
+
+ .breadcrumb .extended-breadcrumb-menu a {
+ display: inherit;
+ }
+
+ .extended-breadcrumb-link {
+ margin-top: -4px;
+ font-size: 1.2em !important; /**TODO for demo purpose only */
+ font-weight: 400;
+ }
+
+ .extended-menu {
+ top: 0px;
+ }
+
+ .additional-menu {
+ position: inherit;
+ right: 0px;
+ margin-right: -12px;
+ }
+
+ .additional-menu button {
+ float: right;
+ }
+
+ .inline-block {
+ width: inherit;
+ position: absolute;
+ right: 52px;
+ z-index: 1;
+ background-color: var(--dbp-background);
+ bottom: 0px;
+ }
+
+ .add-folder-button {
+ right: 0px;
+ position: absolute;
+ }
+
+ .button-wrapper {
+ justify-self: start;
+ }
+
+ .wrapper {
+ display: flex;
+ justify-content: space-between;
+ }
+
.mobile-hidden {
display: none;
}
@@ -3148,12 +3072,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
position: relative;
}
- .nextcloud-footer-grid {
- display: flex;
- justify-content: center;
- flex-direction: column-reverse;
- }
-
.select-button {
margin: 0px;
}
@@ -3171,23 +3089,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
display: none;
}
- .button-container .checkmark::after {
- /** left: 8px;
- top: 2px;
- width: 8px;
- height: 15px; */
- }
-
.select-all-icon {
height: 32px;
}
-
- .checkmark {
- /** height: 25px;
- width: 25px;
- left: 9px;
- top: 2px; */
- }
}
`;
}
@@ -3198,14 +3102,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
pkgName,
'tabulator-tables/css/tabulator.min.css'
);
+
return html`
<div class="wrapper">
- <link rel="stylesheet" href="${tabulatorCss}" />
+ <link rel="stylesheet" href="${tabulatorCss}"/>
<div class="nextcloud-intro ${classMap({hidden: this.isPickerActive})}">
<div
- class="nextcloud-logo ${classMap({
- 'nextcloud-logo-sm': this.isPickerActive,
- })}">
+ class="nextcloud-logo ${classMap({
+ 'nextcloud-logo-sm': this.isPickerActive,
+ })}">
<div class="nextcloud-logo-image"></div>
</div>
<div class="block text-center ${classMap({hidden: this.isPickerActive})}">
@@ -3214,47 +3119,47 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${i18n.t('nextcloud-file-picker.init-text-1', {
name: this.nextcloudName,
})}
- <br />
+ <br/>
${i18n.t('nextcloud-file-picker.init-text-2')}
- <br />
- <br />
+ <br/>
+ <br/>
</p>
</div>
<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();
- }}">
+ 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>
</div>
<div
- class="block text-center m-inherit ${classMap({
- hidden: !this.storeSession || !this.isLoggedIn(),
- })}">
+ class="block text-center m-inherit ${classMap({
+ hidden: !this.storeSession || !this.isLoggedIn(),
+ })}">
<label class="button-container remember-container">
${i18n.t('nextcloud-file-picker.remember-me', {
name: this.nextcloudName,
})}
- <input type="checkbox" id="remember-checkbox" name="remember" />
+ <input type="checkbox" id="remember-checkbox" name="remember"/>
<span class="checkmark"></span>
</label>
</div>
<div
- class="block text-center m-inherit ${classMap({
- hidden: this.isPickerActive,
- })}">
+ class="block text-center m-inherit ${classMap({
+ hidden: this.isPickerActive,
+ })}">
<p class="m-inherit">
- <br />
+ <br/>
${i18n.t('nextcloud-file-picker.auth-info')}
<slot name="auth-info">
- <br />
+ <br/>
${this.authInfo}
</slot>
</p>
@@ -3264,23 +3169,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="nextcloud-nav">
<p>${this.getBreadcrumb()}</p>
- <div class="menu-buttons">
+ <div class="menu-buttons">
<div class="add-folder ${classMap({hidden: this.storeSession})}">
- <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 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>
</div>
- </div>
<button class="button ${classMap({hidden: this.storeSession})}"
title="${i18n.t('nextcloud-file-picker.add-folder-open')}"
@click="${() => {
@@ -3289,63 +3194,64 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon name="plus" class="nextcloud-add-folder" id="add-folder-button"></dbp-icon>
</button>
</div>
-
+
<div class="additional-menu ${classMap({hidden: !this.storeSession})}">
<a
- class="extended-menu-link"
- @click="${() => {
- this.toggleMoreMenu();
- }}"
- title="${i18n.t('nextcloud-file-picker.more-menu')}">
+ class="extended-menu-link"
+ @click="${() => {
+ this.toggleMoreMenu();
+ }}"
+ title="${i18n.t('nextcloud-file-picker.more-menu')}">
<dbp-icon name="menu-dots" class="more-menu"></dbp-icon>
</a>
<ul class="extended-menu hidden">
<li
- class="${classMap({active: this.isInFavorites})}"
- id="favorites-item">
+ class="${classMap({active: this.isInFavorites})}"
+ id="favorites-item">
<a class="" @click="${this.loadFavorites}">
${i18n.t('nextcloud-file-picker.favorites-link-text')}
</a>
</li>
<li
- class="${classMap({active: this.isInFilteredRecent})}"
- id="my-recent-item">
+ class="${classMap({active: this.isInFilteredRecent})}"
+ id="my-recent-item">
<a class="" @click="${this.loadMyRecentFiles}">
${i18n.t('nextcloud-file-picker.my-recent-files-link-text')}
</a>
</li>
<li
- class="${classMap({active: this.isInRecent})}"
- id="all-recent-item">
+ class="${classMap({active: this.isInRecent})}"
+ id="all-recent-item">
<a class="" @click="${this.loadAllRecentFiles}">
${i18n.t(
- 'nextcloud-file-picker.all-recent-files-link-text'
+ 'nextcloud-file-picker.all-recent-files-link-text'
)}
</a>
</li>
- <li class="${classMap({inactive:
- this.isInRecent ||
- this.isInFavorites ||
- this.isInFilteredRecent ||
- this.disableRowClick,
- })}">
+ <li class="${classMap({
+ inactive:
+ this.isInRecent ||
+ this.isInFavorites ||
+ this.isInFilteredRecent ||
+ this.disableRowClick,
+ })}">
<a class=""
- @click="${() => {
- this.addOpenFolderTableEntry();
- }}">
+ @click="${() => {
+ this.addOpenFolderTableEntry();
+ }}">
${i18n.t('nextcloud-file-picker.add-folder')}
</a>
</li>
<li
- class="${classMap({hidden: !this.storeSession})}"
- title="${i18n.t('nextcloud-file-picker.log-out')}">
+ class="${classMap({hidden: !this.storeSession})}"
+ title="${i18n.t('nextcloud-file-picker.log-out')}">
<a
- class=""
- @click="${() => {
- this.logOut();
- this.hideAdditionalMenu();
- }}">
+ class=""
+ @click="${() => {
+ this.logOut();
+ this.hideAdditionalMenu();
+ }}">
${i18n.t('nextcloud-file-picker.log-out')}
</a>
</li>
@@ -3362,60 +3268,60 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<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());
- }}"
- ?disabled="${this.selectBtnDisabled}">
+ 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>
<button
- class="button select-button is-primary ${classMap({
- hidden: this.directoriesOnly,
- })}"
- @click="${() => {
- this.downloadFiles(this.tabulatorTable.getSelectedData());
- }}"
- ?disabled="${this.selectBtnDisabled}">
+ class="button select-button is-primary ${classMap({
+ hidden: this.directoriesOnly,
+ })}"
+ @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,
- })}
+ .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;
- }}">
+ 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>
+ class="spinner ${classMap({
+ hidden: this.loading === false,
+ })}"></dbp-mini-spinner>
<span>${this.statusText}</span>
</div>
</div>
@@ -3425,23 +3331,23 @@ 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">
+ 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>
+ 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')}
@@ -3457,23 +3363,23 @@ 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();
- }}" />
+ 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();" />
+ type="text"
+ id="replace-filename"
+ class="input"
+ name="replace-filename"
+ value=""
+ onClick="this.select();"/>
</label>
</div>
@@ -3481,13 +3387,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<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();
- }}" />
+ type="radio"
+ id="replace-replace"
+ name="replacement"
+ value="replace"
+ @click="${() => {
+ this.setInputFieldVisibility();
+ }}"/>
<span class="radiobutton"></span>
</label>
</div>
@@ -3495,13 +3401,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<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();
- }}" />
+ type="radio"
+ class="radio-btn"
+ name="replacement"
+ value="ignore"
+ @click="${() => {
+ this.setInputFieldVisibility();
+ }}"/>
<span class="radiobutton"></span>
</label>
</div>
@@ -3509,19 +3415,19 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<footer class="modal-footer">
<div class="modal-footer-btn">
<button
- class="button"
- data-micromodal-close
- aria-label="Close this dialog window"
- @click="${() => {
- this.cancelOverwrite();
- }}">
+ 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();
- }}">
+ class="button select-button is-primary"
+ @click="${() => {
+ this.uploadFileAfterConflict();
+ }}">
OK
</button>
</div>
@@ -3529,13 +3435,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<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();
- }}" />
+ type="checkbox"
+ id="replace_mode_all"
+ name="replace_mode_all"
+ value="replace_mode_all"
+ @click="${() => {
+ this.setRepeatForAllConflicts();
+ }}"/>
<span class="checkmark"></span>
</label>
</div>
@@ -3547,23 +3453,23 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<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">
+ 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>
+ 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')}
@@ -3574,33 +3480,35 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${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')}"
- @input="${() => {this._atChangeInput();}}"
+ <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')}"
+ @input="${() => {
+ this._atChangeInput();
+ }}"
/>
</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();
- }}">
+ 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"
- id="new-folder-confirm-btn"
- @click="${() => {
- this.addNewFolder();
- }}">
+ class="button select-button is-primary"
+ id="new-folder-confirm-btn"
+ @click="${() => {
+ this.addNewFolder();
+ }}">
${i18n.t('nextcloud-file-picker.new-folder-dialog-button-ok')}
</button>
</div>
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index e274b32c343594e3dc0dcf23e1df40c4d8c507cd..b9e9a0161fe8a9b68d5d595f9991ba7e0b119eb7 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -93,10 +93,6 @@ export function getFileHandlingCss() {
height: 100%;
margin: var(--FUMargin, 0px);
padding: var(--FUPadding, 20px);
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
}
#fileElem {
@@ -115,235 +111,59 @@ export function getFileHandlingCss() {
Tabulator table styles
\\*********************************/
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
- padding-top: 4px;
- padding-bottom: 4px;
- font-weight: normal;
- font-size: 1rem;
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='asc']
- .tabulator-col-content
- .tabulator-arrow,
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='none']
- .tabulator-col-content
- .tabulator-arrow,
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='desc']
- .tabulator-col-content
- .tabulator-arrow {
- padding-bottom: 6px;
- }
-
- .tabulator .tabulator-header,
- .tabulator .tabulator-header,
- .tabulator .tabulator-header .tabulator-col,
- .tabulator,
- .tabulator-row .tabulator-cell,
- .tabulator-row.tabulator-row-even,
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
- background-color: unset;
- background: unset;
- color: unset;
- border: none;
- font-size: 1rem;
- }
-
- .tabulator-row,
- .tabulator-row.tabulator-row-even {
- background-color: var(--dbp-background);
- }
-
- .tabulator-row.tabulator-selectable.tabulator-selectable:hover {
- background-color: var(--dbp-background);
- color: var(--dbp-content);
- }
-
- .tabulator-row.tabulator-selectable.tabulator-selected:hover,
- .tabulator-row.tabulator-selected {
- background-color: var(--dbp-hover-background-color, var(--dbp-content-surface));
- color: var(--dbp-hover-color, var(--dbp-on-content-surface));
- }
-
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
display: inline-flex;
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='desc']
- .tabulator-col-content
- .tabulator-arrow {
- top: 16px;
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='asc']
- .tabulator-col-content
- .tabulator-arrow {
- border-top: none;
- border-bottom: 4px solid var(--dbp-muted);
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='none']
- .tabulator-col-content
- .tabulator-arrow {
- border-top: none;
- border-bottom: 4px solid var(--dbp-muted);
- }
-
- .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='desc']
- .tabulator-col-content
- .tabulator-arrow,
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='desc']
- .tabulator-col-content
- .tabulator-arrow {
- border-top: 4px solid var(--dbp-muted);
- border-bottom: none;
- }
-
- .tabulator-row,
- .tabulator-row.tabulator-row-even {
- padding-top: 10px;
- padding-bottom: 10px;
- border-top: 1px solid #eee;
- color: var(--dbp-content);
- }
-
- .tabulator-row.tabulator-row-even.tabulator-selected {
- color: var(--dbp-hover-color, var(--dbp-on-content-surface));
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='asc']
- .tabulator-col-content
- .tabulator-col-sorter
- .tabulator-arrow {
- border-bottom-color: var(--dbp-content);
- }
-
- .tabulator
- .tabulator-header
- .tabulator-col.tabulator-sortable[aria-sort='none']
- .tabulator-col-content
- .tabulator-col-sorter
- .tabulator-arrow {
- border-bottom-color: var(--dbp-muted);
- }
-
- .tabulator-header {
- padding-top: 10px;
- padding-bottom: 10px;
- }
-
- .tabulator .tabulator-tableHolder {
- overflow: hidden;
- }
-
- .tabulator .tabulator-tableHolder .tabulator-placeholder span {
- font-size: inherit;
- font-weight: inherit;
- color: inherit;
- }
-
+ padding: 0px;
+ }
+
+ .checkmark {
+ height: 20px;
+ width: 20px;
+ left: 14px;
+ top: 5px;
+ }
+
+ .button-container .checkmark::after {
+ left: 7px;
+ top: 2px;
+ width: 5px;
+ height: 11px;
+ }
+
+
+ /*.tabulator .tabulator-tableHolder {*/
+ /* overflow: hidden;*/
+ /*}*/
+
+
.force-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-
- .tabulator .tabulator-tableHolder {
- /* height: unset !important; /*TODO find a better way to do this*/
- }
-
- .tabulator-row .tabulator-responsive-collapse {
- border: none;
- }
-
- .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
- height: 32px;
- width: 32px;
- background-color: unset;
- color: var(--dbp-content);
- font-size: 1.3em;
- margin-top: -8px;
- }
-
- .tabulator-responsive-collapse-toggle-open,
- .tabulator-responsive-collapse-toggle-close {
- width: 100%;
- height: 100%;
- line-height: 37px;
- }
-
- .tabulator-responsive-collapse-toggle-open,
- .tabulator-responsive-collapse-toggle-close {
- content: none;
- visibility: hidden;
- }
-
- .tabulator-responsive-collapse-toggle-open::after {
- content: '';
- background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yOS42LDk3LjZsNDQuMi00NC40YzAuOS0wLjksMS4zLTIuMSwxLjMtMy4zYzAtMS4yLTAuNS0yLjQtMS4zLTMuM0wyOS42LDIuNGMtMS4xLTEuMS0yLjgtMS4xLTMuOSwwCgljLTAuNSwwLjUtMC44LDEuMi0wLjgsMS45YzAsMC43LDAuMywxLjQsMC44LDEuOWw0My42LDQzLjZMMjUuNyw5My43Yy0xLjEsMS4xLTEuMSwyLjgsMCwzLjlDMjYuOCw5OC43LDI4LjUsOTguNywyOS42LDk3LjZ6Ii8+Cjwvc3ZnPgo=');
- visibility: visible;
- position: absolute;
- width: 100%;
- height: 100%;
- line-height: 37px;
- background-repeat: no-repeat;
- left: 0px;
- top: 0px;
- background-position: center center;
- background-size: 1rem;
- }
-
- .tabulator-responsive-collapse-toggle-close::after {
- content: '';
- background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yLjQsMjkuNmw0NC40LDQ0LjJjMC45LDAuOSwyLjEsMS4zLDMuMywxLjNjMS4yLDAsMi40LTAuNSwzLjMtMS4zbDQ0LjItNDQuMmMxLjEtMS4xLDEuMS0yLjgsMC0zLjkKCWMtMC41LTAuNS0xLjItMC44LTEuOS0wLjhjLTAuNywwLTEuNCwwLjMtMS45LDAuOEw1MC4xLDY5LjNMNi4zLDI1LjdjLTEuMS0xLjEtMi44LTEuMS0zLjksMEMxLjMsMjYuOCwxLjMsMjguNSwyLjQsMjkuNnoiLz4KPC9zdmc+Cg==');
- visibility: visible;
- position: absolute;
- width: 100%;
- height: 100%;
- line-height: 37px;
- background-repeat: no-repeat;
- left: 0px;
- top: 0px;
- background-position: center center;
- background-size: 1rem;
- }
-
- .tabulator-row-handle {
+
+ /*.tabulator .tabulator-tableHolder {*/
+ /* !* height: unset !important; !*TODO find a better way to do this*!*/
+ /*}*/
+
+
+
+ /* .tabulator-row-handle {
padding: 0px !important;
+ }*/
+
+ /*.tabulator .tabulator-header .tabulator-col {*/
+ /* min-height: 37px !important;*/
+ /*}*/
+
+ .filename{
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ white-space: nowrap;
}
-
- .tabulator-selected .tabulator-responsive-collapse-toggle-open,
- .tabulator-selected .tabulator-responsive-collapse-toggle-close {
- color: var(--dbp-on-content-surface);
- }
-
- .tabulator .tabulator-header .tabulator-col {
- min-height: 37px !important;
- }
-
+
@media only screen and (orientation: portrait) and (max-width: 768px) {
.tabulator .tabulator-tableHolder {
white-space: inherit;