chore: improve maintainers & start implementing popup

public/common/utils.js

@@ -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();
     }
   };
@@ -266,4 +284,6 @@ export function hideOnClickOutside(element, blacklistElements = []) {
   };
 
   document.addEventListener("click", outsideClickListener);
+
+  return outsideClickListener;
 }

public/components/package/header/header.js

@@ -52,7 +52,9 @@ export class PackageHeader {
       else {
         menu.classList.add("hidden");
       }
-      utils.hideOnClickOutside(menu, [menuDomElement]);
+      utils.hideOnClickOutside(menu, {
+        blacklist: [menuDomElement]
+      });
     });
 
     // Description

public/components/package/pannels/overview/overview.css

@@ -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;
 }

public/components/package/pannels/overview/overview.js

@@ -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", {
@@ -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;

public/components/popup/popup.css

@@ -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;
+}

public/components/popup/popup.js

@@ -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;
+  }
+}

public/components/views/home/home.css

@@ -1,3 +1,5 @@
+@import url("./maintainers/maintainers.css");
+
 #home--view {
   z-index: 10;
   flex-direction: column;
@@ -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
- */