-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Usage of Toolbutton component instead of Toggle Button #375
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
selected={variableColorBar.isAlpha} | ||
onClick={handleColorBarAlpha} | ||
onChange | ||
icon={<OpacityIcon fontSize="small" />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
icon={<OpacityIcon fontSize="small" />} | |
icon={<OpacityIcon fontSize="inherit" />} |
See original code.
onClick={handleColorBarReversed} | ||
onChange | ||
tooltipText={i18n.get("Reverse")} | ||
icon={<InvertColorsIcon fontSize="small" />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here.
Note, it is actually not ok to use toggle button here as it | ||
just opens a popup. However, we should use the toggle button | ||
to indicate that a fixed y-range is active. | ||
*/} | ||
<Tooltip title={i18n.get("Enter fixed y-range")}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not using tooltipText
property?
<ToolButton | ||
toggle | ||
value="point" | ||
icon={<ScatterPlotIcon fontSize="small" />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Font size was inherit
!
<ToolButton | ||
toggle | ||
value="line" | ||
icon={<ShowChartIcon fontSize="small" />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And so forth...
event: MouseEvent<HTMLButtonElement | HTMLElement>, | ||
value?: string, | ||
) => void; | ||
onChange?: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onChange?: boolean; | |
onChange?: boolean; |
You should only name properties on<Event>
if they are event handlers, not boolean flags. What is it for?
@@ -77,6 +84,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ | |||
disabled={disabled} | |||
size="small" | |||
onClick={handleClick} | |||
onChange={onChange ? handleClick : undefined} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
?
import InvertColorsIcon from "@mui/icons-material/InvertColors"; | ||
import OpacityIcon from "@mui/icons-material/Opacity"; | ||
|
||
import i18n from "@/i18n"; | ||
import { ColorBar, formatColorBarName } from "@/model/colorBar"; | ||
import { ColorBarNorm } from "@/model/variable"; | ||
import { SxProps, Theme } from "@mui/system"; | ||
import ToolButton from "../ToolButton"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don' use ../
.
No description provided.