update panel styling structure

.eslintrc.json

@@ -11,7 +11,6 @@
   },
   "plugins": ["@typescript-eslint"],
   "rules": {
-    "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double"],
     "semi": ["error", "always"],

docs/css/tailor.css

@@ -9,7 +9,11 @@
   --tailor-blue-500: rgba(11, 153, 255, 0.5);
   --tailor-blue-50: rgba(11, 153, 255, 0.05);
   --tailor-red-50: rgba(241, 71, 34, 0.05);
-  --tailor-panel-black: rgba(0, 0, 0, 0.7);
+  --tailor-gray-50: #ccc;
+  --tailor-gray-600: #9a9a9a;
+  --tailor-gray-700: #6b6b6b;
+  --tailor-gray-800: #414141;
+  --tailor-gray-900: #272727;
   --tailor-white: #fff;
 }
 
@@ -252,23 +256,52 @@
 
 /* ----- Panel ----- */
 
+.__tailor-panel__groups {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .__tailor-panel {
   position: fixed;
+  z-index: 100000;
   overflow: hidden;
-  top: 10px;
-  right: 10px;
-  background-color: var(--tailor-panel-black);
-  backdrop-filter: blur(3px);
-  border-radius: 8px;
-  padding: 10px;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 1rem;
+  border: 0.125rem solid var(--tailor-gray-700);
+  padding: 0.5rem;
+  min-height: 4.5rem;
+  justify-content: space-between;
+  background: var(--tailor-gray-900);
   color: var(--tailor-white);
-  width: 200px;
-  font-size: 13px;
+  min-width: 250px;
+  font-size: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.__tailor-panel span {
-  color: var(--tailor-light-blue);
+.__tailor-panel__group-name {
+  display: block;
+  color: var(--tailor-white);
+  font-size: 0.8rem;
   font-weight: bold;
+  padding-bottom: 0.2rem;
+}
+
+.__tailor-panel__row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.__tailor-panel__row-label {
+  color: var(--tailor-gray-600);
+}
+
+.__tailor-panel__row-value {
+  text-align: right;
+}
+
+.__tailor-panel__row-value--highlight {
+  color: var(--tailor-light-blue)
 }

src/index.ts

@@ -1,45 +1,7 @@
-type Vector = { x: number; y: number };
-
-type Child = string | HTMLElement | SVGElement;
-
-function el(
-  tagName: string,
-  attributes: Record<string, string> = {},
-  children: Child | Child[] = []
-): HTMLElement {
-  // Create element
-  const $div = document.createElement(tagName);
-
-  // If children is a single element, wrap it into array
-  if (!Array.isArray(children)) {
-    children = [children];
-  }
-
-  // Loop through and append children
-  children.forEach((child) => {
-    if (typeof child === "string") {
-      $div.append(child);
-    } else {
-      $div.appendChild(child);
-    }
-  });
-
-  // Sett HTML attributes
-  for (const name in attributes) {
-    $div.setAttribute(name, attributes[name]);
-  }
-
-  return $div;
-}
-
-const div = (attributes: Record<string, string> = {}, children: Child | Child[] = []) => {
-  return el("div", attributes, children) as HTMLDivElement;
-};
-
-const span = (attributes: Record<string, string> = {}, children: Child | Child[] = []) => {
-  return el("span", attributes, children) as HTMLSpanElement;
-};
+import { div, span } from "./utils/elements";
+import { panelGroup } from "./utils/templates";
 
+type Vector = { x: number; y: number };
 type ToggleKey = "Control" | "Meta" | "Alt";
 
 function getRect($el: HTMLElement | SVGElement) {
@@ -594,15 +556,21 @@ class Tailor {
     }
 
     this.$panel.replaceChildren(
-      // Element tag and id/class
-      span({}, [$el.tagName.toLowerCase()]),
-      `${id}${className}`,
-      // Dimensions
-      div({}, [`${width}x${height}px`]),
-      // Font
-      div({}, [font]),
-      div({}, [`${style.fontSize} ${style.lineHeight}`]),
-      div({}, [`${style.fontWeight} ${style.fontStyle}`])
+      div({ class: "__tailor-panel__groups" }, [
+        panelGroup("Element", [
+          ["tag", $el.tagName.toLowerCase(), true],
+          ["id", id],
+          ["class", className.split(".").map((cls) => div({}, cls))],
+          ["dimensions", `${width} x ${height}px`],
+        ]),
+        panelGroup("Font", [
+          ["name", font],
+          ["size", style.fontSize],
+          ["line height", style.lineHeight],
+          ["weight", style.fontWeight],
+          ["style", style.fontStyle],
+        ]),
+      ])
     );
   }
 }

src/utils/elements.ts

@@ -0,0 +1,43 @@
+export type Child = string | HTMLElement | SVGElement;
+
+type Element<T> = (attributes?: Record<string, string>, children?: Child | Child[]) => T;
+
+export function el(
+  tagName: string,
+  attributes: Record<string, string> = {},
+  children: Child | Child[] = []
+): HTMLElement {
+  // Create element
+  const $div = document.createElement(tagName);
+
+  // If children is a single element, wrap it into array
+  if (!Array.isArray(children)) {
+    children = [children];
+  }
+
+  // Loop through and append children
+  children.forEach((child) => {
+    if (typeof child === "string") {
+      $div.append(child);
+    } else {
+      $div.appendChild(child);
+    }
+  });
+
+  // Sett HTML attributes
+  for (const name in attributes) {
+    $div.setAttribute(name, attributes[name]);
+  }
+
+  return $div;
+}
+
+const elementFactory =
+  <T>(tag: string): Element<T> =>
+  (attributes = {}, children = []) =>
+    el(tag, attributes, children) as T;
+
+export const div = elementFactory<HTMLDivElement>("div");
+export const span = elementFactory<HTMLSpanElement>("span");
+export const li = elementFactory<HTMLLIElement>("li");
+export const ul = elementFactory<HTMLUListElement>("ul");

src/utils/templates.ts

@@ -0,0 +1,26 @@
+import { Child, div, li, span, ul } from "./elements";
+
+export function panelGroup(
+  name: string,
+  rows: [attr: string, value: Child | Child[], highlight?: boolean][]
+) {
+  return div({}, [
+    span({ class: "__tailor-panel__group-name" }, [`${name}`]),
+    ul(
+      {},
+      rows.map(([attr, value, highlight]) =>
+        li({ class: "__tailor-panel__row" }, [
+          span({ class: "__tailor-panel__row-label" }, `${attr}:`),
+          span(
+            {
+              class: `__tailor-panel__row-value ${
+                highlight && "__tailor-panel__row-value--highlight"
+              }`,
+            },
+            value
+          ),
+        ])
+      )
+    ),
+  ]);
+}