Make Customizer a floating window

2024-10-17 09:04:18 +00:00 · 2024-06-27 00:35:13 +01:00 · 2024-06-27 00:35:13 +01:00 · 068b93a878
commit 068b93a878
parent 493aa56bbb
11 changed files with 72 additions and 68 deletions
--- a/docs/_react/bulma-customizer/index.html
+++ b/docs/_react/bulma-customizer/index.html
@ -5,9 +5,23 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
+    <style type="text/css">
+      #bulma-customizer-app {
+        background: var(--bulma-body-background-color);
+        border-radius: 0.5rem;
+        border: 1px solid var(--bulma-border);
+        bottom: 1rem;
+        overflow: auto;
+        position: fixed;
+        right: 1rem;
+        top: 1rem;
+        width: 33rem;
+        z-index: 100;
+      }
+    </style>
  </head>
  <body>
-    <div id="root"></div>
+    <div id="bulma-customizer-app"></div>
    <div id="scope" class="is-hidden">
      <div class="breadcrumb"></div>
      <div class="card"></div>
@ -25,7 +39,7 @@
      <div class="icon"></div>
      <div class="notification"></div>
      <div class="progress"></div>
-      <div class="table"></div>
+      <table class="table"></table>
      <div class="tag"></div>
      <div class="title"></div>
      <input class="input">
--- a/docs/_react/bulma-customizer/src/App.jsx
+++ b/docs/_react/bulma-customizer/src/App.jsx
@ -189,8 +189,9 @@ function App() {
  };
  const [context, setContext] = useState(initialContext);

