Skip to content
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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

ruchimotwaniBC
Copy link
Contributor

No description provided.

@ruchimotwaniBC ruchimotwaniBC requested a review from forman June 25, 2024 14:46
@ruchimotwaniBC ruchimotwaniBC changed the title Usage of Toolbutton component in togglebuttongroup Usage of Toolbutton component instead of Toggle Button Jun 26, 2024
Copy link
Member

@forman forman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tool buttons have now different sizes and styles compared to before.

Larger sizes than in time-series:

image

Different size in same row and icon image size increase compared to before:

image

selected={variableColorBar.isAlpha}
onClick={handleColorBarAlpha}
onChange
icon={<OpacityIcon fontSize="small" />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
icon={<OpacityIcon fontSize="small" />}
icon={<OpacityIcon fontSize="inherit" />}

See original code.

onClick={handleColorBarReversed}
onChange
tooltipText={i18n.get("Reverse")}
icon={<InvertColorsIcon fontSize="small" />}
Copy link
Member

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")}>
Copy link
Member

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" />}
Copy link
Member

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" />}
Copy link
Member

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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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}
Copy link
Member

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";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don' use ../.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants