diff --git a/packages/common/styles.js b/packages/common/styles.js
index 451abd20994add52709cefdb32034fb38ba3e07d..7e94ca1a69776b4d5fbe8cd576a858cfb6b75219 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -745,7 +745,8 @@ export function getModalDialogCSS() {
.modal-nav {
cursor: pointer;
overflow: hidden;
- background-color: #eee;
+ background-color: white;
+ border-right: 1px solid black;
}
.modal-nav > div {
@@ -759,7 +760,8 @@ export function getModalDialogCSS() {
}
.modal-nav .active{
- background-color: white;
+ background-color: var(--dbp-dark);;
+ color: var(--dbp-light);;
}
.modal-close {
@@ -799,6 +801,7 @@ export function getModalDialogCSS() {
/*align-items: center;*/
height: 100%;
width: 100%;
+ align-items: end;
}
/**************************\\
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index 92f0110c699397b9e50f9f095e97b919c50ce2a7..b7d0b1efcbc70cbc86f259c8cbe402c2379ff3f2 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -325,7 +325,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
*/
getBreadcrumb() {
let htmlpath = [];
- htmlpath[0] = html`<a @click="${() => { this.loadDirectory("/"); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><dbp-icon name="home"></dbp-icon> ${this.nextcloudName}</a>`;
+ htmlpath[0] = html`<a @click="${() => { this.loadDirectory("/"); }}" title="${i18n.t('nextcloud-file-picker.folder-home')}"><dbp-icon name="home"></dbp-icon> </a>`;
const directories = this.directoryPath.split('/');
if (directories[1] === "")
{
@@ -408,10 +408,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
justify-self: start;
}
+ .nextcloud-intro{
+ text-align: center;
+ }
+
.nextcloud-logo{
width: 80px;
justify-self: end;
transition: all 0.5s ease;
+ margin: auto;
}
.nextcloud-logo-icon{
@@ -422,6 +427,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
width: 40px;
justify-self: inherit;
margin-right: 70px;
+ display:none;
}
.m-inherit{
@@ -472,8 +478,18 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
border: none;
}
+ .tabulator-row, .tabulator-row.tabulator-row-even{
+ background-color: white;
+ }
+
+ .tabulator-row.tabulator-selected:hover, .tabulator-row.tabulator-selected{
+ background-color: var(--dbp-dark);
+ color: var(--dbp-light);
+ }
+
.tabulator-row.tabulator-selectable:hover{
background-color: #eee;
+ color: var(--dbp-dark);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{
@@ -546,6 +562,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
and (orientation: portrait)
and (max-device-width: 765px) {
+
+
.nextcloud-nav{
display: block;
@@ -572,8 +590,51 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
white-space: inherit;
}
.button-wrapper{
- justify-self: end;
+ justify-self: start;
+ }
+
+ .wrapper{
+ display: grid;
+ grid-template-areas: "header-l header-r" "content content";
+ grid-template-rows: 50px auto;
+ grid-template-columns: 50% 50%;
+ }
+
+ .nextcloud-header{
+ grid-area: header-l;
+ margin-bottom: 0px;
+ }
+
+ .nextcloud-content, .nextcloud-intro{
+ grid-area: content;
+ }
+
+ .nextcloud-intro{
+ grid-column-start: header-l-start;
+ grid-column-end: header-r-end;
+ grid-row-start: header-l-start;
+ grid-row-end: content-end;
+ text-align: center;
+ }
+
+ .nextcloud-footer{
+ grid-area: header-r;
+ padding-top: 0px;
}
+
+ .info-box{
+ display: none;
+ }
+
+ .nextcloud-footer-grid{
+ display: flex;
+ justify-content: end;
+ }
+
+ .select-button{
+ margin: 0px;
+ }
+
}
`;
@@ -595,25 +656,32 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
@click="${() => { this.loadDirectory(this.directoryPath); }}"><dbp-icon name="reload"></dbp-icon></button>
</div>
+
+ </div>
+ <div class="nextcloud-intro">
<div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}">
- ${this.getCloudLogo()}
+ ${this.getCloudLogo()}
+ </div>
+ <div class="block text-center ${classMap({hidden: this.isPickerActive})}">
+ <h2 class="m-inherit">
+ ${this.nextcloudName}
+ </h2>
+ <p class="m-inherit">
+ ${i18n.t('nextcloud-file-picker.init-text-1', {name: this.nextcloudName})} <br>
+ ${i18n.t('nextcloud-file-picker.init-text-2')}
+ </p>
</div>
- </div>
- <div class="block text-center ${classMap({hidden: this.isPickerActive})}">
- <h2 class="m-inherit">
- ${this.nextcloudName}
- </h2>
+ <div class="block ${classMap({hidden: this.isPickerActive})}">
+ <button class="button is-primary"
+ title="${i18n.t('nextcloud-file-picker.open-nextcloud-file-picker', {name: this.nextcloudName})}"
+ @click="${async () => { this.openFilePicker(); } }">${i18n.t('nextcloud-file-picker.connect-nextcloud', {name: this.nextcloudName})}</button>
+ </div>
+ <div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
<p class="m-inherit">
- ${i18n.t('nextcloud-file-picker.init-text-1', {name: this.nextcloudName})} <br>
- ${i18n.t('nextcloud-file-picker.init-text-2')}
+ ${i18n.t('nextcloud-file-picker.auth-info')}
</p>
</div>
- <div class="block ${classMap({hidden: this.isPickerActive})}">
- <button class="button is-primary"
- title="${i18n.t('nextcloud-file-picker.open-nextcloud-file-picker', {name: this.nextcloudName})}"
- @click="${async () => { this.openFilePicker(); } }">${i18n.t('nextcloud-file-picker.connect-nextcloud', {name: this.nextcloudName})}</button>
- </div>
-
+ </div>
<div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-nav">
<h2>${this.getBreadcrumb()}</h2>
@@ -623,16 +691,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div>
<table id="directory-content-table" class="force-no-select"></table>
</div>
- <div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
- <p class="m-inherit">
- ${i18n.t('nextcloud-file-picker.auth-info')}
- </p>
- </div>
+
<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()); }}">${this.directoriesOnly ? (i18n.t('nextcloud-file-picker.select-folder')) : (i18n.t('nextcloud-file-picker.select-files'))}</button>
- <div class="block ${classMap({hidden: this.statusText === ""})}">
+ <div class="block info-box ${classMap({hidden: this.statusText === ""})}">
<dbp-mini-spinner style="font-size: 0.7em"></dbp-mini-spinner>
${this.statusText}
</div>
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 517b2a3d7b90bfc89d1a89d9ca8620ab9fd9951a..0f3fbf8d4b833543d3b3691f7822b9212116a718 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -33,6 +33,7 @@ function mimeTypesToAccept(mimeTypes) {
export class FileSource extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
+ this.context = '';
this.lang = 'de';
this.nextcloudAuthUrl = '';
this.nextcloudName ='Nextcloud';
@@ -62,6 +63,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
*/
static get properties() {
return {
+ context: { type: String, attribute: 'context'},
lang: { type: String },
allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
enabledSources: { type: String, attribute: 'enabled-sources' },
@@ -337,6 +339,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
flex-direction: column;
justify-content: center;
align-items: center;
+ height: 90%;
}
#nextcloud-file-picker {
@@ -370,13 +373,70 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
margin-bottom: 10px;
}
+ .modal-content .source-main{
+ display:flex;
+ }
+
+ .modal-content .source-main.hidden {
+ display: none;
+ }
+
+ .modal-context{
+ display:none;
+ }
+
+ .modal-header{
+ grid-area: main;
+ }
+
+ #modal-picker-content{
+ grid-area: main;
+ }
+
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
#nextcloud-file-picker{
- padding-left: 0px;
- padding-right: 0px;
+ padding: 0px;
}
+
+ .modal-container{
+ grid-template-rows: 40px 55px auto;
+ grid-template-areas: "header" "nav" "main";
+ }
+
+ .modal-nav{
+ grid-area: nav;
+ border: none;
+ border-bottom: 1px solid black;
+ align-items: center;
+ }
+
+ .modal-header{
+ grid-area: header;
+ padding: 5px;
+ }
+
+ .modal-nav .nav-icon{
+ height: 20px;
+ }
+
+ .modal-close{
+ margin-right: 0px;
+ paddign: 0px;
+ }
+
+ .modal-context{
+ line-height: 30px;
+ }
+
+ #dropArea{
+ height: 100%;
+ }
+
+
+
+
}
`;
}
@@ -410,10 +470,15 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon class="nav-icon" name="cloud"></dbp-icon>
<p> ${this.nextcloudName} </p>
</div>
+
+ </nav>
+ <div class="modal-header">
<button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close>
- <dbp-icon name="close" class="close-icon"></dbp-icon>
+ <dbp-icon name="close" class="close-icon"></dbp-icon>
</button>
- </nav>
+
+ <p class="modal-context"> ${this.context}</p>
+ </div>
<main class="modal-content" id="modal-picker-content">
<div class="source-main ${classMap({"hidden": this.activeSource !== "local"})}">