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 { Fx } from "../icons";
import Editor from "./editor/editor"; import Editor from "./editor/editor";
import type { WorkbookState } from "./workbookState"; import type { WorkbookState } from "./workbookState";
import { FORMULA_BAR_HEIGH } from "./constants";
type FormulaBarProps = { type FormulaBarProps = {
cellAddress: string; cellAddress: string;
@@ -14,7 +15,6 @@ type FormulaBarProps = {
onTextUpdated: () => void; onTextUpdated: () => void;
}; };
const formulaBarHeight = 30;
const headerColumnWidth = 35; const headerColumnWidth = 35;
function FormulaBar(properties: FormulaBarProps) { function FormulaBar(properties: FormulaBarProps) {
@@ -117,7 +117,7 @@ const Container = styled("div")`
align-items: center; align-items: center;
background: ${(properties): string => background: ${(properties): string =>
properties.theme.palette.background.default}; properties.theme.palette.background.default};
height: ${formulaBarHeight}px; height: ${FORMULA_BAR_HEIGH}px;
`; `;
const AddressContainer = styled("div")` 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 SheetListMenu from "./menus";
import Sheet from "./sheet"; import Sheet from "./sheet";
import type { SheetOptions } from "./types"; import type { SheetOptions } from "./types";
import { NAVIGATION_HEIGH } from "../constants";
export interface NavigationProps { export interface NavigationProps {
sheets: SheetOptions[]; sheets: SheetOptions[];
@@ -109,7 +110,7 @@ const Container = styled("div")`
left: 0px; left: 0px;
right: 0px; right: 0px;
display: flex; display: flex;
height: 40px; height: ${NAVIGATION_HEIGH}px;
align-items: center; align-items: center;
padding-left: 12px; padding-left: 12px;
font-family: Inter; font-family: Inter;

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

@@ -42,6 +42,7 @@ import {
decreaseDecimalPlaces, decreaseDecimalPlaces,
increaseDecimalPlaces, increaseDecimalPlaces,
} from "./formatUtil"; } from "./formatUtil";
import { TOOLBAR_HEIGH } from "./constants";
type ToolbarProperties = { type ToolbarProperties = {
canUndo: boolean; canUndo: boolean;
@@ -384,15 +385,14 @@ function Toolbar(properties: ToolbarProperties) {
</ToolbarContainer> </ToolbarContainer>
); );
} }
const toolbarHeight = 40;
const ToolbarContainer = styled("div")` const ToolbarContainer = styled("div")`
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
background: ${({ theme }) => theme.palette.background.paper}; background: ${({ theme }) => theme.palette.background.paper};
height: ${toolbarHeight}px; height: ${TOOLBAR_HEIGH}px;
line-height: ${toolbarHeight}px; line-height: ${TOOLBAR_HEIGH}px;
border-bottom: 1px solid ${({ theme }) => theme.palette.grey["300"]}; border-bottom: 1px solid ${({ theme }) => theme.palette.grey["300"]};
font-family: Inter; font-family: Inter;
border-radius: 4px 4px 0px 0px; 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 type { Cell } from "./types";
import usePointer from "./usePointer"; import usePointer from "./usePointer";
import { AreaType, type WorkbookState } from "./workbookState"; import { AreaType, type WorkbookState } from "./workbookState";
import { FORMULA_BAR_HEIGH, NAVIGATION_HEIGH, TOOLBAR_HEIGH } from "./constants";
function useWindowSize() { function useWindowSize() {
const [size, setSize] = useState([0, 0]); const [size, setSize] = useState([0, 0]);
@@ -417,10 +418,10 @@ const SheetContainer = styled("div")`
const Wrapper = styled("div")({ const Wrapper = styled("div")({
position: "absolute", position: "absolute",
overflow: "scroll", overflow: "scroll",
top: 71, top: TOOLBAR_HEIGH + FORMULA_BAR_HEIGH + 1,
left: 0, left: 0,
right: 0, right: 0,
bottom: 41, bottom: NAVIGATION_HEIGH + 1,
}); });
const SheetCanvas = styled("canvas")` const SheetCanvas = styled("canvas")`