Skip to content

Commit

Permalink
finish br
Browse files Browse the repository at this point in the history
  • Loading branch information
@lifeparticle
lifeparticle committed Sep 14, 2023
1 parent c39761c commit 2850247
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 104 deletions.
2 changes: 1 addition & 1 deletion ui/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ h5 {

.ant-menu-item {
/* can we do better? */
padding-left: 42px !important;
padding-left: 32px !important;
}

.ant-layout-content,
Expand Down
40 changes: 23 additions & 17 deletions ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
.br {
display: flex;
flex-direction: column;
gap: var(--bt-size-20);

&__input,
&__output {
height: 100%;
}

&__output {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
align-items: center;

&_text,
&_img {
aspect-ratio: 1 / 1;
&_container {
display: flex;
align-items: center;
justify-content: center;
height: 220px;
}
flex-direction: row;

&_img {
object-fit: cover;
}
&_text,
&_img {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
}

&_img {
object-fit: cover;
}

&_text {
overflow: hidden;
}

&_text {
overflow: hidden;
@media screen and (max-width: 1200px) {
flex-direction: column;
}
}
}
}
200 changes: 125 additions & 75 deletions ui/src/pages/CSS/BorderRadius/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,67 @@
import { useState } from "react";
import { Card, Form, Slider, Space } from "antd";
import { Card, Form, Slider } from "antd";
import PageGrid from "components/Layouts/PageGrid";
import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
import about from "assets/about.jpg";
import style from "./BorderRadius.module.scss";
import { faker } from "@faker-js/faker";
import {
ResponsiveInputWithLabel,
ResponsiveSegementWithLabel,
ResponsiveSelectWithLabel,
} from "components/General/FormComponents";
import { BORDER_STYLES, SEGMENTED_OPTIONS } from "./utils/constants";
import {
BLOB_SHAPE,
BORDER_RADIUS,
BORDER_STYLES,
INIT_BORDER,
INIT_BORDER_WIDTH,
INIT_COLOR,
PARAGRAPHS,
RADIUS_ROUND,
SEGMENTED_OPTIONS,
} from "./utils/constants";
import ColorPickerWithInput from "components/General/ColorPickerWithInput";
import InputGrid from "components/Layouts/InputGrid";

const PARAGRAPHS = faker.lorem.lines(7);
const RADIUS_ROUND = 1e5;
const BorderRadius = () => {
const [border, setBorder] = useState(INIT_BORDER);
const [borderWidth, setBorderWidth] = useState(INIT_BORDER_WIDTH);
const [borderStyle, setBorderStyle] = useState(BORDER_STYLES[4].value);
const [borderColor, setBorderColor] = useState(INIT_COLOR);
const [borderType, setBorderType] = useState(BORDER_RADIUS.rounded);

// --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
// --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
// --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
// --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
// --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
const updateBorderByIndex = (value: string, index: number) => {
if (index === -1) {
setBorder(value);
return;
}
const values = border.split(" ");
values[index] = value;
setBorder(values.join(" "));
};

const BorderRadius = () => {
const [border, setBorder] = useState(5);
const [borderRadiusTopLeft, setBorderRadiusTopLeft] = useState(0);
const [borderRadiusTopRight, setBorderRadiusTopRight] = useState(0);
const [borderRadiusBottomLeft, setBorderRadiusBottomLeft] = useState(0);
const [borderRadiusBottomRight, setBorderRadiusBottomRight] = useState(0);
const getBorderRadiusString = (border: string) => {
if (border.includes("%")) {
return border;
}

const [borderWidth, setBorderWidth] = useState(5);
const [borderStyle, setBorderStyle] = useState(BORDER_STYLES[4].value);
const [borderColor, setBorderColor] = useState("rgba(158, 158, 158, 1)");
const [topLeft, topRight, bottomRight, bottomLeft] = border.split(" ");

if (
topLeft === topRight &&
topLeft === bottomRight &&
topLeft === bottomLeft
) {
return `${topLeft}px`;
}

const [borderType, setBorderType] = useState("");
return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
};

const generateCSSCodeString = () => {
const borderRadiusString = `border-radius: ${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px;`;
const borderRadiusString = `border-radius: ${getBorderRadiusString(
border
)};`;
const borderWidthString = `border-width: ${borderWidth}px;`;
const borderColorString = `border-color: ${borderColor};`;
const borderStyleString = `border-style: ${borderStyle};`;
Expand Down Expand Up @@ -75,42 +100,42 @@ const BorderRadius = () => {
value={borderType}
onChange={(value: string | number) => {
setBorderType(value as string);
if (value === SEGMENTED_OPTIONS[1].value) {
setBorder(RADIUS_ROUND);
setBorderRadiusTopLeft(RADIUS_ROUND);
setBorderRadiusTopRight(RADIUS_ROUND);
setBorderRadiusBottomLeft(RADIUS_ROUND);
setBorderRadiusBottomRight(RADIUS_ROUND);
} else if (
value === SEGMENTED_OPTIONS[2].value
) {
setBorder(0);
setBorderRadiusTopLeft(0);
setBorderRadiusTopRight(0);
setBorderRadiusBottomLeft(0);
setBorderRadiusBottomRight(0);
if (value === BORDER_RADIUS.circle) {
setBorder(
`${RADIUS_ROUND} ${RADIUS_ROUND} ${RADIUS_ROUND} ${RADIUS_ROUND}`
);
} else if (value === BORDER_RADIUS.blob) {
setBorder(BLOB_SHAPE);
} else {
setBorder(0);
setBorderRadiusTopLeft(0);
setBorderRadiusTopRight(0);
setBorderRadiusBottomLeft(0);
setBorderRadiusBottomRight(0);
setBorder("0 0 0 0");
}
}}
options={SEGMENTED_OPTIONS}
/>

{borderType === BORDER_RADIUS.blob && (
<ResponsiveInputWithLabel
label="Blob shape"
value={border}
onChange={(e) => {
updateBorderByIndex(e.target.value, -1);
}}
type="text"
/>
)}

<InputGrid>
<Form.Item label="Border">
<Slider
defaultValue={0}
value={border}
disabled={
borderType === BORDER_RADIUS.circle ||
borderType === BORDER_RADIUS.blob
}
onChange={(value: number) => {
if (value) {
setBorder(value);
setBorderRadiusTopLeft(value);
setBorderRadiusTopRight(value);
setBorderRadiusBottomLeft(value);
setBorderRadiusBottomRight(value);
setBorder(
`${value} ${value} ${value} ${value}`
);
}
}}
/>
Expand All @@ -119,9 +144,10 @@ const BorderRadius = () => {
<Form.Item label="Border width">
<Slider
defaultValue={0}
value={borderWidth}
value={parseInt(borderWidth, 10)}
onChange={(value) =>
value !== null && setBorderWidth(value)
value !== null &&
setBorderWidth(String(value))
}
/>
</Form.Item>
Expand All @@ -130,52 +156,76 @@ const BorderRadius = () => {
<InputGrid>
<Form.Item label="Top left border">
<Slider
defaultValue={0}
value={borderRadiusTopLeft}
onChange={(value) =>
value !== null &&
setBorderRadiusTopLeft(value)
disabled={
borderType === BORDER_RADIUS.circle ||
borderType === BORDER_RADIUS.blob
}
onChange={(value) => {
if (value !== null) {
updateBorderByIndex(
String(value),
0
);
}
}}
/>
</Form.Item>
<Form.Item label="Top right border">
<Slider
defaultValue={0}
value={borderRadiusTopRight}
onChange={(value) =>
value !== null &&
setBorderRadiusTopRight(value)
disabled={
borderType === BORDER_RADIUS.circle ||
borderType === BORDER_RADIUS.blob
}
onChange={(value) => {
if (value !== null) {
updateBorderByIndex(
String(value),
1
);
}
}}
/>
</Form.Item>
</InputGrid>
<InputGrid>
<Form.Item label="Bottom left border">
<Slider
defaultValue={0}
value={borderRadiusBottomLeft}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomLeft(value)
disabled={
borderType === BORDER_RADIUS.circle ||
borderType === BORDER_RADIUS.blob
}
onChange={(value) => {
if (value !== null) {
updateBorderByIndex(
String(value),
3
);
}
}}
/>
</Form.Item>
<Form.Item label="Bottom right border">
<Slider
defaultValue={0}
value={borderRadiusBottomRight}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomRight(value)
disabled={
borderType === BORDER_RADIUS.circle ||
borderType === BORDER_RADIUS.blob
}
onChange={(value) => {
if (value !== null) {
updateBorderByIndex(
String(value),
2
);
}
}}
/>
</Form.Item>
</InputGrid>
</Form>
</Card>

<Card className={style.br__output}>
<Space direction="horizontal">
<div className={style.br__output_container}>
<img
src={about}
onClick={() =>
Expand All @@ -185,25 +235,25 @@ const BorderRadius = () => {
)
}
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderRadius: getBorderRadiusString(border),
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
}}
className={style.br__output_img}
className={style.br__output_container_img}
/>
<Card
className={style.br__output_text}
className={style.br__output_container_text}
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderRadius: getBorderRadiusString(border),
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
}}
>
{PARAGRAPHS}
</Card>
</Space>
</div>
</Card>
</PageGrid>
<Card>
Expand Down
Loading

0 comments on commit 2850247

Please sign in to comment.