From dad4755b16e547a3ca5df5a9b1e02fa99639cf31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= Date: Sat, 26 Oct 2024 10:51:33 +0200 Subject: [PATCH] FIX: Fixes from Dani's design --- webapp/src/AppComponents/FileMenu.tsx | 17 ++++- webapp/src/AppComponents/ShareButton.tsx | 40 ++++++----- webapp/src/AppComponents/WorkbookTitle.tsx | 46 ++++++------ webapp/src/AppComponents/storage.ts | 2 +- .../WorksheetCanvas/worksheetCanvas.ts | 70 +++++-------------- webapp/src/components/formatMenu.tsx | 1 + .../src/components/navigation/navigation.tsx | 1 + webapp/src/components/toolbar.tsx | 2 +- webapp/src/locale/en_us.json | 2 +- 9 files changed, 82 insertions(+), 99 deletions(-) diff --git a/webapp/src/AppComponents/FileMenu.tsx b/webapp/src/AppComponents/FileMenu.tsx index 8aecb83..d390d57 100644 --- a/webapp/src/AppComponents/FileMenu.tsx +++ b/webapp/src/AppComponents/FileMenu.tsx @@ -3,7 +3,7 @@ import { Menu, MenuItem, Modal } from "@mui/material"; import { FileDown, FileUp, Plus, Trash2 } from "lucide-react"; import { useRef, useState } from "react"; import { UploadFileDialog } from "./UploadFileDialog"; -import { getModelsMetadata, getSelectedUuuid } from "./storage"; +import { getModelsMetadata, getSelectedUuid } from "./storage"; export function FileMenu(props: { newModel: () => void; @@ -17,7 +17,7 @@ export function FileMenu(props: { const anchorElement = useRef(null); const models = getModelsMetadata(); const uuids = Object.keys(models); - const selectedUuid = getSelectedUuuid(); + const selectedUuid = getSelectedUuid(); const elements = []; for (const uuid of uuids) { @@ -32,7 +32,15 @@ export function FileMenu(props: { {uuid === selectedUuid ? "•" : ""} - {models[uuid]} + + {models[uuid]} + , ); } @@ -144,6 +152,8 @@ const StyledTrash = styled(Trash2)` const MenuDivider = styled("div")` width: 80%; margin: auto; + margin-top: 8px; + margin-bottom: 8px; border-top: 1px solid #e0e0e0; `; @@ -167,6 +177,7 @@ const FileMenuWrapper = styled("div")` padding: 10px; height: 20px; border-radius: 4px; + cursor: pointer; &:hover { background-color: #f2f2f2; } diff --git a/webapp/src/AppComponents/ShareButton.tsx b/webapp/src/AppComponents/ShareButton.tsx index d57c57c..a14fa38 100644 --- a/webapp/src/AppComponents/ShareButton.tsx +++ b/webapp/src/AppComponents/ShareButton.tsx @@ -1,28 +1,30 @@ +import styled from "@emotion/styled"; import { Share2 } from "lucide-react"; export function ShareButton(properties: { onClick: () => void }) { const { onClick } = properties; return ( -
{}} - 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", - }} - > + {}}> Share -
+ ); } + +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; + } +`; diff --git a/webapp/src/AppComponents/WorkbookTitle.tsx b/webapp/src/AppComponents/WorkbookTitle.tsx index 9b82b9c..1836c9d 100644 --- a/webapp/src/AppComponents/WorkbookTitle.tsx +++ b/webapp/src/AppComponents/WorkbookTitle.tsx @@ -77,24 +77,28 @@ export function WorkbookTitle(props: { } const TitleWrapper = styled("textarea")` - vertical-align: middle; - text-align: center; - height: 20px; - line-height: 20px; - border-radius: 4px; - padding: inherit; - overflow: hidden; - outline: none; - resize: none; - text-wrap: nowrap; - border: none; - &:hover { - background-color: #f2f2f2; - } - &:focus { - border: 1px solid grey; - } - font-weight: inherit; - font-family: inherit; - font-size: inherit; - `; + vertical-align: middle; + text-align: center; + height: 20px; + line-height: 20px; + border-radius: 4px; + padding: inherit; + overflow: hidden; + outline: none; + resize: none; + text-wrap: nowrap; + border: none; + &:hover { + background-color: #f2f2f2; + } + &:focus { + border: 1px solid grey; + } + font-weight: inherit; + font-family: inherit; + font-size: inherit; + max-width: 520px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +`; diff --git a/webapp/src/AppComponents/storage.ts b/webapp/src/AppComponents/storage.ts index c00aa8d..c6db3f0 100644 --- a/webapp/src/AppComponents/storage.ts +++ b/webapp/src/AppComponents/storage.ts @@ -108,7 +108,7 @@ export function selectModelFromStorage(uuid: string): Model | null { return null; } -export function getSelectedUuuid(): string | null { +export function getSelectedUuid(): string | null { return localStorage.getItem("selected"); } diff --git a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts index 28ceb89..c83fd69 100644 --- a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts @@ -1055,46 +1055,13 @@ export default class WorksheetCanvas { rowEnd, columnEnd, ); - // const { border } = extendToArea; extendToOutline.style.border = `1px dashed ${outlineColor}`; extendToOutline.style.borderRadius = "3px"; - // switch (border) { - // case 'left': { - // extendToOutline.style.borderLeft = 'none'; - // extendToOutline.style.borderTopLeftRadius = '0px'; - // extendToOutline.style.borderBottomLeftRadius = '0px'; - // break; - // } - // case 'right': { - // extendToOutline.style.borderRight = 'none'; - // 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`; + extendToOutline.style.left = `${areaX}px`; + extendToOutline.style.top = `${areaY}px`; + extendToOutline.style.width = `${areaWidth - 1}px`; + extendToOutline.style.height = `${areaHeight - 1}px`; } private getColumnWidth(sheet: number, column: number): number { @@ -1176,8 +1143,8 @@ export default class WorksheetCanvas { } // Position the cell outline and clip it - cellOutline.style.left = `${x - padding - 1}px`; - cellOutline.style.top = `${y - padding - 1}px`; + cellOutline.style.left = `${x - padding - 2}px`; + cellOutline.style.top = `${y - padding - 2}px`; // Reset CSS properties cellOutline.style.minWidth = ""; cellOutline.style.minHeight = ""; @@ -1185,8 +1152,8 @@ export default class WorksheetCanvas { cellOutline.style.maxHeight = ""; cellOutline.style.overflow = "hidden"; // New properties - cellOutline.style.width = `${width}px`; - cellOutline.style.height = `${height}px`; + cellOutline.style.width = `${width + 1}px`; + cellOutline.style.height = `${height + 1}px`; cellOutline.style.background = "none"; @@ -1221,10 +1188,10 @@ export default class WorksheetCanvas { ); handleX = areaX + areaWidth; handleY = areaY + areaHeight; - areaOutline.style.left = `${areaX - padding}px`; - areaOutline.style.top = `${areaY - padding}px`; - areaOutline.style.width = `${areaWidth + 2 * padding}px`; - areaOutline.style.height = `${areaHeight + 2 * padding}px`; + areaOutline.style.left = `${areaX - padding - 1}px`; + areaOutline.style.top = `${areaY - padding - 1}px`; + areaOutline.style.width = `${areaWidth + 2 * padding + 1}px`; + areaOutline.style.height = `${areaHeight + 2 * padding + 1}px`; const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows; const clipTop = columnStart < topLeftCell.column && columnStart > frozenColumns; @@ -1334,12 +1301,6 @@ export default class WorksheetCanvas { } renderSheet(): void { - console.time("renderSheet"); - this._renderSheet(); - console.timeEnd("renderSheet"); - } - - private _renderSheet(): void { const context = this.ctx; const { canvas } = this; const selectedSheet = this.model.getSelectedSheet(); @@ -1466,8 +1427,11 @@ export default class WorksheetCanvas { this.renderRowHeaders(frozenRows, topLeftCell, bottomRightCell); // square in the top left corner - context.fillStyle = headerBorderColor; - context.fillRect(0, 0, headerColumnWidth, headerRowHeight); + context.beginPath(); + context.strokeStyle = gridSeparatorColor; + context.moveTo(0, 0.5); + context.lineTo(x + headerColumnWidth, 0.5); + context.stroke(); this.drawCellOutline(); this.drawCellEditor(); diff --git a/webapp/src/components/formatMenu.tsx b/webapp/src/components/formatMenu.tsx index 314b675..c83a7cd 100644 --- a/webapp/src/components/formatMenu.tsx +++ b/webapp/src/components/formatMenu.tsx @@ -137,6 +137,7 @@ const MenuItemText = styled("div")` `; const MenuItemExample = styled("div")` + color: #bdbdbd; margin-left: 20px; `; diff --git a/webapp/src/components/navigation/navigation.tsx b/webapp/src/components/navigation/navigation.tsx index 116b769..8d1470a 100644 --- a/webapp/src/components/navigation/navigation.tsx +++ b/webapp/src/components/navigation/navigation.tsx @@ -101,6 +101,7 @@ const Container = styled("div")` padding-left: 12px; font-family: Inter; background-color: #fff; + border-top: 1px solid #E0E0E0; `; const Sheets = styled("div")` diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx index 3e1764e..51c6d51 100644 --- a/webapp/src/components/toolbar.tsx +++ b/webapp/src/components/toolbar.tsx @@ -438,7 +438,7 @@ export const StyledButton = styled("button")( const Divider = styled("div")({ width: "0px", height: "10px", - borderLeft: "1px solid #D3D6E9", + borderLeft: "1px solid #E0E0E0", marginLeft: "5px", marginRight: "10px", }); diff --git a/webapp/src/locale/en_us.json b/webapp/src/locale/en_us.json index 9780afe..8fc0d19 100644 --- a/webapp/src/locale/en_us.json +++ b/webapp/src/locale/en_us.json @@ -27,7 +27,7 @@ "number": "Number", "percentage": "Percentage", "currency_eur": "Euro (EUR)", - "currency_usd": "Dollar (USD", + "currency_usd": "Dollar (USD)", "currency_gbp": "British Pound (GBD)", "date_short": "Short date", "date_long": "Long date",