From 232973996d05c19f5ad14ba549a0384592176d96 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 19 Nov 2020 10:04:30 +0100
Subject: [PATCH] Fix styling, text and add "open dialog" button in demo
component
---
packages/file-handling/assets/index.html | 2 +-
packages/file-handling/src/demo.js | 17 +++++++++++++----
.../file-handling/src/i18n/de/translation.json | 2 +-
.../file-handling/src/i18n/en/translation.json | 2 +-
4 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/packages/file-handling/assets/index.html b/packages/file-handling/assets/index.html
index de96a403..1b1a11bf 100644
--- a/packages/file-handling/assets/index.html
+++ b/packages/file-handling/assets/index.html
@@ -11,7 +11,7 @@
--FUBorderColorHighlight: #935;
--FUBorderRadius: 10px;
--FUBorder: 2px dashed red;
- --FUMargin: 20px;
+ --FUMargin: 0;
--FUPadding: 5px;
--FUWidth: 450px;
}
diff --git a/packages/file-handling/src/demo.js b/packages/file-handling/src/demo.js
index 7f16f0a5..9ab2e412 100644
--- a/packages/file-handling/src/demo.js
+++ b/packages/file-handling/src/demo.js
@@ -79,21 +79,30 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
</div>
<div class="content">
<h2 class="subtitle">Send files via event</h2>
+ <button @click="${() => { this._("#file-source1").setAttribute("dialog-open", ""); }}"
+ class="button is-primary">
+ Open dialog
+ </button>
+
<p>There is no restriction for a specific file type:</p>
- <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="*/*"></dbp-file-source>
+ <dbp-file-source id="file-source1" lang="en" url="${this.url}" allowed-mime-types="*/*"></dbp-file-source>
<p>Only images are allowed here (JPG, PNG, GIF, TIF, ...):</p>
- <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="image/*"
+ <dbp-file-source lang="en" url="${this.url}" allowed-mime-types="image/*"
text="Abgabe nur für Bilder "></dbp-file-source>
<p>This is for PDF only:</p>
- <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="application/pdf"
+ <dbp-file-source lang="en" url="${this.url}" allowed-mime-types="application/pdf"
text="Einreichung als PDF" button-label="PDF auswählen"></dbp-file-source>
<p>Text and images (JPG, PNG, GIF, TIF, ...) :</p>
- <dbp-file-source lang="de" url="${this.url}" allowed-mime-types="text/plain,image/*"
+ <dbp-file-source lang="en" url="${this.url}" allowed-mime-types="text/plain,image/*"
text="Abgabe für Text und Bilder "></dbp-file-source>
</div>
</section>
`;
}
+
+ _(selector) {
+ return this.shadowRoot === null ? this.querySelector(selector) : this.shadowRoot.querySelector(selector);
+ }
}
commonUtils.defineCustomElement('dbp-file-source-demo', FileSourceDemo);
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index 1dbb5d1a..b7754502 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -7,7 +7,7 @@
"demo-title": "Datei Abgabe Demo",
"server-required": "Es wird unter der URL <a href=\"{{- url}}\"><tt>{{- url}}</tt></a> ein Server benötigt um die Dateien zu empfangen.",
- "intro": "Laden Sie mehrere Dateien mit dem Auswahldialog oder durch Ziehen und Fallenlassen in diesem Bereich hoch",
+ "intro": "Laden Sie mehrere Dateien mit dem Auswahldialog oder durch Ziehen und Fallenlassen in diesem Bereich hoch.",
"upload-label": "Dateiauswahl",
"upload-disabled-title": "Die Dateiauswahl ist während dem Hochladvorgang gesperrt!",
"file-source": {
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index 4cfb3c0f..66b656b3 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -7,7 +7,7 @@
"demo-title": "File Upload Demo",
"required-server": "You need an upload server listening at <a href=\"{{- url}}\"><tt>{{- url}}</tt></a> to receive the files...",
- "intro": "Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region",
+ "intro": "Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region.",
"upload-label": "Select some files",
"upload-disabled-title": "The file selection is disabled while uploading!",
"file-source": {
--
GitLab