Skip to content

refactor(maintainers): migrate popup to lit #573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fraxken merged 1 commit into from
Sep 15, 2025
Merged

refactor(maintainers): migrate popup to lit #573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion public/components/icon/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,24 @@ const kIcons = {
118.784q47.104 47.104 47.104 115.712 0 70.656-50.176 119.808l50.176 50.176q49.152-50.176
118.784-50.176 68.608 0 116.736 48.128l118.784 118.784q48.128 48.128 48.128 116.736z"/>
</svg>
`
`,
"right-open-big": html`<svg viewBox="0 0 1024 1024" aria-hidden="true">
<path fill="currentColor"
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
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"/>
</svg>`,
globe: html`<svg viewBox="0 0 1024 1024" aria-hidden="true">
<path fill="currentColor"
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
62.464-150.528-62.464-151.552-151.552-62.464zM354.304 84.992q132.096 0 226.304 94.208t94.208 226.304
-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
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
-16.384t-16.384-37.888 16.384-37.888 37.888-15.36h211.968v-52.224q-197.632 0-338.944-141.312
-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
156.672 0 265.216-108.544t108.544-263.168q0-156.672-108.544-265.216l-37.888-36.864 109.568-109.568
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
300.032 0 197.632-140.288 338.944-99.328 98.304-232.448 128v65.536h212.992z"/>
</svg>`
};

export class Icon extends LitElement {
Expand Down
4 changes: 0 additions & 4 deletions public/components/popup/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,6 @@ section#popup--background>.popup {
if (this.isOpen) {
return;
}
// FIXME: temporary fix until all the popups content are migrated
if (this.theme === "dark" && content.firstElementChild) {
content.firstElementChild.classList.add("popup-dark");
}
this.appendChild(content);
this.isOpen = true;
};
Expand Down
4 changes: 1 addition & 3 deletions public/components/views/home/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,11 +393,9 @@ export class HomeView {
const popupReport = document.createElement("popup-report");
popupReport.rootDependencyName = this.secureDataSet.data.rootDependencyName;
popupReport.theme = this.secureDataSet.theme;
const fragment = document.createDocumentFragment();
fragment.appendChild(popupReport);
window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
detail: {
content: fragment
content: popupReport
}
}));
});
Expand Down
187 changes: 0 additions & 187 deletions public/components/views/home/maintainers/maintainers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,190 +83,3 @@ body.dark .home--maintainers > .highlighted {
.home--maintainers>.person>div.packagescount>i {
margin-right: 4px;
}

/**
* POPUP
* FIXME: remove the !important when the popup is migrated to lit
**/
.maintainers--popup {
display: flex;
flex-direction: column;
width: 500px;
margin: 5px;
}

.maintainers--popup>.header {
height: 80px;
display: flex;
flex-shrink: 0;
margin-bottom: 10px;
border-radius: 4px;
overflow: hidden;
margin-right: 25px;
}

.maintainers--popup>.header>.avatar {
width: 80px;
overflow: hidden;
flex-shrink: 0;
border-radius: 8px;
box-sizing: border-box;
box-shadow: 2px 2px 6px 0 #00000012;
}

.maintainers--popup>.header>.avatar>img {
width: 80px;
}

.maintainers--popup>.header>.informations {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
font-family: mononoki;
margin: 0 10px;
}

.maintainers--popup>.header>.informations>p.name {
color: #546884;
}

.popup-dark >.header>.informations>p.name {
color: white !important;
}

.maintainers--popup>.header>.informations>p.email {
color: var(--secondary-darker);
margin-top: 10px;
font-family: monospace;
}

.popup-dark >.header>.informations>p.email {
color: var(--dark-theme-secondary-color) !important;
opacity: 0.9 !important;
}

.maintainers--popup>.header>.icons {
display: flex;
align-items: center;
}

.maintainers--popup>.header>.icons>i {
height: 40px;
width: 40px;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-darker);
border-radius: 100%;
color: #FFF;
box-shadow: 2px 2px 6px 0 #00000012;
}

.maintainers--popup>.header>.icons>i:hover {
cursor: pointer;
background-color: var(--primary);
}

.maintainers--popup>.header>.icons>i+i {
margin-left: 10px;
}

.maintainers--popup>.separator {
height: 2px;
background: #d3d3d387;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.popup-dark >.separator {
background: var(--dark-theme-secondary-color) !important;
}

.maintainers--popup>.separator>p {
background: #f5f4f4;
padding: 0 10px;
font-family: roboto;
font-weight: bold;
letter-spacing: 1.2px;
color: #255471;
}

.popup-dark>.separator>p {
background: #303263 !important;
color: #3cbde5 !important;
}

.maintainers--popup>ul {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden auto;
max-height: 240px;
margin-top: 20px;
margin-bottom: 10px;
}

.maintainers--popup>ul li {
height: 36px;
padding: 0 10px;
display: flex;
align-items: center;
background: linear-gradient(to right, rgb(221 229 251) 0%, rgb(255 255 255 / 0%) 100%);
border-left: 2px solid #4480da;
color: #234c99;
border-radius: 4px;
font-family: mononoki;
flex-shrink: 0;
font-size: 15px;
}

.popup-dark>ul li {
background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgb(28 29 58 / 18.5%) 100%) !important;
border: none !important;
color: white !important;
}

.maintainers--popup>ul li>p{
color: #234c99;
}

.popup-dark>ul li>p{
color: #9ca6b7 !important;
}

.maintainers--popup>ul li>span{
color: #2470b3;
margin-left: 10px;
}

.popup-dark>ul li>span{
color: var(--dark-theme-secondary-color) !important;
}

.maintainers--popup>ul li>i{
margin-left: auto;
margin-right: 13px;
background: #4ab968;
color: #FFF;
border-radius: 100%;
width: 26px;
height: 26px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 6px 0 #00000012;
}

.maintainers--popup>ul li>i:hover {
background: #4ab8b9;
cursor: pointer;
}

.maintainers--popup>ul li+li {
margin-top: 5px;
}
19 changes: 0 additions & 19 deletions public/components/views/home/maintainers/maintainers.html
View file
Open in desktop

This file was deleted.

Loading
Loading