From 6493392214b10149f543d0b5dc2c465deffa55de Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Tue, 12 Nov 2024 11:31:40 +0100 Subject: [PATCH 1/8] fixed dialog component --- .../modal-dialog.component.module.css | 24 ++++++++++++++++--- .../modal-dialog/modal-dialog.component.tsx | 22 +++++++++-------- src/pods/about/about.pod.module.css | 1 - 3 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css index 20f334c4..9e7cf4d9 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.module.css +++ b/src/common/components/modal-dialog/modal-dialog.component.module.css @@ -1,6 +1,6 @@ .container { z-index: 2; - position: absolute; + position: fixed; top: 0; left: 0; width: 100vw; @@ -8,13 +8,24 @@ display: flex; align-items: center; justify-content: center; - flex-direction: column; background-color: var(--primary-900-50-opacity); } +.dialog { + position: relative; + z-index: 3; + width: 90%; + background-color: var(--primary-900-50-opacity); + max-width: 1280px; + height: 80%; + overflow: auto; +} + .dialogHeader { + position: sticky; + top: 0; + z-index: 4; background-color: var(--primary-500); - width: 70vw; display: flex; justify-content: space-between; align-items: center; @@ -41,3 +52,10 @@ .dialogButton:hover { cursor: pointer; } + +@media screen and (max-device-width: 780px) { + .dialog { + width: 92%; + height: 82%; + } +} diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx index ccee8ee4..de8a701d 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.tsx +++ b/src/common/components/modal-dialog/modal-dialog.component.tsx @@ -16,17 +16,19 @@ export const ModalDialogComponent: React.FC = () => { return ( isOpen && (
-
-

{title}

- +
+
+

{title}

+ +
+
{selectedComponent}
-
{selectedComponent}
) ); diff --git a/src/pods/about/about.pod.module.css b/src/pods/about/about.pod.module.css index 6fa22325..dc41a9f8 100644 --- a/src/pods/about/about.pod.module.css +++ b/src/pods/about/about.pod.module.css @@ -1,6 +1,5 @@ .container { background-color: var(--primary-700); - width: 70vw; height: auto; display: flex; flex-direction: column; From 1acd3c14874853098c0ba0c3015eb4164507e939 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Tue, 12 Nov 2024 11:54:31 +0100 Subject: [PATCH 2/8] fix team wrapper class --- src/pods/about/components/developmentTeam.component.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pods/about/components/developmentTeam.component.module.css b/src/pods/about/components/developmentTeam.component.module.css index 85a17ad3..7aea40b4 100644 --- a/src/pods/about/components/developmentTeam.component.module.css +++ b/src/pods/about/components/developmentTeam.component.module.css @@ -13,4 +13,6 @@ display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xxl); + align-items: start; + justify-content: center; } From 6f745ff4418065bf1fc791ca01cd6a6cb584ab5f Mon Sep 17 00:00:00 2001 From: oleojake Date: Fri, 15 Nov 2024 18:40:43 +0100 Subject: [PATCH 3/8] #481 first approximation --- e2e/helpers/position.helpers.ts | 7 ++++--- e2e/z-index/z-index.spec.ts | 31 +++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 e2e/z-index/z-index.spec.ts diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts index f2bc5a86..2728c0f3 100644 --- a/e2e/helpers/position.helpers.ts +++ b/e2e/helpers/position.helpers.ts @@ -1,7 +1,7 @@ import { Locator, Page } from '@playwright/test'; import { Group } from 'konva/lib/Group'; -interface Position { +export interface Position { x: number; y: number; } @@ -32,7 +32,8 @@ export const dragAndDrop = async ( export const addComponentsToCanvas = async ( page: Page, - components: string[] + components: string[], + displacementQty: number = 120 ) => { const canvasPosition = await page.locator('canvas').boundingBox(); if (!canvasPosition) throw new Error('No canvas found'); @@ -53,7 +54,7 @@ export const addComponentsToCanvas = async ( }; }; - await dragAndDrop(page, position, targetPosition(120, index)); + await dragAndDrop(page, position, targetPosition(displacementQty, index)); } }; diff --git a/e2e/z-index/z-index.spec.ts b/e2e/z-index/z-index.spec.ts new file mode 100644 index 00000000..fbcf2a76 --- /dev/null +++ b/e2e/z-index/z-index.spec.ts @@ -0,0 +1,31 @@ +import { test, expect } from '@playwright/test'; +import { + addComponentsToCanvas, + getAllByShapeType, + getShapePosition, +} from '../helpers'; +import { Group } from 'konva/lib/Group'; + +test('drop two shapes in canvas, select one, try all z-index levels', async ({ + page, +}) => { + await page.goto(''); + + //Drag and drop component to canvas + const componentsAtCanvas = ['Input', 'Input']; + await addComponentsToCanvas(page, componentsAtCanvas, 25); + + //Click Away + await page.mouse.click(800, 130); + + const inputShapes: Group[] = (await getAllByShapeType( + page, + 'input' + )) as Group[]; + expect(inputShapes).toBeDefined(); + + // Select first shape + const firstShape = inputShapes[0]; + const firstShapePosition = await getShapePosition(firstShape); + await page.mouse.click(firstShapePosition.x, firstShapePosition.y); +}); From fe0106a83523c72caf31151ec65aa5b2726f3dbd Mon Sep 17 00:00:00 2001 From: oleojake Date: Sun, 17 Nov 2024 12:41:12 +0100 Subject: [PATCH 4/8] #481 zindez e2e test implemented --- e2e/helpers/konva-testing.helpers.ts | 9 +++ e2e/z-index/z-index.spec.ts | 83 ++++++++++++++++++++++++---- 2 files changed, 81 insertions(+), 11 deletions(-) diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts index fc747d50..8232f3db 100644 --- a/e2e/helpers/konva-testing.helpers.ts +++ b/e2e/helpers/konva-testing.helpers.ts @@ -62,6 +62,15 @@ export const getTransformer = async (page: Page): Promise => { return transformer; }; +export const getIndexFromCanvasShape = async ( + page: Page, + shapeId: number +): Promise => { + const children = await getChildren(page); + const index = children.findIndex(child => child._id === shapeId); + return index; +}; + export const getWithinCanvasItemList = async ( page: Page ): Promise => { diff --git a/e2e/z-index/z-index.spec.ts b/e2e/z-index/z-index.spec.ts index fbcf2a76..322876d4 100644 --- a/e2e/z-index/z-index.spec.ts +++ b/e2e/z-index/z-index.spec.ts @@ -2,30 +2,91 @@ import { test, expect } from '@playwright/test'; import { addComponentsToCanvas, getAllByShapeType, + getIndexFromCanvasShape, getShapePosition, } from '../helpers'; import { Group } from 'konva/lib/Group'; -test('drop two shapes in canvas, select one, try all z-index levels', async ({ +test('drop three shapes in canvas, select one, try all z-index levels', async ({ page, }) => { await page.goto(''); //Drag and drop component to canvas - const componentsAtCanvas = ['Input', 'Input']; - await addComponentsToCanvas(page, componentsAtCanvas, 25); - - //Click Away - await page.mouse.click(800, 130); + const componentsAtCanvas = ['Input', 'Input', 'Input']; + await addComponentsToCanvas(page, componentsAtCanvas, 30); const inputShapes: Group[] = (await getAllByShapeType( page, 'input' )) as Group[]; - expect(inputShapes).toBeDefined(); + expect(inputShapes.length).toBe(3); + + // Get Canvas position + const stageCanvas = await page.locator('#konva-stage canvas').first(); + expect(stageCanvas).toBeDefined(); + const canvasPosition = await stageCanvas.boundingBox(); + if (!canvasPosition) throw new Error('No canvas found'); + + // Click on empty canvas space to clear selection + await page.mouse.click(500, 500); + + // Click on second input shape (will be the test subject) + const inputShapePosition = await getShapePosition(inputShapes[1]); + await page.mouse.click( + canvasPosition.x + inputShapePosition.x + 30, + canvasPosition.y + inputShapePosition.y + 10 + ); + + // Get initial Z-index of all shapes + const InitialzIndexes: number[] = await Promise.all( + inputShapes.map(async shape => { + return await getIndexFromCanvasShape(page, shape._id); + }) + ); + expect(InitialzIndexes).toEqual([0, 1, 2]); + + // FIRST BUTTON: Move to the top (highest z-index) + await page.locator('button[aria-label="Bring to front"]').click(); + + // Verify Z-index after moving to the top + const zIndexesAfterMoveToTop: number[] = await Promise.all( + inputShapes.map(async shape => { + return await getIndexFromCanvasShape(page, shape._id); + }) + ); + expect(zIndexesAfterMoveToTop).toEqual([0, 2, 1]); // Second shape is now on top + + // SECOND BUTTON: Move to the bottom (lowest z-index) + await page.locator('button[aria-label="Send to back"]').click(); + + // Verify Z-index after moving to the bottom + const zIndexesAfterMoveToBottom: number[] = await Promise.all( + inputShapes.map(async shape => { + return await getIndexFromCanvasShape(page, shape._id); + }) + ); + expect(zIndexesAfterMoveToBottom).toEqual([1, 0, 2]); // Second shape is now at the bottom + + // THIRD BUTTON: Move up one level + await page.locator('button[aria-label="Bring forward"]').click(); + + // Verify Z-index after moving up one level + const zIndexesAfterMoveUp: number[] = await Promise.all( + inputShapes.map(async shape => { + return await getIndexFromCanvasShape(page, shape._id); + }) + ); + expect(zIndexesAfterMoveUp).toEqual([0, 1, 2]); // Second shape moved up one level + + // FOURTH BUTTON: Move down one level + await page.locator('button[aria-label="Send backward"]').click(); - // Select first shape - const firstShape = inputShapes[0]; - const firstShapePosition = await getShapePosition(firstShape); - await page.mouse.click(firstShapePosition.x, firstShapePosition.y); + // Verify Z-index after moving down one level + const zIndexesAfterMoveDown: number[] = await Promise.all( + inputShapes.map(async shape => { + return await getIndexFromCanvasShape(page, shape._id); + }) + ); + expect(zIndexesAfterMoveDown).toEqual([1, 0, 2]); // Second shape moved down one level again }); From 24c35cbca7631fe59e42363cc06036f4104079db Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Tue, 19 Nov 2024 11:57:58 +0100 Subject: [PATCH 5/8] fix dialog component styles --- .../modal-dialog/modal-dialog.component.module.css | 8 +++++++- .../components/modal-dialog/modal-dialog.component.tsx | 2 +- .../components/icon-selector/modal/icon-modal.module.css | 1 - 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css index 9e7cf4d9..8c30a709 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.module.css +++ b/src/common/components/modal-dialog/modal-dialog.component.module.css @@ -6,6 +6,7 @@ width: 100vw; height: 100vh; display: flex; + flex-direction: column; align-items: center; justify-content: center; background-color: var(--primary-900-50-opacity); @@ -15,10 +16,15 @@ position: relative; z-index: 3; width: 90%; - background-color: var(--primary-900-50-opacity); max-width: 1280px; height: 80%; overflow: auto; + border-radius: var(--border-radius-m); +} + +.dialogContent { + overflow: auto; + flex: 1; } .dialogHeader { diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx index de8a701d..52ec230a 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.tsx +++ b/src/common/components/modal-dialog/modal-dialog.component.tsx @@ -27,7 +27,7 @@ export const ModalDialogComponent: React.FC = () => {
-
{selectedComponent}
+
{selectedComponent}
) diff --git a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css index fca99e9c..620d0236 100644 --- a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css +++ b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css @@ -1,6 +1,5 @@ .container { background-color: var(--primary-700); - width: 70vw; height: auto; display: flex; flex-direction: column; From dac48b8303e26dc36bdf1a63c4b4e916922cba0c Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 19 Nov 2024 19:56:17 +0100 Subject: [PATCH 6/8] add text alignment functionality to the TextAlignment component --- .../front-components/shape.const.ts | 5 ++ .../heading1-text-shape.tsx | 12 +++- .../heading2-text-shape.tsx | 12 +++- .../heading3-text-shape.tsx | 12 +++- .../front-text-components/link-text-shape.tsx | 4 +- .../normaltext-shape.tsx | 12 +++- .../paragraph-text-shape.tsx | 7 +- .../front-text-components/smalltext-shape.tsx | 12 +++- .../components/shapes/use-shape-props.hook.ts | 6 ++ src/core/model/index.ts | 1 + .../canvas/model/shape-other-props.utils.ts | 7 ++ .../components/text-alignment/index.ts | 1 + .../text-alignment/text-alignment.module.css | 39 +++++++++++ .../text-alignment/text-alignment.tsx | 70 +++++++++++++++++++ src/pods/properties/properties.pod.tsx | 10 +++ 15 files changed, 191 insertions(+), 19 deletions(-) create mode 100644 src/pods/properties/components/text-alignment/index.ts create mode 100644 src/pods/properties/components/text-alignment/text-alignment.module.css create mode 100644 src/pods/properties/components/text-alignment/text-alignment.tsx diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts index 458d4178..63656560 100644 --- a/src/common/components/mock-components/front-components/shape.const.ts +++ b/src/common/components/mock-components/front-components/shape.const.ts @@ -15,6 +15,7 @@ const DEFAULT_TEXT_HEIGHT = 38; const DEFAULT_FONT_VARIANT = 'normal'; const DEFAULT_FONT_STYLE = 'normal'; const DEFAULT_TEXT_DECORATION = 'none'; +const DEFAULT_TEXT_ALIGNMENT = 'left'; export interface DefaultStyleShape { DEFAULT_CORNER_RADIUS: number; @@ -32,6 +33,7 @@ export interface DefaultStyleShape { DEFAULT_FONT_VARIANT: string; DEFAULT_FONT_STYLE: string; DEFAULT_TEXT_DECORATION: string; + DEFAULT_TEXT_ALIGNMENT: 'left' | 'center' | 'right'; } export const BASIC_SHAPE: DefaultStyleShape = { @@ -50,6 +52,7 @@ export const BASIC_SHAPE: DefaultStyleShape = { DEFAULT_FONT_VARIANT, DEFAULT_FONT_STYLE, DEFAULT_TEXT_DECORATION, + DEFAULT_TEXT_ALIGNMENT, }; export const INPUT_SHAPE: DefaultStyleShape = { @@ -68,6 +71,7 @@ export const INPUT_SHAPE: DefaultStyleShape = { DEFAULT_FONT_VARIANT, DEFAULT_FONT_STYLE, DEFAULT_TEXT_DECORATION, + DEFAULT_TEXT_ALIGNMENT, }; //! maybe a function to calc max height base on the text @@ -87,6 +91,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = { DEFAULT_FONT_VARIANT, DEFAULT_FONT_STYLE, DEFAULT_TEXT_DECORATION, + DEFAULT_TEXT_ALIGNMENT, }; interface FontValues { diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx index edd483fe..ed5ef8c5 100644 --- a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx @@ -40,8 +40,14 @@ export const Heading1Shape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, textDecoration, fontStyle, fontVariant, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + textColor, + textDecoration, + fontStyle, + fontVariant, + fontSize, + textAlignment, + } = useShapeProps(otherProps, BASIC_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -61,7 +67,7 @@ export const Heading1Shape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx index 02d8184b..f7398556 100644 --- a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx @@ -40,8 +40,14 @@ export const Heading2Shape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, fontVariant, fontStyle, textDecoration, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + textColor, + fontVariant, + fontStyle, + textDecoration, + fontSize, + textAlignment, + } = useShapeProps(otherProps, BASIC_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -61,7 +67,7 @@ export const Heading2Shape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx index 4f02a862..c8b0d720 100644 --- a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx @@ -41,8 +41,14 @@ export const Heading3Shape = forwardRef((props, ref) => { const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, fontVariant, fontStyle, textDecoration, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + textColor, + fontVariant, + fontStyle, + textDecoration, + fontSize, + textAlignment, + } = useShapeProps(otherProps, BASIC_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -62,7 +68,7 @@ export const Heading3Shape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/mock-components/front-text-components/link-text-shape.tsx b/src/common/components/mock-components/front-text-components/link-text-shape.tsx index e139ce70..042297b2 100644 --- a/src/common/components/mock-components/front-text-components/link-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/link-text-shape.tsx @@ -41,7 +41,7 @@ export const LinkShape = forwardRef((props, ref) => { const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, textDecoration, fontSize } = useShapeProps( + const { textColor, textDecoration, fontSize, textAlignment } = useShapeProps( otherProps, BASIC_SHAPE ); @@ -64,7 +64,7 @@ export const LinkShape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx index 6f3bd419..fc9e1b98 100644 --- a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx @@ -40,8 +40,14 @@ export const NormaltextShape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, fontVariant, fontStyle, textDecoration, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + textColor, + fontVariant, + fontStyle, + textDecoration, + fontSize, + textAlignment, + } = useShapeProps(otherProps, BASIC_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -61,7 +67,7 @@ export const NormaltextShape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx index 3d44c447..97fd5943 100644 --- a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx @@ -40,7 +40,10 @@ export const ParagraphShape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, fontSize } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, fontSize, textAlignment } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -60,7 +63,7 @@ export const ParagraphShape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="left" + align={textAlignment} ellipsis={true} /> diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx index ec0393a2..c22a72d5 100644 --- a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx @@ -40,8 +40,14 @@ export const SmalltextShape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor, fontVariant, fontStyle, textDecoration, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + textColor, + fontVariant, + fontStyle, + textDecoration, + fontSize, + textAlignment, + } = useShapeProps(otherProps, BASIC_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -61,7 +67,7 @@ export const SmalltextShape = forwardRef((props, ref) => { fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY} fontSize={fontSize} fill={textColor} - align="center" + align={textAlignment} verticalAlign="middle" ellipsis={true} wrap="none" diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts index 1a68f6d9..f3d79f85 100644 --- a/src/common/components/shapes/use-shape-props.hook.ts +++ b/src/common/components/shapes/use-shape-props.hook.ts @@ -43,6 +43,11 @@ export const useShapeProps = ( [otherProps?.textDecoration] ); + const textAlignment = useMemo( + () => otherProps?.textAlignment ?? defaultStyleShape.DEFAULT_TEXT_ALIGNMENT, + [otherProps?.textAlignment] + ); + const strokeStyle = useMemo( () => otherProps?.strokeStyle ?? [], [otherProps?.strokeStyle] @@ -81,5 +86,6 @@ export const useShapeProps = ( fontStyle, fontSize, textDecoration, + textAlignment, }; }; diff --git a/src/core/model/index.ts b/src/core/model/index.ts index 843d0979..c4580e2c 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -174,6 +174,7 @@ export interface OtherProps { borderRadius?: string; activeElement?: number; selectedBackgroundColor?: string; + textAlignment?: 'left' | 'center' | 'right'; } export const BASE_ICONS_URL = '/icons/'; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index afff3625..62f09261 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -126,6 +126,7 @@ export const generateDefaultOtherProps = ( fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, fontSize: FONT_SIZE_VALUES.HEADING1, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'heading2': @@ -135,6 +136,7 @@ export const generateDefaultOtherProps = ( fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, fontSize: FONT_SIZE_VALUES.HEADING2, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'heading3': return { @@ -143,12 +145,14 @@ export const generateDefaultOtherProps = ( fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, fontSize: FONT_SIZE_VALUES.HEADING3, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'link': return { textColor: `${LINK_SHAPE.DEFAULT_FILL_TEXT}`, textDecoration: 'underline', fontSize: FONT_SIZE_VALUES.LINK, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'normaltext': return { @@ -157,6 +161,7 @@ export const generateDefaultOtherProps = ( fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, fontSize: FONT_SIZE_VALUES.NORMALTEXT, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'smalltext': return { @@ -165,10 +170,12 @@ export const generateDefaultOtherProps = ( fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, fontSize: FONT_SIZE_VALUES.SMALLTEXT, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'paragraph': return { fontSize: FONT_SIZE_VALUES.PARAGRAPH, + textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`, }; case 'label': return { diff --git a/src/pods/properties/components/text-alignment/index.ts b/src/pods/properties/components/text-alignment/index.ts new file mode 100644 index 00000000..e292c99a --- /dev/null +++ b/src/pods/properties/components/text-alignment/index.ts @@ -0,0 +1 @@ +export * from './text-alignment'; diff --git a/src/pods/properties/components/text-alignment/text-alignment.module.css b/src/pods/properties/components/text-alignment/text-alignment.module.css new file mode 100644 index 00000000..4e0a8ade --- /dev/null +++ b/src/pods/properties/components/text-alignment/text-alignment.module.css @@ -0,0 +1,39 @@ +.container { + display: flex; + align-items: center; + gap: 1.5em; + padding: var(--space-xs) var(--space-md); + border-bottom: 1px solid var(--primary-300); +} + +.buttonsContainer { + display: flex; + gap: 1em; + align-items: center; + margin-left: auto; +} + +.button { + border: none; + color: var(--text-color); + background-color: inherit; + width: auto; + min-width: 30px; + border-radius: 10px; + font-size: var(--fs-xs); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease-in-out; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.button:hover { + background-color: var(--primary-100); +} + +.active { + background-color: var(--primary-200); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); +} diff --git a/src/pods/properties/components/text-alignment/text-alignment.tsx b/src/pods/properties/components/text-alignment/text-alignment.tsx new file mode 100644 index 00000000..a18860be --- /dev/null +++ b/src/pods/properties/components/text-alignment/text-alignment.tsx @@ -0,0 +1,70 @@ +import classes from './text-alignment.module.css'; + +interface Props { + textAlignment: 'left' | 'center' | 'right' | undefined; + label: string; + onChange: (textAlignment: 'left' | 'center' | 'right') => void; +} + +export const TextAlignment: React.FC = props => { + const { label, textAlignment, onChange } = props; + + return ( +
+

{label}

+
+ + + +
+
+ ); +}; diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx index 452577cd..65402ae7 100644 --- a/src/pods/properties/properties.pod.tsx +++ b/src/pods/properties/properties.pod.tsx @@ -13,6 +13,7 @@ import { FontStyle } from './components/font-style'; import { FontVariant } from './components/font-variant/font-variant'; import { TextDecoration } from './components/text-decoration/text-decoration'; import { FontSize } from './components/font-size'; +import { TextAlignment } from './components/text-alignment'; export const PropertiesPod = () => { const { selectionInfo } = useCanvasContext(); @@ -139,6 +140,15 @@ export const PropertiesPod = () => { } /> )} + {selectedShapeData?.otherProps?.textAlignment && ( + + updateOtherPropsOnSelected('textAlignment', textAlignment) + } + /> + )} {selectedShapeData?.otherProps?.fontStyle && ( Date: Wed, 20 Nov 2024 08:50:37 +0100 Subject: [PATCH 7/8] fix border radius styles --- .../modal-dialog/modal-dialog.component.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css index 8c30a709..c64721df 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.module.css +++ b/src/common/components/modal-dialog/modal-dialog.component.module.css @@ -19,7 +19,7 @@ max-width: 1280px; height: 80%; overflow: auto; - border-radius: var(--border-radius-m); + border-radius: var(--border-radius-l); } .dialogContent { @@ -36,8 +36,8 @@ justify-content: space-between; align-items: center; padding: var(--space-s) var(--space-md); - border-top-left-radius: var(--border-radius-m); - border-top-right-radius: var(--border-radius-m); + border-top-left-radius: var(--border-radius-l); + border-top-right-radius: var(--border-radius-l); } .dialogTitle { From 1a37a854ac00ff2eaeb12ffabbf6f66a683c06c1 Mon Sep 17 00:00:00 2001 From: Braulio Date: Wed, 20 Nov 2024 17:55:32 +0100 Subject: [PATCH 8/8] adde center on old verion --- src/core/local-disk/shapes-to-document.mapper.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/core/local-disk/shapes-to-document.mapper.ts b/src/core/local-disk/shapes-to-document.mapper.ts index d34a23c0..1efb0be6 100644 --- a/src/core/local-disk/shapes-to-document.mapper.ts +++ b/src/core/local-disk/shapes-to-document.mapper.ts @@ -30,6 +30,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.HEADING1, + textAlignment: 'center', }, }; case 'heading2': @@ -38,6 +39,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.HEADING2, + textAlignment: 'center', }, }; case 'heading3': @@ -46,6 +48,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.HEADING3, + textAlignment: 'center', }, }; case 'link': @@ -54,6 +57,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.LINK, + textAlignment: 'center', }, }; case 'normaltext': @@ -62,6 +66,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.NORMALTEXT, + textAlignment: 'center', }, }; case 'smalltext': @@ -70,6 +75,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.SMALLTEXT, + textAlignment: 'center', }, }; case 'paragraph': @@ -78,6 +84,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => { otherProps: { ...shape, fontSize: FONT_SIZE_VALUES.PARAGRAPH, + textAlignment: 'center', }, }; default: