admtracksteel/tracksteel_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update 3D viewer toolbar for light mode and lighten 3D grid color

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-21 00:46:19 +00:00
parent 20056f5ddc
commit 9127950850
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/viewer3d/Viewer3DToolbar.tsx
+26 -26
View File
@@ -55,18 +55,18 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
isMeasuring, isMeasuring,
}) => { }) => {
return ( return (
<div className="flex flex-wrap items-center justify-between gap-3 p-3 bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl text-slate-200"> <div className="flex flex-wrap items-center justify-between gap-3 p-3 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200 dark:border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl dark:shadow-2xl text-slate-700 dark:text-slate-200">
{/* Left: Opacity Slider */} {/* Left: Opacity Slider */}
<div className="flex items-center gap-3 bg-slate-950/60 px-4 py-2 rounded-xl border border-slate-800"> <div className="flex items-center gap-3 bg-slate-50/80 dark:bg-slate-950/60 px-4 py-2 rounded-xl border border-slate-200 dark:border-slate-800">
<Eye className="w-4 h-4 text-amber-400" /> <Eye className="w-4 h-4 text-amber-400" />
<span className="text-xs font-medium text-slate-300">Opacidade</span> <span className="text-xs font-medium text-slate-600 dark:text-slate-300">Opacidade</span>
<input <input
type="range" type="range"
min={10} min={10}
max={100} max={100}
value={opacity} value={opacity}
onChange={(e) => onOpacityChange(Number(e.target.value))} onChange={(e) => onOpacityChange(Number(e.target.value))}
className="w-24 h-1.5 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500" className="w-24 h-1.5 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
/> />
<span className="text-xs font-mono font-bold text-amber-400 min-w-[32px]"> <span className="text-xs font-mono font-bold text-amber-400 min-w-[32px]">
{opacity}% {opacity}%
@@ -74,14 +74,14 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
</div> </div>
{/* Middle: Control Buttons */} {/* Middle: Control Buttons */}
<div className="flex flex-wrap items-center gap-1.5 bg-slate-950/60 p-1.5 rounded-xl border border-slate-800"> <div className="flex flex-wrap items-center gap-1.5 bg-slate-50/80 dark:bg-slate-950/60 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800">
{/* Grid */} {/* Grid */}
<button <button
onClick={onToggleGrid} onClick={onToggleGrid}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
showGrid showGrid
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 shadow-sm' ? 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-500/40 shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Alternar Grade de Piso" title="Alternar Grade de Piso"
> >
@@ -94,8 +94,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={onToggleSectionPlanes} onClick={onToggleSectionPlanes}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
hasSectionPlanes hasSectionPlanes
? 'bg-rose-500/20 text-rose-300 border border-rose-500/40 shadow-sm' ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300 border border-rose-300 dark:border-rose-500/40 shadow-sm'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Planos de Corte Estrutural" title="Planos de Corte Estrutural"
> >
@@ -106,7 +106,7 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
{/* Escala 1:1 / Fit */} {/* Escala 1:1 / Fit */}
<button <button
onClick={onFitView} onClick={onFitView}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800/60 transition-all" className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60 transition-all"
title="Enquadrar Estrutura Completa" title="Enquadrar Estrutura Completa"
> >
<Maximize2 className="w-3.5 h-3.5" /> <Maximize2 className="w-3.5 h-3.5" />
@@ -118,8 +118,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={onToggleWireframe} onClick={onToggleWireframe}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
!isWireframe !isWireframe
? 'bg-blue-500/20 text-blue-300 border border-blue-500/40' ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 border border-blue-300 dark:border-blue-500/40'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Modo Sólido ou Aramado" title="Modo Sólido ou Aramado"
> >
@@ -132,8 +132,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={onToggleCamera} onClick={onToggleCamera}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
isOrthographic isOrthographic
? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-500/40'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Alternar Câmera Ortogonal ou Perspectiva" title="Alternar Câmera Ortogonal ou Perspectiva"
> >
@@ -146,8 +146,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={() => onNavModeChange('orbit')} onClick={() => onNavModeChange('orbit')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
navMode === 'orbit' navMode === 'orbit'
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40' ? 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-500/40'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Modo Orbitar / Rotacionar" title="Modo Orbitar / Rotacionar"
> >
@@ -160,8 +160,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={() => onNavModeChange('walk')} onClick={() => onNavModeChange('walk')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
navMode === 'walk' navMode === 'walk'
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40' ? 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-500/40'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Modo Primeira Pessoa (Caminhar)" title="Modo Primeira Pessoa (Caminhar)"
> >
@@ -174,8 +174,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={onToggleMeasure} onClick={onToggleMeasure}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
isMeasuring isMeasuring
? 'bg-amber-500/20 text-amber-300 border border-amber-500/40' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300 border border-amber-300 dark:border-amber-500/40'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800/60'
}`} }`}
title="Régua de Medição" title="Régua de Medição"
> >
@@ -187,13 +187,13 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
{/* Right: Color Mode & Fullscreen */} {/* Right: Color Mode & Fullscreen */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* Mode Selector */} {/* Mode Selector */}
<div className="flex items-center bg-slate-950/60 p-1 rounded-xl border border-slate-800"> <div className="flex items-center bg-slate-50/80 dark:bg-slate-950/60 p-1 rounded-xl border border-slate-200 dark:border-slate-800">
<button <button
onClick={() => onColorModeChange('description')} onClick={() => onColorModeChange('description')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
colorMode === 'description' colorMode === 'description'
? 'bg-amber-500 text-slate-950 font-bold shadow-lg shadow-amber-500/20' ? 'bg-amber-500 text-white dark:text-slate-950 font-bold shadow-lg shadow-amber-500/20'
: 'text-slate-400 hover:text-slate-200' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200'
}`} }`}
title="Cores por Família/Perfil" title="Cores por Família/Perfil"
> >
@@ -204,8 +204,8 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
onClick={() => onColorModeChange('production')} onClick={() => onColorModeChange('production')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
colorMode === 'production' colorMode === 'production'
? 'bg-emerald-500 text-slate-950 font-bold shadow-lg shadow-emerald-500/20' ? 'bg-emerald-500 text-white dark:text-slate-950 font-bold shadow-lg shadow-emerald-500/20'
: 'text-slate-400 hover:text-slate-200' : 'text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200'
}`} }`}
title="Cores por Status de Apontamento" title="Cores por Status de Apontamento"
> >
@@ -217,7 +217,7 @@ export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
{/* Fullscreen Button */} {/* Fullscreen Button */}
<button <button
onClick={onToggleFullscreen} onClick={onToggleFullscreen}
className="flex items-center gap-1.5 px-3 py-2 bg-slate-950/60 hover:bg-cyan-500 hover:text-slate-950 text-cyan-400 border border-slate-800 hover:border-cyan-400 rounded-xl text-xs font-mono font-bold uppercase tracking-wider transition-all" className="flex items-center gap-1.5 px-3 py-2 bg-slate-50/80 dark:bg-slate-950/60 hover:bg-cyan-100 dark:hover:bg-cyan-500 hover:text-cyan-700 dark:hover:text-slate-950 text-cyan-400 border border-slate-200 dark:border-slate-800 hover:border-cyan-400 rounded-xl text-xs font-mono font-bold uppercase tracking-wider transition-all"
title="Tela Cheia" title="Tela Cheia"
> >
<Maximize2 className="w-3.5 h-3.5" /> <Maximize2 className="w-3.5 h-3.5" />