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

Update UI, extract filehandling for modal window styles to seperate file, Update filesink UI

parent bdb15f05
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/common/styles.js
+ 6
− 79
View file @ 8c5a325e
......@@ -735,47 +735,18 @@ export function getModalDialogCSS() {
overflow-y: auto;
box-sizing: border-box;
display: grid;
grid-template-columns: 150px auto;
grid-template-rows: auto;
grid-template-areas: "sidebar main";
height: 70%;
width: 70%;
position: relative;
}
.modal-nav {
cursor: pointer;
overflow: hidden;
background-color: white;
border-right: 1px solid black;
}
.modal-nav > div {
padding: 5px;
text-align: center;
}
.modal-nav .nav-icon {
width: 35px;
height: 35px;
}
.modal-nav .active{
background-color: var(--dbp-dark);;
color: var(--dbp-light);;
}
.modal-close {
position: absolute;
background: transparent;
border: none;
float: right;
top: 20px;
right: 20px;
font-size: 1.5rem;
color: var(--dbp-override-danger-bg-color);
cursor: pointer;
transition: all 0.2s ease;
z-index: 1;
padding: 0px;
}
.modal-close .close-icon svg, .close-icon{
......@@ -786,23 +757,6 @@ export function getModalDialogCSS() {
outline: none;
}
.modal-content {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
/*height: 50vh;*/
overflow: hidden;
}
.modal-content .source-main {
/*flex-grow: 1;*/
/*justify-content: center;*/
/*align-items: center;*/
height: 100%;
width: 100%;
align-items: end;
}
/**************************\\
Modal Animation Style
......@@ -881,44 +835,17 @@ export function getModalDialogCSS() {
max-width: 100%;
}
}
@media only screen
and (orientation: portrait)
and (max-device-width: 800px) {
.modal-nav{
grid-area: header;
display: flex;
justify-content: space-around;
}
.modal-content{
grid-area: main;
}
.modal-container{
grid-template-columns: auto;
grid-template-rows: 50px auto;
grid-template-areas: "header" "main";
}
.modal-nav > div{
flex-grow: 1;
}
.micromodal-slide .modal-container{
height: 100%;
width: 100%;
}
.modal-close{
position: inherit;
display: flex;
align-self: center;
margin-right: 15px;
margin-left: 15px;
}
}
`;
}
......
packages/file-handling/src/file-sink.js
+ 17
− 4
View file @ 8c5a325e
......@@ -9,6 +9,7 @@ import {NextcloudFilePicker} from "./dbp-nextcloud-file-picker";
import {classMap} from 'lit-html/directives/class-map.js';
import FileSaver from 'file-saver';
import MicroModal from "./micromodal.es";
import * as fileHandlingStyles from './styles';
/**
......@@ -17,9 +18,11 @@ import MicroModal from "./micromodal.es";
export class FileSink extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this.context = '';
this.lang = 'de';
this.nextcloudAuthUrl = '';
this.nextcloudWebDavUrl = '';
this.nextcloudName ='Nextcloud';
this.text = '';
this.buttonLabel = '';
this.filename = "files.zip";
......@@ -48,6 +51,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
enabledDestinations: { type: String, attribute: 'enabled-destinations' },
nextcloudAuthUrl: { type: String, attribute: 'nextcloud-auth-url' },
nextcloudWebDavUrl: { type: String, attribute: 'nextcloud-web-dav-url' },
nextcloudName: { type: String, attribute: 'nextcloud-name' },
text: { type: String },
buttonLabel: { type: String, attribute: 'button-label' },
isDialogOpen: { type: Boolean, attribute: false },
......@@ -134,9 +138,11 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
${commonStyles.getModalDialogCSS()}
${fileHandlingStyles.getFileHandlingCss()}
#zip-download-block {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -159,16 +165,23 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
@click="${() => { this.activeDestination = "local"; }}"
class="${classMap({"active": this.activeDestination === "local", hidden: !this.hasEnabledDestination("local")})}">
<dbp-icon class="nav-icon" name="laptop"></dbp-icon>
<p>${i18n.t('file-source.nav-local')}</p>
</div>
<div title="Nextcloud"
<div title="${this.nextcloudName}"
@click="${() => { this.activeDestination = "nextcloud"; }}"
class="${classMap({"active": this.activeDestination === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud")})}">
<dbp-icon class="nav-icon" name="cloud"></dbp-icon>
<p> ${this.nextcloudName} </p>
</div>
<button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close>
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
</button>
</nav>
<div class="modal-header">
<button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close>
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
</button>
<p class="modal-context"> ${this.context}</p>
</div>
<main class="modal-content" id="modal-picker-content">
<div class="source-main ${classMap({"hidden": this.activeDestination !== "local"})}">
<div id="zip-download-block">
......
packages/file-handling/src/file-source.js
+ 17
− 89
View file @ 8c5a325e
......@@ -8,6 +8,7 @@ import * as commonStyles from 'dbp-common/styles';
import {NextcloudFilePicker} from "./dbp-nextcloud-file-picker";
import {classMap} from 'lit-html/directives/class-map.js';
import MicroModal from './micromodal.es'
import * as fileHandlingStyles from './styles';
function mimeTypesToAccept(mimeTypes) {
// Some operating systems can't handle mime types and
......@@ -326,7 +327,18 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
${commonStyles.getModalDialogCSS()}
${fileHandlingStyles.getFileHandlingCss()}
p {
margin-top: 0;
}
.block {
margin-bottom: 10px;
}
#dropArea {
border: var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black);
border-radius: var(--FUBorderRadius, 0);
......@@ -339,105 +351,21 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
flex-direction: column;
justify-content: center;
align-items: center;
height: 90%;
}
#nextcloud-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
padding: var(--FUPadding, 20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#dropArea.highlight {
border-color: var(--FUBorderColorHighlight, purple);
}
p {
margin-top: 0;
}
#fileElem {
display: none;
}
#nextcloud-file-picker.hidden {
display: none;
}
.block {
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 (max-device-width: 765px) {
#nextcloud-file-picker{
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;
}
and (max-device-width: 800px) {
#dropArea{
height: 100%;
}
}
`;
}
......
packages/file-handling/src/styles.js 0 → 100644
+ 181
− 0
View file @ 8c5a325e
import {css, unsafeCSS, CSSResult} from 'lit-element';
export function getFileHandlingCss() {
// language=css
return css`
/**************************\\
Modal Styles
\\**************************/
.modal-container {
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr;
gap: 1px 1px;
grid-template-areas: "sidebar header" "sidebar main";
position: relative;
}
.modal-nav {
cursor: pointer;
overflow: hidden;
background-color: white;
border-right: 1px solid black;
grid-area: sidebar;
}
.modal-nav > div {
padding: 5px;
text-align: center;
}
.modal-nav .nav-icon {
width: 35px;
height: 35px;
}
.modal-nav .active{
background-color: var(--dbp-dark);;
color: var(--dbp-light);;
}
.modal-content {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.modal-content .source-main {
/*flex-grow: 1;*/
/*justify-content: center;*/
/*align-items: center;*/
height: 100%;
width: 100%;
align-items: flex-end;
}
.modal-content .source-main{
display:flex;
}
.modal-content .source-main.hidden {
display: none;
}
.modal-header{
grid-area: header;
display: flex;
padding: 10px 30px 0px 30px;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
/**************************\\
Picker Styles
\\**************************/
#nextcloud-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
padding: var(--FUPadding, 20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#fileElem {
display: none;
}
#nextcloud-file-picker.hidden {
display: none;
}
#modal-picker-content{
grid-area: main;
}
/**************************\\
Mobile Landscape Styles
\\**************************/
@media only screen
and (orientation: landscape)
and (max-device-width: 896px) {
.modal-container {
width: 100%;
height: 100%;
max-width: 100%;
}
}
/**************************\\
Tablett Portrait Styles
\\**************************/
@media only screen
and (orientation: portrait)
and (max-device-width: 800px) {
.modal-nav{
display: flex;
justify-content: space-around;
grid-area: nav;
border: none;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
.modal-content{
grid-area: main;
}
.modal-container{
grid-template-rows: 40px 55px auto;
grid-template-areas: "header" "nav" "main";
grid-template-columns: auto;
}
.modal-header{
grid-area: header;
padding: 5px;
}
.modal-nav > div{
flex-grow: 1;
}
.modal-nav .nav-icon{
height: 20px;
}
#nextcloud-file-picker{
padding: 0px;
}
}
/**************************\\
Mobile Portrait Styles
\\**************************/
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
}
`;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment