Skip to content
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.

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

chore: improve maintainers & start implementing popup #295

Merged
merged 1 commit into from
Dec 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
26 changes: 23 additions & 3 deletions public/common/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -253,10 +253,28 @@ export function copyToClipboard(str) {
}
}

export function hideOnClickOutside(element, blacklistElements = []) {
export function hideOnClickOutside(
element,
options = {}
) {
const {
reverse = false,
blacklist = [],
hiddenTarget = element,
callback = () => void 0
} = options;

const outsideClickListener = (event) => {
if (!element.contains(event.target) && !blacklistElements.includes(event.target)) {
element.classList.add("hidden");
if (!element.contains(event.target) && !blacklist.includes(event.target)) {
if (hiddenTarget) {
if (reverse) {
hiddenTarget.classList.remove("show");
}
else {
hiddenTarget.classList.add("hidden");
}
}
callback();
removeClickListener();
}
};
Expand All @@ -266,4 +284,6 @@ export function hideOnClickOutside(element, blacklistElements = []) {
};

document.addEventListener("click", outsideClickListener);

return outsideClickListener;
}
4 changes: 3 additions & 1 deletion public/components/package/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export class PackageHeader {
else {
menu.classList.add("hidden");
}
utils.hideOnClickOutside(menu, [menuDomElement]);
utils.hideOnClickOutside(menu, {
blacklist: [menuDomElement]
});
});

// Description
Expand Down
39 changes: 33 additions & 6 deletions public/components/package/pannels/overview/overview.css
Original file line number Diff line number Diff line change
@@ -1,19 +1,46 @@
div.package-maintainers {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: 10px 0;
}

div.package-maintainers>div {
flex-basis: 56px;
height: 56px;
margin-right: 6px;
display: flex;
height: 40px;
margin-bottom: 6px;
box-sizing: border-box;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(to right, rgb(43 68 137) 0%, rgba(255, 255, 255, 0) 100%);
}

div.package-maintainers>div:hover {
background: linear-gradient(to right, rgb(43, 87, 137) 0%, rgba(255, 255, 255, 0) 100%);
cursor: pointer;
color: yellow;
}

div.package-maintainers>div img {
width: 56px;
div.package-maintainers>div>img {
width: 40px;
margin-right: 6px;
}

div.package-maintainers>div>p {
flex-grow: 1;
display: flex;
align-items: center;
font-family: "mononoki";
}

div.package-maintainers>div>span {
margin-left: 6px;
display: flex;
align-items: center;
font-family: "mononoki";
min-width: 76px;
padding-right: 10px;
justify-content: flex-end;
background-color: #236f5c2e;
border-radius: 20px;
color: #ecf5da;
}
28 changes: 26 additions & 2 deletions public/components/package/pannels/overview/overview.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import prettyBytes from "pretty-bytes";

// Import Internal Dependencies
import * as utils from "../../../../common/utils.js";
import { PopupMaintainer } from "../../../views/home/maintainers/maintainers.js";

// CONSTANTS
const kEnGBDateFormat = Intl.DateTimeFormat("en-GB", {
Expand Down Expand Up @@ -122,8 +123,31 @@ export class Overview {
const fragment = document.createDocumentFragment();

for (const author of metadata.maintainers) {
const img = utils.createAvatarImageElement(author.email);
fragment.appendChild(utils.createDOMElement("div", { childs: [img] }));
const divElement = utils.createDOMElement("div", {
childs: [
utils.createAvatarImageElement(author.email),
utils.createDOMElement("p", {
text: author.name
}),
"version" in author ?
utils.createDOMElement("span", { text: `v${author.version}` }) :
null
]
});

divElement.addEventListener("click", () => {
const result = this.package.nsn.secureDataSet.getAuthorByEmail(author.email);
if (result === null) {
return;
}
const [name, data] = result;

window.popup.open(
new PopupMaintainer(name, data, this.package.nsn).render()
);
});

fragment.appendChild(divElement);
}

return fragment;
Expand Down
34 changes: 34 additions & 0 deletions public/components/popup/popup.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/** TODO: ANIMATE ? **/
section#popup--background {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
/* pointer-events: none; */
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgb(30 35 65) 100%);

visibility: hidden;
opacity: 0;
transition: opacity 0.35s ease-in, visibility 0ms ease-in 0.35s;
}

section#popup--background.show {
visibility: visible;
opacity: 1;
transition: opacity 0.35s ease-in, visibility 0ms ease-in 0ms;
}

section#popup--background>.popup {
pointer-events: all !important;
background: #f5f4f4;
border-radius: 4px;
box-shadow: 5px 5px 15px rgb(23 27 129 / 41%);
border-left: 2px solid #ffffff;
border-top: 2px solid #FFF;
}
82 changes: 82 additions & 0 deletions public/components/popup/popup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// Import Internal Dependencies
import * as utils from "../../common/utils";

export class Popup {
constructor() {
this.state = "closed";
this.dom = {
background: document.getElementById("popup--background"),
popup: document.querySelector(".popup")
};

this.listener = null;
this.templateName = null;
}

/**
* @param {!PopupTemplate} htmlElement
* @returns {void}
*/
open(template) {
if (!(template instanceof PopupTemplate)) {
throw new Error("You must provide a PopupTemplate");
}
if (this.state === "open") {
return;
}

this.templateName = template.name;
this.dom.popup.appendChild(template.HTMLElement);
// TODO: apply additional css customization

this.dom.background.classList.add("show");
this.state = "open";
setTimeout(() => this.#closeOnClickOutside(), 1);
}

#closeOnClickOutside() {
this.listener = utils.hideOnClickOutside(
this.dom.popup,
{
reverse: true,
hiddenTarget: null,
callback: () => {
this.listener = null;
this.close();
}
}
);
}

#cleanupClickOutside() {
if (this.listener !== null) {
document.removeEventListener("click", this.listener);
}
}

close() {
if (this.state === "closed") {
return;
}

this.dom.popup.innerHTML = "";
this.templateName = null;
this.#cleanupClickOutside();
this.dom.background.classList.remove("show");
this.state = "closed";
}
}

