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

653
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,114 +133,120 @@ 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} <ChevronLeft />
title={t("toolbar.scroll_left")} </ScrollArrow>
> </Tooltip>
<ChevronLeft />
</ScrollArrow>
)} )}
<ToolbarContainer ref={toolbarRef}> <ToolbarContainer ref={toolbarRef}>
{/* History/Edit Group */} {/* History/Edit Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.undo")}>
type="button" <StyledButton
$pressed={false} type="button"
onClick={properties.onUndo} $pressed={false}
disabled={!properties.canUndo} onClick={properties.onUndo}
title={t("toolbar.undo")} disabled={!properties.canUndo}
> >
<Undo2 /> <Undo2 />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.redo")}>
$pressed={false} <StyledButton
onClick={properties.onRedo} type="button"
disabled={!properties.canRedo} $pressed={false}
title={t("toolbar.redo")} onClick={properties.onRedo}
> disabled={!properties.canRedo}
<Redo2 /> >
</StyledButton> <Redo2 />
</StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Format Tools Group */} {/* Format Tools Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.copy_styles")}>
type="button" <StyledButton
$pressed={false} type="button"
onClick={properties.onCopyStyles} $pressed={false}
title={t("toolbar.copy_styles")} onClick={properties.onCopyStyles}
> >
<PaintRoller /> <PaintRoller />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.clear_formatting")}>
$pressed={false} <StyledButton
onClick={() => { type="button"
properties.onClearFormatting(); $pressed={false}
}} onClick={() => {
disabled={!canEdit} properties.onClearFormatting();
title={t("toolbar.clear_formatting")} }}
> disabled={!canEdit}
<RemoveFormatting /> >
</StyledButton> <RemoveFormatting />
</StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Number Format Group */} {/* Number Format Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.euro")}>
type="button" <StyledButton
$pressed={false} type="button"
onClick={(): void => { $pressed={false}
properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR); onClick={(): void => {
}} properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
disabled={!canEdit} }}
title={t("toolbar.euro")} disabled={!canEdit}
> >
<Euro /> <Euro />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.percentage")}>
$pressed={false} <StyledButton
onClick={(): void => { type="button"
properties.onNumberFormatPicked(NumberFormats.PERCENTAGE); $pressed={false}
}} onClick={(): void => {
disabled={!canEdit} properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
title={t("toolbar.percentage")} }}
> disabled={!canEdit}
<Percent /> >
</StyledButton> <Percent />
<StyledButton </StyledButton>
type="button" </Tooltip>
$pressed={false} <Tooltip title={t("toolbar.decimal_places_decrease")}>
onClick={(): void => { <StyledButton
properties.onNumberFormatPicked( type="button"
decreaseDecimalPlaces(properties.numFmt), $pressed={false}
); onClick={(): void => {
}} properties.onNumberFormatPicked(
disabled={!canEdit} decreaseDecimalPlaces(properties.numFmt),
title={t("toolbar.decimal_places_decrease")} );
> }}
<DecimalsArrowLeft /> disabled={!canEdit}
</StyledButton> >
<StyledButton <DecimalsArrowLeft />
type="button" </StyledButton>
$pressed={false} </Tooltip>
onClick={(): void => { <Tooltip title={t("toolbar.decimal_places_increase")}>
properties.onNumberFormatPicked( <StyledButton
increaseDecimalPlaces(properties.numFmt), type="button"
); $pressed={false}
}} onClick={(): void => {
disabled={!canEdit} properties.onNumberFormatPicked(
title={t("toolbar.decimal_places_increase")} increaseDecimalPlaces(properties.numFmt),
> );
<DecimalsArrowRight /> }}
</StyledButton> disabled={!canEdit}
>
<DecimalsArrowRight />
</StyledButton>
</Tooltip>
<FormatMenu <FormatMenu
numFmt={properties.numFmt} numFmt={properties.numFmt}
onChange={(numberFmt): void => { onChange={(numberFmt): void => {
@@ -251,19 +258,20 @@ function Toolbar(properties: ToolbarProperties) {
vertical: "bottom", vertical: "bottom",
}} }}
> >
<StyledButton <Tooltip title={t("toolbar.format_number")}>
type="button" <StyledButton
$pressed={false} type="button"
disabled={!canEdit} $pressed={false}
title={t("toolbar.format_number")} disabled={!canEdit}
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",
}} }}
> >
{"123"} {"123"}
<ChevronDown /> <ChevronDown />
</StyledButton> </StyledButton>
</Tooltip>
</FormatMenu> </FormatMenu>
</ButtonGroup> </ButtonGroup>
@@ -271,231 +279,254 @@ function Toolbar(properties: ToolbarProperties) {
{/* Font Size Group */} {/* Font Size Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.decrease_font_size")}>
type="button" <StyledButton
$pressed={false} type="button"
disabled={!canEdit} $pressed={false}
onClick={() => { disabled={!canEdit}
properties.onIncreaseFontSize(-1); onClick={() => {
}} properties.onIncreaseFontSize(-1);
title={t("toolbar.decrease_font_size")} }}
> >
<Minus /> <Minus />
</StyledButton> </StyledButton>
</Tooltip>
<FontSizeBox>{properties.fontSize}</FontSizeBox> <FontSizeBox>{properties.fontSize}</FontSizeBox>
<StyledButton <Tooltip title={t("toolbar.increase_font_size")}>
type="button" <StyledButton
$pressed={false} type="button"
disabled={!canEdit} $pressed={false}
onClick={() => { disabled={!canEdit}
properties.onIncreaseFontSize(1); onClick={() => {
}} 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>
<StyledButton <Tooltip title={t("toolbar.bold")}>
type="button" <StyledButton
$pressed={properties.bold} type="button"
onClick={() => properties.onToggleBold(!properties.bold)} $pressed={properties.bold}
disabled={!canEdit} onClick={() => properties.onToggleBold(!properties.bold)}
title={t("toolbar.bold")} disabled={!canEdit}
> >
<Bold /> <Bold />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.italic")}>
$pressed={properties.italic} <StyledButton
onClick={() => properties.onToggleItalic(!properties.italic)} type="button"
disabled={!canEdit} $pressed={properties.italic}
title={t("toolbar.italic")} onClick={() => properties.onToggleItalic(!properties.italic)}
> disabled={!canEdit}
<Italic /> >
</StyledButton> <Italic />
<StyledButton </StyledButton>
type="button" </Tooltip>
$pressed={properties.underline} <Tooltip title={t("toolbar.underline")}>
onClick={() => properties.onToggleUnderline(!properties.underline)} <StyledButton
disabled={!canEdit} type="button"
title={t("toolbar.underline")} $pressed={properties.underline}
> onClick={() =>
<Underline /> properties.onToggleUnderline(!properties.underline)
</StyledButton> }
<StyledButton disabled={!canEdit}
type="button" >
$pressed={properties.strike} <Underline />
onClick={() => properties.onToggleStrike(!properties.strike)} </StyledButton>
disabled={!canEdit} </Tooltip>
title={t("toolbar.strike_through")} <Tooltip title={t("toolbar.strike_through")}>
> <StyledButton
<Strikethrough /> type="button"
</StyledButton> $pressed={properties.strike}
onClick={() => properties.onToggleStrike(!properties.strike)}
disabled={!canEdit}
>
<Strikethrough />
</StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Color & Border Group */} {/* Color & Border Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.font_color")}>
type="button" <StyledButton
$pressed={false} type="button"
disabled={!canEdit} $pressed={false}
title={t("toolbar.font_color")} disabled={!canEdit}
ref={fontColorButton} ref={fontColorButton}
onClick={() => setFontColorPickerOpen(true)} onClick={() => setFontColorPickerOpen(true)}
> >
<Type /> <Type />
<ColorLine color={properties.fontColor} /> <ColorLine color={properties.fontColor} />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.fill_color")}>
$pressed={false} <StyledButton
disabled={!canEdit} type="button"
title={t("toolbar.fill_color")} $pressed={false}
ref={fillColorButton} disabled={!canEdit}
onClick={() => setFillColorPickerOpen(true)} ref={fillColorButton}
> onClick={() => setFillColorPickerOpen(true)}
<PaintBucket /> >
<ColorLine color={properties.fillColor} /> <PaintBucket />
</StyledButton> <ColorLine color={properties.fillColor} />
<StyledButton </StyledButton>
type="button" </Tooltip>
$pressed={false} <Tooltip title={t("toolbar.borders.title")}>
onClick={() => setBorderPickerOpen(true)} <StyledButton
ref={borderButton} type="button"
disabled={!canEdit} $pressed={false}
title={t("toolbar.borders.title")} onClick={() => setBorderPickerOpen(true)}
> ref={borderButton}
<Grid2X2 /> disabled={!canEdit}
</StyledButton> >
<Grid2X2 />
</StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* Alignment Group */} {/* Alignment Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.align_left")}>
type="button" <StyledButton
$pressed={properties.horizontalAlign === "left"} type="button"
onClick={() => $pressed={properties.horizontalAlign === "left"}
properties.onToggleHorizontalAlign( onClick={() =>
properties.horizontalAlign === "left" ? "general" : "left", properties.onToggleHorizontalAlign(
) properties.horizontalAlign === "left" ? "general" : "left",
} )
disabled={!canEdit} }
title={t("toolbar.align_left")} disabled={!canEdit}
> >
<AlignLeft /> <AlignLeft />
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.align_center")}>
$pressed={properties.horizontalAlign === "center"} <StyledButton
onClick={() => type="button"
properties.onToggleHorizontalAlign( $pressed={properties.horizontalAlign === "center"}
properties.horizontalAlign === "center" ? "general" : "center", onClick={() =>
) properties.onToggleHorizontalAlign(
} properties.horizontalAlign === "center"
disabled={!canEdit} ? "general"
title={t("toolbar.align_center")} : "center",
> )
<AlignCenter /> }
</StyledButton> disabled={!canEdit}
<StyledButton >
type="button" <AlignCenter />
$pressed={properties.horizontalAlign === "right"} </StyledButton>
onClick={() => </Tooltip>
properties.onToggleHorizontalAlign( <Tooltip title={t("toolbar.align_right")}>
properties.horizontalAlign === "right" ? "general" : "right", <StyledButton
) type="button"
} $pressed={properties.horizontalAlign === "right"}
disabled={!canEdit} onClick={() =>
title={t("toolbar.align_right")} properties.onToggleHorizontalAlign(
> properties.horizontalAlign === "right" ? "general" : "right",
<AlignRight /> )
</StyledButton> }
<StyledButton disabled={!canEdit}
type="button" >
$pressed={properties.verticalAlign === "top"} <AlignRight />
onClick={() => properties.onToggleVerticalAlign("top")} </StyledButton>
disabled={!canEdit} </Tooltip>
title={t("toolbar.vertical_align_top")} <Tooltip title={t("toolbar.vertical_align_top")}>
> <StyledButton
<ArrowUpToLine /> type="button"
</StyledButton> $pressed={properties.verticalAlign === "top"}
<StyledButton onClick={() => properties.onToggleVerticalAlign("top")}
type="button" disabled={!canEdit}
$pressed={properties.verticalAlign === "center"} >
onClick={() => properties.onToggleVerticalAlign("center")} <ArrowUpToLine />
disabled={!canEdit} </StyledButton>
title={t("toolbar.vertical_align_middle")} </Tooltip>
> <Tooltip title={t("toolbar.vertical_align_middle")}>
<ArrowMiddleFromLine /> <StyledButton
</StyledButton> type="button"
<StyledButton $pressed={properties.verticalAlign === "center"}
type="button" onClick={() => properties.onToggleVerticalAlign("center")}
$pressed={properties.verticalAlign === "bottom"} disabled={!canEdit}
onClick={() => properties.onToggleVerticalAlign("bottom")} >
disabled={!canEdit} <ArrowMiddleFromLine />
title={t("toolbar.vertical_align_bottom")} </StyledButton>
> </Tooltip>
<ArrowDownToLine /> <Tooltip title={t("toolbar.vertical_align_bottom")}>
</StyledButton> <StyledButton
<StyledButton type="button"
type="button" $pressed={properties.verticalAlign === "bottom"}
$pressed={properties.wrapText === true} onClick={() => properties.onToggleVerticalAlign("bottom")}
onClick={() => { disabled={!canEdit}
properties.onToggleWrapText(!properties.wrapText); >
}} <ArrowDownToLine />
disabled={!canEdit} </StyledButton>
title={t("toolbar.wrap_text")} </Tooltip>
> <Tooltip title={t("toolbar.wrap_text")}>
<WrapText /> <StyledButton
</StyledButton> type="button"
$pressed={properties.wrapText === true}
onClick={() => {
properties.onToggleWrapText(!properties.wrapText);
}}
disabled={!canEdit}
>
<WrapText />
</StyledButton>
</Tooltip>
</ButtonGroup> </ButtonGroup>
<Divider /> <Divider />
{/* View & Tools Group */} {/* View & Tools Group */}
<ButtonGroup> <ButtonGroup>
<StyledButton <Tooltip title={t("toolbar.show_hide_grid_lines")}>
type="button" <StyledButton
$pressed={false} type="button"
onClick={() => $pressed={false}
properties.onToggleShowGridLines(!properties.showGridLines) onClick={() =>
} properties.onToggleShowGridLines(!properties.showGridLines)
disabled={!canEdit} }
title={t("toolbar.show_hide_grid_lines")} disabled={!canEdit}
> >
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />} {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
</StyledButton> </StyledButton>
<StyledButton </Tooltip>
type="button" <Tooltip title={t("toolbar.name_manager")}>
$pressed={false} <StyledButton
onClick={() => { type="button"
setNameManagerDialogOpen(true); $pressed={false}
}} onClick={() => {
disabled={!canEdit} setNameManagerDialogOpen(true);
title={t("toolbar.name_manager")} }}
> disabled={!canEdit}
<Tags /> >
</StyledButton> <Tags />
<StyledButton </StyledButton>
type="button" </Tooltip>
$pressed={false} <Tooltip title={t("toolbar.selected_png")}>
onClick={() => { <StyledButton
properties.onDownloadPNG(); type="button"
}} $pressed={false}
disabled={!canEdit} onClick={() => {
title={t("toolbar.selected_png")} properties.onDownloadPNG();
> }}
<ImageDown /> disabled={!canEdit}
</StyledButton> >
<ImageDown />
</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} <ChevronRight />
title={t("toolbar.scroll_right")} </ScrollArrow>
> </Tooltip>
<ChevronRight />
</ScrollArrow>
)} )}
</ToolbarWrapper> </ToolbarWrapper>
); );