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

FIX: [App]: Borders done right

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-10-27 16:45:14 +01:00
committed by Nicolás Hatcher Andrés
parent 494a315cbd
commit 2c2228c2c2
6 changed files with 442 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
webapp/src/components/borderPicker.tsx
View File

@@ -7,7 +7,7 @@ import {
PencilLine,
} from "lucide-react";
import type React from "react";
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import {
BorderBottomIcon,
@@ -27,6 +27,7 @@ import ColorPicker from "./colorPicker";
type BorderPickerProps = {
className?: string;
onChange: (border: BorderOptions) => void;
onClose: () => void;
anchorEl: React.RefObject<HTMLElement>;
anchorOrigin?: PopoverOrigin;
transformOrigin?: PopoverOrigin;
@@ -36,25 +37,33 @@ type BorderPickerProps = {
const BorderPicker = (properties: BorderPickerProps) => {
const { t } = useTranslation();
const [borderSelected, setBorderSelected] = useState(BorderType.None);
const [borderSelected, setBorderSelected] = useState<BorderType | null>(null);
const [borderColor, setBorderColor] = useState("#000000");
const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
const [colorPickerOpen, setColorPickerOpen] = useState(false);
const [stylePickerOpen, setStylePickerOpen] = useState(false);
const closePicker = (): void => {
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
useEffect(() => {
if (!borderSelected) {
return;
}
properties.onChange({
color: borderColor,
style: borderStyle,
border: borderSelected,
});
};
}, [borderColor, borderStyle, borderSelected]);
const onClose = properties.onClose;
const borderColorButton = useRef(null);
const borderStyleButton = useRef(null);
return (
<>
<StyledPopover
open={properties.open}
onClose={(): void => closePicker()}
onClose={onClose}
anchorEl={properties.anchorEl.current}
anchorOrigin={
properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
@@ -71,13 +80,13 @@ const BorderPicker = (properties: BorderPickerProps) => {
$pressed={borderSelected === BorderType.All}
onClick={() => {
if (borderSelected === BorderType.All) {
setBorderSelected(BorderType.None);
setBorderSelected(null);
} else {
setBorderSelected(BorderType.All);
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.all")}
>
<BorderAllIcon />
</Button>
@@ -86,13 +95,13 @@ const BorderPicker = (properties: BorderPickerProps) => {
$pressed={borderSelected === BorderType.Inner}
onClick={() => {
if (borderSelected === BorderType.Inner) {
setBorderSelected(BorderType.None);
setBorderSelected(null);
} else {
setBorderSelected(BorderType.Inner);
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.inner")}
>
<BorderInnerIcon />
</Button>
@@ -101,13 +110,13 @@ const BorderPicker = (properties: BorderPickerProps) => {
$pressed={borderSelected === BorderType.CenterH}
onClick={() => {
if (borderSelected === BorderType.CenterH) {
setBorderSelected(BorderType.None);
setBorderSelected(null);
} else {
setBorderSelected(BorderType.CenterH);
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.horizontal")}
>
<BorderCenterHIcon />
</Button>
@@ -116,13 +125,13 @@ const BorderPicker = (properties: BorderPickerProps) => {
$pressed={borderSelected === BorderType.CenterV}
onClick={() => {
if (borderSelected === BorderType.CenterV) {
setBorderSelected(BorderType.None);
setBorderSelected(null);
} else {
setBorderSelected(BorderType.CenterV);
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.vertical")}
>
<BorderCenterVIcon />
</Button>
@@ -137,7 +146,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.outer")}
>
<BorderOuterIcon />
</Button>
@@ -154,7 +163,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.clear")}
>
<BorderNoneIcon />
</Button>
@@ -169,7 +178,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.top")}
>
<BorderTopIcon />
</Button>
@@ -184,7 +193,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.right")}
>
<BorderRightIcon />
</Button>
@@ -199,7 +208,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.bottom")}
>
<BorderBottomIcon />
</Button>
@@ -214,7 +223,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
}
}}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.left")}
>
<BorderLeftIcon />
</Button>
@@ -228,7 +237,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
$pressed={false}
disabled={false}
ref={borderColorButton}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.color")}
>
<PencilLine />
</Button>
@@ -243,7 +252,7 @@ const BorderPicker = (properties: BorderPickerProps) => {
type="button"
$pressed={false}
disabled={false}
title={t("workbook.toolbar.borders_button_title")}
title={t("toolbar.borders.style")}
>
<BorderStyleIcon />
</Button>

4
webapp/src/components/toolbar.tsx
View File

@@ -325,7 +325,7 @@ function Toolbar(properties: ToolbarProperties) {
onClick={() => setBorderPickerOpen(true)}
ref={borderButton}
disabled={!canEdit}
title={t("toolbar.borders")}
title={t("toolbar.borders.title")}
>
<Grid2X2 />
</StyledButton>
@@ -369,6 +369,8 @@ function Toolbar(properties: ToolbarProperties) {
<BorderPicker
onChange={(border): void => {
properties.onBorderChanged(border);
}}
onClose={() => {
setBorderPickerOpen(false);
}}
anchorEl={borderButton}

16
webapp/src/locale/en_us.json
View File

@@ -15,7 +15,6 @@
"format_number": "Format number",
"font_color": "Font color",
"fill_color": "Fill color",
"borders": "Borders",
"decimal_places_increase": "Increase decimal places",
"decimal_places_decrease": "Decrease decimal places",
"show_hide_grid_lines": "Show/hide grid lines",
@@ -39,6 +38,21 @@
"currency_gbp_example": "£",
"date_short_example": "09/24/2024",
"date_long_example": "Tuesday, September 24, 2024"
},
"borders": {
"title": "Borders",
"all": "All borders",
"inner": "Inner borders",
"outer": "Outer borders",
"top": "Top borders",
"bottom": "Bottom borders",
"clear": "Clear borders",
"left": "Left borders",
"right": "Right borders",
"horizontal": "Horizontal borders",
"vertical": "Vertical borders",
"color": "Border color",
"style": "Border style"
}
},
"num_fmt": {