Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit 67524eb

Browse files
bennobuilderbennobuilder
committed
updated styling of boxes example
1 parent 2c19ae2 commit 67524eb

File tree

9 files changed

+251
-80
lines changed

9 files changed

+251
-80
lines changed

‎examples/react/release/boxes/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-resizable": "^1.11.1",
1919
"react-router-dom": "^5.2.0",
2020
"react-scripts": "4.0.3",
21+
"styled-components": "^5.3.0",
2122
"typescript": "^4.1.2",
2223
"web-vitals": "^1.0.1"
2324
},
@@ -26,7 +27,8 @@
2627
"@types/react": "^17.0.0",
2728
"@types/react-dom": "^17.0.0",
2829
"@types/react-resizable": "^1.7.2",
29-
"@types/react-router-dom": "^5.1.7"
30+
"@types/react-router-dom": "^5.1.7",
31+
"@types/styled-components": "^5.1.11"
3032
},
3133
"scripts": {
3234
"start": "react-scripts start",

‎examples/react/release/boxes/src/components/Card.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react';
2-
import { VStack } from '@chakra-ui/react';
2+
import styled from 'styled-components';
33

44
const Card: React.FC = ({ children }) => (
5-
<VStack
6-
position="absolute"
7-
top="20px"
8-
right="20px"
9-
backgroundColor="white"
10-
padding={2}
11-
boxShadow="md"
12-
borderRadius="md"
13-
spacing={3}
14-
align="flex-start"
15-
onClick={(e) => e.stopPropagation()}>
16-
{children}
17-
</VStack>
5+
<Container onClick={(e) => e.stopPropagation()}>{children}</Container>
186
);
197

208
export default Card;
9+
10+
const Container = styled.div`
11+
position: absolute;
12+
top: 20px;
13+
right: 20px;
14+
background: #ffffff;
15+
padding: 10px;
16+
align-items: flex-start;
17+
justify-content: flex-start;
18+
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
19+
border-radius: 4px;
20+
`;

‎examples/react/release/boxes/src/components/PageContainer.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import React from 'react';
2-
import { Box, Flex } from '@chakra-ui/react';
2+
import styled from 'styled-components';
33

44
interface PageContainerProps {
55
onClick: () => void;
66
}
77

8-
export const PageContainer: React.FC<PageContainerProps> = (props) => {
8+
const PageContainer: React.FC<PageContainerProps> = (props) => {
99
const { onClick, children } = props;
1010

11-
return (
12-
<Flex direction="column" width="100vw" height="100vh" onClick={onClick}>
13-
<Box flex={1} position="relative">
14-
{children}
15-
</Box>
16-
</Flex>
17-
);
11+
return <Container onClick={onClick}>{children}</Container>;
1812
};
13+
14+
export default PageContainer;
15+
16+
const Container = styled.div`
17+
display: flex;
18+
flex-direction: column;
19+
width: 100vw;
20+
height: 100vw;
21+
`;

‎examples/react/release/boxes/src/components/Rectangle/components/RectangleContainer.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Box } from '@chakra-ui/react';
32
import { ElementStyleInterface } from '../../../core/entities/ui/ui.interfaces';
3+
import styled from 'styled-components';
44

55
type RectangleContainerProps = {
66
position: ElementStyleInterface['position'];
@@ -14,12 +14,15 @@ export const RectangleContainer: React.FC<RectangleContainerProps> = (
1414
const { children, size, position, onSelect } = props;
1515

1616
return (
17-
<Box
18-
position="absolute"
17+
<Container
1918
style={{ ...size, ...position }}
2019
onMouseDown={() => onSelect()}
2120
onClick={(e) => e.stopPropagation()}>
2221
{children}
23-
</Box>
22+
</Container>
2423
);
2524
};
25+
26+
const Container = styled.div`
27+
position: absolute;
28+
`;

‎examples/react/release/boxes/src/components/Rectangle/components/RectangleInner.tsx‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Box } from '@chakra-ui/react';
32
import core from '../../../core';
43
import { useAgile } from '@agile-ts/react';
54
import { RectangleLoading } from './RectangleLoading';
6-
import {
7-
ElementImageInterface,
8-
ElementInterface,
9-
} from '../../../core/entities/ui/ui.interfaces';
5+
import { ElementImageInterface } from '../../../core/entities/ui/ui.interfaces';
6+
import styled from 'styled-components';
7+
import { useRandomBorderRadius } from '../../../hooks/useRandomBorderRadius';
108

119
export interface RectangleInnerProps {
1210
selected: boolean;
@@ -18,6 +16,7 @@ export const RectangleInner: React.FC<RectangleInnerProps> = (props) => {
1816

1917
const ELEMENT = core.ui.ELEMENTS.getItem(id);
2018
const element = useAgile(ELEMENT);
19+
const borderRadius = useRandomBorderRadius();
2120

2221
const [isLoading, setIsLoading] = useState(true);
2322

@@ -43,25 +42,30 @@ export const RectangleInner: React.FC<RectangleInnerProps> = (props) => {
4342
return <RectangleLoading selected={selected} />;
4443

4544
return (
46-
<Box
47-
position="absolute"
48-
border={`1px solid ${core.ui.getBorderColor(selected)}`}
49-
transition="0.1s border-color ease-in-out"
50-
width="100%"
51-
height="100%"
52-
display="flex"
53-
padding="2px"
54-
backgroundColor="red">
55-
<Box
56-
flex="1"
57-
border="3px dashed #101010"
58-
borderRadius="255px 15px 225px 15px/15px 225px 15px 255px"
59-
backgroundColor="green"
60-
backgroundImage={`url('${element.image?.src}')`}
61-
backgroundSize="cover"
62-
textAlign="center">
45+
<Container borderColor={core.ui.getBorderColor(selected)}>
46+
<Content imageUrl={element.image?.src} borderRadius={borderRadius}>
6347
{element.id}
64-
</Box>
65-
</Box>
48+
</Content>
49+
</Container>
6650
);
6751
};
52+
53+
const Container = styled.div<{ borderColor: string }>`
54+
display: flex;
55+
position: absolute;
56+
padding: 3px;
57+
border: ${(props) => `1px solid ${props.borderColor}`};
58+
width: 100%;
59+
height: 100%;
60+
61+
transition: 0.1s border-bottom-color, border-left-color, border-top-color,
62+
border-right-color ease-in-out;
63+
`;
64+
65+
const Content = styled.div<{ imageUrl?: string; borderRadius?: string }>`
66+
flex: 1;
67+
border: 3px dashed #101010;
68+
border-radius: ${(props) => props.borderRadius};
69+
background-image: ${(props) => `url('${props.imageUrl}')`};
70+
background-size: cover;
71+
`;

‎examples/react/release/boxes/src/components/Toolbar.tsx‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,51 @@
11
import React from 'react';
2-
import { Icon, IconButton, VStack } from '@chakra-ui/react';
3-
// @ts-ignore
42
import { Image, Square } from 'react-feather';
53
import core from '../core';
4+
import styled from 'styled-components';
65

7-
export const Toolbar = () => {
6+
const Toolbar = () => {
87
return (
9-
<VStack
10-
position="absolute"
11-
top="20px"
12-
left="20px"
13-
backgroundColor="white"
14-
padding={2}
15-
boxShadow="md"
16-
borderRadius="md"
17-
spacing={2}>
18-
<IconButton
8+
<Container>
9+
<ActionButton
1910
onClick={() => {
2011
core.ui.addDefaultElement();
2112
}}
22-
aria-label="Add rectangle"
23-
icon={<Icon style={{ width: 24, height: 24 }} as={Square} />}
24-
/>
25-
<IconButton
13+
aria-label="Add rectangle">
14+
<Square width={24} height={24} />
15+
</ActionButton>
16+
<ActionButton
2617
onClick={() => {
2718
core.ui.addDefaultElement(true);
2819
}}
29-
aria-label="Add image"
30-
icon={<Icon style={{ width: 24, height: 24 }} as={Image} />}
31-
/>
32-
</VStack>
20+
aria-label="Add image">
21+
<Image width={24} height={24} />
22+
</ActionButton>
23+
</Container>
3324
);
3425
};
26+
27+
export default Toolbar;
28+
29+
const Container = styled.div`
30+
display: flex;
31+
flex-direction: column;
32+
position: absolute;
33+
top: 20px;
34+
left: 20px;
35+
background: #ffffff;
36+
padding: 5px;
37+
border-radius: 4px;
38+
box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
39+
`;
40+
41+
const ActionButton = styled.div`
42+
border-radius: 4px;
43+
background: #edf2f7;
44+
margin: 2px;
45+
padding: 5px;
46+
cursor: pointer;
47+
48+
:hover {
49+
background: #dde7ff;
50+
}
51+
`;

‎examples/react/release/boxes/src/hooks/useRandomBorderRadius.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useEffect, useState } from 'react';
2+
3+
export const useRandomBorderRadius = () => {
4+
const [randomBorder, setRandomBorder] = useState<string>('');
5+
6+
useEffect(() => {
7+
const random = (start: number, end: number) => {
8+
return Math.floor(Math.random() * end) + start;
9+
};
10+
11+
setRandomBorder(
12+
`${random(10, 50)}px ${random(10, 50)}px ${random(10, 50)}px ${random(
13+
10,
14+
50
15+
)}px/${random(10, 50)}px ${random(10, 50)}px ${random(10, 50)}px ${random(
16+
10,
17+
50
18+
)}px`
19+
);
20+
}, []);
21+
22+
return randomBorder;
23+
};

‎examples/react/release/boxes/src/screens/Canvas.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22
import { EditProperties } from '../components/EditProperties';
3-
import { PageContainer } from '../components/PageContainer';
4-
import { Toolbar } from '../components/Toolbar';
3+
import PageContainer from '../components/PageContainer';
4+
import Toolbar from '../components/Toolbar';
55
import { useValue } from '@agile-ts/react';
66
import { Rectangle } from '../components/Rectangle';
77
import core from '../core';

0 commit comments

Comments
 (0)