Skip to content

Commit fab4100

Browse files
AmirMohammad CheraghaliAmirMohammad Cheraghali
AmirMohammad Cheraghali
authored and
AmirMohammad Cheraghali
committed
refactor(ui): Consolidate controls into single 4-column grid
- Merged Visualization and Layout sections into one grid - Row 1: Surface, Spin, Rock, Dyslexic - Row 2: NGL, Mol*, Reset View (span-2) - Row 3: Single, Dual, Triple, Quad - Removed separate Layout & Engine section container
1 parent 7096847 commit fab4100

1 file changed

Lines changed: 63 additions & 75 deletions

File tree

‎src/components/Controls.tsx‎

Lines changed: 63 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,9 +1049,9 @@ export const Controls: React.FC<ControlsProps> = ({
10491049
<div className="space-y-2">
10501050
<label className={`text-[10px] font-bold uppercase tracking-wider block ${subtleText}`}>Visualization</label>
10511051
<div className="space-y-3">
1052-
{/* Toggles Grid - 3 Columns */}
1053-
<div className="grid grid-cols-3 gap-2">
1054-
{/* 6. Theme Toggle */}
1052+
{/* Consolidated Visualization & Layout Grid - 4 Columns */}
1053+
<div className="grid grid-cols-4 gap-2">
1054+
{/* ROW 1: Visual Toggles */}
10551055
<button
10561056
onClick={() => setShowSurface(!showSurface)}
10571057
className={`flex flex-col items-center justify-center gap-1 px-1 py-2 rounded-lg border transition-all ${showSurface ? 'bg-blue-500/10 border-blue-500 text-blue-500' : `${cardBg} opacity-80 hover:opacity-100`}`}
@@ -1063,7 +1063,7 @@ export const Controls: React.FC<ControlsProps> = ({
10631063
<button
10641064
onClick={() => {
10651065
setIsSpinning(!isSpinning);
1066-
if (!isSpinning && isRocking) setIsRocking(false); // Disable rock when enabling spin
1066+
if (!isSpinning && isRocking) setIsRocking(false);
10671067
}}
10681068
className={`flex flex-col items-center justify-center gap-1 px-1 py-2 rounded-lg border transition-all ${isSpinning ? 'bg-blue-500/10 border-blue-500 text-blue-500' : `${cardBg} opacity-80 hover:opacity-100`}`}
10691069
>
@@ -1074,7 +1074,7 @@ export const Controls: React.FC<ControlsProps> = ({
10741074
<button
10751075
onClick={() => {
10761076
setIsRocking(!isRocking);
1077-
if (!isRocking && isSpinning) setIsSpinning(false); // Disable spin when enabling rock
1077+
if (!isRocking && isSpinning) setIsSpinning(false);
10781078
}}
10791079
className={`flex flex-col items-center justify-center gap-1 px-1 py-2 rounded-lg border transition-all ${isRocking ? 'bg-blue-500/10 border-blue-500 text-blue-500' : `${cardBg} opacity-80 hover:opacity-100`}`}
10801080
title="Rock rotation (oscillate)"
@@ -1092,89 +1092,77 @@ export const Controls: React.FC<ControlsProps> = ({
10921092
<div className={`w-1 h-1 rounded-full mt-0.5 ${isDyslexicFont ? 'bg-blue-500' : 'bg-neutral-500'}`} />
10931093
</button>
10941094

1095-
{/* Reset View Button - Integrated into Visualization Grid */}
1095+
{/* ROW 2: Engine Switcher & Reset View */}
1096+
<button
1097+
onClick={() => setVisualizerEngine?.('ngl')}
1098+
className={`h-10 flex items-center justify-center rounded-lg border transition-all ${visualizerEngine === 'ngl' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1099+
title="NGL Viewer"
1100+
>
1101+
<span className="text-[10px] font-bold">NGL</span>
1102+
</button>
1103+
<button
1104+
onClick={() => setVisualizerEngine?.('molstar')}
1105+
className={`h-10 flex items-center justify-center rounded-lg border transition-all ${visualizerEngine === 'molstar' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1106+
title="Mol* Viewer"
1107+
>
1108+
<span className="text-[10px] font-bold">Mol*</span>
1109+
</button>
1110+
10961111
{onResetCamera && (
10971112
<button
10981113
onClick={onResetCamera}
1099-
className={`col-span-2 flex items-center justify-center gap-2 rounded-lg border transition-all ${cardBg} opacity-80 hover:opacity-100 hover:bg-white/5 border-neutral-700/50`}
1114+
className={`col-span-2 h-10 flex items-center justify-center gap-2 rounded-lg border transition-all ${cardBg} opacity-80 hover:opacity-100 hover:bg-white/5 border-neutral-700/50`}
11001115
title="Reset camera to default view"
11011116
>
11021117
<RotateCcw className="w-3.5 h-3.5" />
11031118
<span className="text-[10px] font-medium">Reset View</span>
11041119
</button>
11051120
)}
11061121

1107-
1108-
{/* Multi-View Mode Selector */}
1122+
{/* ROW 3: Layout Grid - Spread across 4 columns */}
11091123
{onSetViewMode && (
1110-
<div className="col-span-2 space-y-2" id="viewport-controls">
1111-
<label className={`text-[9px] font-bold uppercase tracking-wider block ${subtleText}`}>Layout & Engine</label>
1112-
<div className="grid grid-cols-2 gap-2">
1113-
{/* Column 1: Engine Switcher */}
1114-
<div className="grid grid-rows-2 gap-2">
1115-
<button
1116-
onClick={() => setVisualizerEngine?.('ngl')}
1117-
className={`h-12 flex items-center justify-center rounded-lg border-2 font-bold text-sm transition-all ${visualizerEngine === 'ngl' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1118-
title="NGL Viewer"
1119-
>
1120-
NGL
1121-
</button>
1122-
<button
1123-
onClick={() => setVisualizerEngine?.('molstar')}
1124-
className={`h-12 flex items-center justify-center rounded-lg border-2 font-bold text-sm transition-all ${visualizerEngine === 'molstar' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400 shadow-[0_0_12px_rgba(99,102,241,0.3)]' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1125-
title="Mol* Viewer"
1126-
>
1127-
Mol*
1128-
</button>
1124+
<>
1125+
<button
1126+
onClick={() => onSetViewMode('single')}
1127+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border transition-all ${viewMode === 'single' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1128+
>
1129+
<div className="w-4 h-4 border-2 rounded" />
1130+
<span className="text-[9px] font-bold">Single</span>
1131+
</button>
1132+
<button
1133+
onClick={() => onSetViewMode('dual')}
1134+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border transition-all ${viewMode === 'dual' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1135+
>
1136+
<div className="flex gap-1">
1137+
<div className="w-1.5 h-3 border-2 rounded" />
1138+
<div className="w-1.5 h-3 border-2 rounded" />
11291139
</div>
1130-
1131-
{/* Column 2: Layout Grid - Connected Segmented Control */}
1132-
<div className="grid grid-cols-2 grid-rows-2 gap-0 rounded-lg overflow-hidden border-2 border-neutral-700/50">
1133-
<button
1134-
onClick={() => onSetViewMode('single')}
1135-
className={`h-12 flex flex-col items-center justify-center gap-1 border-r border-b border-neutral-700/50 transition-all ${viewMode === 'single' ? 'bg-indigo-600/20 text-indigo-400' : `${cardBg} opacity-70 hover:opacity-100 hover:bg-white/5`}`}
1136-
>
1137-
<div className="w-4 h-4 border-2 rounded" />
1138-
<span className="text-[9px] font-bold">Single</span>
1139-
</button>
1140-
<button
1141-
onClick={() => onSetViewMode('dual')}
1142-
className={`h-12 flex flex-col items-center justify-center gap-1 border-b border-neutral-700/50 transition-all ${viewMode === 'dual' ? 'bg-indigo-600/20 text-indigo-400' : `${cardBg} opacity-70 hover:opacity-100 hover:bg-white/5`}`}
1143-
>
1144-
<div className="flex gap-1">
1145-
<div className="w-2 h-4 border-2 rounded" />
1146-
<div className="w-2 h-4 border-2 rounded" />
1147-
</div>
1148-
<span className="text-[9px] font-bold">Dual</span>
1149-
</button>
1150-
<button
1151-
onClick={() => onSetViewMode('triple')}
1152-
className={`h-12 flex flex-col items-center justify-center gap-1 border-r border-neutral-700/50 transition-all ${viewMode === 'triple' ? 'bg-indigo-600/20 text-indigo-400' : `${cardBg} opacity-70 hover:opacity-100 hover:bg-white/5`}`}
1153-
>
1154-
<div className="flex flex-col gap-1">
1155-
<div className="w-4 h-1.5 border-2 rounded" />
1156-
<div className="flex gap-1">
1157-
<div className="w-1.5 h-1.5 border-2 rounded" />
1158-
<div className="w-1.5 h-1.5 border-2 rounded" />
1159-
</div>
1160-
</div>
1161-
<span className="text-[9px] font-bold">Triple</span>
1162-
</button>
1163-
<button
1164-
onClick={() => onSetViewMode('quad')}
1165-
className={`h-12 flex flex-col items-center justify-center gap-1 transition-all ${viewMode === 'quad' ? 'bg-indigo-600/20 text-indigo-400' : `${cardBg} opacity-70 hover:opacity-100 hover:bg-white/5`}`}
1166-
>
1167-
<div className="grid grid-cols-2 gap-1">
1168-
<div className="w-1.5 h-1.5 border-2 rounded" />
1169-
<div className="w-1.5 h-1.5 border-2 rounded" />
1170-
<div className="w-1.5 h-1.5 border-2 rounded" />
1171-
<div className="w-1.5 h-1.5 border-2 rounded" />
1172-
</div>
1173-
<span className="text-[9px] font-bold">Quad</span>
1174-
</button>
1140+
<span className="text-[9px] font-bold">Dual</span>
1141+
</button>
1142+
<button
1143+
onClick={() => onSetViewMode('triple')}
1144+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border transition-all ${viewMode === 'triple' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1145+
>
1146+
<div className="flex gap-0.5">
1147+
<div className="w-1.5 h-3 border-2 rounded" />
1148+
<div className="w-1.5 h-3 border-2 rounded" />
1149+
<div className="w-1.5 h-3 border-2 rounded" />
11751150
</div>
1176-
</div>
1177-
</div>
1151+
<span className="text-[9px] font-bold">Triple</span>
1152+
</button>
1153+
<button
1154+
onClick={() => onSetViewMode('quad')}
1155+
className={`h-12 flex flex-col items-center justify-center gap-1 rounded-lg border transition-all ${viewMode === 'quad' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' : `${cardBg} border-neutral-700/50 opacity-70 hover:opacity-100 hover:border-neutral-600`}`}
1156+
>
1157+
<div className="grid grid-cols-2 gap-0.5">
1158+
<div className="w-1.5 h-1.5 border-2 rounded" />
1159+
<div className="w-1.5 h-1.5 border-2 rounded" />
1160+
<div className="w-1.5 h-1.5 border-2 rounded" />
1161+
<div className="w-1.5 h-1.5 border-2 rounded" />
1162+
</div>
1163+
<span className="text-[9px] font-bold">Quad</span>
1164+
</button>
1165+
</>
11781166
)}
11791167
</div>
11801168

0 commit comments

Comments
 (0)