forked from mirrors/gecko-dev
74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import {
|
|
html,
|
|
ifDefined,
|
|
map,
|
|
} from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
|
|
|
/**
|
|
* An empty state card to be used throughout Firefox View
|
|
*
|
|
* @property {string} headerIconUrl - (Optional) The chrome:// url for an icon to be displayed within the header
|
|
* @property {string} headerLabel - (Optional) The l10n id for the header text for the empty/error state
|
|
* @property {boolean} isSelectedTab - (Optional) True if the component is the selected navigation tab - defaults to false
|
|
* @property {string} descriptionLabels - (Required) An array of l10n id for the secondary description text for the empty/error state
|
|
* @property {string} mainImageUrl - (Optional) The chrome:// url for the main image of the empty/error state
|
|
*/
|
|
class FxviewEmptyState extends MozLitElement {
|
|
constructor() {
|
|
super();
|
|
this.isSelectedTab = false;
|
|
}
|
|
|
|
static properties = {
|
|
headerLabel: { type: String },
|
|
headerIconUrl: { type: String },
|
|
isSelectedTab: { type: Boolean },
|
|
descriptionLabel: { type: String },
|
|
mainImageUrl: { type: String },
|
|
};
|
|
|
|
static queries = {
|
|
headerEl: ".header",
|
|
descriptionEl: ".description",
|
|
};
|
|
|
|
render() {
|
|
return html`
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/firefoxview/fxview-empty-state.css"
|
|
/>
|
|
<card-container hideHeader="true" exportparts="image">
|
|
<div slot="main" class=${this.isSelectedTab ? "selectedTab" : null}>
|
|
<img class="image" role="presentation" alt="" ?hidden=${!this
|
|
.mainImageUrl} src=${this.mainImageUrl}/>
|
|
<div class="main">
|
|
<h2
|
|
id="header"
|
|
class="header"
|
|
?hidden=${!this.headerLabel}
|
|
>
|
|
<img class="icon info" ?hidden=${!this
|
|
.headerIconUrl} src=${ifDefined(this.headerIconUrl)}></img>
|
|
<span data-l10n-id="${this.headerLabel}"></span>
|
|
</h2>
|
|
${map(
|
|
this.descriptionLabels,
|
|
(descLabel, index) => html`<p
|
|
class="description ${index !== 0 ? "secondary" : null}"
|
|
data-l10n-id=${descLabel}
|
|
></p>`
|
|
)}
|
|
<slot name="primary-action"></slot>
|
|
</div>
|
|
</div>
|
|
</card-container>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("fxview-empty-state", FxviewEmptyState);
|