diff --git a/packages/common/styles.js b/packages/common/styles.js
index 7e94ca1a69776b4d5fbe8cd576a858cfb6b75219..1a54554f6e6bca1b56cf61a9859ca7632282c31d 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -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;
- }
}
+
+
`;
}
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index b309188f911d10346a086a033c82db7265fec5da..5737b5327a541781b61bd98805ee703d4385a40f 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -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">
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 0f3fbf8d4b833543d3b3691f7822b9212116a718..47cbc734d3660514bbc630cffb4165e1bb403616 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -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%;
}
-
-
-
-
+
}
+
`;
}
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
new file mode 100644
index 0000000000000000000000000000000000000000..6444c776a5fcf8765f990e21a96f59d5c6ff95ac
--- /dev/null
+++ b/packages/file-handling/src/styles.js
@@ -0,0 +1,181 @@
+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