-  const handleTabChange = (event, tabId) => {
+  const handleTabChange = (event) => {
    event.preventDefault();
+    const tabId = event.target.value;
    context.changeTab(tabId);
    context.changePage(PAGE_IDS[tabId][0]);
  };
@ -373,7 +374,7 @@ function App() {
      }

      const computedValue = `${current}${unit}`;
-      const declaration = `--bulma-${id}: ${computedValue};`;
+      const declaration = `--bulma-${id}: ${computedValue} !important;`;

      if (scope in rules) {
        rules[scope].push(declaration);
@ -403,28 +404,19 @@ function App() {
    <CustomizerContext.Provider value={context}>
      <style ref={styleRef} />
      <div className={cn.app}>
-        <div className="tabs is-primary is-boxed is-centered" style={tabsStyle}>
-          <ul>
-            {TAB_IDS.map((tabId) => {
-              const buttonClass = classNames({
-                // button: true,
-                "is-active": tabId === context.currentTab,
-              });
+        <div className={cn.controls}>
+          <div className="select" style={tabsStyle}>
+            <select onChange={handleTabChange} value={context.currentTab}>
+              {TAB_IDS.map((tabId) => {
+                return (
+                  <option key={tabId} value={tabId}>
+                    <a>{unslug(tabId)}</a>
+                  </option>
+                );
+              })}
+            </select>
+          </div>

-              return (
-                <li
-                  className={buttonClass}
-                  key={tabId}
-                  onClick={(e) => handleTabChange(e, tabId)}
-                >
-                  <a>{unslug(tabId)}</a>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-
-        <div className="buttons are-small has-addons is-centered">
          {PAGE_IDS[context.currentTab].map((pageId) => {
            const buttonClass = classNames({
              button: true,
--- a/docs/_react/bulma-customizer/src/App.module.css
+++ b/docs/_react/bulma-customizer/src/App.module.css
@ -5,17 +5,9 @@
  --var-item-gap: 1rem;
 }

-.items {
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(
-      calc(
-        var(--var-item-padding) + var(--var-item-side-width) +
-          var(--var-item-gap) + var(--var-item-slider-width) +
-          var(--var-item-padding)
-      ),
-      1fr
-    )
-  );
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1.5rem;
 }
--- a/docs/_react/bulma-customizer/src/components/Color.jsx
+++ b/docs/_react/bulma-customizer/src/components/Color.jsx
@ -5,6 +5,7 @@ import Slider from "./Slider";

 import cn from "./Color.module.css";
 import { CustomizerContext } from "../App";
+import classNames from "classnames";

 function hslToHex(h, s, l) {
  s /= 100;
@ -195,6 +196,11 @@ function Color({ color }) {
    Number(h.current) === Number(h.start) &&
    Number(s.current) === Number(s.start) &&
    Number(l.current) === Number(l.start);
+  const resetClass = classNames({
+    button: true,
+    "is-danger is-outlined": !isDisabled,
+  });
+  const resetStyle = isDisabled ? { opacity: 0.1 } : {};

  return (
    <div className={cn.main} style={mainStyle}>
@ -210,7 +216,8 @@ function Color({ color }) {
          </button>

          <button
-            className="button"
+            className={resetClass}
+            style={resetStyle}
            onClick={handleReset}
            disabled={isDisabled}
          >
--- a/docs/_react/bulma-customizer/src/components/VarItem.jsx
+++ b/docs/_react/bulma-customizer/src/components/VarItem.jsx
@ -28,7 +28,9 @@ function VarItem({ id }) {

  const isDisabled = cssvar.current == cssvar.start;
  const resetClass = classNames({
-    button: true,
+    "button is-small": true,
+    "is-float-right": true,
+    "ml-2": true,
    "is-danger is-outlined": !isDisabled,
  });
  const resetStyle = isDisabled ? { opacity: 0.1 } : {};
@ -72,22 +74,20 @@ function VarItem({ id }) {
  return (
    <div className={cn.main}>
      <div className={cn.side}>
+        <button
+          className={resetClass}
+          onClick={handleReset}
+          disabled={isDisabled}
+          style={resetStyle}
+        >
+          Reset
+        </button>
+
        <div className={cn.name}>
          <code>{cssvar.id}</code>
        </div>

        <div className={cn.description}>{cssvar.description}</div>
-
-        <div className="buttons are-small">
-          <button
-            className={resetClass}
-            onClick={handleReset}
-            disabled={isDisabled}
-            style={resetStyle}
-          >
-            Reset
-          </button>
-        </div>
      </div>

      <div className={cn.slider}>{control}</div>
--- a/docs/_react/bulma-customizer/src/components/VarItem.module.css
+++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css
@ -1,7 +1,5 @@
 .main {
  background-color: var(--bulma-body-background-color);
-  align-items: start;
-  display: flex;
  gap: var(--var-item-gap);
  box-shadow: 0 0 0 1px var(--bulma-border);
  padding: var(--var-item-padding);
@ -15,7 +13,6 @@

 .side {
  flex-shrink: 0;
-  width: var(--var-item-side-width);
 }

 .name {
--- a/docs/_react/bulma-customizer/src/main.jsx
+++ b/docs/_react/bulma-customizer/src/main.jsx
@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";

-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("bulma-customizer-app")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
--- a/docs/_react/bulma-customizer/src/pages/elements/Box.jsx
+++ b/docs/_react/bulma-customizer/src/pages/elements/Box.jsx
@ -8,8 +8,6 @@ function Box() {

  return (
    <div className={cn.items}>
-      <div className="box">I am in a box</div>
-
      {ids.map((id) => {
        return <VarItem key={id} id={id} />;
      })}
--- a/docs/assets/javascript/bulma-customizer/index.css
+++ b/docs/assets/javascript/bulma-customizer/index.css
--- a/docs/assets/javascript/bulma-customizer/index.js
+++ b/docs/assets/javascript/bulma-customizer/index.js
--- a/docs/assets/javascript/main.js
+++ b/docs/assets/javascript/main.js
@ -155,6 +155,10 @@ document.addEventListener("DOMContentLoaded", () => {

  if ($clickableDropdowns.length > 0) {
    $clickableDropdowns.forEach(($dropdown) => {
+      if (!$dropdown.querySelector("button")) {
+        return;
+      }
+
      $dropdown.querySelector("button").addEventListener("click", (event) => {
        event.stopPropagation();
        $dropdown.classList.toggle("is-active");