HomePanel/HomePanel
HomePanel/HomePanel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Used fixed size for colour picker.
All checks were successful
homepanel/HomePanel/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Tom Butcher 2026-02-14 02:20:26 +00:00
parent 1b0d005fdd
commit c09605bc45
3 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/dashboard/controls/EntityDashboard.css
View File

@ -15,12 +15,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
backdrop-filter: blur(15px);
} }
.hp-entity-dashboard { .hp-entity-dashboard {
position: relative; position: relative;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
background-clip: padding-box; background-clip: padding-box;
pointer-events: auto; pointer-events: auto;
padding: 0; padding: 0;
@ -104,6 +104,10 @@
word-wrap: break-word; word-wrap: break-word;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.hp-entity-dashboard-content { .hp-entity-dashboard-content {

1
packages/client/src/components/dashboard/controls/EntityDashboards/LightEntityDashboard.css
View File

@ -6,7 +6,6 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
height: 100%;
} }
/* Controls container - color wheel and brightness slider side by side */ /* Controls container - color wheel and brightness slider side by side */

24
packages/client/src/components/dashboard/controls/EntityDashboards/LightEntityDashboard.jsx
View File

@ -15,7 +15,7 @@ export const LightEntityDashboard = ({ entity }) => {
const [localBrightness, setLocalBrightness] = useState(255); const [localBrightness, setLocalBrightness] = useState(255);
const brightnessTimeoutRef = useRef(null); const brightnessTimeoutRef = useRef(null);
const colorTimeoutRef = useRef(null); const colorTimeoutRef = useRef(null);
const [maxHeight, setMaxHeight] = useState(0); const maxHeight = 480;
if (!entity) return null; if (!entity) return null;
@ -46,7 +46,11 @@ export const LightEntityDashboard = ({ entity }) => {
}); });
setHsva(newHsva); setHsva(newHsva);
} }
}, [rgbColor ? rgbColor.r : undefined, rgbColor ? rgbColor.g : undefined, rgbColor ? rgbColor.b : undefined]); }, [
rgbColor ? rgbColor.r : undefined,
rgbColor ? rgbColor.g : undefined,
rgbColor ? rgbColor.b : undefined,
]);
useEffect(() => { useEffect(() => {
setLocalBrightness(brightness); setLocalBrightness(brightness);
@ -109,22 +113,6 @@ export const LightEntityDashboard = ({ entity }) => {
const currentRgba = hsvaToRgba(hsva); const currentRgba = hsvaToRgba(hsva);
const colorStyle = `rgb(${currentRgba.r}, ${currentRgba.g}, ${currentRgba.b})`; const colorStyle = `rgb(${currentRgba.r}, ${currentRgba.g}, ${currentRgba.b})`;
useEffect(() => {
setTimeout(() => {
if (dashboardRef.current) {
setMaxHeight(dashboardRef.current.clientHeight);
}
}, 10);
const intervalId = setInterval(() => {
if (dashboardRef.current) {
setMaxHeight(dashboardRef.current.clientHeight);
}
}, 100);
return () => {
clearInterval(intervalId);
};
}, []);
return ( return (
<div className="light-entity-dashboard" ref={dashboardRef}> <div className="light-entity-dashboard" ref={dashboardRef}>
<div className="light-entity-dashboard-controls"> <div className="light-entity-dashboard-controls">