From 2e8aa5395effd1e5b4852916a0c0e1c2605b2613 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 29 Mar 2022 16:51:43 +0200
Subject: [PATCH] Add elipsis in filepicker in filenames
---
packages/file-handling/src/clipboard.js | 28 +++++++++++--------
.../src/nextcloud-file-picker.js | 14 ++++++----
packages/file-handling/src/styles.js | 7 +++++
3 files changed, 31 insertions(+), 18 deletions(-)
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 4445868c..44df2aa7 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -4,7 +4,7 @@ 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 {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';
@@ -156,13 +156,19 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
'<span class="checkmark" id="select_all_checkmark"></span>' +
'</label>',
field: 'type',
- 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;
+
},
},
{
@@ -173,11 +179,11 @@ 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();
+ var data = cell.getValue();
+ let div = getShadowRootDocument(this).createElement('div');
+ div.classList.add('filename');
+ div.innerHTML = cell.getValue();
+ return div;
},
},
{
@@ -187,9 +193,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());
},
},
{
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index f89491ed..4ac50b80 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -232,11 +232,11 @@ 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();
+ var data = cell.getValue();
+ let div = getShadowRootDocument(this).createElement('div');
+ div.classList.add('filename');
+ div.innerHTML = cell.getValue();
+ return div;
},
},
{
@@ -2914,7 +2914,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.table-wrapper {
- position: relative;
+ /*position: relative;*/
+ max-width: 100%;
+ width: 100%;
}
.button-container .checkmark::after {
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 9acf45fe..802c4631 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -257,6 +257,13 @@ export function getFileHandlingCss() {
min-height: 37px !important;
}
+ .filename{
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ white-space: nowrap;
+ }
+
@media only screen and (orientation: portrait) and (max-width: 768px) {
.tabulator .tabulator-tableHolder {
white-space: inherit;
--
GitLab