diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 80efe6b1e354d8d8772e2c2918660be043661623..198ddcce6e3f43d0633b83c4ee0b1952ff7863bb 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -11,6 +11,7 @@ import {humanFileSize} from '@dbp-toolkit/common/i18next';
import Tabulator from 'tabulator-tables';
import MicroModal from './micromodal.es';
import {name as pkgName} from './../package.json';
+import * as fileHandlingStyles from './styles';
/**
* NextcloudFilePicker web component
@@ -997,7 +998,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
-
+ ${fileHandlingStyles.getFileHandlingCss()}
+
.visible {
display: unset;
}
@@ -1010,19 +1012,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
color: var(--dbp-danger-bg-color);
}
- .force-no-select{
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
+
.nextcloud-header{
margin-bottom: 2rem;
display: inline-grid;
width: 100%;
grid-template-columns: auto auto;
- } <table id="directory-content-table" class="force-no-select"></table>
+ }
.nextcloud-header div button{
justify-self: start;
@@ -1079,82 +1076,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
-webkit-overflow-scrolling: touch;
}
- .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: white;
- }
-
- .tabulator-row.tabulator-selectable.tabulator-selectable:hover{
- background-color: white;
- color: var(--dbp-dark);
- }
-
- .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
- background-color: var(--dbp-dark);
- color: var(--dbp-light);
- }
- .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 #666;
- }
-
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow{
- border-top: none;
- border-bottom: 4px solid #bbb;
- }
-
- .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 #666;
- border-bottom: none;
- }
-
- .tabulator-row, .tabulator-row.tabulator-row-even{
- padding-top: 10px;
- padding-bottom: 10px;
- border-top: 1px solid #eee;
- }
-
- .tabulator-header{
- padding-top: 10px;
- padding-bottom: 10px;
- }
-
.nextcloud-nav{
display: flex;
justify-content: space-between;
@@ -1175,15 +1097,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
justify-content: space-between;
}
- .tabulator .tabulator-tableHolder{
- overflow: hidden;
- }
-
- .tabulator .tabulator-tableHolder .tabulator-placeholder span{
- font-size: inherit;
- font-weight: inherit;
- color: inherit;
- }
+
.add-folder{
white-space: nowrap;
@@ -1424,9 +1338,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
margin: 0 auto;
}
- .tabulator .tabulator-tableHolder{
- white-space: inherit;
- }
+
.button-wrapper{
justify-self: start;
}
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 9acdb438bf37f7629562fbaddda9dbcff27988dc..d6ae06e35809ee8ff2d0e73e462edc88c85294c7 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -272,6 +272,19 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
margin-bottom: 10px;
}
+ .clipboard-container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: var(--FUPadding, 20px);
+ }
+
+ .clipboard-container .inner{
+ overflow-y: auto;
+ text-align: center;
+ width: 100%;
+ }
+
.warning-icon{
font-size: 2rem;
padding: 0 1rem;
@@ -285,6 +298,8 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
.warning-container{
display: flex;
max-width: 400px;
+ text-align: left;
+ margin: auto;
}
.clipboard-data h4{
@@ -387,21 +402,23 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard"})}">
<div class="block clipboard-container">
- <h3>${i18n.t('file-sink.save-to-clipboard-title')}</h3>
- <p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
- <button class="button is-primary clipboard-btn"
- ?disabled="${this.disabled}"
- @click="${() => { this.saveFilesToClipboard(); }}">
- ${this.buttonLabel || i18n.t('file-sink.save-to-clipboard-btn', {count:this.files.length})}
- </button>
- <div class="warning-container">
- <dbp-icon name="warning" class="warning-icon"></dbp-icon>
- <p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
- </div>
- <div class="clipboard-data ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
- <h4>${i18n.t('file-sink.clipboard-files')}</h4>
- <p>${i18n.t('file-sink.clipboard-files-overwrite')}</p>
- ${this.getClipboardFiles()}
+ <div class="inner">
+ <h3>${i18n.t('file-sink.save-to-clipboard-title')}</h3>
+ <p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
+ <button class="button is-primary clipboard-btn"
+ ?disabled="${this.disabled}"
+ @click="${() => { this.saveFilesToClipboard(); }}">
+ ${this.buttonLabel || i18n.t('file-sink.save-to-clipboard-btn', {count:this.files.length})}
+ </button>
+ <div class="warning-container">
+ <dbp-icon name="warning" class="warning-icon"></dbp-icon>
+ <p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
+ </div>
+ <div class="clipboard-data ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
+ <h4>${i18n.t('file-sink.clipboard-files')}</h4>
+ <p>${i18n.t('file-sink.clipboard-files-overwrite')}</p>
+ ${this.getClipboardFiles()}
+ </div>
</div>
</div>
</div>
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index ed7ccd1ccf26778ebf00edbb0b7093488caf7fda..fb3e8f7e9c58b03c926407e88999ae733094c045 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -10,6 +10,9 @@ import {NextcloudFilePicker} from "./dbp-nextcloud-file-picker";
import {classMap} from 'lit-html/directives/class-map.js';
import MicroModal from './micromodal.es';
import * as fileHandlingStyles from './styles';
+import Tabulator from "tabulator-tables";
+import {humanFileSize} from "@dbp-toolkit/common/i18next";
+import {name as pkgName} from "../package.json";
function mimeTypesToAccept(mimeTypes) {
// Some operating systems can't handle mime types and
@@ -53,9 +56,13 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
this.activeTarget = 'local';
this.isDialogOpen = false;
this.firstOpen = true;
+ this.tabulatorTable = null;
+ this.maxSelectedItems = 5;
+ this.selectAllButton = true;
this.initialFileHandlingState = {target: '', path: ''};
this.clipBoardFiles = {files: ''};
+ this.selectedClipBoardFiles = {files: []};
}
@@ -89,9 +96,12 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
isDialogOpen: { type: Boolean, attribute: 'dialog-open' },
firstOpen: { type: Boolean, attribute: false },
nextcloudPath: { type: String, attribute: false },
+ maxSelectedItems: { type: Number, attribute: 'max-selected-items' },
+ selectAllButton: { type: Boolean, attribute: false },
initialFileHandlingState: {type: Object, attribute: 'initial-file-handling-state'},
clipBoardFiles: {type: Object, attribute: 'clipboard-files'},
+ selectedClipBoardFiles: {type: Object, attribute: false},
};
}
@@ -130,7 +140,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
connectedCallback() {
super.connectedCallback();
-
+ const that = this;
this.updateComplete.then(() => {
this.dropArea = this._('#dropArea');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
@@ -145,9 +155,117 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
this._('#fileElem').addEventListener('change', this.handleChange.bind(this));
+ // see: http://tabulator.info/docs/4.7
+ this.tabulatorTable = new Tabulator(this._("#clipboard-content-table"), {
+ layout: "fitColumns",
+ selectable: this.maxSelectedItems,
+ selectableRangeMode: "drag",
+ responsiveLayout: true,
+ placeholder: i18n.t('nextcloud-file-picker.no-data-type'),
+ resizableColumns:false,
+ columns: [
+ {title: "", field: "type", align:"center", headerSort:false, width:50, responsive:1, formatter: (cell, formatterParams, onRendered) => {
+ const icon_tag = that.constructor.getScopedTagName("dbp-icon");
+ let icon = `<${icon_tag} name="empty-file" class="nextcloud-picker-icon"></${icon_tag}>`;
+ return icon;
+ }},
+ {title: i18n.t('nextcloud-file-picker.filename'), responsive: 0, widthGrow:5, minWidth: 150, field: "name", sorter: "alphanum",
+ formatter: (cell) => {
+ let data = cell.getRow().getData();
+ if (data.edit) {
+ cell.getElement().classList.add("fokus-edit");
+ }
+ return cell.getValue();
+ }},
+ {title: i18n.t('nextcloud-file-picker.size'), responsive: 4, widthGrow:1, minWidth: 50, field: "size", formatter: (cell, formatterParams, onRendered) => {
+ return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());}},
+ {title: i18n.t('nextcloud-file-picker.mime-type'), responsive: 2, widthGrow:1, minWidth: 20, field: "type", formatter: (cell, formatterParams, onRendered) => {
+ if (typeof cell.getValue() === 'undefined') {
+ return "";
+ }
+ const [, fileSubType] = cell.getValue().split('/');
+ return fileSubType;
+ }},
+ {title: i18n.t('nextcloud-file-picker.last-modified'), responsive: 3, widthGrow:1, minWidth: 150, field: "lastModified",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
+ const a_timestamp = Date.parse(a);
+ const b_timestamp = Date.parse(b);
+ return a_timestamp - b_timestamp;
+ }, formatter:function(cell, formatterParams, onRendered) {
+ const timestamp = new Date(cell.getValue());
+
+ const year = timestamp.getFullYear();
+ const month = ("0" + (timestamp.getMonth() + 1)).slice(-2);
+ const date = ("0" + timestamp.getDate()).slice(-2);
+ const hours = ("0" + timestamp.getHours()).slice(-2);
+ const minutes = ("0" + timestamp.getMinutes()).slice(-2);
+ return date + "." + month + "." + year + " " + hours + ":" + minutes;
+ }},
+ {title: "file", field: "file", visible: false},
+ ],
+ initialSort:[
+ {column:"name", dir:"asc"},
+ {column:"type", dir:"asc"},
+
+ ],
+ rowFormatter: (row) => {
+ let data = row.getData();
+ if (!this.checkFileType(data)) {
+ row.getElement().classList.add("no-select");
+ row.getElement().classList.remove("tabulator-selectable");
+ }
+ },
+ rowSelectionChanged: (data, rows) => {
+ this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder');
+ },
+ selectableCheck:function(row){
+ //row - row component
+ return that.checkFileType(row.getData()); //allow selection of rows where the age is greater than 18
+ },
+ rowClick: (e, row) => {
+ /*const data = row.getData();
+
+ if (!row.getElement().classList.contains("no-select")) {
+
+ if (this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData())).length) {
+ this.selectAllButton = false;
+ }
+ else {
+ this.selectAllButton = true;
+ }
+
+ }
+ else{
+ row.deselect();
+ }*/
+ }
+ });
});
}
+
+ /**
+ * Select all files from tabulator table
+ *
+ */
+ selectAll() {
+ this.tabulatorTable.selectRow();
+
+ console.log(".....", this.tabulatorTable.getSelectedRows());
+ if (this.tabulatorTable.getSelectedRows().length > 0) {
+ this.selectAllButton = false;
+ }
+ }
+
+ /**
+ * Deselect files from tabulator table
+ *
+ */
+ deselectAll() {
+ this.selectAllButton = true;
+ //this.tabulatorTable.getSelectedRows().forEach(row => row.deselect());
+ this.tabulatorTable.deselectRow();
+ }
+
preventDefaults (e) {
e.preventDefault();
e.stopPropagation();
@@ -262,7 +380,6 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
console.log(`mime type ${file.type} of file '${file.name}' is not compatible with ${this.allowedMimeTypes}`);
return false;
}
-
return true;
}
@@ -402,29 +519,42 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
MicroModal.close(this._('#modal-picker'));
}
+
+
getClipboardFiles() {
- console.log("+++++++++++++++", this.clipBoardFiles);
- let htmlpath = [];
- htmlpath[0] = html`ein file und danach select button<br>`;
- //console.log("############################", this.clipBoardFiles );
- for(let i = 0; i < this.clipBoardFiles.files.length; i ++)
- {
- console.log("--", this.clipBoardFiles.files[i].name);
- console.log("++", i);
- htmlpath[i+1] = this.clipBoardFiles.files[i].name;
- //htmlpath[i+1] += html`<br>`;
+ let data = [];
+ data[0] = {
+ name: "test",
+ size: 1234324432,
+ type: "application/pdf",
+ lastModified: 1616417323351,
+ file: null
+ };
+ for (let i = 0; i < this.clipBoardFiles.files.length; i++){
+ data[i] = {
+ name: this.clipBoardFiles.files[i].name,
+ size: this.clipBoardFiles.files[i].size,
+ type: this.clipBoardFiles.files[i].type,
+ lastModified: this.clipBoardFiles.files[i].lastModified,
+ file: this.clipBoardFiles.files[i]
+ };
+ }
+
+ if (this.tabulatorTable !== null){
+ this.tabulatorTable.clearData();
+ this.tabulatorTable.setData(data);
}
- return htmlpath;
}
- async sendClipboardFiles() {
- for(let i = 0; i < this.clipBoardFiles.files.length; i ++)
+ async sendClipboardFiles(files) {
+
+ for(let i = 0; i < files.length; i ++)
{
- await this.sendFileEvent(this.clipBoardFiles.files[i]);
+ await this.sendFileEvent(files[i].file);
}
-
+ this.tabulatorTable.deselectRow();
this.closeDialog();
}
@@ -465,6 +595,36 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
#dropArea.highlight {
border-color: var(--FUBorderColorHighlight, purple);
}
+
+ .clipboard-container{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: var(--FUPadding, 20px);
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+
+ .clipboard-container .wrapper{
+ overflow-y: auto;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .clipboard-container .wrapper .inner{
+ overflow-y: auto;
+ text-align: center;
+ width: 100%;
+ }
+
+ .clipboard-footer{
+ align-self: end;
+ }
@media only screen
@@ -486,6 +646,8 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
allowedMimeTypes += ",application/zip,application/x-zip-compressed";
}
+ const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
+
return html`
<!--
<button class="button"
@@ -493,6 +655,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
@click="${() => { this.openDialog(); }}">${i18n.t('file-source.open-menu')}</button>
-->
<div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
+ <link rel="stylesheet" href="${tabulatorCss}">
<div class="modal-overlay" tabindex="-1" data-micromodal-close>
<div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
<nav class="modal-nav">
@@ -557,11 +720,33 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="source-main ${classMap({"hidden": this.activeTarget !== "clipboard"})}">
<div class="block clipboard-container">
- <h2>Von der Zwischenablage auswählen</h2>
- <p>Hier können Sie aus der zuvor temporär abgelegte Dateien auswählen.<br><br></p>
- <p>${this.getClipboardFiles()}</p>
- <button class="button select-button is-primary"
- @click="${() => {this.sendClipboardFiles(); }}">Auswählen</button>
+ <div class="wrapper">
+ <div class="inner">
+ <h3>${i18n.t('file-source.clipboard-title')}</h3>
+ <p>${i18n.t('file-source.clipboard-body')}<br><br></p>
+ <p class="${classMap({"hidden": this.clipBoardFiles.files.length !== 0})}">${i18n.t('file-source.clipboard-no-files')}</p>
+ <div class="clipboard-table ">
+ ${this.getClipboardFiles()}
+ <div id="select-all-wrapper"">
+ <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>
+ <table id="clipboard-content-table" class="force-no-select"></table>
+ </div>
+ </div>
+ </div>
+ <div class="clipboard-footer ${classMap({"hidden": this.clipBoardFiles.files.length === 0})}">
+ <button class="button select-button is-primary"
+ @click="${() => { this.sendClipboardFiles(this.tabulatorTable.getSelectedData()); }}">${i18n.t('nextcloud-file-picker.select-files')}</button>
+ </div>
</div>
</div>
</main>
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index e84c3f9942e45bf7fb34717c7c7bf521253a67b4..72f749d9c7d797e5795f588653f404f749a460a8 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -15,7 +15,11 @@
"modal-close": "Dialog schließen",
"nav-local": "Lokaler Computer",
"no-usable-files-in-zip": "ZIP Datei enthält keine verwendbaren Dateien",
- "no-usable-files-hint": "Laden Sie eine ZIP Datei mit Dateien von folgendem Typ hoch: "
+ "no-usable-files-hint": "Laden Sie eine ZIP Datei mit Dateien von folgendem Typ hoch: ",
+ "clipboard-title": "Vom Clipboard auswählen",
+ "clipboard-body": "Hier können Sie aus der zuvor temporär abgelegte Dateien auswählen.",
+ "clipboard-select-btn": "Auswählen",
+ "clipboard-no-files": "Aktuell befinden sich keine Dateien im Clipboard."
},
"file-sink": {
"local-intro": "{{count}} Datei herunterladen",
@@ -34,9 +38,9 @@
"save-to-clipboard-btn_plural": "{{count}} Dateien ablegen",
"save-to-clipboard-title": "Dateien im Clipboard ablegen",
"save-to-clipboard-text": "Hier können Sie Dateien temporär ablegen.",
- "save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird das Clipboard automatisch geleert!",
+ "save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird das bestehende Clipboard automatisch verworfen!",
"clipboard-files": "Aktuell vorhandene Dateien im Clipboard",
- "clipboard-files-overwrite": "Folgende Dateien werden überschrieben:"
+ "clipboard-files-overwrite": "Folgende Dateien werden verworfen:"
},
"nextcloud-file-picker": {
"open": "Nextcloud",
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index c5c90591f2acf4060d6584ed887f5ff7c0bc7fca..562300a34f0e1f871458cf1d6c1a18797caa060c 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -15,7 +15,11 @@
"modal-close": "Close dialog",
"nav-local": "My device",
"no-usable-files-in-zip": "ZIP file does not contain any usable files",
- "no-usable-files-hint": "Upload a ZIP file with file type(s) of "
+ "no-usable-files-hint": "Upload a ZIP file with file type(s) of ",
+ "clipboard-title": "Select files from clipboard",
+ "clipboard-body": "Here you can choose from the previously temporarily cached files.",
+ "clipboard-select-btn": "Select",
+ "clipboard-no-files": "There are currently no files in the clipboard."
},
"file-sink": {
"local-intro": "Download {{count}} file",
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 3ae377135200f3cd4154bf8ad138e8aa6dace0ed..ca7b650c2ccdedf63595c38d87da21a8922166fe 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -105,11 +105,127 @@ export function getFileHandlingCss() {
#modal-picker-content{
grid-area: main;
}
+
+
+
+ /**********************************\\
+ Tabulator table styles
+ \\*********************************/
- /**************************\\
- Mobile Landscape 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: white;
+ }
+
+ .tabulator-row.tabulator-selectable.tabulator-selectable:hover{
+ background-color: white;
+ color: var(--dbp-dark);
+ }
+
+ .tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
+ background-color: var(--dbp-dark);
+ color: var(--dbp-light);
+ }
+
+ .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 #666;
+ }
+
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow{
+ border-top: none;
+ border-bottom: 4px solid #bbb;
+ }
+
+ .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 #666;
+ border-bottom: none;
+ }
+
+ .tabulator-row, .tabulator-row.tabulator-row-even{
+ padding-top: 10px;
+ padding-bottom: 10px;
+ border-top: 1px solid #eee;
+ }
+
+ .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;
+ }
+
+ .force-no-select{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ @media only screen
+ and (orientation: portrait)
+ and (max-device-width: 765px) {
+
+ .tabulator .tabulator-tableHolder{
+ white-space: inherit;
+ }
+ }
+
+
+
+
+
+
+
+
+
+ /**************************\\
+ Mobile Landscape Styles
+ \\**************************/
@media only screen
and (orientation: landscape)