1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
/* 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,
classMap,
repeat,
} 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 {object} headerArgs - (Optional) The l10n args for the header text for the empty/error state
* @property {string} isInnerCard - (Optional) True if the card is displayed within another card and needs a border instead of box shadow
* @property {boolean} isSelectedTab - (Optional) True if the component is the selected navigation tab - defaults to false
* @property {Array} descriptionLabels - (Optional) An array of l10n ids for the secondary description text for the empty/error state
* @property {object} descriptionLink - (Optional) An object describing the l10n name and url needed within a description label
* @property {string} mainImageUrl - (Optional) The chrome:// url for the main image of the empty/error state
* @property {string} errorGrayscale - (Optional) The image should be shown in gray scale
*/
class FxviewEmptyState extends MozLitElement {
constructor() {
super();
this.isSelectedTab = false;
this.descriptionLabels = [];
this.headerArgs = {};
}
static properties = {
headerLabel: { type: String },
headerArgs: { type: Object },
headerIconUrl: { type: String },
isInnerCard: { type: Boolean },
isSelectedTab: { type: Boolean },
descriptionLabels: { type: Array },
desciptionLink: { type: Object },
mainImageUrl: { type: String },
errorGrayscale: { type: Boolean },
};
static queries = {
headerEl: ".header",
descriptionEls: { all: ".description" },
};
linkTemplate(descriptionLink) {
if (!descriptionLink) {
return html``;
}
return html` <a
aria-details="card-container"
data-l10n-name=${descriptionLink.name}
href=${descriptionLink.url}
target=${descriptionLink?.sameTarget ? "_self" : "_blank"}
/>`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://browser/content/firefoxview/fxview-empty-state.css"
/>
<card-container hideHeader="true" exportparts="image" ?isInnerCard="${
this.isInnerCard
}" id="card-container" isEmptyState="true">
<div slot="main" class=${classMap({
selectedTab: this.isSelectedTab,
imageHidden: !this.mainImageUrl,
})}>
<div class="image-container">
<img class=${classMap({
image: true,
greyscale: this.errorGrayscale,
})}
role="presentation"
alt=""
?hidden=${!this.mainImageUrl}
src=${this.mainImageUrl}/>
</div>
<div class="main">
<h2
id="header"
class="header heading-large"
?hidden=${!this.headerLabel}
>
<img class="icon info"
data-l10n-id="firefoxview-empty-state-icon"
?hidden=${!this.headerIconUrl}
src=${ifDefined(this.headerIconUrl)}></img>
<span
data-l10n-id="${this.headerLabel}"
data-l10n-args="${JSON.stringify(this.headerArgs)}">
</span>
</h2>
${repeat(
this.descriptionLabels,
descLabel => descLabel,
(descLabel, index) => html`<p
class=${classMap({
description: true,
secondary: index !== 0,
})}
data-l10n-id="${descLabel}"
>
${this.linkTemplate(this.descriptionLink)}
</p>`
)}
<slot name="primary-action"></slot>
</div>
</div>
</card-container>
`;
}
}
customElements.define("fxview-empty-state", FxviewEmptyState);
|
