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

FIX: Fixes from Dani's design

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-10-26 10:51:33 +02:00
committed by Nicolás Hatcher Andrés
parent 75d8a5282e
commit dad4755b16
9 changed files with 82 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/src/AppComponents/FileMenu.tsx
View File

@@ -3,7 +3,7 @@ import { Menu, MenuItem, Modal } from "@mui/material";
import { FileDown, FileUp, Plus, Trash2 } from "lucide-react"; import { FileDown, FileUp, Plus, Trash2 } from "lucide-react";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { UploadFileDialog } from "./UploadFileDialog"; import { UploadFileDialog } from "./UploadFileDialog";
import { getModelsMetadata, getSelectedUuuid } from "./storage"; import { getModelsMetadata, getSelectedUuid } from "./storage";
export function FileMenu(props: { export function FileMenu(props: {
newModel: () => void; newModel: () => void;
@@ -17,7 +17,7 @@ export function FileMenu(props: {
const anchorElement = useRef<HTMLDivElement>(null); const anchorElement = useRef<HTMLDivElement>(null);
const models = getModelsMetadata(); const models = getModelsMetadata();
const uuids = Object.keys(models); const uuids = Object.keys(models);
const selectedUuid = getSelectedUuuid(); const selectedUuid = getSelectedUuid();
const elements = []; const elements = [];
for (const uuid of uuids) { for (const uuid of uuids) {
@@ -32,7 +32,15 @@ export function FileMenu(props: {
<span style={{ width: "20px" }}> <span style={{ width: "20px" }}>
{uuid === selectedUuid ? "•" : ""} {uuid === selectedUuid ? "•" : ""}
</span> </span>
<MenuItemText>{models[uuid]}</MenuItemText> <MenuItemText
style={{
maxWidth: "240px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{models[uuid]}
</MenuItemText>
</MenuItemWrapper>, </MenuItemWrapper>,
); );
} }
@@ -144,6 +152,8 @@ const StyledTrash = styled(Trash2)`
const MenuDivider = styled("div")` const MenuDivider = styled("div")`
width: 80%; width: 80%;
margin: auto; margin: auto;
margin-top: 8px;
margin-bottom: 8px;
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
`; `;
@@ -167,6 +177,7 @@ const FileMenuWrapper = styled("div")`
padding: 10px; padding: 10px;
height: 20px; height: 20px;
border-radius: 4px; border-radius: 4px;
cursor: pointer;
&:hover { &:hover {
background-color: #f2f2f2; background-color: #f2f2f2;
} }

40
webapp/src/AppComponents/ShareButton.tsx
View File

@@ -1,28 +1,30 @@
import styled from "@emotion/styled";
import { Share2 } from "lucide-react"; import { Share2 } from "lucide-react";
export function ShareButton(properties: { onClick: () => void }) { export function ShareButton(properties: { onClick: () => void }) {
const { onClick } = properties; const { onClick } = properties;
return ( return (
<div <Wrapper onClick={onClick} onKeyDown={() => {}}>
onClick={onClick}
onKeyDown={() => {}}
style={{
cursor: "pointer",
color: "#FFFFFF",
background: "#F2994A",
padding: "0px 10px",
height: "36px",
lineHeight: "36px",
borderRadius: "4px",
marginRight: "10px",
display: "flex",
alignItems: "center",
fontFamily: "Inter",
fontSize: "14px",
}}
>
<Share2 style={{ width: "16px", height: "16px", marginRight: "10px" }} /> <Share2 style={{ width: "16px", height: "16px", marginRight: "10px" }} />
<span>Share</span> <span>Share</span>
</div> </Wrapper>
); );
} }
const Wrapper = styled("div")`
cursor: pointer;
color: #ffffff;
background: #f2994a;
padding: 0px 10px;
height: 36px;
line-height: 36px;
border-radius: 4px;
margin-right: 10px;
display: flex;
align-items: center;
font-family: "Inter";
font-size: 14px;
&:hover {
background: #d68742;
}
`;

46
webapp/src/AppComponents/WorkbookTitle.tsx
View File

@@ -77,24 +77,28 @@ export function WorkbookTitle(props: {
} }
const TitleWrapper = styled("textarea")` const TitleWrapper = styled("textarea")`
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
border-radius: 4px; border-radius: 4px;
padding: inherit; padding: inherit;
overflow: hidden; overflow: hidden;
outline: none; outline: none;
resize: none; resize: none;
text-wrap: nowrap; text-wrap: nowrap;
border: none; border: none;
&:hover { &:hover {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
&:focus { &:focus {
border: 1px solid grey; border: 1px solid grey;
} }
font-weight: inherit; font-weight: inherit;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
`; max-width: 520px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;

2
webapp/src/AppComponents/storage.ts
View File

@@ -108,7 +108,7 @@ export function selectModelFromStorage(uuid: string): Model | null {
return null; return null;
} }
export function getSelectedUuuid(): string | null { export function getSelectedUuid(): string | null {
return localStorage.getItem("selected"); return localStorage.getItem("selected");
} }

70
webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
View File

@@ -1055,46 +1055,13 @@ export default class WorksheetCanvas {
rowEnd, rowEnd,
columnEnd, columnEnd,
); );
// const { border } = extendToArea;
extendToOutline.style.border = `1px dashed ${outlineColor}`; extendToOutline.style.border = `1px dashed ${outlineColor}`;
extendToOutline.style.borderRadius = "3px"; extendToOutline.style.borderRadius = "3px";
// switch (border) {
// case 'left': {
// extendToOutline.style.borderLeft = 'none';
// extendToOutline.style.borderTopLeftRadius = '0px';
// extendToOutline.style.borderBottomLeftRadius = '0px';
// break; extendToOutline.style.left = `${areaX}px`;
// } extendToOutline.style.top = `${areaY}px`;
// case 'right': { extendToOutline.style.width = `${areaWidth - 1}px`;
// extendToOutline.style.borderRight = 'none'; extendToOutline.style.height = `${areaHeight - 1}px`;
// extendToOutline.style.borderTopRightRadius = '0px';
// extendToOutline.style.borderBottomRightRadius = '0px';
// break;
// }
// case 'top': {
// extendToOutline.style.borderTop = 'none';
// extendToOutline.style.borderTopRightRadius = '0px';
// extendToOutline.style.borderTopLeftRadius = '0px';
// break;
// }
// case 'bottom': {
// extendToOutline.style.borderBottom = 'none';
// extendToOutline.style.borderBottomRightRadius = '0px';
// extendToOutline.style.borderBottomLeftRadius = '0px';
// break;
// }
// default:
// break;
// }
const padding = 1;
extendToOutline.style.left = `${areaX - padding}px`;
extendToOutline.style.top = `${areaY - padding}px`;
extendToOutline.style.width = `${areaWidth + 2 * padding}px`;
extendToOutline.style.height = `${areaHeight + 2 * padding}px`;
} }
private getColumnWidth(sheet: number, column: number): number { private getColumnWidth(sheet: number, column: number): number {
@@ -1176,8 +1143,8 @@ export default class WorksheetCanvas {
} }
// Position the cell outline and clip it // Position the cell outline and clip it
cellOutline.style.left = `${x - padding - 1}px`; cellOutline.style.left = `${x - padding - 2}px`;
cellOutline.style.top = `${y - padding - 1}px`; cellOutline.style.top = `${y - padding - 2}px`;
// Reset CSS properties // Reset CSS properties
cellOutline.style.minWidth = ""; cellOutline.style.minWidth = "";
cellOutline.style.minHeight = ""; cellOutline.style.minHeight = "";
@@ -1185,8 +1152,8 @@ export default class WorksheetCanvas {
cellOutline.style.maxHeight = ""; cellOutline.style.maxHeight = "";
cellOutline.style.overflow = "hidden"; cellOutline.style.overflow = "hidden";
// New properties // New properties
cellOutline.style.width = `${width}px`; cellOutline.style.width = `${width + 1}px`;
cellOutline.style.height = `${height}px`; cellOutline.style.height = `${height + 1}px`;
cellOutline.style.background = "none"; cellOutline.style.background = "none";
@@ -1221,10 +1188,10 @@ export default class WorksheetCanvas {
); );
handleX = areaX + areaWidth; handleX = areaX + areaWidth;
handleY = areaY + areaHeight; handleY = areaY + areaHeight;
areaOutline.style.left = `${areaX - padding}px`; areaOutline.style.left = `${areaX - padding - 1}px`;
areaOutline.style.top = `${areaY - padding}px`; areaOutline.style.top = `${areaY - padding - 1}px`;
areaOutline.style.width = `${areaWidth + 2 * padding}px`; areaOutline.style.width = `${areaWidth + 2 * padding + 1}px`;
areaOutline.style.height = `${areaHeight + 2 * padding}px`; areaOutline.style.height = `${areaHeight + 2 * padding + 1}px`;
const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows; const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows;
const clipTop = const clipTop =
columnStart < topLeftCell.column && columnStart > frozenColumns; columnStart < topLeftCell.column && columnStart > frozenColumns;
@@ -1334,12 +1301,6 @@ export default class WorksheetCanvas {
} }
renderSheet(): void { renderSheet(): void {
console.time("renderSheet");
this._renderSheet();
console.timeEnd("renderSheet");
}
private _renderSheet(): void {
const context = this.ctx; const context = this.ctx;
const { canvas } = this; const { canvas } = this;
const selectedSheet = this.model.getSelectedSheet(); const selectedSheet = this.model.getSelectedSheet();
@@ -1466,8 +1427,11 @@ export default class WorksheetCanvas {
this.renderRowHeaders(frozenRows, topLeftCell, bottomRightCell); this.renderRowHeaders(frozenRows, topLeftCell, bottomRightCell);
// square in the top left corner // square in the top left corner
context.fillStyle = headerBorderColor; context.beginPath();
context.fillRect(0, 0, headerColumnWidth, headerRowHeight); context.strokeStyle = gridSeparatorColor;
context.moveTo(0, 0.5);
context.lineTo(x + headerColumnWidth, 0.5);
context.stroke();
this.drawCellOutline(); this.drawCellOutline();
this.drawCellEditor(); this.drawCellEditor();

1
webapp/src/components/formatMenu.tsx
View File

@@ -137,6 +137,7 @@ const MenuItemText = styled("div")`
`; `;
const MenuItemExample = styled("div")` const MenuItemExample = styled("div")`
color: #bdbdbd;
margin-left: 20px; margin-left: 20px;
`; `;

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

@@ -101,6 +101,7 @@ const Container = styled("div")`
padding-left: 12px; padding-left: 12px;
font-family: Inter; font-family: Inter;
background-color: #fff; background-color: #fff;
border-top: 1px solid #E0E0E0;
`; `;
const Sheets = styled("div")` const Sheets = styled("div")`

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

@@ -438,7 +438,7 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
const Divider = styled("div")({ const Divider = styled("div")({
width: "0px", width: "0px",
height: "10px", height: "10px",
borderLeft: "1px solid #D3D6E9", borderLeft: "1px solid #E0E0E0",
marginLeft: "5px", marginLeft: "5px",
marginRight: "10px", marginRight: "10px",
}); });

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

@@ -27,7 +27,7 @@
"number": "Number", "number": "Number",
"percentage": "Percentage", "percentage": "Percentage",
"currency_eur": "Euro (EUR)", "currency_eur": "Euro (EUR)",
"currency_usd": "Dollar (USD", "currency_usd": "Dollar (USD)",
"currency_gbp": "British Pound (GBD)", "currency_gbp": "British Pound (GBD)",
"date_short": "Short date", "date_short": "Short date",
"date_long": "Long date", "date_long": "Long date",