Fix styling, text and add "open dialog" button in demo component

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;
       }

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);

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": {

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": {