sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add nicer tooltips

Browse Source
This commit is contained in:
Daniel Gonzalez Albo
2025-10-06 23:47:50 +02:00
committed by Nicolás Hatcher Andrés
parent 6c27ae1355
commit c2c5751ee3
1 changed files with 341 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
View File

@@ -4,6 +4,7 @@ import type {
HorizontalAlignment, HorizontalAlignment,
VerticalAlignment, VerticalAlignment,
} from "@ironcalc/wasm"; } from "@ironcalc/wasm";
import Tooltip from "@mui/material/Tooltip";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import type {} from "@mui/system"; import type {} from "@mui/system";
import { import {
@@ -132,49 +133,51 @@ function Toolbar(properties: ToolbarProperties) {
return ( return (
<ToolbarWrapper> <ToolbarWrapper>
{showLeftArrow && ( {showLeftArrow && (
<ScrollArrow <Tooltip title={t("toolbar.scroll_left")}>
$direction="left" <ScrollArrow $direction="left" onClick={scrollLeft}>
onClick={scrollLeft}
title={t("toolbar.scroll_left")}
>
<ChevronLeft /> <ChevronLeft />
</ScrollArrow> </ScrollArrow>
</Tooltip>
)} )}
<ToolbarContainer ref={toolbarRef}> <ToolbarContainer ref={toolbarRef}>
{/* History/Edit Group */} {/* History/Edit Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.undo")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
onClick={properties.onUndo} onClick={properties.onUndo}
disabled={!properties.canUndo} disabled={!properties.canUndo}
title={t("toolbar.undo")}
> >
<Undo2 /> <Undo2 />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.redo")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
onClick={properties.onRedo} onClick={properties.onRedo}
disabled={!properties.canRedo} disabled={!properties.canRedo}
title={t("toolbar.redo")}
> >
<Redo2 /> <Redo2 />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Format Tools Group */} {/* Format Tools Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.copy_styles")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
onClick={properties.onCopyStyles} onClick={properties.onCopyStyles}
title={t("toolbar.copy_styles")}
> >
<PaintRoller /> <PaintRoller />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.clear_formatting")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -182,16 +185,17 @@ function Toolbar(properties: ToolbarProperties) {
properties.onClearFormatting(); properties.onClearFormatting();
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.clear_formatting")}
> >
<RemoveFormatting /> <RemoveFormatting />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Number Format Group */} {/* Number Format Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.euro")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -199,10 +203,11 @@ function Toolbar(properties: ToolbarProperties) {
properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR); properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.euro")}
> >
<Euro /> <Euro />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.percentage")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -210,10 +215,11 @@ function Toolbar(properties: ToolbarProperties) {
properties.onNumberFormatPicked(NumberFormats.PERCENTAGE); properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.percentage")}
> >
<Percent /> <Percent />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.decimal_places_decrease")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -223,10 +229,11 @@ function Toolbar(properties: ToolbarProperties) {
); );
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.decimal_places_decrease")}
> >
<DecimalsArrowLeft /> <DecimalsArrowLeft />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.decimal_places_increase")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -236,10 +243,10 @@ function Toolbar(properties: ToolbarProperties) {
); );
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.decimal_places_increase")}
> >
<DecimalsArrowRight /> <DecimalsArrowRight />
</StyledButton> </StyledButton>
</Tooltip>
<FormatMenu <FormatMenu
numFmt={properties.numFmt} numFmt={properties.numFmt}
onChange={(numberFmt): void => { onChange={(numberFmt): void => {
@@ -251,11 +258,11 @@ function Toolbar(properties: ToolbarProperties) {
vertical: "bottom", vertical: "bottom",
}} }}
> >
<Tooltip title={t("toolbar.format_number")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.format_number")}
sx={{ sx={{
width: "40px", // Keep in sync with anchorOrigin in FormatMenu above width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
padding: "0px 4px", padding: "0px 4px",
@@ -264,6 +271,7 @@ function Toolbar(properties: ToolbarProperties) {
{"123"} {"123"}
<ChevronDown /> <ChevronDown />
</StyledButton> </StyledButton>
</Tooltip>
</FormatMenu> </FormatMenu>
</ButtonGroup> </ButtonGroup>
@@ -271,6 +279,7 @@ function Toolbar(properties: ToolbarProperties) {
{/* Font Size Group */} {/* Font Size Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.decrease_font_size")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -278,11 +287,12 @@ function Toolbar(properties: ToolbarProperties) {
onClick={() => { onClick={() => {
properties.onIncreaseFontSize(-1); properties.onIncreaseFontSize(-1);
}} }}
title={t("toolbar.decrease_font_size")}
> >
<Minus /> <Minus />
</StyledButton> </StyledButton>
</Tooltip>
<FontSizeBox>{properties.fontSize}</FontSizeBox> <FontSizeBox>{properties.fontSize}</FontSizeBox>
<Tooltip title={t("toolbar.increase_font_size")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -290,96 +300,106 @@ function Toolbar(properties: ToolbarProperties) {
onClick={() => { onClick={() => {
properties.onIncreaseFontSize(1); properties.onIncreaseFontSize(1);
}} }}
title={t("toolbar.increase_font_size")}
> >
<Plus /> <Plus />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Text Style Group */} {/* Text Style Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.bold")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.bold} $pressed={properties.bold}
onClick={() => properties.onToggleBold(!properties.bold)} onClick={() => properties.onToggleBold(!properties.bold)}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.bold")}
> >
<Bold /> <Bold />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.italic")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.italic} $pressed={properties.italic}
onClick={() => properties.onToggleItalic(!properties.italic)} onClick={() => properties.onToggleItalic(!properties.italic)}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.italic")}
> >
<Italic /> <Italic />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.underline")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.underline} $pressed={properties.underline}
onClick={() => properties.onToggleUnderline(!properties.underline)} onClick={() =>
properties.onToggleUnderline(!properties.underline)
}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.underline")}
> >
<Underline /> <Underline />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.strike_through")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.strike} $pressed={properties.strike}
onClick={() => properties.onToggleStrike(!properties.strike)} onClick={() => properties.onToggleStrike(!properties.strike)}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.strike_through")}
> >
<Strikethrough /> <Strikethrough />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Color & Border Group */} {/* Color & Border Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.font_color")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.font_color")}
ref={fontColorButton} ref={fontColorButton}
onClick={() => setFontColorPickerOpen(true)} onClick={() => setFontColorPickerOpen(true)}
> >
<Type /> <Type />
<ColorLine color={properties.fontColor} /> <ColorLine color={properties.fontColor} />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.fill_color")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.fill_color")}
ref={fillColorButton} ref={fillColorButton}
onClick={() => setFillColorPickerOpen(true)} onClick={() => setFillColorPickerOpen(true)}
> >
<PaintBucket /> <PaintBucket />
<ColorLine color={properties.fillColor} /> <ColorLine color={properties.fillColor} />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.borders.title")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
onClick={() => setBorderPickerOpen(true)} onClick={() => setBorderPickerOpen(true)}
ref={borderButton} ref={borderButton}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.borders.title")}
> >
<Grid2X2 /> <Grid2X2 />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Alignment Group */} {/* Alignment Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.align_left")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.horizontalAlign === "left"} $pressed={properties.horizontalAlign === "left"}
@@ -389,23 +409,27 @@ function Toolbar(properties: ToolbarProperties) {
) )
} }
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.align_left")}
> >
<AlignLeft /> <AlignLeft />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.align_center")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.horizontalAlign === "center"} $pressed={properties.horizontalAlign === "center"}
onClick={() => onClick={() =>
properties.onToggleHorizontalAlign( properties.onToggleHorizontalAlign(
properties.horizontalAlign === "center" ? "general" : "center", properties.horizontalAlign === "center"
? "general"
: "center",
) )
} }
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.align_center")}
> >
<AlignCenter /> <AlignCenter />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.align_right")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.horizontalAlign === "right"} $pressed={properties.horizontalAlign === "right"}
@@ -415,37 +439,41 @@ function Toolbar(properties: ToolbarProperties) {
) )
} }
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.align_right")}
> >
<AlignRight /> <AlignRight />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.vertical_align_top")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.verticalAlign === "top"} $pressed={properties.verticalAlign === "top"}
onClick={() => properties.onToggleVerticalAlign("top")} onClick={() => properties.onToggleVerticalAlign("top")}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.vertical_align_top")}
> >
<ArrowUpToLine /> <ArrowUpToLine />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.vertical_align_middle")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.verticalAlign === "center"} $pressed={properties.verticalAlign === "center"}
onClick={() => properties.onToggleVerticalAlign("center")} onClick={() => properties.onToggleVerticalAlign("center")}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.vertical_align_middle")}
> >
<ArrowMiddleFromLine /> <ArrowMiddleFromLine />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.vertical_align_bottom")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.verticalAlign === "bottom"} $pressed={properties.verticalAlign === "bottom"}
onClick={() => properties.onToggleVerticalAlign("bottom")} onClick={() => properties.onToggleVerticalAlign("bottom")}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.vertical_align_bottom")}
> >
<ArrowDownToLine /> <ArrowDownToLine />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.wrap_text")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={properties.wrapText === true} $pressed={properties.wrapText === true}
@@ -453,16 +481,17 @@ function Toolbar(properties: ToolbarProperties) {
properties.onToggleWrapText(!properties.wrapText); properties.onToggleWrapText(!properties.wrapText);
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.wrap_text")}
> >
<WrapText /> <WrapText />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* View & Tools Group */} {/* View & Tools Group */}
<ButtonGroup> <ButtonGroup>
<Tooltip title={t("toolbar.show_hide_grid_lines")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -470,10 +499,11 @@ function Toolbar(properties: ToolbarProperties) {
properties.onToggleShowGridLines(!properties.showGridLines) properties.onToggleShowGridLines(!properties.showGridLines)
} }
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.show_hide_grid_lines")}
> >
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />} {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.name_manager")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -481,10 +511,11 @@ function Toolbar(properties: ToolbarProperties) {
setNameManagerDialogOpen(true); setNameManagerDialogOpen(true);
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.name_manager")}
> >
<Tags /> <Tags />
</StyledButton> </StyledButton>
</Tooltip>
<Tooltip title={t("toolbar.selected_png")}>
<StyledButton <StyledButton
type="button" type="button"
$pressed={false} $pressed={false}
@@ -492,10 +523,10 @@ function Toolbar(properties: ToolbarProperties) {
properties.onDownloadPNG(); properties.onDownloadPNG();
}} }}
disabled={!canEdit} disabled={!canEdit}
title={t("toolbar.selected_png")}
> >
<ImageDown /> <ImageDown />
</StyledButton> </StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<ColorPicker <ColorPicker
@@ -551,13 +582,11 @@ function Toolbar(properties: ToolbarProperties) {
/> />
</ToolbarContainer> </ToolbarContainer>
{showRightArrow && ( {showRightArrow && (
<ScrollArrow <Tooltip title={t("toolbar.scroll_right")}>
$direction="right" <ScrollArrow $direction="right" onClick={scrollRight}>
onClick={scrollRight}
title={t("toolbar.scroll_right")}
>
<ChevronRight /> <ChevronRight />
</ScrollArrow> </ScrollArrow>
</Tooltip>
)} )}
</ToolbarWrapper> </ToolbarWrapper>
); );