adjust spacing and group button groups
This commit is contained in:
Daniel Gonzalez Albo
committed by
Nicolás Hatcher Andrés
Nicolás Hatcher Andrés
parent
8844b80c51
commit
3f083d9882
@@ -105,328 +105,362 @@ function Toolbar(properties: ToolbarProperties) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ToolbarContainer>
|
<ToolbarContainer>
|
||||||
<StyledButton
|
{/* History/Edit Group */}
|
||||||
type="button"
|
<ButtonGroup>
|
||||||
$pressed={false}
|
<StyledButton
|
||||||
onClick={properties.onUndo}
|
type="button"
|
||||||
disabled={!properties.canUndo}
|
$pressed={false}
|
||||||
title={t("toolbar.undo")}
|
onClick={properties.onUndo}
|
||||||
>
|
disabled={!properties.canUndo}
|
||||||
<Undo2 />
|
title={t("toolbar.undo")}
|
||||||
</StyledButton>
|
>
|
||||||
<StyledButton
|
<Undo2 />
|
||||||
type="button"
|
</StyledButton>
|
||||||
$pressed={false}
|
<StyledButton
|
||||||
onClick={properties.onRedo}
|
type="button"
|
||||||
disabled={!properties.canRedo}
|
$pressed={false}
|
||||||
title={t("toolbar.redo")}
|
onClick={properties.onRedo}
|
||||||
>
|
disabled={!properties.canRedo}
|
||||||
<Redo2 />
|
title={t("toolbar.redo")}
|
||||||
</StyledButton>
|
>
|
||||||
|
<Redo2 />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
<StyledButton
|
|
||||||
type="button"
|
{/* Format Tools Group */}
|
||||||
$pressed={false}
|
<ButtonGroup>
|
||||||
onClick={properties.onCopyStyles}
|
<StyledButton
|
||||||
title={t("toolbar.copy_styles")}
|
type="button"
|
||||||
>
|
$pressed={false}
|
||||||
<PaintRoller />
|
onClick={properties.onCopyStyles}
|
||||||
</StyledButton>
|
title={t("toolbar.copy_styles")}
|
||||||
|
>
|
||||||
|
<PaintRoller />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
onClick={() => {
|
||||||
|
properties.onClearFormatting();
|
||||||
|
}}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.clear_formatting")}
|
||||||
|
>
|
||||||
|
<RemoveFormatting />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
<StyledButton
|
|
||||||
type="button"
|
{/* Number Format Group */}
|
||||||
$pressed={false}
|
<ButtonGroup>
|
||||||
onClick={(): void => {
|
<StyledButton
|
||||||
properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
|
type="button"
|
||||||
}}
|
$pressed={false}
|
||||||
disabled={!canEdit}
|
onClick={(): void => {
|
||||||
title={t("toolbar.euro")}
|
properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
|
||||||
>
|
}}
|
||||||
<Euro />
|
disabled={!canEdit}
|
||||||
</StyledButton>
|
title={t("toolbar.euro")}
|
||||||
<StyledButton
|
>
|
||||||
type="button"
|
<Euro />
|
||||||
$pressed={false}
|
</StyledButton>
|
||||||
onClick={(): void => {
|
<StyledButton
|
||||||
properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
|
type="button"
|
||||||
}}
|
$pressed={false}
|
||||||
disabled={!canEdit}
|
onClick={(): void => {
|
||||||
title={t("toolbar.percentage")}
|
properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
|
||||||
>
|
}}
|
||||||
<Percent />
|
disabled={!canEdit}
|
||||||
</StyledButton>
|
title={t("toolbar.percentage")}
|
||||||
<StyledButton
|
>
|
||||||
type="button"
|
<Percent />
|
||||||
$pressed={false}
|
</StyledButton>
|
||||||
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>
|
title={t("toolbar.decimal_places_decrease")}
|
||||||
<StyledButton
|
>
|
||||||
type="button"
|
<DecimalsArrowLeft />
|
||||||
$pressed={false}
|
</StyledButton>
|
||||||
onClick={(): void => {
|
<StyledButton
|
||||||
properties.onNumberFormatPicked(
|
type="button"
|
||||||
increaseDecimalPlaces(properties.numFmt),
|
$pressed={false}
|
||||||
);
|
onClick={(): void => {
|
||||||
}}
|
properties.onNumberFormatPicked(
|
||||||
disabled={!canEdit}
|
increaseDecimalPlaces(properties.numFmt),
|
||||||
title={t("toolbar.decimal_places_increase")}
|
);
|
||||||
>
|
}}
|
||||||
<DecimalsArrowRight />
|
disabled={!canEdit}
|
||||||
</StyledButton>
|
title={t("toolbar.decimal_places_increase")}
|
||||||
<FormatMenu
|
>
|
||||||
numFmt={properties.numFmt}
|
<DecimalsArrowRight />
|
||||||
onChange={(numberFmt): void => {
|
</StyledButton>
|
||||||
properties.onNumberFormatPicked(numberFmt);
|
<FormatMenu
|
||||||
}}
|
numFmt={properties.numFmt}
|
||||||
onExited={(): void => {}}
|
onChange={(numberFmt): void => {
|
||||||
anchorOrigin={{
|
properties.onNumberFormatPicked(numberFmt);
|
||||||
horizontal: 20, // Aligning the menu to the middle of FormatButton
|
}}
|
||||||
vertical: "bottom",
|
onExited={(): void => {}}
|
||||||
}}
|
anchorOrigin={{
|
||||||
>
|
horizontal: 20, // Aligning the menu to the middle of FormatButton
|
||||||
|
vertical: "bottom",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.format_number")}
|
||||||
|
sx={{
|
||||||
|
width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
|
||||||
|
padding: "0px 4px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{"123"}
|
||||||
|
<ChevronDown />
|
||||||
|
</StyledButton>
|
||||||
|
</FormatMenu>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
{/* Font Size Group */}
|
||||||
|
<ButtonGroup>
|
||||||
<StyledButton
|
<StyledButton
|
||||||
type="button"
|
type="button"
|
||||||
$pressed={false}
|
$pressed={false}
|
||||||
disabled={!canEdit}
|
disabled={!canEdit}
|
||||||
title={t("toolbar.format_number")}
|
onClick={() => {
|
||||||
sx={{
|
properties.onIncreaseFontSize(-1);
|
||||||
width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
|
|
||||||
padding: "0px 4px",
|
|
||||||
}}
|
}}
|
||||||
|
title={t("toolbar.decrease_font_size")}
|
||||||
>
|
>
|
||||||
{"123"}
|
<Minus />
|
||||||
<ChevronDown />
|
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
</FormatMenu>
|
<FontSizeBox>{properties.fontSize}</FontSizeBox>
|
||||||
<Divider />
|
<StyledButton
|
||||||
<StyledButton
|
type="button"
|
||||||
type="button"
|
$pressed={false}
|
||||||
$pressed={false}
|
disabled={!canEdit}
|
||||||
disabled={!canEdit}
|
onClick={() => {
|
||||||
onClick={() => {
|
properties.onIncreaseFontSize(1);
|
||||||
properties.onIncreaseFontSize(-1);
|
}}
|
||||||
}}
|
title={t("toolbar.increase_font_size")}
|
||||||
title={t("toolbar.decrease_font_size")}
|
>
|
||||||
>
|
<Plus />
|
||||||
<Minus />
|
</StyledButton>
|
||||||
</StyledButton>
|
</ButtonGroup>
|
||||||
<FontSizeBox>{properties.fontSize}</FontSizeBox>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={false}
|
|
||||||
disabled={!canEdit}
|
|
||||||
onClick={() => {
|
|
||||||
properties.onIncreaseFontSize(1);
|
|
||||||
}}
|
|
||||||
title={t("toolbar.increase_font_size")}
|
|
||||||
>
|
|
||||||
<Plus />
|
|
||||||
</StyledButton>
|
|
||||||
<Divider />
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.bold}
|
|
||||||
onClick={() => properties.onToggleBold(!properties.bold)}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.bold")}
|
|
||||||
>
|
|
||||||
<Bold />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.italic}
|
|
||||||
onClick={() => properties.onToggleItalic(!properties.italic)}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.italic")}
|
|
||||||
>
|
|
||||||
<Italic />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.underline}
|
|
||||||
onClick={() => properties.onToggleUnderline(!properties.underline)}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.underline")}
|
|
||||||
>
|
|
||||||
<Underline />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.strike}
|
|
||||||
onClick={() => properties.onToggleStrike(!properties.strike)}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.strike_through")}
|
|
||||||
>
|
|
||||||
<Strikethrough />
|
|
||||||
</StyledButton>
|
|
||||||
<Divider />
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={false}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.font_color")}
|
|
||||||
ref={fontColorButton}
|
|
||||||
onClick={() => setFontColorPickerOpen(true)}
|
|
||||||
>
|
|
||||||
<Type />
|
|
||||||
<ColorLine color={properties.fontColor} />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={false}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.fill_color")}
|
|
||||||
ref={fillColorButton}
|
|
||||||
onClick={() => setFillColorPickerOpen(true)}
|
|
||||||
>
|
|
||||||
<PaintBucket />
|
|
||||||
<ColorLine color={properties.fillColor} />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={false}
|
|
||||||
onClick={() => setBorderPickerOpen(true)}
|
|
||||||
ref={borderButton}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.borders.title")}
|
|
||||||
>
|
|
||||||
<Grid2X2 />
|
|
||||||
</StyledButton>
|
|
||||||
<Divider />
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.horizontalAlign === "left"}
|
|
||||||
onClick={() =>
|
|
||||||
properties.onToggleHorizontalAlign(
|
|
||||||
properties.horizontalAlign === "left" ? "general" : "left",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.align_left")}
|
|
||||||
>
|
|
||||||
<AlignLeft />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.horizontalAlign === "center"}
|
|
||||||
onClick={() =>
|
|
||||||
properties.onToggleHorizontalAlign(
|
|
||||||
properties.horizontalAlign === "center" ? "general" : "center",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.align_center")}
|
|
||||||
>
|
|
||||||
<AlignCenter />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.horizontalAlign === "right"}
|
|
||||||
onClick={() =>
|
|
||||||
properties.onToggleHorizontalAlign(
|
|
||||||
properties.horizontalAlign === "right" ? "general" : "right",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.align_right")}
|
|
||||||
>
|
|
||||||
<AlignRight />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.verticalAlign === "top"}
|
|
||||||
onClick={() => properties.onToggleVerticalAlign("top")}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.vertical_align_top")}
|
|
||||||
>
|
|
||||||
<ArrowUpToLine />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.verticalAlign === "center"}
|
|
||||||
onClick={() => properties.onToggleVerticalAlign("center")}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.vertical_align_middle")}
|
|
||||||
>
|
|
||||||
<ArrowMiddleFromLine />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.verticalAlign === "bottom"}
|
|
||||||
onClick={() => properties.onToggleVerticalAlign("bottom")}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.vertical_align_bottom")}
|
|
||||||
>
|
|
||||||
<ArrowDownToLine />
|
|
||||||
</StyledButton>
|
|
||||||
<StyledButton
|
|
||||||
type="button"
|
|
||||||
$pressed={properties.wrapText === true}
|
|
||||||
onClick={() => {
|
|
||||||
properties.onToggleWrapText(!properties.wrapText);
|
|
||||||
}}
|
|
||||||
disabled={!canEdit}
|
|
||||||
title={t("toolbar.wrap_text")}
|
|
||||||
>
|
|
||||||
<WrapText />
|
|
||||||
</StyledButton>
|
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
<StyledButton
|
|
||||||
type="button"
|
{/* Text Style Group */}
|
||||||
$pressed={false}
|
<ButtonGroup>
|
||||||
onClick={() =>
|
<StyledButton
|
||||||
properties.onToggleShowGridLines(!properties.showGridLines)
|
type="button"
|
||||||
}
|
$pressed={properties.bold}
|
||||||
disabled={!canEdit}
|
onClick={() => properties.onToggleBold(!properties.bold)}
|
||||||
title={t("toolbar.show_hide_grid_lines")}
|
disabled={!canEdit}
|
||||||
>
|
title={t("toolbar.bold")}
|
||||||
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
|
>
|
||||||
</StyledButton>
|
<Bold />
|
||||||
<Divider />
|
</StyledButton>
|
||||||
<StyledButton
|
<StyledButton
|
||||||
type="button"
|
type="button"
|
||||||
$pressed={false}
|
$pressed={properties.italic}
|
||||||
onClick={() => {
|
onClick={() => properties.onToggleItalic(!properties.italic)}
|
||||||
setNameManagerDialogOpen(true);
|
disabled={!canEdit}
|
||||||
}}
|
title={t("toolbar.italic")}
|
||||||
disabled={!canEdit}
|
>
|
||||||
title={t("toolbar.name_manager")}
|
<Italic />
|
||||||
>
|
</StyledButton>
|
||||||
<Tags />
|
<StyledButton
|
||||||
</StyledButton>
|
type="button"
|
||||||
|
$pressed={properties.underline}
|
||||||
|
onClick={() => properties.onToggleUnderline(!properties.underline)}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.underline")}
|
||||||
|
>
|
||||||
|
<Underline />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.strike}
|
||||||
|
onClick={() => properties.onToggleStrike(!properties.strike)}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.strike_through")}
|
||||||
|
>
|
||||||
|
<Strikethrough />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
<StyledButton
|
|
||||||
type="button"
|
{/* Color & Border Group */}
|
||||||
$pressed={false}
|
<ButtonGroup>
|
||||||
onClick={() => {
|
<StyledButton
|
||||||
properties.onClearFormatting();
|
type="button"
|
||||||
}}
|
$pressed={false}
|
||||||
disabled={!canEdit}
|
disabled={!canEdit}
|
||||||
title={t("toolbar.clear_formatting")}
|
title={t("toolbar.font_color")}
|
||||||
>
|
ref={fontColorButton}
|
||||||
<RemoveFormatting />
|
onClick={() => setFontColorPickerOpen(true)}
|
||||||
</StyledButton>
|
>
|
||||||
<StyledButton
|
<Type />
|
||||||
type="button"
|
<ColorLine color={properties.fontColor} />
|
||||||
$pressed={false}
|
</StyledButton>
|
||||||
onClick={() => {
|
<StyledButton
|
||||||
properties.onDownloadPNG();
|
type="button"
|
||||||
}}
|
$pressed={false}
|
||||||
disabled={!canEdit}
|
disabled={!canEdit}
|
||||||
title={t("toolbar.selected_png")}
|
title={t("toolbar.fill_color")}
|
||||||
>
|
ref={fillColorButton}
|
||||||
<ImageDown />
|
onClick={() => setFillColorPickerOpen(true)}
|
||||||
</StyledButton>
|
>
|
||||||
|
<PaintBucket />
|
||||||
|
<ColorLine color={properties.fillColor} />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
onClick={() => setBorderPickerOpen(true)}
|
||||||
|
ref={borderButton}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.borders.title")}
|
||||||
|
>
|
||||||
|
<Grid2X2 />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
{/* Alignment Group */}
|
||||||
|
<ButtonGroup>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.horizontalAlign === "left"}
|
||||||
|
onClick={() =>
|
||||||
|
properties.onToggleHorizontalAlign(
|
||||||
|
properties.horizontalAlign === "left" ? "general" : "left",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.align_left")}
|
||||||
|
>
|
||||||
|
<AlignLeft />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.horizontalAlign === "center"}
|
||||||
|
onClick={() =>
|
||||||
|
properties.onToggleHorizontalAlign(
|
||||||
|
properties.horizontalAlign === "center" ? "general" : "center",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.align_center")}
|
||||||
|
>
|
||||||
|
<AlignCenter />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.horizontalAlign === "right"}
|
||||||
|
onClick={() =>
|
||||||
|
properties.onToggleHorizontalAlign(
|
||||||
|
properties.horizontalAlign === "right" ? "general" : "right",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.align_right")}
|
||||||
|
>
|
||||||
|
<AlignRight />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.verticalAlign === "top"}
|
||||||
|
onClick={() => properties.onToggleVerticalAlign("top")}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.vertical_align_top")}
|
||||||
|
>
|
||||||
|
<ArrowUpToLine />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.verticalAlign === "center"}
|
||||||
|
onClick={() => properties.onToggleVerticalAlign("center")}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.vertical_align_middle")}
|
||||||
|
>
|
||||||
|
<ArrowMiddleFromLine />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.verticalAlign === "bottom"}
|
||||||
|
onClick={() => properties.onToggleVerticalAlign("bottom")}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.vertical_align_bottom")}
|
||||||
|
>
|
||||||
|
<ArrowDownToLine />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={properties.wrapText === true}
|
||||||
|
onClick={() => {
|
||||||
|
properties.onToggleWrapText(!properties.wrapText);
|
||||||
|
}}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.wrap_text")}
|
||||||
|
>
|
||||||
|
<WrapText />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
{/* View & Tools Group */}
|
||||||
|
<ButtonGroup>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
onClick={() =>
|
||||||
|
properties.onToggleShowGridLines(!properties.showGridLines)
|
||||||
|
}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.show_hide_grid_lines")}
|
||||||
|
>
|
||||||
|
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
onClick={() => {
|
||||||
|
setNameManagerDialogOpen(true);
|
||||||
|
}}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.name_manager")}
|
||||||
|
>
|
||||||
|
<Tags />
|
||||||
|
</StyledButton>
|
||||||
|
<StyledButton
|
||||||
|
type="button"
|
||||||
|
$pressed={false}
|
||||||
|
onClick={() => {
|
||||||
|
properties.onDownloadPNG();
|
||||||
|
}}
|
||||||
|
disabled={!canEdit}
|
||||||
|
title={t("toolbar.selected_png")}
|
||||||
|
>
|
||||||
|
<ImageDown />
|
||||||
|
</StyledButton>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
color={properties.fontColor}
|
color={properties.fontColor}
|
||||||
@@ -562,7 +596,7 @@ const Divider = styled("div")({
|
|||||||
width: "0px",
|
width: "0px",
|
||||||
height: "12px",
|
height: "12px",
|
||||||
borderLeft: `1px solid ${theme.palette.grey["300"]}`,
|
borderLeft: `1px solid ${theme.palette.grey["300"]}`,
|
||||||
margin: "0px 12px",
|
margin: "0px 8px",
|
||||||
});
|
});
|
||||||
|
|
||||||
const FontSizeBox = styled("div")({
|
const FontSizeBox = styled("div")({
|
||||||
@@ -577,4 +611,10 @@ const FontSizeBox = styled("div")({
|
|||||||
minWidth: "24px",
|
minWidth: "24px",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const ButtonGroup = styled("div")({
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "4px",
|
||||||
|
});
|
||||||
|
|
||||||
export default Toolbar;
|
export default Toolbar;
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
export const TOOLBAR_HEIGHT = 48;
|
export const TOOLBAR_HEIGHT = 40;
|
||||||
export const FORMULA_BAR_HEIGHT = 40;
|
export const FORMULA_BAR_HEIGHT = 40;
|
||||||
export const NAVIGATION_HEIGHT = 40;
|
export const NAVIGATION_HEIGHT = 40;
|
||||||
|
|||||||
Reference in New Issue
Block a user