refactor(legend): initialize lit migration (#546)

Author: clemgbld

package.json

@@ -115,6 +115,7 @@
     "highlightjs-line-numbers.js": "^2.8.0",
     "ini": "^5.0.0",
     "kleur": "^4.1.5",
+    "lit": "^3.3.1",
     "ms": "^2.1.3",
     "open": "^10.1.0",
     "pino": "^9.3.2",

public/components/legend/legend.css

@@ -1,58 +1,112 @@
+// Import Third-party Dependencies
+import { LitElement, html, css } from "lit";
+
 // Import Internal Dependencies
 import { COLORS } from "../../../workspaces/vis-network/src/constants.js";
-import { createDOMElement, currentLang } from "../../common/utils.js";
+import { currentLang } from "../../common/utils.js";
 
-export class Legend {
-  constructor(
-    options = {}
-  ) {
-    const { show = false } = options;
+class Legend extends LitElement {
+  static properties = {
+    isVisible: { type: Boolean }
+  };
 
-    const colors = COLORS.LIGHT;
-    const { legend } = window.i18n[currentLang()];
+  static styles = css`
+.container {
+  position: absolute;
+  right: 10px;
+  bottom: 40px;
+  z-index: 30;
+  max-width: 692px;
+  overflow: hidden;
+  transition: transform 0.3s;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: right;
+  font-size: 14px;
+  color: #030421;
+  padding: 0 10px 10px 0;
+  border-radius: 4px;
+}
 
-    const fragment = document.createDocumentFragment();
-    fragment.append(
-      createLegendBoxElement(colors.WARN, legend.warn),
-      createLegendBoxElement(colors.FRIENDLY, legend.friendly),
-      createLegendBoxElement(colors.DEFAULT, legend.default)
-    );
+.legend-box {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  height: 24px;
+  border-radius: 4px;
+}
 
-    this.DOMElement = document.getElementById("legend");
-    this.DOMElement.replaceChildren(fragment);
-    show && this.show();
-  }
+.legend-badge {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  margin: 0 5px;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgb(0 0 0 / 34%);
+}
+
+.legend {
+  font-weight: bold;
+  padding-left: 6px;
+  display: none;
+}
+
+.legend-box:not(:hover) {
+  background: transparent !important;
+}
+
+.legend-box:hover {
+  border: 1px solid rgb(48 56 165 / 60%);
+}
+
+.legend-box:hover > .legend {
+  display: flex;
+  align-items: center;
+}
+
+.legend-box:hover .legend-badge {
+  box-shadow: none;
+}`;
 
   show() {
-    this.DOMElement.style.display = "flex";
+    this.isVisible = true;
   }
 
   hide() {
-    this.DOMElement.style.display = "none";
+    this.isVisible = false;
   }
-}
 
-function createLegendBoxElement(
-  theme,
-  text
-) {
-  const styles = {
-    backgroundColor: theme.color,
-    color: theme.font.color
-  };
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+
+    const colors = COLORS.LIGHT;
+    const { legend } = window.i18n[currentLang()];
+
+    return html`
+     <div class="container">
+       ${this.#createLegendBoxElement(colors.WARN, legend.warn)}
+       ${this.#createLegendBoxElement(colors.FRIENDLY, legend.friendly)}
+       ${this.#createLegendBoxElement(colors.DEFAULT, legend.default)}
+    </div>
+    `;
+  }
 
-  return createDOMElement("div", {
-    className: "legend-box",
-    childs: [
-      createDOMElement("div", {
-        className: "legend-badge",
-        styles
-      }),
-      createDOMElement("div", {
-        className: "legend",
-        text
-      })
-    ],
-    styles
-  });
+  #createLegendBoxElement(
+    theme,
+    text
+  ) {
+    const style = `background-color: ${theme.color}; color: ${theme.font.color};`;
+
+    return html`
+    <div class="legend-box" style=${style}>
+      <div class="legend-badge" style=${style}></div>
+      <div class="legend">${text}</div>
+    </div>
+    `;
+  }
 }
+
+customElements.define("nsecure-legend", Legend);

public/components/legend/legend.js

@@ -5,7 +5,6 @@
 @import url("./font/roboto/roboto.css");
 @import url("./font/mononoki/mononoki.css");
 @import url("./components/locker/locker.css");
-@import url("./components/legend/legend.css");
 @import url("./components/popup/popup.css");
 @import url("./components/file-box/file-box.css");
 @import url("./components/expandable/expandable.css");

public/main.css

@@ -7,7 +7,7 @@ import { ViewNavigation } from "./components/navigation/navigation.js";
 import { Wiki } from "./components/wiki/wiki.js";
 import { Popup } from "./components/popup/popup.js";
 import { Locker } from "./components/locker/locker.js";
-import { Legend } from "./components/legend/legend.js";
+import "./components/legend/legend.js";
 import { Settings } from "./components/views/settings/settings.js";
 import { HomeView } from "./components/views/home/home.js";
 import { SearchView } from "./components/views/search/search.js";
@@ -125,7 +125,9 @@ async function init(options = {}) {
     theme: window.settings.config.theme
   });
   window.locker = new Locker(nsn);
-  window.legend = new Legend({ show: window.settings.config.showFriendlyDependencies });
+  const legend = document.getElementById("legend");
+  legend.isVisible = window.settings.config.showFriendlyDependencies;
+  window.legend = legend;
   homeView ??= new HomeView(secureDataSet, nsn);
   searchview ??= new SearchView(secureDataSet, nsn);
 

public/main.js

@@ -84,7 +84,7 @@
         <i class="icon-lock-open"></i>
         <p>[[=z.token('network.unlocked')]]</p>
       </div>
-      <div id="legend">
+      <nsecure-legend id="legend">
       </div>
     </div>
     <div id="search--view" class="view hidden">