Skip to content

Commit 4f3f267

Browse files
clemgbldclemgbld
authored
refactor(maintainers): migrate popup to lit (#573)
1 parent 0afb988 commit 4f3f267

6 files changed

Lines changed: 344 additions & 305 deletions

File tree

‎public/components/icon/icon.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,24 @@ const kIcons = {
9191
118.784q47.104 47.104 47.104 115.712 0 70.656-50.176 119.808l50.176 50.176q49.152-50.176
9292
118.784-50.176 68.608 0 116.736 48.128l118.784 118.784q48.128 48.128 48.128 116.736z"/>
9393
</svg>
94-
`
94+
`,
95+
"right-open-big": html`<svg viewBox="0 0 1024 1024" aria-hidden="true">
96+
<path fill="currentColor"
97+
d="M13.312 890.88l366.592-378.88-366.592-380.928q-26.624-26.624 0-49.152 26.624-26.624 49.152 0l401.408
98+
403.456q24.576 26.624 0 51.2l-401.408 403.456q-22.528 26.624-49.152 0-26.624-22.528 0-49.152z"/>
99+
</svg>`,
100+
globe: html`<svg viewBox="0 0 1024 1024" aria-hidden="true">
101+
<path fill="currentColor"
102+
d="M354.304 191.488q-88.064 0-150.528 62.464t-61.44 151.552 61.44 150.528 150.528 61.44 151.552-61.44
103+
62.464-150.528-62.464-151.552-151.552-62.464zM354.304 84.992q132.096 0 226.304 94.208t94.208 226.304
104+
-94.208 225.28-226.304 94.208-225.28-94.208-94.208-225.28 94.208-226.304 225.28-94.208zM674.816
105+
937.984q21.504 0 37.888 15.36t15.36 37.888-15.36 37.888-37.888 16.384h-532.48q-21.504 0-37.888
106+
-16.384t-16.384-37.888 16.384-37.888 37.888-15.36h211.968v-52.224q-197.632 0-338.944-141.312
107+
-15.36-15.36-15.36-37.888t15.36-37.888 37.888-15.36 37.888 15.36q108.544 108.544 263.168 108.544
108+
156.672 0 265.216-108.544t108.544-263.168q0-156.672-108.544-265.216l-37.888-36.864 109.568-109.568
109+
q15.36-15.36 37.888-15.36t37.888 15.36 14.336 37.888-15.36 37.888l-35.84 35.84q104.448 131.072 104.448
110+
300.032 0 197.632-140.288 338.944-99.328 98.304-232.448 128v65.536h212.992z"/>
111+
</svg>`
95112
};
96113

97114
export class Icon extends LitElement {

‎public/components/popup/popup.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,6 @@ section#popup--background>.popup {
7070
if (this.isOpen) {
7171
return;
7272
}
73-
// FIXME: temporary fix until all the popups content are migrated
74-
if (this.theme === "dark" && content.firstElementChild) {
75-
content.firstElementChild.classList.add("popup-dark");
76-
}
7773
this.appendChild(content);
7874
this.isOpen = true;
7975
};

‎public/components/views/home/home.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -393,11 +393,9 @@ export class HomeView {
393393
const popupReport = document.createElement("popup-report");
394394
popupReport.rootDependencyName = this.secureDataSet.data.rootDependencyName;
395395
popupReport.theme = this.secureDataSet.theme;
396-
const fragment = document.createDocumentFragment();
397-
fragment.appendChild(popupReport);
398396
window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
399397
detail: {
400-
content: fragment
398+
content: popupReport
401399
}
402400
}));
403401
});

‎public/components/views/home/maintainers/maintainers.css‎

