FIX: Fixes from Dani's design

2024-10-26 10:51:33 +02:00
parent 75d8a5282e
commit dad4755b16
9 changed files with 82 additions and 99 deletions
--- 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<HTMLDivElement>(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: {
        <span style={{ width: "20px" }}>
          {uuid === selectedUuid ? "•" : ""}
        </span>
-        <MenuItemText>{models[uuid]}</MenuItemText>
+        <MenuItemText
+          style={{
+            maxWidth: "240px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {models[uuid]}
+        </MenuItemText>
      </MenuItemWrapper>,
    );
  }
@@ -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;
  }
--- 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 (
-    <div
-      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",
-      }}
-    >
+    <Wrapper onClick={onClick} onKeyDown={() => {}}>
      <Share2 style={{ width: "16px", height: "16px", marginRight: "10px" }} />
      <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;
+  }
+`;
--- 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;
+`;
--- 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");
 }

--- 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();
--- 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;
 `;

--- 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")`
--- a/webapp/src/components/toolbar.tsx
+++ b/webapp/src/components/toolbar.tsx
@@ -438,7 +438,7 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
 const Divider = styled("div")({
  width: "0px",
  height: "10px",
-  borderLeft: "1px solid #D3D6E9",
+  borderLeft: "1px solid #E0E0E0",
  marginLeft: "5px",
  marginRight: "10px",
 });
--- 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",