blob: 81bd20c3e6fae7ad096061f5edbc42769a207ca9 [file] [log] [blame]
import consoleCommonStyles from '!!raw-loader!../../../../../static/css/common/console.css';
import {msg} from '@lit/localize';
import {MDCBanner} from '@material/banner';
import {css, html, unsafeCSS} from 'lit';
import {createRef, ref} from 'lit/directives/ref.js';
import {I18nLitElement} from '../../../../../common/litI18nUtils.js';
import {SHARED_MD3_STYLES} from '../../../../../common/styles/md3.js';
import {TWPT_UPDATE_BANNER_TAG} from './consts.js';
import mdcStyles from './mdcStyles.scss?string';
export default class TwptUpdateBanner extends I18nLitElement {
static properties = {
isinstall: {type: Boolean},
};
static styles = [
css`
:host {
position: sticky;
top: 0;
z-index: 97;
}
.mdc-banner {
background-color: var(--TWPT-drawer-background, #fff)!important;
}
.mdc-banner__graphic {
color: var(--mdc-theme-on-primary)!important;
background-color: var(--mdc-theme-primary)!important;
}
.mdc-banner__text {
color: var(--TWPT-primary-text, #000)!important;
}
`,
css`${unsafeCSS(consoleCommonStyles)}`,
SHARED_MD3_STYLES,
css`${unsafeCSS(mdcStyles)}`,
];
bannerRef = createRef();
constructor() {
super();
this.isinstall = false;
this.mdcBanner = null;
}
firstUpdated() {
this.mdcBanner = new MDCBanner(this.bannerRef.value);
this.mdcBanner.open();
}
render() {
let descriptionMsg;
if (this.isinstall) {
descriptionMsg = msg(
'The TW Power Tools extension has been installed. Please reload this page so that it is activated.',
{
desc:
'Message shown as a banner when the extension has been installed, to let the user know that they should reload the page.'
});
} else {
descriptionMsg = msg(
'The TW Power Tools extension has been updated. Please reload this page so that it continues to work properly.',
{
desc:
'Message shown as a banner when the extension has been updated, to let the user know that they should reload the page.'
});
}
const reloadMsg =
msg('Reload', {desc: 'Button which reloads the current page.'});
return html`
<div ${ref(this.bannerRef)}
class="mdc-banner mdc-banner--centered mdc-banner--mobile-stacked"
role="banner">
<div class="mdc-banner__content"
role="alertdialog"
aria-live="assertive">
<div class="mdc-banner__graphic-text-wrapper">
<div
class="mdc-banner__graphic"
role="img"
alt="Update">
<md-icon class="mdc-banner__icon">update</md-icon>
</div>
<div class="mdc-banner__text">
${descriptionMsg}
</div>
</div>
<div class="mdc-banner__actions">
<md-text-button
class="mdc-banner__primary-action"
label="${reloadMsg}"
@click=${this._reloadPage}>
</md-text-button>
</div>
</div>
</div>
`;
}
_reloadPage() {
location.reload();
}
}
// This element is injected each time an extension is installed/updated, so it
// might already be defined. If it isn't, register it. If there are any breaking
// changes, change TWPT_UPDATE_BANNER_TAG to a higher version.
if (window.customElements.get(TWPT_UPDATE_BANNER_TAG) === undefined) {
import(
/* webpackMode: "eager" */
'@material/web/icon/icon.js');
import(
/* webpackMode: "eager" */
'@material/web/button/text-button.js');
window.customElements.define(TWPT_UPDATE_BANNER_TAG, TwptUpdateBanner);
}