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

FIX: Correct height of toolbar (48) and formula bar (40)

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-10-08 20:17:40 +02:00
committed by Nicolás Hatcher Andrés
parent e41741cf77
commit 6390739fd4
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
import { Fx } from "../icons";
import Editor from "./editor/editor";
import type { WorkbookState } from "./workbookState";
import { FORMULA_BAR_HEIGH } from "./constants";
type FormulaBarProps = {
cellAddress: string;
@@ -14,7 +15,6 @@ type FormulaBarProps = {
onTextUpdated: () => void;
};
const formulaBarHeight = 30;
const headerColumnWidth = 35;
function FormulaBar(properties: FormulaBarProps) {
@@ -117,7 +117,7 @@ const Container = styled("div")`
align-items: center;
background: ${(properties): string =>
properties.theme.palette.background.default};
height: ${formulaBarHeight}px;
height: ${FORMULA_BAR_HEIGH}px;
`;
const AddressContainer = styled("div")`

3
webapp/src/components/navigation/navigation.tsx
View File

@@ -7,6 +7,7 @@ import type { WorkbookState } from "../workbookState";
import SheetListMenu from "./menus";
import Sheet from "./sheet";
import type { SheetOptions } from "./types";
import { NAVIGATION_HEIGH } from "../constants";
export interface NavigationProps {
sheets: SheetOptions[];
@@ -109,7 +110,7 @@ const Container = styled("div")`
left: 0px;
right: 0px;
display: flex;
height: 40px;
height: ${NAVIGATION_HEIGH}px;
align-items: center;
padding-left: 12px;
font-family: Inter;

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

@@ -42,6 +42,7 @@ import {
decreaseDecimalPlaces,
increaseDecimalPlaces,
} from "./formatUtil";
import { TOOLBAR_HEIGH } from "./constants";
type ToolbarProperties = {
canUndo: boolean;
@@ -384,15 +385,14 @@ function Toolbar(properties: ToolbarProperties) {
</ToolbarContainer>
);
}
const toolbarHeight = 40;
const ToolbarContainer = styled("div")`
display: flex;
flex-shrink: 0;
align-items: center;
background: ${({ theme }) => theme.palette.background.paper};
height: ${toolbarHeight}px;
line-height: ${toolbarHeight}px;
height: ${TOOLBAR_HEIGH}px;
line-height: ${TOOLBAR_HEIGH}px;
border-bottom: 1px solid ${({ theme }) => theme.palette.grey["300"]};
font-family: Inter;
border-radius: 4px 4px 0px 0px;

5
webapp/src/components/worksheet.tsx
View File

@@ -10,6 +10,7 @@ import Editor from "./editor/editor";
import type { Cell } from "./types";
import usePointer from "./usePointer";
import { AreaType, type WorkbookState } from "./workbookState";
import { FORMULA_BAR_HEIGH, NAVIGATION_HEIGH, TOOLBAR_HEIGH } from "./constants";
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
@@ -417,10 +418,10 @@ const SheetContainer = styled("div")`
const Wrapper = styled("div")({
position: "absolute",
overflow: "scroll",
top: 71,
top: TOOLBAR_HEIGH + FORMULA_BAR_HEIGH + 1,
left: 0,
right: 0,
bottom: 41,
bottom: NAVIGATION_HEIGH + 1,
});
const SheetCanvas = styled("canvas")`