library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make Customizer a floating window

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-27 00:35:13 +01:00
parent 493aa56bbb
commit 068b93a878
11 changed files with 72 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/_react/bulma-customizer/index.html
View File

@ -5,9 +5,23 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <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> </head>
<body> <body>
<div id="root"></div> <div id="bulma-customizer-app"></div>
<div id="scope" class="is-hidden"> <div id="scope" class="is-hidden">
<div class="breadcrumb"></div> <div class="breadcrumb"></div>
<div class="card"></div> <div class="card"></div>
@ -25,7 +39,7 @@
<div class="icon"></div> <div class="icon"></div>
<div class="notification"></div> <div class="notification"></div>
<div class="progress"></div> <div class="progress"></div>
<div class="table"></div> <table class="table"></table>
<div class="tag"></div> <div class="tag"></div>
<div class="title"></div> <div class="title"></div>
<input class="input"> <input class="input">

38
docs/_react/bulma-customizer/src/App.jsx
View File

@ -189,8 +189,9 @@ function App() {
}; };
const [context, setContext] = useState(initialContext); const [context, setContext] = useState(initialContext);
const handleTabChange = (event, tabId) => { const handleTabChange = (event) => {
event.preventDefault(); event.preventDefault();
const tabId = event.target.value;
context.changeTab(tabId); context.changeTab(tabId);
context.changePage(PAGE_IDS[tabId][0]); context.changePage(PAGE_IDS[tabId][0]);
}; };
@ -373,7 +374,7 @@ function App() {
} }
const computedValue = `${current}${unit}`; const computedValue = `${current}${unit}`;
const declaration = `--bulma-${id}: ${computedValue};`; const declaration = `--bulma-${id}: ${computedValue} !important;`;
if (scope in rules) { if (scope in rules) {
rules[scope].push(declaration); rules[scope].push(declaration);
@ -403,28 +404,19 @@ function App() {
<CustomizerContext.Provider value={context}> <CustomizerContext.Provider value={context}>
<style ref={styleRef} /> <style ref={styleRef} />
<div className={cn.app}> <div className={cn.app}>
<div className="tabs is-primary is-boxed is-centered" style={tabsStyle}> <div className={cn.controls}>
<ul> <div className="select" style={tabsStyle}>
{TAB_IDS.map((tabId) => { <select onChange={handleTabChange} value={context.currentTab}>
const buttonClass = classNames({ {TAB_IDS.map((tabId) => {
// button: true, return (
"is-active": tabId === context.currentTab, <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) => { {PAGE_IDS[context.currentTab].map((pageId) => {
const buttonClass = classNames({ const buttonClass = classNames({
button: true, button: true,

18
docs/_react/bulma-customizer/src/App.module.css
View File

@ -5,17 +5,9 @@
--var-item-gap: 1rem; --var-item-gap: 1rem;
} }
.items { .controls {
display: grid; display: flex;
grid-template-columns: repeat( flex-wrap: wrap;
auto-fit, gap: 0.5rem;
minmax( padding: 1.5rem;
calc(
var(--var-item-padding) + var(--var-item-side-width) +
var(--var-item-gap) + var(--var-item-slider-width) +
var(--var-item-padding)
),
1fr
)
);
} }

9
docs/_react/bulma-customizer/src/components/Color.jsx
View File

@ -5,6 +5,7 @@ import Slider from "./Slider";
import cn from "./Color.module.css"; import cn from "./Color.module.css";
import { CustomizerContext } from "../App"; import { CustomizerContext } from "../App";
import classNames from "classnames";
function hslToHex(h, s, l) { function hslToHex(h, s, l) {
s /= 100; s /= 100;
@ -195,6 +196,11 @@ function Color({ color }) {
Number(h.current) === Number(h.start) && Number(h.current) === Number(h.start) &&
Number(s.current) === Number(s.start) && Number(s.current) === Number(s.start) &&
Number(l.current) === Number(l.start); Number(l.current) === Number(l.start);
const resetClass = classNames({
button: true,
"is-danger is-outlined": !isDisabled,
});
const resetStyle = isDisabled ? { opacity: 0.1 } : {};
return ( return (
<div className={cn.main} style={mainStyle}> <div className={cn.main} style={mainStyle}>
@ -210,7 +216,8 @@ function Color({ color }) {
</button> </button>
<button <button
className="button" className={resetClass}
style={resetStyle}
onClick={handleReset} onClick={handleReset}
disabled={isDisabled} disabled={isDisabled}
> >

24
docs/_react/bulma-customizer/src/components/VarItem.jsx
View File

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

3
docs/_react/bulma-customizer/src/components/VarItem.module.css
View File

@ -1,7 +1,5 @@
.main { .main {
background-color: var(--bulma-body-background-color); background-color: var(--bulma-body-background-color);
align-items: start;
display: flex;
gap: var(--var-item-gap); gap: var(--var-item-gap);
box-shadow: 0 0 0 1px var(--bulma-border); box-shadow: 0 0 0 1px var(--bulma-border);
padding: var(--var-item-padding); padding: var(--var-item-padding);
@ -15,7 +13,6 @@
.side { .side {
flex-shrink: 0; flex-shrink: 0;
width: var(--var-item-side-width);
} }
.name { .name {

2
docs/_react/bulma-customizer/src/main.jsx
View File

@ -2,7 +2,7 @@ import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App.jsx"; import App from "./App.jsx";
ReactDOM.createRoot(document.getElementById("root")).render( ReactDOM.createRoot(document.getElementById("bulma-customizer-app")).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,

2
docs/_react/bulma-customizer/src/pages/elements/Box.jsx
View File

@ -8,8 +8,6 @@ function Box() {
return ( return (
<div className={cn.items}> <div className={cn.items}>
<div className="box">I am in a box</div>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

2
docs/assets/javascript/bulma-customizer/index.css
View File

File diff suppressed because one or more lines are too long

20
docs/assets/javascript/bulma-customizer/index.js
View File

File diff suppressed because one or more lines are too long

4
docs/assets/javascript/main.js
View File

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