diff --git a/public/components/file-box/file-box.css b/public/components/file-box/file-box.css index efadbf9f..15569418 100644 --- a/public/components/file-box/file-box.css +++ b/public/components/file-box/file-box.css @@ -1,95 +1,12 @@ -.box-file-info { - display: flex; - flex-direction: column; - padding: 10px; - border-top: 2px solid #351ea7; - border-left: 2px solid #351ea7; - background: linear-gradient(to bottom, rgb(12 15 94 / 27%) 0%, rgb(0 0 0 / 0%) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#450c0f5e', endColorstr='#00000000', GradientType=0); - border-radius: 4px; - box-shadow: 1px 1px 10px rgb(18 101 109 / 10%); -} - -.box-file-info+.box-file-info { - margin-top: 10px; -} - -.box-file-info>.box-header { - display: flex; - align-items: center; - height: 20px; - margin-bottom: 20px; -} - -.box-file-info>.box-header>span { - width: 24px; - height: 24px; - border-radius: 4px; - box-sizing: border-box; - margin-right: 10px; - display: flex; - align-items: center; - justify-content: center; - font-family: mononoki; - font-weight: bold; - text-shadow: 2px 2px 10px #000; -} - -.box-file-info>.box-header>span.Critical { - background: #d32f2f; -} - -.box-file-info>.box-header>span.Warning { - background: #f08e26; -} - -.box-file-info>.box-header>span.Information { - background: #0288d1ab; -} - -.box-file-info>.box-header>.box-title { - font-size: 18px; - font-variant: small-caps; - font-family: mononoki; - color: #FFF; - font-weight: bold; - letter-spacing: 1px; - text-decoration: none; -} - -.box-file-info>.box-header>a:hover { - text-decoration: underline; - cursor: pointer; -} - -.box-file-info>.box-header>.box-file { - margin-left: auto; - color: #B3E5FC; - display: flex; -} - -.box-file-info>.box-header>.box-file a { - color: inherit; - text-decoration: none; -} - -.box-file-info>.box-header>.box-file a:hover { - text-decoration: underline; -} - -.box-file-info>.box-header>.box-file i { - margin-right: 6px; -} - /** * LICENSES */ -.box-file-info>.box-container-licenses { +.box-container-licenses { display: flex; flex-wrap: wrap; } -.box-file-info>.box-container-licenses>div { +.box-container-licenses>div { flex-grow: 1; flex-basis: 150px; height: 26px; @@ -104,22 +21,22 @@ /** * WARNINGS */ -.box-file-info>.box-container-warning { +.box-container-warning { display: flex; } -.box-file-info>.box-container-warning .info { +.box-container-warning .info { flex-grow: 1; display: flex; flex-direction: column; } -.box-file-info>.box-container-warning .info>p.title { +.box-container-warning .info>p.title { font-size: 15px; color: #ede3ff; } -.box-file-info>.box-container-warning .info>p.value { +.box-container-warning .info>p.value { font-size: 12px; margin-top: 5px; color: var(--secondary); @@ -127,7 +44,7 @@ word-break: break-all; } -.box-file-info>.box-container-warning .view-more { +.box-container-warning .view-more { width: 40px; height: 40px; display: flex; @@ -144,13 +61,13 @@ transition: all 0.4s ease; } -.box-file-info>.box-container-warning .view-more:hover { +.box-container-warning .view-more:hover { cursor: pointer; border-color: var(--secondary); color: var(--secondary); } -.box-file-info>.box-source-code-position { +.box-source-code-position { height: 18px; margin-top: 10px; font-size: 14px; diff --git a/public/components/file-box/file-box.js b/public/components/file-box/file-box.js index 987b5d09..b80effdb 100644 --- a/public/components/file-box/file-box.js +++ b/public/components/file-box/file-box.js @@ -1,44 +1,154 @@ +// Import Third-party Dependencies +import { LitElement, html, css, nothing } from "lit"; +import { when } from "lit/directives/when.js"; + // Import Internal Dependencies -import { createDOMElement } from "../../common/utils"; - -export function createFileBox(options = {}) { - const { title, fileName, childs = [], titleHref = "#", fileHref = null, severity = null } = options; - - const defaultHrefProperties = { target: "_blank", rel: "noopener noreferrer" }; - const fileDomElement = fileHref === null ? - createDOMElement("p", { text: fileName }) : - createDOMElement("a", { text: fileName, attributes: { href: fileHref, ...defaultHrefProperties } }); - - const boxHeader = createDOMElement("div", { - classList: ["box-header"], - childs: [ - ...(severity === null ? [] : [ - createDOMElement("span", { classList: [severity], text: severity.charAt(0).toUpperCase() }) - ]), - titleHref === null ? - createDOMElement("p", { text: title, className: "box-title" }) : - createDOMElement("a", { - text: title, - className: "box-title", - attributes: { - href: titleHref, ...defaultHrefProperties - } - }), - createDOMElement("p", { - className: "box-file", - childs: [ - createDOMElement("i", { classList: ["icon-docs"] }), - fileDomElement - ] - }) - ] - }); - - return createDOMElement("div", { - classList: ["box-file-info"], - childs: [ - boxHeader, - ...childs.filter((element) => element !== null) - ] - }); +import "../icon/icon.js"; + +class FileBox extends LitElement { + static styles = css` +.box-file-info { + display: flex; + flex-direction: column; + padding: 10px; + border-top: 2px solid #351ea7; + border-left: 2px solid #351ea7; + background: linear-gradient(to bottom, rgb(12 15 94 / 27%) 0%, rgb(0 0 0 / 0%) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#450c0f5e', endColorstr='#00000000', GradientType=0); + border-radius: 4px; + box-shadow: 1px 1px 10px rgb(18 101 109 / 10%); +} + +.box-file-info+.box-file-info { + margin-top: 10px; +} + +.box-file-info>.box-header { + display: flex; + align-items: center; + height: 20px; + margin-bottom: 20px; +} + +.box-file-info>.box-header>span { + width: 24px; + height: 24px; + border-radius: 4px; + box-sizing: border-box; + margin-right: 10px; + display: flex; + align-items: center; + justify-content: center; + font-family: mononoki; + font-weight: bold; + text-shadow: 2px 2px 10px #000; +} + +.box-file-info>.box-header>span.Critical { + background: #d32f2f; +} + +.box-file-info>.box-header>span.Warning { + background: #f08e26; +} + +.box-file-info>.box-header>span.Information { + background: #0288d1ab; +} + +.box-file-info>.box-header>.box-title { + font-size: 18px; + font-variant: small-caps; + font-family: mononoki; + color: #FFF; + font-weight: bold; + letter-spacing: 1px; + text-decoration: none; } + +.box-file-info>.box-header>a:hover { + text-decoration: underline; + cursor: pointer; +} + +.box-file-info>.box-header>.box-file { + margin-left: auto; + color: #B3E5FC; + display: flex; +} + +.box-file-info>.box-header>.box-file a { + color: inherit; + text-decoration: none; +} + +.box-file-info>.box-header>.box-file a:hover { + text-decoration: underline; +} + +.box-file-info>.box-header>.box-file i { + margin-right: 6px; +} +`; + static properties = { + title: { type: String }, + fileName: { type: String }, + childs: { type: Array }, + titleHref: { type: String }, + fileHref: { type: String }, + severity: { type: String } + }; + + constructor() { + super(); + this.title = ""; + this.fileName = ""; + this.titleHref = "#"; + this.fileHref = null; + this.severity = null; + } + + render() { + return html` +
+
+ ${when( + this.severity, + (severity) => html` + + ${severity.charAt(0).toUpperCase()} + + `, + () => nothing + )} + + ${when( + this.titleHref, + (titleHref) => html` + + ${this.title} + + `, + () => html`${this.title}` + )} + +
+ + ${when( + this.fileHref, + (fileHref) => html` + + ${this.fileName} + + `, + () => html`${this.fileName}` + )} +
+
+ +
+ `; + } +} + +customElements.define("file-box", FileBox); diff --git a/public/components/icon/icon.js b/public/components/icon/icon.js index 93e3a05d..0ce51651 100644 --- a/public/components/icon/icon.js +++ b/public/components/icon/icon.js @@ -28,7 +28,22 @@ const kIcons = { 0-64.512 26.624t-27.648 64.512v475.136q0 37.888 27.648 64.512t64.512 27.648h475.136q37.888 0 64.512-27.648t26.624-64.512zM804.864 237.568v475.136q0 68.608-48.128 116.736t-116.736 48.128h-475.136q-68.608 0-116.736-48.128t-48.128-116.736v-475.136q0-67.584 48.128-115.712t116.736-49.152h475.136q67.584 - 0 116.736 49.152t48.128 115.712z"/> + 0 116.736 49.152t48.128 115.712z"/>, + +`, + docs: html` + ` }; @@ -36,7 +51,7 @@ const kIcons = { export class Icon extends LitElement { static styles = css` :host { - width: 1em; + width: 1.2em; height: 1em; margin-right: 0.2em; margin-right: 0.2em; diff --git a/public/components/package/package.js b/public/components/package/package.js index 4646674a..516e4d5c 100644 --- a/public/components/package/package.js +++ b/public/components/package/package.js @@ -91,7 +91,7 @@ export class PackageInfo { const files = document.createElement("package-files"); files.package = this; files.id = "pan-files"; - files.classList.add("package-container"); + files.classList.add("package-container", "hidden"); panFiles.parentElement.replaceChild(files, panFiles); } diff --git a/public/components/package/pannels/licenses/licenses.js b/public/components/package/pannels/licenses/licenses.js index a742c1c1..e49e9ba0 100644 --- a/public/components/package/pannels/licenses/licenses.js +++ b/public/components/package/pannels/licenses/licenses.js @@ -1,6 +1,6 @@ // Import Internal Dependencies import * as utils from "../../../../common/utils.js"; -import { createFileBox } from "../../../file-box/file-box.js"; +import "../../../file-box/file-box.js"; export class Licenses { constructor(pkg) { @@ -36,13 +36,12 @@ export class Licenses { childs: spdx.map((text) => utils.createDOMElement("div", { text })) }); - const box = createFileBox({ - title: licenseName, - fileName: license.from, - childs: [boxContainer], - titleHref: licenseLink, - fileHref: `${unpkgRoot}${license.from}` - }); + const box = document.createElement("file-box"); + box.title = licenseName; + box.fileName = license.from; + box.titleHref = licenseLink; + box.fileHref = `${unpkgRoot}${license.from}`; + box.appendChild(boxContainer); fragment.appendChild(box); } diff --git a/public/components/package/pannels/warnings/warnings.js b/public/components/package/pannels/warnings/warnings.js index 55f346fa..f608e141 100644 --- a/public/components/package/pannels/warnings/warnings.js +++ b/public/components/package/pannels/warnings/warnings.js @@ -2,7 +2,7 @@ import { locationToString } from "@nodesecure/utils"; // Import Internal Dependencies -import { createFileBox } from "../../../file-box/file-box.js"; +import "../../../file-box/file-box.js"; import { CodeFetcher } from "./code-fetcher.js"; import * as utils from "../../../../common/utils.js"; @@ -110,15 +110,15 @@ export class Warnings { ] }); - const box = createFileBox({ - title: warning.kind, - fileName: warning.file.length > 20 ? `${warning.file.slice(0, 20)}...` : warning.file, - childs: [boxContainer, boxPosition], - titleHref: warning.kind === "invalid-semver" ? - null : `https://github.com/NodeSecure/js-x-ray/blob/master/docs/${warning.kind}.md`, - fileHref: `${unpkgRoot}${warning.file}`, - severity: warning.severity ?? "Information" - }); + const box = document.createElement("file-box"); + box.title = warning.kind; + box.fileName = warning.file.length > 20 ? `${warning.file.slice(0, 20)}...` : warning.file; + box.titleHref = warning.kind === "invalid-semver" ? + null : `https://github.com/NodeSecure/js-x-ray/blob/master/docs/${warning.kind}.md`; + box.fileHref = `${unpkgRoot}${warning.file}`; + box.severity = warning.severity ?? "Information"; + box.appendChild(boxContainer); + box.appendChild(boxPosition); fragment.appendChild(box); }