packages/app-shell/README.md

@@ -52,6 +52,46 @@ The component emits `dbp-set-property` events for these attributes:
 The component emits a `dbp-lang` event when the language is changed (for example in the language picker).
 The `details` attribute of the event is the language (possible values `en`, `de`).
 
+### Slots
+
+#### Unnamed slot
+
+The unnamed slot will be removed when the application is loaded and can be filled with a loading-spinner.
+
+Example: `<app-shell><dbp-loading-spinner></dbp-loading-spinner></app-shell>`
+
+#### name
+
+The content of this slot will be shown left in the header and can be used to set a name (e.g. the name of the institution).
+
+Example: `<app-shell><div slot="name">TU Graz<br />Graz University of Technology</div></app-shell>`
+
+#### logo
+
+The content of this slot will be shown right in the header and can be used to override the logo image.
+
+Example: `<app-shell><div slot="logo"><img alt="logo" src="/path/to/logo.png" /></div></app-shell>`
+
+#### header
+
+The content of this slot will override the whole content of the header.
+You will need to provide your own language selector and auth component.
+
+Example: `<app-shell><div slot="header">My custom header</div></app-shell>`
+
+#### footer-links
+
+The content of this slot will override the whole content of the footer link section, for example to set custom links.
+
+Example: `<app-shell><div slot="footer-links"><a target="_blank" rel="noopener" class="int-link-external" href="https://my-webpage.com">Link text</a></div></app-shell>`
+
+#### footer
+
+The content of this slot will override the whole content of the footer, for example to set custom links
+and also overwrite the `dbp-build-info` tag.
+
+Example: `<app-shell><div slot="footer"><a target="_blank" rel="noopener" class="int-link-external" href="https://my-webpage.com">Link text</a></div></app-shell>`
+
 ## Topic Metadata
 
 ```json

packages/app-shell/src/app-shell.js

@@ -599,7 +599,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
                 flex-wrap: wrap;
             }
 
-            footer > * {
+            footer > *, footer slot > * {
                 margin: 0.5em 0 0 1em;
             }
 
@@ -847,11 +847,12 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
         const mainClassMap = classMap({hidden: appHidden});
         const slotClassMap = classMap({hidden: !appHidden});
 
-        // XXX: Safari doesn't like CSS being applied to slots or via HTML,
-        // so we have to remove the slow instead of hiding it
+        // XXX: Safari 11 doesn't like CSS being applied to slots or via HTML,
+        // so we have to remove the slot instead of hiding it
         if (!appHidden) {
             this.updateComplete.then(() => {
-                const slot = this.shadowRoot.querySelector("slot");
+                // select slots with no name attribute
+                const slot = this.shadowRoot.querySelector("slot:not([name])");
                 if (slot)
                     slot.remove();
             });
@@ -881,22 +882,24 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
             <div id="main">
                 <dbp-notification id="dbp-notification" lang="${this.lang}"></dbp-notification>
                 <header>
-                    <div class="hd1-left">
-                        <dbp-language-select lang="${this.lang}"></dbp-language-select>
-                    </div>
-                    <div class="hd1-middle">
-                    </div>
-                    <div class="hd1-right">
-                        <dbp-auth-menu-button subscribe="auth" class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
-                    </div>
-                    <div class="hd2-left">
-                        <div class="header">
-                            ${this.shellName}<br>${this.shellSubname}
+                    <slot name="header">
+                        <div class="hd1-left">
+                            <dbp-language-select lang="${this.lang}"></dbp-language-select>
                         </div>
-                    </div>
-                    <div class="hd2-right">
-                        <dbp-tugraz-logo id="main-logo" lang="${this.lang}" class="${classMap({hidden: this.noBrand})}"></dbp-tugraz-logo>
-                    </div>
+                        <div class="hd1-middle">
+                        </div>
+                        <div class="hd1-right">
+                            <dbp-auth-menu-button subscribe="auth" class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
+                        </div>
+                        <div class="hd2-left">
+                            <div class="header">
+                                <slot name="name">${this.shellName}<br>${this.shellSubname}</slot>
+                            </div>
+                        </div>
+                        <div class="hd2-right">
+                            <slot name="logo"><dbp-tugraz-logo id="main-logo" lang="${this.lang}" class="${classMap({hidden: this.noBrand})}"></dbp-tugraz-logo></slot>
+                        </div>
+                    </slot>
                 </header>
                 <div id="headline">
                     <h1 class="title">${this.topicMetaDataText('name')}</h1>
@@ -922,10 +925,14 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
                 </main>
 
                 <footer>
-                    <a target="_blank" rel="noopener" class="int-link-external" href="https://datenschutz.tugraz.at/erklaerung/">${i18n.t('privacy-policy')}</a>
-                    <a target="_blank" rel="noopener" class="int-link-external" href="${imprintUrl}">${i18n.t('imprint')}</a>
-                    <a rel="noopener" class="int-link-external" href="mailto:it-support@tugraz.at">${i18n.t('contact')}</a>
-                    <dbp-build-info class="${prodClassMap}" git-info="${this.gitInfo}" env="${this.env}" build-url="${this.buildUrl}" build-time="${this.buildTime}"></dbp-build-info>
+                    <slot name="footer">
+                        <slot name="footer-links">
+                            <a target="_blank" rel="noopener" class="int-link-external" href="https://datenschutz.tugraz.at/erklaerung/">${i18n.t('privacy-policy')}</a>
+                            <a target="_blank" rel="noopener" class="int-link-external" href="${imprintUrl}">${i18n.t('imprint')}</a>
+                            <a rel="noopener" class="int-link-external" href="mailto:it-support@tugraz.at">${i18n.t('contact')}</a>
+                        </slot>
+                        <dbp-build-info class="${prodClassMap}" git-info="${this.gitInfo}" env="${this.env}" build-url="${this.buildUrl}" build-time="${this.buildTime}"></dbp-build-info>
+                    </slot>
                 </footer>
             </div>
             </div>

packages/common/src/translated.js

+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+import {classMap} from "lit-html/directives/class-map";
+
+export class Translated extends ScopedElementsMixin(AdapterLitElement) {
+    constructor() {
+        super();
+        this.lang = 'de';
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+        };
+      }
+
+    static get styles() {
+        // language=css
+        return css`
+            .hidden {display: none}
+        `;
+    }
+
+    render() {
+        return html`
+            <slot class="${classMap({hidden: this.lang !== 'de'})}" name="de"></slot>
+            <slot class="${classMap({hidden: this.lang !== 'en'})}" name="en"></slot>
+        `;
+    }
+}