From ce7318840d28407c8a630655bc71ccba66ca55ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Wed, 26 Feb 2025 17:58:39 +0100
Subject: [PATCH] UPDATE: We can now change the font size!

---
 base/src/user_model/common.rs                 | 11 ++++++++
 .../src/components/Toolbar/Toolbar.tsx        | 25 +++++++++++++++++++
 .../src/components/Workbook/Workbook.tsx      |  7 ++++++
 .../WorksheetCanvas/worksheetCanvas.ts        |  2 +-
 webapp/IronCalc/src/locale/en_us.json         |  2 ++
 5 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/base/src/user_model/common.rs b/base/src/user_model/common.rs
index d085465..89b274e 100644
--- a/base/src/user_model/common.rs
+++ b/base/src/user_model/common.rs
@@ -127,6 +127,17 @@ fn update_style(old_value: &Style, style_path: &str, value: &str) -> Result<Styl
         "font.color" => {
             style.font.color = color(value)?;
         }
+        "font.size_delta" => {
+            // This is a special case, we need to add the value to the current size
+            let size_delta: i32 = value
+                .parse()
+                .map_err(|_| format!("Invalid value for font size: '{value}'."))?;
+            let new_size = style.font.sz + size_delta;
+            if new_size < 1 {
+                return Err(format!("Invalid value for font size: '{new_size}'."));
+            }
+            style.font.sz = new_size;
+        }
         "fill.bg_color" => {
             style.fill.bg_color = color(value)?;
             style.fill.pattern_type = "solid".to_string();
diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index 1a595bc..e82877d 100644
--- a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
+++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
@@ -7,6 +7,8 @@ import type {
 import { styled } from "@mui/material/styles";
 import type {} from "@mui/system";
 import {
+  AArrowDown,
+  AArrowUp,
   AlignCenter,
   AlignLeft,
   AlignRight,
@@ -67,6 +69,7 @@ type ToolbarProperties = {
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
   onClearFormatting: () => void;
+  onIncreaseFontSize: (delta: number) => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -248,6 +251,28 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <Type />
       </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(1);
+        }}
+        title={t("toolbar.increase_font_size")}
+      >
+        <AArrowUp />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(-1);
+        }}
+        title={t("toolbar.decrease_font_size")}
+      >
+        <AArrowDown />
+      </StyledButton>
       <StyledButton
         type="button"
         $pressed={false}
diff --git a/webapp/IronCalc/src/components/Workbook/Workbook.tsx b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
index c8fe7fa..1fe6dc7 100644
--- a/webapp/IronCalc/src/components/Workbook/Workbook.tsx
+++ b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
@@ -119,6 +119,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("num_fmt", numberFmt);
   };
 
+  const onIncreaseFontSize = (delta: number) => {
+    updateRangeStyle("font.size_delta", `${delta}`);
+  };
+
   const onCopyStyles = () => {
     const {
       sheet,
@@ -541,6 +545,9 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           );
           setRedrawId((id) => id + 1);
         }}
+        onIncreaseFontSize={(delta: number) => {
+          onIncreaseFontSize(delta);
+        }}
         onBorderChanged={(border: BorderOptions): void => {
           const {
             sheet,
diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
index 150cca4..949ab73 100644
--- a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
+++ b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
@@ -353,7 +353,7 @@ export default class WorksheetCanvas {
       ? gridColor
       : backgroundColor;
 
-    const fontSize = 13;
+    const fontSize = style.font?.sz || 13;
     let font = `${fontSize}px ${defaultCellFontFamily}`;
     let textColor = defaultTextColor;
     if (style.font) {
diff --git a/webapp/IronCalc/src/locale/en_us.json b/webapp/IronCalc/src/locale/en_us.json
index 9f87484..dc35972 100644
--- a/webapp/IronCalc/src/locale/en_us.json
+++ b/webapp/IronCalc/src/locale/en_us.json
@@ -16,6 +16,8 @@
     "format_number": "Format number",
     "font_color": "Font color",
     "fill_color": "Fill color",
+    "increase_font_size": "Increase font size",
+    "decrease_font_size": "Decrease font size",
     "decimal_places_increase": "Increase decimal places",
     "decimal_places_decrease": "Decrease decimal places",
     "show_hide_grid_lines": "Show/hide grid lines",