blob: c181a5629c00a177690102b6945b3a874a2d4f29 [file] [log] [blame]
Adrià Vilanova Martínez5f5b3e02023-07-23 00:08:17 +02001import consoleCommonStyles from '!!raw-loader!../../../../../static/css/common/console.css';
2import {msg} from '@lit/localize';
3import {MDCBanner} from '@material/banner';
4import {css, html, unsafeCSS} from 'lit';
5import {createRef, ref} from 'lit/directives/ref.js';
6
7import {I18nLitElement} from '../../../../../common/litI18nUtils.js';
8import {SHARED_MD3_STYLES} from '../../../../../common/styles/md3.js';
9
10import {TWPT_UPDATE_BANNER_TAG} from './consts.js';
11import mdcStyles from './mdcStyles.scss?string';
12
13export default class TwptUpdateBanner extends I18nLitElement {
14 static properties = {
15 isinstall: {type: Boolean},
16 };
17
18 static styles = [
19 css`
20 :host {
21 position: sticky;
22 top: 0;
23 z-index: 97;
24 }
25
26 .mdc-banner {
27 background-color: var(--TWPT-drawer-background, #fff)!important;
28 }
29
30 .mdc-banner__graphic {
31 color: var(--mdc-theme-on-primary)!important;
32 background-color: var(--mdc-theme-primary)!important;
33 }
34
35 .mdc-banner__text {
36 color: var(--TWPT-primary-text, #000)!important;
37 }
38 `,
39 css`${unsafeCSS(consoleCommonStyles)}`,
40 SHARED_MD3_STYLES,
41 css`${unsafeCSS(mdcStyles)}`,
42 ];
43
44 bannerRef = createRef();
45
46 constructor() {
47 super();
48 this.isinstall = false;
49 this.mdcBanner = null;
50 }
51
52 firstUpdated() {
53 this.mdcBanner = new MDCBanner(this.bannerRef.value);
54 this.mdcBanner.open();
55 }
56
57 render() {
58 let descriptionMsg;
59 if (this.isinstall) {
60 descriptionMsg = msg(
61 'The TW Power Tools extension has been installed. Please reload this page so that it is activated.',
62 {
63 desc:
64 'Message shown as a banner when the extension has been installed, to let the user know that they should reload the page.'
65 });
66 } else {
67 descriptionMsg = msg(
68 'The TW Power Tools extension has been updated. Please reload this page so that it continues to work properly.',
69 {
70 desc:
71 'Message shown as a banner when the extension has been updated, to let the user know that they should reload the page.'
72 });
73 }
74 const reloadMsg =
75 msg('Reload', {desc: 'Button which reloads the current page.'});
76 return html`
77 <div ${ref(this.bannerRef)}
78 class="mdc-banner mdc-banner--centered mdc-banner--mobile-stacked"
79 role="banner">
80 <div class="mdc-banner__content"
81 role="alertdialog"
82 aria-live="assertive">
83 <div class="mdc-banner__graphic-text-wrapper">
84 <div
85 class="mdc-banner__graphic"
86 role="img"
87 alt="Update">
88 <md-icon class="mdc-banner__icon">update</md-icon>
89 </div>
90 <div class="mdc-banner__text">
91 ${descriptionMsg}
92 </div>
93 </div>
94 <div class="mdc-banner__actions">
95 <md-text-button
96 class="mdc-banner__primary-action"
Adrià Vilanova Martínez5f5b3e02023-07-23 00:08:17 +020097 @click=${this._reloadPage}>
Renovate botaa5fb8e2024-02-25 18:10:09 +000098 ${reloadMsg}
Adrià Vilanova Martínez5f5b3e02023-07-23 00:08:17 +020099 </md-text-button>
100 </div>
101 </div>
102 </div>
103 `;
104 }
105
106 _reloadPage() {
107 location.reload();
108 }
109}
110// This element is injected each time an extension is installed/updated, so it
111// might already be defined. If it isn't, register it. If there are any breaking
112// changes, change TWPT_UPDATE_BANNER_TAG to a higher version.
113if (window.customElements.get(TWPT_UPDATE_BANNER_TAG) === undefined) {
114import(
115 /* webpackMode: "eager" */
116 '@material/web/icon/icon.js');
117import(
118 /* webpackMode: "eager" */
119 '@material/web/button/text-button.js');
120
121 window.customElements.define(TWPT_UPDATE_BANNER_TAG, TwptUpdateBanner);
122}