diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 78ee5097eabef1a0fbc15a055324060a851a14be..f3df2fb24d7e5f24bbf2478f6c421b9ca045251e 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -803,7 +803,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
if (act.subscribe === undefined || !act.subscribe.includes("lang:")) {
elm.setAttribute("lang", this.lang);
}
-
return elm;
}
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index c5dd5a1e9443b3bc03e7a87f97558475bd5e75d2..078f03fd90fa552729f8bb2e1dfecc6c4f792403 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -62,8 +62,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
nextcloudName: { type: String, attribute: 'nextcloud-name' },
nextcloudFileURL: { type: String, attribute: 'nextcloud-file-url' },
- isFileSource: {type: Boolean, attribute: 'file-sink' },
- isFileSink: {type: Boolean, attribute: 'file-source' },
+ isFileSource: {type: Boolean, attribute: 'file-source' },
+ isFileSink: {type: Boolean, attribute: 'file-sink' },
};
}
@@ -327,7 +327,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
- saveFilesToClipboard(ev)
+ saveFilesToClipboardEvent(ev)
{
//save it
let data = {};
@@ -348,6 +348,30 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
+ saveFilesToClipboard()
+ {
+ //save it
+ console.log("clipboard", this.clipboardFiles);
+ console.log("filesToSave", this.filesToSave);
+ let data = {};
+ let files = [];
+ if (this.clipboardFiles && this.clipboardFiles.files.length !== 0) {
+ files = files.concat(this.clipboardFiles.files);
+ files = files.concat(this.filesToSave);
+ } else {
+ files = files.concat(this.filesToSave);
+ }
+ console.log("files", files);
+ if (this.filesToSave && this.filesToSave.length !== 0) {
+ data = {"files": files};
+ this.sendSetPropertyEvent('clipboard-files', data);
+ const event = new CustomEvent("dbp-clipboard-file-picker-file-uploaded",
+ { bubbles: true, composed: true });
+ this.dispatchEvent(event);
+ }
+ }
+
+
finishedSaveFilesToClipboard(ev) {
send({
"summary": i18n.t('clipboard.saved-files-title', {count: ev.detail.count}),
@@ -386,6 +410,20 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
clearClipboard() {
+ /* this.tabulatorTable.deleteRow(this.tabulatorTable.getSelectedRows());
+ let data = [];
+ this.tabulatorTable.getRows().forEach(row =>
+ console.log("row.file", row.file) &&
+ data.push(row.file)
+ );
+ console.log("data", data);
+
+ //TODO Check if file is set then push data to clipboard and send notification
+ //TODO unterscheide zwischen alle files löschen und nur selected files löschen
+ //TODO find matomo error !!!!
+ //TODO filesink filesink error
+*/
+
if(this.tabulatorTable && this.tabulatorTable.getSelectedData().length > 0) {
let data = {"files": this.clipboardFiles.files};
this.tabulatorTable.getSelectedData().forEach(toRemove =>
@@ -421,7 +459,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
openFilesink() {
const fileSink = this._("#file-source");
if (fileSink) {
- this._("#file-source").setAttribute("dialog-open", "");
+ this._("#file-source").setAttribute(^^"dialog-open", "");
}
}
@@ -464,7 +502,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
text="${i18n.t('clipboard.upload-area-text')}"
button-label="${i18n.t('clipboard.upload-button-label')}"
show-clipboard
- @dbp-file-source-file-selected="${this.saveFilesToClipboard}"
+ @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>
@@ -485,25 +523,71 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
getClipboardSink() {
+ const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
+
+ let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
- //todo header + table
- <!-- Clipboard Footer -->
- <div class="clipboard-footer">
- <button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
- @click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
- </button>
+ <div class="wrapper">
+ <div class="content">
+ <h3>${i18n.t('clipboard.sink-title')}</h3>
+ <p>${i18n.t('clipboard.sink-body')}<br><br></p>
+ <div class="warning-container">
+ <dbp-icon name="warning" class="warning-icon"></dbp-icon>
+ <p>${i18n.t('clipboard.warning')}</p>
+ </div>
+ <div class="container">
+ ${additionalButtons}
+ <link rel="stylesheet" href="${tabulatorCss}">
+ <div class="table-wrapper">
+ <label class="button-container select-all-icon">
+ <input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
+ <span class="checkmark"></span>
+ </label>
+ <table id="clipboard-content-table" class="force-no-select"></table>
+ </div>
+ </div>
+ </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();}}"> <dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}
+ </button>
+ </div>
</div>
`;
+
}
+
getClipboardSource() {
+ const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
+
+ let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
- //todo header + table
- <!-- Clipboard Footer -->
- <div class="clipboard-footer">
- <button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
- @click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
- </button>
+ <div class="wrapper">
+ <div class="content">
+ <h3>${i18n.t('clipboard.source-title')}</h3>
+ <p>${i18n.t('clipboard.source-body')}</p>
+ <div class="warning-container">
+ <dbp-icon name="warning" class="warning-icon"></dbp-icon>
+ <p>${i18n.t('clipboard.warning')}</p>
+ </div>
+ <div class="container">
+ ${additionalButtons}
+ <link rel="stylesheet" href="${tabulatorCss}">
+ <div class="table-wrapper">
+ <label class="button-container select-all-icon">
+ <input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
+ <span class="checkmark"></span>
+ </label>
+ <table id="clipboard-content-table" class="force-no-select"></table>
+ </div>
+ </div>
+ </div>
+ <div class="clipboard-footer">
+ <button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
+ @click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}"> ${i18n.t('clipboard.source-btn')}
+ </button>
+ </div>
</div>
`;
}
@@ -604,7 +688,28 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
.clipboard-footer {
- align-self: end;
+ background-color: white;
+ width: 100%;
+ padding-top: 10px;
+ display: flex;
+ align-items: end;
+ flex-direction: column;
+ }
+
+ .wrapper{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ }
+
+ .content{
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
@media only screen
@@ -658,11 +763,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
.btn-flex-container-mobile button:nth-child(2){
margin-top: 5px;
}
-
- .clipboard-footer {
- padding-top: 10px;
- align-self: center;
- }
+
}
`;
diff --git a/packages/file-handling/src/dbp-file-handling-clipboard.js b/packages/file-handling/src/dbp-file-handling-clipboard.js
deleted file mode 100644
index 365621e9b3efd356ab849b1176fdfcd04afcfddd..0000000000000000000000000000000000000000
--- a/packages/file-handling/src/dbp-file-handling-clipboard.js
+++ /dev/null
@@ -1,722 +0,0 @@
-import {i18n} from './i18n';
-import {css, html} from 'lit-element';
-import {ScopedElementsMixin} from '@open-wc/scoped-elements';
-import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
-import {Icon, MiniSpinner} from '@dbp-toolkit/common';
-import * as commonStyles from '@dbp-toolkit/common/styles';
-import * as fileHandlingStyles from './styles';
-import Tabulator from "tabulator-tables";
-import {humanFileSize} from "@dbp-toolkit/common/i18next";
-import {classMap} from 'lit-html/directives/class-map.js';
-import * as commonUtils from "@dbp-toolkit/common/utils";
-import {name as pkgName} from "../package.json";
-import {send} from "@dbp-toolkit/common/notification";
-
-
-/**
- * Clipboard web component
- */
-export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) {
- constructor() {
- super();
- this.lang = 'de';
- this.authUrl = '';
- this.allowedMimeTypes = '*/*';
- this.clipboardSource = false;
- this.clipboardFiles = {files: ''};
- this.clipboardSelectBtnDisabled = true;
- this.clipboardSelectBtnDisabled = true;
- this.tabulatorTable = null;
- this.maxSelectedItems = true;
- this._onReceiveBeforeUnload = this.onReceiveBeforeUnload.bind(this);
- this.filesToSave = null;
- this.numberOfSelectedFiles = 0;
- this.nextcloudAuthUrl = '';
- this.nextcloudWebDavUrl = '';
- this.nextcloudName ='Nextcloud';
- this.nextcloudPath = '';
- this.nextcloudFileURL = '';
-
- // To avoid a cyclic dependency
- import('./file-sink').then(({ FileSink }) => this.defineScopedElement('dbp-file-sink', FileSink));
- }
-
- static get scopedElements() {
- return {
- 'dbp-icon': Icon,
- 'dbp-mini-spinner': MiniSpinner,
- };
- }
-
- /**
- * See: https://lit-element.polymer-project.org/guide/properties#initialize
- */
- static get properties() {
- return {
- ...super.properties,
- lang: { type: String },
- authUrl: { type: String, attribute: 'auth-url' },
- allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
- clipboardSelectBtnDisabled: { type: Boolean, attribute: true },
- clipboardFiles: {type: Object, attribute: 'clipboard-files'},
- clipboardSource: {type: Boolean, attribute: 'clipboard-source'},
- filesToSave: {type: Object, attribute: 'files-to-save'},
- numberOfSelectedFiles: {type: Number, attribute: false },
- nextcloudAuthUrl: {type: String, attribute: 'nextcloud-auth-url'},
- nextcloudWebDavUrl: {type: String, attribute: 'nextcloud-web-dav-url'},
- nextcloudName: {type: String, attribute: 'nextcloud-name'},
- nextcloudFileURL: {type: String, attribute: 'nextcloud-file-url'},
- };
-
- }
-
- update(changedProperties) {
- changedProperties.forEach((oldValue, propName) => {
- switch (propName) {
- case "lang":
- i18n.changeLanguage(this.lang);
- break;
- case "clipboardFiles":
- this.generateClipboardTable();
- break;
- }
- });
-
- super.update(changedProperties);
- }
-
- 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();
- }
-
- connectedCallback() {
- super.connectedCallback();
- const that = this;
- this.updateComplete.then(() => {
- if (this.clipboardSource) {
- // 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.getScopedTagName("dbp-icon");
- return `<${icon_tag} name="empty-file" class="nextcloud-picker-icon"></${icon_tag}>`;
- }
- },
- {
- 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"},
- ],
- rowClick: (e, row) => {
- this.showSelectAllButton = !(this.tabulatorTable !== null
- && this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => this.checkFileType(row.getData())).length);
- 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) => {
- this.clipboardSelectBtnDisabled = !(this.tabulatorTable && this.tabulatorTable.getSelectedRows().length > 0);
- }
- });
- }
- });
- if (!this.clipboardSource) {
- if (!window.clipboardWarning) {
- window.addEventListener('beforeunload', this._onReceiveBeforeUnload, false);
- window.clipboardWarning = true;
- }
- }
- }
-
- /**
- * Select or deselect all files from tabulator table
- *
- */
- selectAllFiles() {
- let maxSelected = this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length;
- let selected = this.tabulatorTable.getSelectedRows().length;
-
- if (selected === maxSelected) {
- this.tabulatorTable.getSelectedRows().forEach(row => row.deselect());
- this.numberOfSelectedFiles = 0;
- } else {
- this.tabulatorTable.selectRow(this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)));
- this.numberOfSelectedFiles = maxSelected;
- }
- }
-
-
- checkFileType(file) {
- // check if file is allowed
- const [fileMainType, fileSubType] = file.type.split('/');
- const mimeTypes = this.allowedMimeTypes.split(',');
- let deny = true;
-
- mimeTypes.forEach((str) => {
- const [mainType, subType] = str.split('/');
- deny = deny && ((mainType !== '*' && mainType !== fileMainType) || (subType !== '*' && subType !== fileSubType));
- });
-
- if (deny) {
- console.log(`mime type ${file.type} of file '${file.name}' is not compatible with ${this.allowedMimeTypes}`);
- return false;
- }
- return true;
- }
-
- generateClipboardTable() {
- if (this.clipboardFiles.files) {
- let data = [];
- 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);
- }
- }
- }
-
- async sendClipboardFiles(files) {
- if (files.length > 0) {
- for (let i = 0; i < files.length; i ++) {
- await this.sendFileEvent(files[i].file);
- }
-
- this.sendSetPropertyEvent(
- 'analytics-event',
- {category: 'FileHandlingClipboard', action: 'LoadFilesFromClipboard', name: files.length});
- }
-
- this.tabulatorTable.deselectRow();
- //this.closeDialog();
- }
-
- async sendFileEvent(file) {
- const data = {"file": file, "data": file};
-
- const event = new CustomEvent("dbp-clipboard-file-picker-file-downloaded",
- { "detail": data, bubbles: true, composed: true });
- this.dispatchEvent(event);
- }
-
- /**
- * Decides if the "beforeunload" event needs to be canceled
- *
- * @param event
- */
- onReceiveBeforeUnload(event) {
- // we don't need to stop if there are no signed files
- if (this.clipboardFiles.files.length === 0) {
- return;
- }
-
- // we need to handle custom events ourselves
- if (event.target && event.target.activeElement && event.target.activeElement.nodeName) {
- send({
- "summary": i18n.t('clipboard.file-warning'),
- "body": i18n.t('clipboard.file-warning-body', {count: this.clipboardFiles.files.length}),
- "type": "warning",
- "timeout": 5,
- });
- if (!event.isTrusted) {
- // note that this only works with custom event since calls of "confirm" are ignored
- // in the non-custom event, see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
- const result = confirm(i18n.t('page-leaving-warn-dialogue'));
- // don't stop the page leave if the user wants to leave
- if (result) {
- return;
- }
- }
- // Cancel the event as stated by the standard
- event.preventDefault();
-
- // Chrome requires returnValue to be set
- event.returnValue = '';
- }
- }
-
- saveFilesToClipboard() {
- // save it
- let data = {};
- if (this.filesToSave && this.filesToSave.length !== 0) {
- data = {"files": this.filesToSave};
- this.sendSetPropertyEvent('clipboard-files', data);
- const event = new CustomEvent("dbp-clipboard-file-picker-file-uploaded",
- { bubbles: true, composed: true });
- this.dispatchEvent(event);
- send({
- "summary": i18n.t('file-sink.save-to-clipboard-title'),
- "body": i18n.t('file-sink.save-to-clipboard-body', {count: this.filesToSave.length}),
- "type": "success",
- "timeout": 5,
- });
-
- this.sendSetPropertyEvent(
- 'analytics-event',
- {category: 'FileHandlingClipboard', action: 'SaveFilesToClipboard', name: this.filesToSave.length});
- }
- }
-
- getClipboardFileList() {
- let files = [];
- for(let i = 0; i < this.clipboardFiles.files.length; i ++)
- {
- files[i] = html`
- <div class="clipboard-list">
- <div class="clipboard-list-name"><strong>${this.clipboardFiles.files[i].name}</strong></div>
- <div class="clipboard-list-size">${humanFileSize(this.clipboardFiles.files[i].size)}</div>
- </div>`;
- }
- return files;
- }
-
- /**
- * Open Filesink for multiple files
- */
- async openClipboardFileSink() {
- this._("#file-sink-clipboard").files = Object.create(this.clipboardFiles.files);
- console.log("------ this.clipboardFiles.files;", this.clipboardFiles.files);
- this._("#file-sink-clipboard").openDialog();
- }
-
- static get styles() {
- // language=css
- return css`
- ${commonStyles.getGeneralCSS()}
- ${commonStyles.getButtonCSS()}
- ${commonStyles.getTextUtilities()}
- ${commonStyles.getModalDialogCSS()}
- ${commonStyles.getRadioAndCheckboxCss()}
- ${fileHandlingStyles.getFileHandlingCss()}
- .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.table {
- justify-content: start;
- }
-
- .clipboard-container .wrapper .inner {
- overflow-y: auto;
- text-align: center;
- width: 100%;
- }
-
- .clipboard-footer {
- align-self: end;
- }
-
- #select-all-wrapper {
- text-align: right;
- }
-
- .clipboard-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
-
- .clipboard-container.table {
- justify-content: start;
- }
-
- .clipboard-container .inner {
- overflow-y: scroll;
- text-align: center;
- width: 100%;
- }
-
- .warning-icon {
- font-size: 2rem;
- padding: 0 1rem;
- padding-left: 0;
- }
-
- .clipboard-btn {
- margin-bottom: 2rem;
- }
-
- .warning-container {
- display: flex;
- text-align: left;
- margin: auto;
- margin-top: 2rem;
- margin-bottom: 2rem;
- }
-
- .clipboard-data {
- text-align: left;
- }
-
- .clipboard-data h4 {
- margin-top: 2rem;
- margin-bottom: 1rem;
- }
-
- .clipboard-data p {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-
- .clipboard-list {
- padding: 1rem 0;
- border-top: 1px solid #eee;
- display: flex;
- justify-content: space-between;
- }
-
- .button-wrapper {
- display: flex;
- justify-content: space-between;
- }
-
- .border {
- border-top: solid 1px #888;
- }
-
- .clipboard-list-name {
- width: 80%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- .checkmark{
- height: 20px;
- width:20px;
- }
-
- .button-container .checkmark::after{
- left: 8px;
- top: 3px;
- width: 4px;
- height: 11px;
- }
-
- .table-wrapper{
- position: relative;
- }
-
- .select-all-icon{
- position: absolute;
- top: 17px;
- left: 10px;
- z-index: 100;
- height: 40px;
- }
-
- .flex-container{
- display: flex;
- justify-content: space-between;
- }
-
-
- @media only screen
- and (orientation: portrait)
- and (max-device-width: 765px) {
- .clipboard-container p, .clipboard-container h3 {
- text-align: center;
- }
-
- .warning-container {
- flex-direction: column;
- align-items: center;
- }
-
- .warning-icon {
- margin-bottom: 1rem;
- padding: 0;
- }
-
- .clipboard-footer {
- padding-top: 10px;
- align-self: center;
- }
-
- .button-wrapper {
- flex-direction: column;
- }
-
- .clipboard-container .inner {
- overflow-y: auto;
- }
-
- .flex-container{
- justify-content: space-between;
- display: flex;
- }
-
- .btn-flex-container-mobile{
- width: 100%;
- display: flex;
- justify-content: space-between;
- margin-bottom: 5px;
- }
-
- .select-btn-wrapper{
- width: 100%;
- display: flex;
- justify-content: end;
- float: none;
- }
-
- .flex-container{
- display: block;
- }
-
- .checkmark{
- height: 30px;
- width:30px;
- }
-
- .button-container .checkmark::after{
- left: 11px;
- top: 4px;
- width: 8px;
- height: 15px;
- }
-
-
- .select-all-icon{
- top: 10px;
- left: 10px;
- }
-
- .btn-flex-container-mobile{
- flex-direction: column;
- }
-
- .btn-flex-container-mobile button:nth-child(2){
- margin-top: 5px;
- }
- }
- `;
- }
-
- render() {
- const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
-
- if (this.clipboardSource) {
- return html`
- <link rel="stylesheet" href="${tabulatorCss}">
- <div class="block clipboard-container">
- <div class="wrapper ${classMap({"table": this.clipboardFiles.files.length !== 0})}">
- <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">
- <div class="flex-container">
-
- <div class="btn-flex-container-mobile">
- <button @click="${() => { this.openFilesink(); }}"
- class="button" title="${i18n.t('add-files')}">
- <dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('add-files-btn')}
- </button>
- <button @click="${() => { this.clearClipboard(); }}"
- class="button" title="${(this.numberOfSelectedFiles > 0) ? i18n.t('remove-count', {count: this.numberOfSelectedFiles}) : i18n.t('remove-all')}"
- ?disabled="${this.clipboardFiles.files.length === 0}">
- ${(this.numberOfSelectedFiles > 0) ? i18n.t('remove-count-btn', {count: this.numberOfSelectedFiles}) : i18n.t('remove-all-btn')}
- </button>
- </div>
- <div class="btn-flex-container-mobile">
- <button @click="${() => { this.saveFilesFromClipboard(); }}"
- ?disabled="${this.clipboardFiles.files.length === 0}"
- class="button" title="${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count', {count: this.numberOfSelectedFiles}) : i18n.t('save-all')}">
- ${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count-btn', {count: this.numberOfSelectedFiles}) : i18n.t('save-all-btn')}
- </button>
- </div>
-
- </div>
- <dbp-file-sink id="file-sink-clipboard"
- context="${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count', {count: this.numberOfSelectedFiles}) : i18n.t('save-all')}"
- filename="clipboard-documents.zip"
- enabled-targets="local,nextcloud,clipboard"
- show-clipboard
- subscribe="nextcloud-auth-url:nextcloud-web-app-password-url,nextcloud-web-dav-url:nextcloud-webdav-url,nextcloud-name:nextcloud-name,nextcloud-file-url:nextcloud-file-url"
- lang="${this.lang}"
- ></dbp-file-sink>
- <div class="table-wrapper">
- <label class="button-container select-all-icon">
- <input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
- <span class="checkmark"></span>
- </label>
- <table id="clipboard-content-table" class="force-no-select"></table>
- </div>
- </div>
- </div>
- </div>
- <div class="clipboard-footer ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
-
- <button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
- @click="${() => {
- this.sendClipboardFiles(this.tabulatorTable.getSelectedData());
- }}">${i18n.t('nextcloud-file-picker.select-files')}
- </button>
- </div>
- </div>
- `;
-
- } else {
- return html`
- <div class="block clipboard-container ${classMap({"table": this.clipboardFiles && this.clipboardFiles.files.length !== 0})}">
- <div class="inner">
- <h3>${i18n.t('clipboard.save-to-clipboard-title')}</h3>
- <p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
- <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="${classMap({"button-wrapper": this.clipboardFiles.files.length !== 0})}">
- <button id="clipboard-download-button"
- class="button is-right clipboard-btn ${classMap({"hidden": this.clipboardFiles.files.length === 0})}"
- @click="${this.openClipboardFileSink}">
- ${i18n.t('clipboard.save-from-clipboard-btn')}
- </button>
- <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.filesToSave ? this.filesToSave.length : 0})}
- </button>
- </div>
- <div class="border ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
- <div class="clipboard-data ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
- <h4>${i18n.t('file-sink.clipboard-files', {count: this.clipboardFiles.files.length})}</h4>
-
- <dbp-file-sink id="file-sink-clipboard"
- context="${i18n.t('clipboard.save-files-from-clipboard', {count: this.clipboardFiles ? this.clipboardFiles.files.length : 0})}"
- filename="clipboard-documents.zip"
- enabled-targets="local,nextcloud"
- nextcloud-auth-url="${this.nextcloudAuthUrl}"
- nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
- nextcloud-name="${this.nextcloudName}"
- nextcloud-file-url="${this.nextcloudFileURL}"
- fullsize-modal="true"
- lang="${this.lang}"
- ></dbp-file-sink>
-
- <details>
- <summary>Dateien anzeigen</summary>
- <p>${i18n.t('file-sink.clipboard-files-overwrite')}</p>
- ${this.getClipboardFileList()}
- </details>
- </div>
- -->
-
-
- </div>
- </div>
- `;
- }
- }
-}
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 1577aeb5b6420a2205f6d0172fb3f17ce7534065..77ce0f91ed318e50acab282aa76eb1a53999a6c6 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -135,9 +135,9 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.files.length !== 0 && !this.isDialogOpen) {
this.openDialog();
if (this.enabledTargets.includes("clipboard")) {
- const clipboardSink = this._("#clipboard-file-sink");
+ const clipboardSink = this._("#clipboard-file-picker");
if (clipboardSink) {
- this._("#clipboard-file-sink").filesToSave = this.files;
+ this._("#clipboard-file-picker").filesToSave = [...this.files];
}
}
}
@@ -237,12 +237,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.enabledTargets.includes('clipboard')) {
return html`
<dbp-clipboard
- id="clipboard-file-sink"
+ id="clipboard-file-picker"
subscribe="clipboard-files:clipboard-files"
+ show-additional-buttons
file-sink
lang="${this.lang}"
auth-url="${this.nextcloudAuthUrl}"
- allowed-mime-types="${this.allowedMimeTypes}"
nextcloud-auth-url="${this.nextcloudAuthUrl}"
nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index cd595fd716e088532df2839d3d43ce8f12516e01..bfbffb765c1dbab72f2875d8beb979d3cf9872d0 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -17,10 +17,6 @@
"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: ",
- "clipboard-title": "Von der Zwischenablage auswählen",
- "clipboard-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
- "clipboard-select-btn": "Auswählen",
- "clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
"clipboard": "Zwischenablage"
},
"file-sink": {
@@ -33,16 +29,6 @@
"upload-success-title": "Erfolgreich hochgeladen",
"upload-success-body": "Sie haben {{count}} Datei erfolgreich in {{name}} hochgeladen.",
"upload-success-body_plural": "Sie haben {{count}} Dateien erfolgreich in {{name}} hochgeladen.",
- "save-to-clipboard-title": "Erfolgreich abgelegt",
- "save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
- "save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
- "save-to-clipboard-btn": "{{count}} Datei ablegen",
- "save-to-clipboard-btn_plural": "{{count}} Dateien 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 die bestehende Zwischenablage automatisch verworfen!",
- "clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
- "clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
- "clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
"clipboard": "Zwischenablage"
},
"nextcloud-file-picker": {
@@ -99,14 +85,6 @@
"abort-message": "Vorgang wurde abgebrochen."
},
"clipboard": {
- "file-warning": "Achtung!",
- "file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
- "file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
- "save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
- "save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
- "save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
- "save-from-clipboard-btn": "Zwischenablage sichern",
- "save-to-clipboard-title": "Dateien in der Zwischenablage ablegen",
"add-files": "Dateien der Zwischenablage hinzufügen",
"add-files-btn": "Dateien hinzufügen",
"remove-all": "Alle Dateien aus der Zwischenablage entfernen.",
@@ -117,18 +95,6 @@
"remove-count-btn_plural": "{{count}} Dateien entfernen",
"save-all": "Alle Dateien aus der Zwischenablage speichern",
"save-all-btn": "Alle sichern",
- "upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
- "upload-button-label": "Dateien auswählen",
- "clear-clipboard-title": "Zwischenablage geleert",
- "clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
- "clear-count-clipboard-title": "Datei entfernt",
- "clear-count-clipboard-title_plural": "Dateien entfernt",
- "clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
- "clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
- "saved-files-title": "Datei erfolgreich abgelegt",
- "saved-files-title_plural": "Dateien erfolgreich abgelegt",
- "saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
- "saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
"save-count-btn": "Datei speichern",
"save-count-btn_plural": "{{count}} Dateien speichern",
"save-count": "Eine Datei aus der Zwischenablage speichern",
@@ -137,10 +103,65 @@
"file-size": "Größe",
"file-type": "Art",
"file-mod": "Geändert",
+ "no-data": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
+
+ "saved-files-title": "Datei erfolgreich abgelegt",
+ "saved-files-title_plural": "Dateien erfolgreich abgelegt",
+ "saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
+ "saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
+ "clear-clipboard-title": "Zwischenablage geleert",
+ "clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
+ "clear-count-clipboard-title": "Datei entfernt",
+ "clear-count-clipboard-title_plural": "Dateien entfernt",
+ "clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
+ "clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
+ "file-warning": "Achtung!",
+ "file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
+ "file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
+
+ "upload-area-text": "Sie können in diesem Bereich Dokumente per Drag & Drop oder per Direktauswahl hochladen.",
+ "upload-button-label": "Dateien auswählen",
+
+ "warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
+
+ "source-title": "Von der Zwischenablage auswählen",
+ "source-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
+ "source-btn": "Dateien auswählen",
+ "sink-title": "Dateien in der Zwischenablage ablegen",
+ "sink-body": "Hier können Sie Dateien temporär in der Zwischenablage ablegen.",
+ "sink-btn": "{{count}} Datei ablegen",
+ "sink-btn_plural": "{{count}} Dateien ablegen"
+ },
+ "clipboard2": {
+
+ "save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
+ "save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
+ "save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
+ "save-from-clipboard-btn": "Zwischenablage sichern",
+
+
+ "upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
+ "upload-button-label": "Dateien auswählen",
+
+
+
+
"select-all": "Alle auswählen",
"select-all-title": "Alle verfügbaren Dateien in diesem Ordner auswählen",
"select-nothing": "Nichts auswählen",
"select-nothing-title": "Alle gewählten Dateien nicht mehr selektieren",
- "no-data": "Keine Dateien vorhanden"
+
+
+ "success-save-to-clipboard-title": "Erfolgreich abgelegt",
+ "success-save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+ "success-save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
+
+
+ "clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
+ "clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
+ "clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
+ "clipboard": "Zwischenablage",
+ "clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage."
}
+
}
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index 236906f504bbfc53da440d9af0571da62a53f919..264d964f1a78d2a6c4d43f2f5a0d805afc286b73 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -98,7 +98,7 @@
"abort": "Cancel process",
"abort-message": "The process was canceled."
},
- "clipboard": {
+ "clipboard2": {
"file-warning": "Attention!",
"file-warning-body": "There is still a file on the clipboard. The clipboard is discarded when you exit the page.",
"file-warning-body_plural": "There are still {{count}} files on the clipboard. The clipboard is discarded when you exit the page.",
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index ca7b650c2ccdedf63595c38d87da21a8922166fe..c89fe50fcb062b423449d61521ad506f7650a423 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -83,7 +83,7 @@ export function getFileHandlingCss() {
Picker Styles
\\**************************/
- #nextcloud-file-picker {
+ #nextcloud-file-picker, #clipboard-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
@@ -278,7 +278,7 @@ export function getFileHandlingCss() {
height: 20px;
}
- #nextcloud-file-picker{
+ #nextcloud-file-picker, #clipboard-file-picker{
padding: 0px;
}
}