Skip to content

Commit b8c7ddf

Browse files
PierreDemaillyPierreDemailly
authored
feat(interface): introduce a new warnings page (#706)
1 parent ae6dff4 commit b8c7ddf

9 files changed

Lines changed: 790 additions & 13 deletions

File tree

‎i18n/english.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,18 @@ const ui = {
271271
lockedNavigation: {
272272
next: "Next",
273273
prev: "Prev"
274+
},
275+
warnings: {
276+
title: "Warnings",
277+
totalWarnings: "warnings",
278+
totalPackages: "packages affected",
279+
noWarnings: "No warnings found",
280+
docs: "docs",
281+
packages: "packages",
282+
occurrences: "occurrences",
283+
critical: "Critical",
284+
warning: "Warning",
285+
information: "Information"
274286
}
275287
};
276288

‎i18n/french.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,18 @@ const ui = {
271271
lockedNavigation: {
272272
next: "Suivant",
273273
prev: "Précédent"
274+
},
275+
warnings: {
276+
title: "Avertissements",
277+
totalWarnings: "avertissements",
278+
totalPackages: "packages concernés",
279+
noWarnings: "Aucun avertissement trouvé",
280+
docs: "docs",
281+
packages: "packages",
282+
occurrences: "occurrences",
283+
critical: "Critique",
284+
warning: "Avertissement",
285+
information: "Information"
274286
}
275287
};
276288

‎public/components/navigation/navigation.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ const kAvailableView = new Set([
77
"network--view",
88
"home--view",
99
"search--view",
10-
"settings--view"
10+
"settings--view",
11+
"warnings--view"
1112
]);
1213

1314
export class ViewNavigation {
@@ -58,6 +59,10 @@ export class ViewNavigation {
5859
this.onNavigationSelected(this.menus.get("search--view"));
5960
break;
6061
}
62+
case hotkeys.warnings: {
63+
this.onNavigationSelected(this.menus.get("warnings--view"));
64+
break;
65+
}
6166
}
6267
});
6368
}
@@ -77,6 +82,10 @@ export class ViewNavigation {
7782
this.setAnchor(menuName);
7883

7984
this.activeMenu = selectedNav;
85+
86+
if (menuName === "network--view") {
87+
window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_SHOWED, { composed: true }));
88+
}
8089
}
8190

8291
disableActiveMenu() {
@@ -85,6 +94,10 @@ export class ViewNavigation {
8594

8695
this.activeMenu.classList.remove("active");
8796
view.classList.add("hidden");
97+
98+
if (menuName === "network--view") {
99+
window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_HID, { composed: true }));
100+
}
88101
}
89102

90103
getAnchor() {

‎public/components/root-selector/root-selector.js‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css, nothing } from "lit";
3+
4+
// Import Internal Dependencies
5+
import { EVENTS } from "../../core/events.js";
6+
7+
export class RootSelector extends LitElement {
8+
static properties = {
9+
secureDataSet: { attribute: false },
10+
_open: { state: true }
11+
};
12+
13+
static styles = css`
14+
:host {
15+
position: relative;
16+
display: inline-block;
17+
color: #1a1a2e;
18+
}
19+
20+
:host-context(body.dark) {
21+
color: rgb(255 255 255 / 87%);
22+
}
23+
24+
.selector-btn {
25+
display: flex;
26+
align-items: center;
27+
gap: 4px;
28+
background: white;
29+
border: 1.5px solid rgb(55 34 175 / 20%);
30+
border-radius: 8px;
31+
padding: 5px 10px;
32+
cursor: pointer;
33+
font-family: mononoki, monospace;
34+
font-size: 13px;
35+
color: #1a1a2e;
36+
transition: background 0.12s, border-color 0.12s;
37+
white-space: nowrap;
38+
}
39+
40+
.selector-btn:hover {
41+
background: #f0eeff;
42+
border-color: rgb(55 34 175 / 40%);
43+
}
44+
45+
:host-context(body.dark) .selector-btn {
46+
background: #1e1c2e;
47+
border-color: rgb(163 148 255 / 25%);
48+
color: rgb(255 255 255 / 87%);
49+
}
50+
51+
:host-context(body.dark) .selector-btn:hover {
52+
background: #2a2640;
53+
border-color: rgb(163 148 255 / 45%);
54+
}
55+
56+
.pkg-version {
57+
color: #7c6fff;
58+
}
59+
60+
:host-context(body.dark) .pkg-version {
61+
color: #a394ff;
62+
}
63+
64+
.chevron {
65+
font-size: 9px;
66+
opacity: 0.5;
67+
margin-left: 2px;
68+
}
69+
70+
.dropdown {
71+
position: absolute;
72+
top: calc(100% + 6px);
73+
left: 0;
74+
min-width: 100%;
75+
background: white;
76+
border: 1px solid rgb(0 0 0 / 10%);
77+
border-radius: 8px;
78+
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
79+
z-index: 100;
80+
overflow: hidden;
81+
padding: 4px 0;
82+
}
83+
84+
:host-context(body.dark) .dropdown {
85+
background: #1e1c2e;
86+
border-color: rgb(255 255 255 / 10%);
87+
box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
88+
}
89+
90+
.pkg-item {
91+
display: flex;
92+
align-items: center;
93+
gap: 2px;
94+
padding: 7px 14px;
95+
font-family: mononoki, monospace;
96+
font-size: 12px;
97+
color: #1a1a2e;
98+
cursor: pointer;
99+
white-space: nowrap;
100+
transition: background 0.1s;
101+
}
102+
103+
:host-context(body.dark) .pkg-item {
104+
color: rgb(255 255 255 / 87%);
105+
}
106+
107+
.pkg-item:hover {
108+
background: rgb(124 111 255 / 8%);
109+
}
110+
111+
:host-context(body.dark) .pkg-item:hover {
112+
background: rgb(163 148 255 / 10%);
113+
}
114+
115+
.item-version {
116+
color: #7c6fff;
117+
}
118+
119+
:host-context(body.dark) .item-version {
120+
color: #a394ff;
121+
}
122+
`;
123+
124+
connectedCallback() {
125+
super.connectedCallback();
126+
this._handleOutsideClick = (event) => {
127+
if (!event.composedPath().includes(this)) {
128+
this._open = false;
129+
}
130+
};
131+
132+
document.addEventListener("click", this._handleOutsideClick);
133+
}
134+
135+
disconnectedCallback() {
136+
super.disconnectedCallback();
137+
document.removeEventListener("click", this._handleOutsideClick);
138+
}
139+
140+
#switchTo(spec) {
141+
window.dispatchEvent(new CustomEvent(EVENTS.ROOT_SWITCH, {
142+
detail: { spec }
143+
}));
144+
this._open = false;
145+
}
146+
147+
render() {
148+
if (!this.secureDataSet) {
149+
return nothing;
150+
}
151+
152+
const rootEntry = this.secureDataSet.linker.get(0);
153+
if (!rootEntry) {
154+
return nothing;
155+
}
156+
157+
const others = (window.cachedSpecs ?? []).filter(
158+
(pkg) => pkg.spec !== window.activePackage
159+
);
160+
161+
return html`
162+
<button
163+
class="selector-btn"
164+
@click=${(event) => {
165+
event.stopPropagation();
166+
if (others.length > 0) {
167+
this._open = !this._open;
168+
}
169+
}}
170+
>
171+
<span class="pkg-name">${rootEntry.name}</span>
172+
<span class="pkg-version">@${rootEntry.version}</span>
173+
${others.length > 0
174+
? html`<span class="chevron">${this._open ? "▴" : "▾"}</span>`
175+
: nothing
176+
}
177+
</button>
178+
${this._open && others.length > 0 ? html`
179+
<div class="dropdown">
180+
${others.map((pkg) => {
181+
const atIndex = pkg.spec.lastIndexOf("@");
182+
const pkgName = pkg.spec.slice(0, atIndex);
183+
const pkgVersion = pkg.spec.slice(atIndex);
184+
185+
return html`
186+
<div class="pkg-item" @click=${() => this.#switchTo(pkg.spec)}>
187+
<span class="item-name">${pkgName}</span>
188+
<span class="item-version">${pkgVersion}</span>
189+
</div>
190+
`;
191+
})}
192+
</div>
193+
` : nothing}
194+
`;
195+
}
196+
}
197+
198+
customElements.define("root-selector", RootSelector);

‎public/components/views/settings/settings.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const kDefaultHotKeys = {
1818
settings: "S",
1919
wiki: "W",
2020
lock: "L",
21-
search: "F"
21+
search: "F",
22+
warnings: "A"
2223
};
2324
const kShortcutInputTargetIds = new Set(Object.keys(kDefaultHotKeys));
2425

0 commit comments

Comments
 (0)