export class PopupTemplate {
/**
* @param {!string} name
* @param {!HTMLElement} HTMLElement
*/
constructor(
name,
HTMLElement
) {
this.name = name;
this.HTMLElement = HTMLElement;
}
}
80 changes: 2 additions & 78 deletions public/components/views/home/home.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url("./maintainers/maintainers.css");

#home--view {
z-index: 10;
flex-direction: column;
Expand Down Expand Up @@ -351,81 +353,3 @@
/**
* OVERVIEW END
*/

/**
* MAINTAINERS BEGIN
*/
.home--maintainers {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}

.home--maintainers>.person {
height: 50px;
flex-basis: 300px;
background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(232, 232, 232, 1) 100%);
display: flex;
position: relative;
box-sizing: border-box;
border-radius: 4px;
overflow: hidden;
margin-left: 10px;
margin-top: 10px;
box-shadow: 2px 2px 6px 0px #00000012;
border: 1px solid #bfbfbf;
color: #546884;
flex-grow: 1;
}

.home--maintainers>.person.url:hover {
border-color: var(--secondary-darker);
cursor: pointer;
}

.home--maintainers>.person>img {
width: 50px;
}

.home--maintainers>.person>i {
margin-right: 10px;
display: flex;
align-items: center;
color: #1976D2;
}

.home--maintainers>.person>.whois {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
font-size: 13px;
font-family: "mononoki";
flex-grow: 1;
margin-right: 10px;
}

.home--maintainers>.person>.whois>span {
color: var(--secondary-darker);
font-size: 12px;
margin-top: 5px;
}

.home--maintainers>.person>div.packagescount {
display: flex;
align-items: center;
font-family: "mononoki";
font-size: 14px;
margin-right: 10px;
flex-basis: 40px;
flex-shrink: 0;
}

.home--maintainers>.person>div.packagescount>i {
margin-right: 4px;
}

/**
* MAINTAINERS END
*/
Loading
Loading