Lines changed: 0 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -83,190 +83,3 @@ body.dark .home--maintainers > .highlighted {
8383
.home--maintainers>.person>div.packagescount>i {
8484
margin-right: 4px;
8585
}
86-
87-
/**
88-
* POPUP
89-
* FIXME: remove the !important when the popup is migrated to lit
90-
**/
91-
.maintainers--popup {
92-
display: flex;
93-
flex-direction: column;
94-
width: 500px;
95-
margin: 5px;
96-
}
97-
98-
.maintainers--popup>.header {
99-
height: 80px;
100-
display: flex;
101-
flex-shrink: 0;
102-
margin-bottom: 10px;
103-
border-radius: 4px;
104-
overflow: hidden;
105-
margin-right: 25px;
106-
}
107-
108-
.maintainers--popup>.header>.avatar {
109-
width: 80px;
110-
overflow: hidden;
111-
flex-shrink: 0;
112-
border-radius: 8px;
113-
box-sizing: border-box;
114-
box-shadow: 2px 2px 6px 0 #00000012;
115-
}
116-
117-
.maintainers--popup>.header>.avatar>img {
118-
width: 80px;
119-
}
120-
121-
.maintainers--popup>.header>.informations {
122-
display: flex;
123-
flex-direction: column;
124-
flex-grow: 1;
125-
justify-content: center;
126-
font-family: mononoki;
127-
margin: 0 10px;
128-
}
129-
130-
.maintainers--popup>.header>.informations>p.name {
131-
color: #546884;
132-
}
133-
134-
.popup-dark >.header>.informations>p.name {
135-
color: white !important;
136-
}
137-
138-
.maintainers--popup>.header>.informations>p.email {
139-
color: var(--secondary-darker);
140-
margin-top: 10px;
141-
font-family: monospace;
142-
}
143-
144-
.popup-dark >.header>.informations>p.email {
145-
color: var(--dark-theme-secondary-color) !important;
146-
opacity: 0.9 !important;
147-
}
148-
149-
.maintainers--popup>.header>.icons {
150-
display: flex;
151-
align-items: center;
152-
}
153-
154-
.maintainers--popup>.header>.icons>i {
155-
height: 40px;
156-
width: 40px;
157-
font-size: 20px;
158-
display: flex;
159-
align-items: center;
160-
justify-content: center;
161-
background-color: var(--secondary-darker);
162-
border-radius: 100%;
163-
color: #FFF;
164-
box-shadow: 2px 2px 6px 0 #00000012;
165-
}
166-
167-
.maintainers--popup>.header>.icons>i:hover {
168-
cursor: pointer;
169-
background-color: var(--primary);
170-
}
171-
172-
.maintainers--popup>.header>.icons>i+i {
173-
margin-left: 10px;
174-
}
175-
176-
.maintainers--popup>.separator {
177-
height: 2px;
178-
background: #d3d3d387;
179-
margin: 0 10px;
180-
display: flex;
181-
align-items: center;
182-
justify-content: center;
183-
flex-shrink: 0;
184-
}
185-
186-
.popup-dark >.separator {
187-
background: var(--dark-theme-secondary-color) !important;
188-
}
189-
190-
.maintainers--popup>.separator>p {
191-
background: #f5f4f4;
192-
padding: 0 10px;
193-
font-family: roboto;
194-
font-weight: bold;
195-
letter-spacing: 1.2px;
196-
color: #255471;
197-
}
198-
199-
.popup-dark>.separator>p {
200-
background: #303263 !important;
201-
color: #3cbde5 !important;
202-
}
203-
204-
.maintainers--popup>ul {
205-
display: flex;
206-
flex-direction: column;
207-
flex-grow: 1;
208-
overflow: hidden auto;
209-
max-height: 240px;
210-
margin-top: 20px;
211-
margin-bottom: 10px;
212-
}
213-
214-
.maintainers--popup>ul li {
215-
height: 36px;
216-
padding: 0 10px;
217-
display: flex;
218-
align-items: center;
219-
background: linear-gradient(to right, rgb(221 229 251) 0%, rgb(255 255 255 / 0%) 100%);
220-
border-left: 2px solid #4480da;
221-
color: #234c99;
222-
border-radius: 4px;
223-
font-family: mononoki;
224-
flex-shrink: 0;
225-
font-size: 15px;
226-
}
227-
228-
.popup-dark>ul li {
229-
background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgb(28 29 58 / 18.5%) 100%) !important;
230-
border: none !important;
231-
color: white !important;
232-
}
233-
234-
.maintainers--popup>ul li>p{
235-
color: #234c99;
236-
}
237-
238-
.popup-dark>ul li>p{
239-
color: #9ca6b7 !important;
240-
}
241-
242-
.maintainers--popup>ul li>span{
243-
color: #2470b3;
244-
margin-left: 10px;
245-
}
246-
247-
.popup-dark>ul li>span{
248-
color: var(--dark-theme-secondary-color) !important;
249-
}
250-
251-
.maintainers--popup>ul li>i{
252-
margin-left: auto;
253-
margin-right: 13px;
254-
background: #4ab968;
255-
color: #FFF;
256-
border-radius: 100%;
257-
width: 26px;
258-
height: 26px;
259-
display: flex;
260-
justify-content: center;
261-
align-items: center;
262-
box-shadow: 2px 2px 6px 0 #00000012;
263-
}
264-
265-
.maintainers--popup>ul li>i:hover {
266-
background: #4ab8b9;
267-
cursor: pointer;
268-
}
269-
270-
.maintainers--popup>ul li+li {
271-
margin-top: 5px;
272-
}

‎public/components/views/home/maintainers/maintainers.html‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)