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

Modal UI update filesource

parent 25a6fdc1
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 5
− 2
View file @ cf6ff257
...@@ -745,7 +745,8 @@ export function getModalDialogCSS() { ...@@ -745,7 +745,8 @@ export function getModalDialogCSS() {
.modal-nav { .modal-nav {
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
background-color: #eee; background-color: white;
border-right: 1px solid black;
} }
.modal-nav > div { .modal-nav > div {
...@@ -759,7 +760,8 @@ export function getModalDialogCSS() { ...@@ -759,7 +760,8 @@ export function getModalDialogCSS() {
} }
.modal-nav .active{ .modal-nav .active{
background-color: white; background-color: var(--dbp-dark);;
color: var(--dbp-light);;
} }
.modal-close { .modal-close {
...@@ -799,6 +801,7 @@ export function getModalDialogCSS() { ...@@ -799,6 +801,7 @@ export function getModalDialogCSS() {
/*align-items: center;*/ /*align-items: center;*/
height: 100%; height: 100%;
width: 100%; width: 100%;
align-items: end;
} }
/**************************\\ /**************************\\
......
packages/file-handling/src/dbp-nextcloud-file-picker.js
+ 86
− 22
View file @ cf6ff257
...@@ -325,7 +325,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -325,7 +325,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
*/ */
getBreadcrumb() { getBreadcrumb() {
let htmlpath = []; 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('/'); const directories = this.directoryPath.split('/');
if (directories[1] === "") if (directories[1] === "")
{ {
...@@ -408,10 +408,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -408,10 +408,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
justify-self: start; justify-self: start;
} }
.nextcloud-intro{
text-align: center;
}
.nextcloud-logo{ .nextcloud-logo{
width: 80px; width: 80px;
justify-self: end; justify-self: end;
transition: all 0.5s ease; transition: all 0.5s ease;
margin: auto;
} }
.nextcloud-logo-icon{ .nextcloud-logo-icon{
...@@ -422,6 +427,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -422,6 +427,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
width: 40px; width: 40px;
justify-self: inherit; justify-self: inherit;
margin-right: 70px; margin-right: 70px;
display:none;
} }
.m-inherit{ .m-inherit{
...@@ -472,8 +478,18 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -472,8 +478,18 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
border: none; 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{ .tabulator-row.tabulator-selectable:hover{
background-color: #eee; background-color: #eee;
color: var(--dbp-dark);
} }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{ .tabulator .tabulator-header .tabulator-col .tabulator-col-content{
...@@ -547,6 +563,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -547,6 +563,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
and (max-device-width: 765px) { and (max-device-width: 765px) {
.nextcloud-nav{ .nextcloud-nav{
display: block; display: block;
} }
...@@ -572,8 +590,51 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -572,8 +590,51 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
white-space: inherit; white-space: inherit;
} }
.button-wrapper{ .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,10 +656,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -595,10 +656,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}" title="${i18n.t('nextcloud-file-picker.refresh-nextcloud-file-picker')}"
@click="${() => { this.loadDirectory(this.directoryPath); }}"><dbp-icon name="reload"></dbp-icon></button> @click="${() => { this.loadDirectory(this.directoryPath); }}"><dbp-icon name="reload"></dbp-icon></button>
</div> </div>
</div>
<div class="nextcloud-intro">
<div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}"> <div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}">
${this.getCloudLogo()} ${this.getCloudLogo()}
</div> </div>
</div>
<div class="block text-center ${classMap({hidden: this.isPickerActive})}"> <div class="block text-center ${classMap({hidden: this.isPickerActive})}">
<h2 class="m-inherit"> <h2 class="m-inherit">
${this.nextcloudName} ${this.nextcloudName}
...@@ -613,7 +676,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -613,7 +676,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
title="${i18n.t('nextcloud-file-picker.open-nextcloud-file-picker', {name: this.nextcloudName})}" 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> @click="${async () => { this.openFilePicker(); } }">${i18n.t('nextcloud-file-picker.connect-nextcloud', {name: this.nextcloudName})}</button>
</div> </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>
<div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}"> <div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-nav"> <div class="nextcloud-nav">
<h2>${this.getBreadcrumb()}</h2> <h2>${this.getBreadcrumb()}</h2>
...@@ -623,16 +691,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -623,16 +691,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div> </div>
<table id="directory-content-table" class="force-no-select"></table> <table id="directory-content-table" class="force-no-select"></table>
</div> </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 ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-footer-grid"> <div class="nextcloud-footer-grid">
<button class="button select-button is-primary" <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> @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> <dbp-mini-spinner style="font-size: 0.7em"></dbp-mini-spinner>
${this.statusText} ${this.statusText}
</div> </div>
......
packages/file-handling/src/file-source.js
+ 69
− 4
View file @ cf6ff257
...@@ -33,6 +33,7 @@ function mimeTypesToAccept(mimeTypes) { ...@@ -33,6 +33,7 @@ function mimeTypesToAccept(mimeTypes) {
export class FileSource extends ScopedElementsMixin(DBPLitElement) { export class FileSource extends ScopedElementsMixin(DBPLitElement) {
constructor() { constructor() {
super(); super();
this.context = '';
this.lang = 'de'; this.lang = 'de';
this.nextcloudAuthUrl = ''; this.nextcloudAuthUrl = '';
this.nextcloudName ='Nextcloud'; this.nextcloudName ='Nextcloud';
...@@ -62,6 +63,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -62,6 +63,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
*/ */
static get properties() { static get properties() {
return { return {
context: { type: String, attribute: 'context'},
lang: { type: String }, lang: { type: String },
allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' }, allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
enabledSources: { type: String, attribute: 'enabled-sources' }, enabledSources: { type: String, attribute: 'enabled-sources' },
...@@ -337,6 +339,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -337,6 +339,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 90%;
} }
#nextcloud-file-picker { #nextcloud-file-picker {
...@@ -370,13 +373,70 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -370,13 +373,70 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
margin-bottom: 10px; 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 @media only screen
and (orientation: portrait) and (orientation: portrait)
and (max-device-width: 765px) { and (max-device-width: 765px) {
#nextcloud-file-picker{ #nextcloud-file-picker{
padding-left: 0px; padding: 0px;
padding-right: 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) { ...@@ -410,10 +470,15 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
<dbp-icon class="nav-icon" name="cloud"></dbp-icon> <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
<p> ${this.nextcloudName} </p> <p> ${this.nextcloudName} </p>
</div> </div>
</nav>
<div class="modal-header">
<button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close> <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> </button>
</nav>
<p class="modal-context"> ${this.context}</p>
</div>
<main class="modal-content" id="modal-picker-content"> <main class="modal-content" id="modal-picker-content">
<div class="source-main ${classMap({"hidden": this.activeSource !== "local"})}"> <div class="source-main ${classMap({"hidden": this.activeSource !== "local"})}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment