diff --git a/packages/app-shell/README.md b/packages/app-shell/README.md index 595829cb7e2db764e55c44fa7111649035baf02d..7d8b8603a25bd442e0ff972348c4c3d6d169cb0a 100644 --- a/packages/app-shell/README.md +++ b/packages/app-shell/README.md @@ -52,6 +52,39 @@ 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 + +The content of this slot will override the whole content of the footer, for example to set custom links. + +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 diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js index f855ea48cf558ef9fb74bffdf10e821c5f4f5932..f9d44eb6fbef2680756faab1689be84468e7ff3a 100644 --- a/packages/app-shell/src/app-shell.js +++ b/packages/app-shell/src/app-shell.js @@ -882,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> @@ -923,10 +925,12 @@ 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"> + <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> </footer> </div> </div>