diff options
| author | eleanor-park <eleanor_park@brown.edu> | 2024-12-18 14:30:35 -0500 |
|---|---|---|
| committer | eleanor-park <eleanor_park@brown.edu> | 2024-12-18 14:30:35 -0500 |
| commit | c71bd020a128c15e6bb0fbfbd84819163e9e1ff6 (patch) | |
| tree | 5c754aeb102dd5a21c9d3f185dc7a439d28dca3e /src | |
| parent | 246a1a4f34f8e35f69b0a3d8193611f9aa74a16d (diff) | |
working on drawing/image generation ui
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/smartdraw/SmartDrawHandler.tsx | 101 |
1 files changed, 52 insertions, 49 deletions
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index f318fb134..036ac5983 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -396,56 +396,59 @@ export class SmartDrawHandler extends ObservableReactComponent<object> { /> </div> {this._showOptions && ( - <div className="smartdraw-options"> - <div className="auto-color"> - Auto color - <Switch - sx={{ - '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor }, - '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor }, - }} - defaultChecked={true} - value={this._autoColor} - size="small" - onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))} - /> - </div> - <div className="complexity"> - Complexity - <Slider - sx={{ - '& .MuiSlider-track': { color: SettingsManager.userVariantColor }, - '& .MuiSlider-rail': { color: SettingsManager.userColor }, - '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } }, - }} - style={{ width: '80%' }} - min={1} - max={10} - step={1} - size="small" - value={this._complexity} - onChange={action((e, val) => this._canInteract && (this._complexity = val as number))} - valueLabelDisplay="auto" - /> - </div> - <div className="size"> - Size (in pixels) - <Slider - className="size-slider" - sx={{ - '& .MuiSlider-track': { color: SettingsManager.userVariantColor }, - '& .MuiSlider-rail': { color: SettingsManager.userColor }, - '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } }, - }} - min={50} - max={700} - step={10} - size="small" - value={this._size} - onChange={action((e, val) => this._canInteract && (this._size = val as number))} - valueLabelDisplay="auto" - /> + <div> + <div className="smartdraw-options"> + <div className="auto-color"> + Auto color + <Switch + sx={{ + '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor }, + '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor }, + }} + defaultChecked={true} + value={this._autoColor} + size="small" + onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))} + /> + </div> + <div className="complexity"> + Complexity + <Slider + sx={{ + '& .MuiSlider-track': { color: SettingsManager.userVariantColor }, + '& .MuiSlider-rail': { color: SettingsManager.userColor }, + '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } }, + }} + style={{ width: '80%' }} + min={1} + max={10} + step={1} + size="small" + value={this._complexity} + onChange={action((e, val) => this._canInteract && (this._complexity = val as number))} + valueLabelDisplay="auto" + /> + </div> + <div className="size"> + Size (in pixels) + <Slider + className="size-slider" + sx={{ + '& .MuiSlider-track': { color: SettingsManager.userVariantColor }, + '& .MuiSlider-rail': { color: SettingsManager.userColor }, + '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } }, + }} + min={50} + max={700} + step={10} + size="small" + value={this._size} + onChange={action((e, val) => this._canInteract && (this._size = val as number))} + valueLabelDisplay="auto" + /> + </div> </div> + <div></div> </div> )} </div> |