Add background color selection to text box as well

raimohanska · Sep 18, 2023 · 593d68b · 593d68b
1 parent 76f0508
commit 593d68b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/common/src/domain.ts b/common/src/domain.ts
@@ -136,7 +136,7 @@ export type Note = TextItemProperties & {
     color: Color
     shape: NoteShape | undefined
 }
-export type Text = TextItemProperties & { type: typeof ITEM_TYPES.TEXT }
+export type Text = TextItemProperties & { type: typeof ITEM_TYPES.TEXT; color: Color }
 export type Image = ItemProperties & { type: typeof ITEM_TYPES.IMAGE; assetId: string; src?: string }
 export type Video = ItemProperties & { type: typeof ITEM_TYPES.VIDEO; assetId: string; src?: string }
 export type Container = TextItemProperties & { type: typeof ITEM_TYPES.CONTAINER; color: Color }
@@ -380,7 +380,7 @@ export function newText(
     height: number = 2,
     z: number = 0,
 ): Text {
-    return { id: uuid.v4(), type: "text", text, x, y, width, height, z }
+    return { id: uuid.v4(), type: "text", text, x, y, width, height, z, color: "none" }
 }
 
 export function newContainer(
@@ -433,7 +433,7 @@ export function isSameUser(a: EventUserInfo, b: EventUserInfo) {
 }
 
 export function isColoredItem(i: Item): i is ColoredItem {
-    return i.type === "note" || i.type === "container"
+    return i.type === "note" || i.type === "container" || i.type === "text"
 }
 
 export function isShapedItem(i: Item): i is ShapedItem {

diff --git a/common/src/migration.ts b/common/src/migration.ts
@@ -63,6 +63,9 @@ function migrateItem(item: Item, migratedItems: Item[], boardItems: Record<strin
 
     // Force type, width and height for all items
     let fixedItem = { type: type || "note", width: width || 5, height: height || 5, z: z || 0, ...rest } as Item
+    if (fixedItem.type === "text") {
+        fixedItem.color ??= "none"
+    }
     if (fixedItem.type === "container") {
         let container = fixedItem as Container & { items?: string[] }
         // Force container to have text

diff --git a/frontend/src/board/ItemView.tsx b/frontend/src/board/ItemView.tsx
@@ -131,16 +131,14 @@ export const ItemView = ({
                 }
             })}
         >
-            {type !== "text" && (
-                <span
-                    className={L.view(shape, (s) => "shape " + s)}
-                    style={L.view(item, (i) => {
-                        return {
-                            background: getItemBackground(i),
-                        }
-                    })}
-                />
-            )}
+            <span
+                className={L.view(shape, (s) => "shape " + s)}
+                style={L.view(item, (i) => {
+                    return {
+                        background: getItemBackground(i),
+                    }
+                })}
+            />
 
             {(type === "note" || type === "text" || type === "container") && (
                 <TextView item={item as L.Property<TextItem>} />

diff --git a/frontend/src/style/board.scss b/frontend/src/style/board.scss
@@ -156,7 +156,8 @@
                 }
             }
 
-            &.color-ffffff00 {
+            &.color-ffffff00,
+            &.color-none {
                 > .shape {
                     box-shadow: none;
                     border: 1px dashed #00000040;
@@ -192,6 +193,13 @@
             box-shadow: none;
             align-items: flex-start;
             justify-content: flex-start;
+
+            &.color-ffffff00,
+            &.color-none {
+                > .shape {
+                    border: none;
+                }
+            }
         }
 
         .item .editable {