Skip to content
Snippets Groups Projects
Commit daf35b41 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Nextcloud responsive layout and select-folder button label

parent 6a306dd2
No related branches found
No related tags found
No related merge requests found
Pipeline #12262 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 5
− 7
View file @ daf35b41
......@@ -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;
}
}
`;
}
......
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 51
− 7
View file @ daf35b41
......@@ -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}
......
packages/file-handling/src/file-source.js
+ 9
− 0
View file @ daf35b41
......@@ -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;
}
}
`;
}
......
packages/file-handling/src/i18n/de/translation.json
+ 3
− 1
View file @ daf35b41
......@@ -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"
}
}
packages/file-handling/src/i18n/en/translation.json
+ 3
− 1
View file @ daf35b41
......@@ -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"
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment