From daf35b41e3dc46f444c06aaa19d16def65259a6d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 15 Jul 2020 10:22:25 +0200
Subject: [PATCH] Nextcloud responsive layout and select-folder button label
---
packages/common/styles.js | 12 ++--
.../src/dbp-nextcloud-file-picker.js | 58 ++++++++++++++++---
packages/file-handling/src/file-source.js | 9 +++
.../src/i18n/de/translation.json | 4 +-
.../src/i18n/en/translation.json | 4 +-
5 files changed, 71 insertions(+), 16 deletions(-)
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 2f26117b..f9078f1a 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -738,6 +738,8 @@ export function getModalDialogCSS() {
grid-template-columns: 150px auto;
grid-template-rows: auto;
grid-template-areas: "sidebar main";
+ height: 70%;
+ width: 70%;
}
.modal-nav {
@@ -783,6 +785,7 @@ export function getModalDialogCSS() {
justify-content: center;
align-items: center;
/*height: 50vh;*/
+ overflow: hidden;
}
.modal-content .source-main {
@@ -873,7 +876,7 @@ export function getModalDialogCSS() {
@media only screen
and (orientation: portrait)
- and (max-device-width: 765px) {
+ and (max-device-width: 800px) {
.modal-nav{
grid-area: header;
@@ -897,11 +900,7 @@ export function getModalDialogCSS() {
.micromodal-slide .modal-container{
height: 100%;
- }
-
- #nextcloud-file-picker{
- padding-left: 0px;
- padding-right: 0px;
+ width: 100%;
}
.modal-close{
@@ -911,7 +910,6 @@ export function getModalDialogCSS() {
margin-right: 15px;
margin-left: 15px;
}
-
}
`;
}
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 07128cd2..b4fac129 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -89,24 +89,25 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
layout: "fitColumns",
selectable: this.maxSelectedItems,
selectableRangeMode: "drag",
- responsiveLayout:"collapse",
+ responsiveLayout: true,
+ placeholder:i18n.t('nextcloud-file-picker.no-data'),
columns: [
- {title: "", field: "type", align:"center", headerSort:false, width:50, responsive:0, formatter: (cell, formatterParams, onRendered) => {
+ {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"></${icon_tag}>`;
return (cell.getValue() === "directory") ? `<${icon_tag} name="folder"></${icon_tag}>` : icon;
}},
- {title: i18n.t('nextcloud-file-picker.filename'), widthGrow:5, responsive:0, field: "basename", sorter: "alphanum"},
- {title: i18n.t('nextcloud-file-picker.size'), responsive:2, widthGrow:1, field: "size", formatter: (cell, formatterParams, onRendered) => {
+ {title: i18n.t('nextcloud-file-picker.filename'), responsive: 0, widthGrow:5, minWidth: 150, field: "basename", sorter: "alphanum"},
+ {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:1, widthGrow:1, field: "mime", formatter: (cell, formatterParams, onRendered) => {
+ {title: i18n.t('nextcloud-file-picker.mime-type'), responsive: 2, widthGrow:1, field: "mime", formatter: (cell, formatterParams, onRendered) => {
if(typeof cell.getValue() === 'undefined') {
return "";
}
const [fileMainType, fileSubType] = cell.getValue().split('/');
return fileSubType;
}},
- {title: i18n.t('nextcloud-file-picker.last-modified'), responsive:3, widthGrow:1, field: "lastmod",sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
+ {title: i18n.t('nextcloud-file-picker.last-modified'), responsive: 3, widthGrow:1, minWidth: 100, field: "lastmod",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;
@@ -444,6 +445,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-content{
width: 100%;
height: 100%;
+ overflow-y: auto;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{
@@ -518,12 +520,54 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-footer{
background-color: white;
width: 100%;
+ padding-top: 10px;
}
.nextcloud-footer-grid{
width: 100%;
display: grid;
}
+
+ .tabulator .tabulator-tableHolder{
+ overflow: hidden;
+ }
+
+ .tabulator .tabulator-tableHolder .tabulator-placeholder span{
+ font-size: inherit;
+ font-weight: inherit;
+ color: inherit;
+ }
+
+ @media only screen
+ and (orientation: portrait)
+ and (max-device-width: 765px) {
+
+
+ .nextcloud-nav{
+ display: block;
+ }
+
+ .nextcloud-nav h2 > a{
+ font-size: 1.3rem;
+ }
+
+ .nextcloud-nav a{
+ font-size: 0.9rem;
+ }
+
+ .nextcloud-logo-sm{
+ display: none;
+ }
+
+ .select-button{
+ display: block;
+ margin: auto;
+ }
+
+ .tabulator .tabulator-tableHolder{
+ white-space: inherit;
+ }
+ }
`;
}
@@ -575,7 +619,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="nextcloud-footer ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-footer-grid">
<button class="button select-button is-primary"
- @click="${() => { this.downloadFiles(this.tabulatorTable.getSelectedData()); }}">${i18n.t('nextcloud-file-picker.select-files')}</button>
+ @click="${() => { this.downloadFiles(this.tabulatorTable.getSelectedData()); }}">${this.directoriesOnly ? (i18n.t('nextcloud-file-picker.select-folder')) : (i18n.t('nextcloud-file-picker.select-files'))}</button>
<div class="block ${classMap({hidden: this.statusText === ""})}">
<dbp-mini-spinner style="font-size: 0.7em"></dbp-mini-spinner>
${this.statusText}
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 8986ea71..99b3b930 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -369,6 +369,15 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
.block {
margin-bottom: 10px;
}
+
+ @media only screen
+ and (orientation: portrait)
+ and (max-device-width: 765px) {
+ #nextcloud-file-picker{
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ }
`;
}
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index eeb91939..0ca3b9c0 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -40,6 +40,8 @@
"init-text-2": "Sie müssen sich zuerst authentifizieren.",
"auth-info": "Eine neue Seite wird geöffnet, um Ihr Konto zu verbinden.",
"connect-nextcloud": "{{name}} verbinden",
- "open-in-nextcloud": "In {{name}} öffnen"
+ "open-in-nextcloud": "In {{name}} öffnen",
+ "no-data": "In diesem Ordner befinden sich keine Daten vom benötigtem Typ.",
+ "select-folder": "Ordner auswählen"
}
}
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index 98bc424f..31156310 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -40,6 +40,8 @@
"init-text-2": "You need to authenticate first.",
"auth-info": "A new page will open to connect your account.",
"connect-nextcloud": "Connect {{name}}",
- "open-in-nextcloud": "Open in {{name}}"
+ "open-in-nextcloud": "Open in {{name}}",
+ "no-data": "No data avaible in this folder.",
+ "select-folder": "Select folder"
}
}
--
GitLab