Adding border to the canvas

usewaypoint · May 31, 2024 · 4bec057 · 4bec057
1 parent 886259b
commit 4bec057
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 2 deletions.
diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 
+import { RoundedCornerOutlined } from '@mui/icons-material';
+
 import EmailLayoutPropsSchema, {
   EmailLayoutProps,
 } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
-import ColorInput from './helpers/inputs/ColorInput';
+import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput';
 import { NullableFontFamily } from './helpers/inputs/FontFamily';
+import SliderInput from './helpers/inputs/SliderInput';
 
 type EmailLayoutSidebarFieldsProps = {
   data: EmailLayoutProps;
@@ -37,7 +40,22 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
         defaultValue={data.canvasColor ?? '#FFFFFF'}
         onChange={(canvasColor) => updateData({ ...data, canvasColor })}
       />
-
+      <NullableColorInput
+        label="Canvas border color"
+        defaultValue={data.borderColor ?? null}
+        onChange={(borderColor) => updateData({ ...data, borderColor })}
+      />
+      <SliderInput
+        iconLabel={<RoundedCornerOutlined />}
+        units="px"
+        step={4}
+        marks
+        min={0}
+        max={48}
+        label="Canvas border radius"
+        defaultValue={data.borderRadius ?? 0}
+        onChange={(borderRadius) => updateData({ ...data, borderRadius })}
+      />
       <NullableFontFamily
         label="Font family"
         defaultValue="MODERN_SANS"

diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx
@@ -61,6 +61,14 @@ export default function EmailLayoutEditor(props: EmailLayoutProps) {
           margin: '0 auto',
           maxWidth: '600px',
           backgroundColor: props.canvasColor ?? '#FFFFFF',
+          borderRadius: props.borderRadius ?? undefined,
+          border: (() => {
+            const v = props.borderColor;
+            if (!v) {
+              return undefined;
+            }
+            return `1px solid ${v}`;
+          })(),
         }}
         role="presentation"
         cellSpacing="0"

diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
@@ -23,6 +23,8 @@ const FONT_FAMILY_SCHEMA = z
 
 const EmailLayoutPropsSchema = z.object({
   backdropColor: COLOR_SCHEMA,
+  borderColor: COLOR_SCHEMA,
+  borderRadius: z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA,
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,

diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
@@ -23,6 +23,8 @@ const FONT_FAMILY_SCHEMA = z
 
 export const EmailLayoutPropsSchema = z.object({
   backdropColor: COLOR_SCHEMA,
+  borderColor: COLOR_SCHEMA,
+  borderRadius: z.number().optional().nullable(),
   canvasColor: COLOR_SCHEMA,
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,

diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx
@@ -53,6 +53,14 @@ export default function EmailLayoutReader(props: EmailLayoutProps) {
           margin: '0 auto',
           maxWidth: '600px',
           backgroundColor: props.canvasColor ?? '#FFFFFF',
+          borderRadius: props.borderRadius ?? undefined,
+          border: (() => {
+            const v = props.borderColor;
+            if (!v) {
+              return undefined;
+            }
+            return `1px solid ${v}`;
+          })(),
         }}
         role="presentation"
         cellSpacing="0"