From 05ce7101bd060301a5f538a155a859556282e497 Mon Sep 17 00:00:00 2001 From: Imamul Islam nAyeem Date: Sat, 6 Jan 2024 01:53:15 +0600 Subject: [PATCH 1/3] new FlexboxGenerator component added, base layout copied from boxshadow --- ui/src/data/featureData.ts | 9 ++ ui/src/data/helpData.ts | 11 ++ ui/src/data/menuData.ts | 6 + ui/src/data/routeData.tsx | 11 +- .../FlexboxGenerator.module.scss | 14 ++ .../CSS/FlexboxGenerator/FlexboxGenerator.tsx | 130 ++++++++++++++++++ ui/src/pages/CSS/FlexboxGenerator/index.ts | 1 + ui/src/pages/index.ts | 2 + 8 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.module.scss create mode 100644 ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx create mode 100644 ui/src/pages/CSS/FlexboxGenerator/index.ts diff --git a/ui/src/data/featureData.ts b/ui/src/data/featureData.ts index 3c85c053..57b11c63 100644 --- a/ui/src/data/featureData.ts +++ b/ui/src/data/featureData.ts @@ -83,6 +83,15 @@ export const FEATURE_DATA: Feature[] = [ link: routesById.boxshadow.path, library: [{ name: "Vanilla JS", url: "" }], }, + { + key: routesById.flexboxgenerator.id, + name: routesById.flexboxgenerator.title, + shortDescription: routesById.flexboxgenerator.description, + fullDescription: + "Arrange your items inside your container element as like as you want.", + link: routesById.flexboxgenerator.path, + library: [{ name: "Vanilla JS", url: "" }], + }, { key: routesById.base64.id, name: routesById.base64.title, diff --git a/ui/src/data/helpData.ts b/ui/src/data/helpData.ts index eb6ca236..652e0356 100644 --- a/ui/src/data/helpData.ts +++ b/ui/src/data/helpData.ts @@ -84,6 +84,7 @@ const HELP: Help = { }, ], }, + // [routesById.units.id]: { // description: featuresById.units.fullDescription, // helpTexts: [ @@ -479,6 +480,16 @@ const HELP: Help = { }, ], }, + [routesById.flexboxgenerator.id]: { + description: featuresById.flexboxgenerator.fullDescription, + helpTexts: [ + { + id: "48", + title: "", + bulletPoints: [], + }, + ], + }, }; export type { HelpEntry }; diff --git a/ui/src/data/menuData.ts b/ui/src/data/menuData.ts index 9deb7a26..fb16c205 100644 --- a/ui/src/data/menuData.ts +++ b/ui/src/data/menuData.ts @@ -55,6 +55,12 @@ export const MENU_ITEMS = [ icon: "Box", show: true, }, + { + name: routesById.flexboxgenerator.title, + url: routesById.flexboxgenerator.path, + icon: "AlignCenter", + show: IN_DEVELOPMENT, + }, { name: routesById.units.title, url: routesById.units.path, diff --git a/ui/src/data/routeData.tsx b/ui/src/data/routeData.tsx index 31dcd472..6ae56082 100644 --- a/ui/src/data/routeData.tsx +++ b/ui/src/data/routeData.tsx @@ -52,6 +52,7 @@ import { UiUx, Units, YouTube, + FlexboxGenerator, } from "pages"; import { FC } from "react"; @@ -109,7 +110,8 @@ export type RouteId = | "tvseries" | "uiux" | "units" - | "youtube"; + | "youtube" + | "flexboxgenerator"; interface Route { path: string; @@ -155,6 +157,13 @@ export const routes: Route[] = [ description: "Add drama to your box! Shadows included.", component: BoxShadow, }, + { + id: "flexboxgenerator", + path: "/css/fg", + title: "Flexbox Generator", + description: "Arrange your item inside your container.", + component: FlexboxGenerator, + }, { id: "units", path: "/css/units", diff --git a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.module.scss b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.module.scss new file mode 100644 index 00000000..ec2fd762 --- /dev/null +++ b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.module.scss @@ -0,0 +1,14 @@ +.fg { + display: flex; + flex-direction: column; + gap: var(--bt-size-20); + &__input { + height: var(--bt-size-percent-100); + } + &__output { + height: var(--bt-size-percent-100); + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx new file mode 100644 index 00000000..432bd35e --- /dev/null +++ b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx @@ -0,0 +1,130 @@ +import { FC, useState } from "react"; +import { Card, Form, Slider, Space } from "antd"; +import { PageGrid, InputGrid } from "components/Layouts"; +import { + CodeHighlightWithCopy, + ColorPickerWithInput, +} from "components/General"; +import style from "./FlexboxGenerator.module.scss"; + +const FlexboxGenerator : FC = () => { + const [bgColor, setBgColor] = useState("#ffffff0"); + const [shadowColor, setShadowColor] = useState("#ddd"); + const [boxColor, setBoxColor] = useState("#df6a0b77"); + const [horizontalLength, setHorizontalLength] = useState(10); + const [verticalLength, setVerticalLength] = useState(10); + const [blurRadius, setBlurRadius] = useState(0); + const [spreadRadius, setSpreadRadius] = useState(0); + + const boxStyle = { + width: "25dvh", + height: "25dvh", + backgroundColor: boxColor, + margin: "20px auto", + boxShadow: `${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor}`, + }; + + const generateCSSCodeString = () => { + const webkit = `-webkit-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; + const mozila = `-moz-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; + const boxShadow = `box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; + + return `${webkit}\n${mozila}\n${boxShadow}`; + }; + + + return ( +
+ + +
+ + setShadowColor(e.target.value)} + setColor={setShadowColor} + /> + setBoxColor(e.target.value)} + setColor={setBoxColor} + /> + + + setBgColor(e.target.value)} + setColor={setBgColor} + /> + + + { + setHorizontalLength(value); + }} + min={-100} + max={100} + included={false} + tooltip={{ open: true }} + /> + + + { + setVerticalLength(value); + }} + min={-100} + max={100} + included={false} + tooltip={{ open: true }} + /> + + + { + if (value) { + setBlurRadius(value); + } + }} + /> + + + { + if (value) { + setSpreadRadius(value); + } + }} + /> + + +
+ + + +
+ + + + + + +
+ ); +}; + +export default FlexboxGenerator; \ No newline at end of file diff --git a/ui/src/pages/CSS/FlexboxGenerator/index.ts b/ui/src/pages/CSS/FlexboxGenerator/index.ts new file mode 100644 index 00000000..ea3d961d --- /dev/null +++ b/ui/src/pages/CSS/FlexboxGenerator/index.ts @@ -0,0 +1 @@ +export { default } from "./FlexboxGenerator"; \ No newline at end of file diff --git a/ui/src/pages/index.ts b/ui/src/pages/index.ts index 712799b0..79bc50dc 100644 --- a/ui/src/pages/index.ts +++ b/ui/src/pages/index.ts @@ -14,6 +14,7 @@ const ShadesAndTints = lazy(() => import("pages/Colors/ShadesAndTints")); const BorderRadius = lazy(() => import("pages/CSS/BorderRadius")); const BoxShadow = lazy(() => import("pages/CSS/BoxShadow")); +const FlexboxGenerator = lazy(() => import("pages/CSS/FlexboxGenerator")); const Units = lazy(() => import("pages/CSS/Units")); const Base64 = lazy(() => import("pages/Converter/Base64")); @@ -74,6 +75,7 @@ export { Book, BorderRadius, BoxShadow, + FlexboxGenerator, CodeFormatter, ColorPicker, CookiePolicy, From 4358d0e4ca7862c76bf2bedaf73e9d2ac183b97f Mon Sep 17 00:00:00 2001 From: Imamul Islam nAyeem Date: Sun, 7 Jan 2024 01:32:32 +0600 Subject: [PATCH 2/3] flexbox container initial work done. need to do some minor css changes --- .../CSS/FlexboxGenerator/FlexboxGenerator.tsx | 211 +++++++++++------- .../pages/CSS/FlexboxGenerator/constants.ts | 45 ++++ 2 files changed, 172 insertions(+), 84 deletions(-) create mode 100644 ui/src/pages/CSS/FlexboxGenerator/constants.ts diff --git a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx index 432bd35e..e55ea0fb 100644 --- a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx +++ b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx @@ -1,111 +1,148 @@ import { FC, useState } from "react"; -import { Card, Form, Slider, Space } from "antd"; +import { Card, Form, Space } from "antd"; import { PageGrid, InputGrid } from "components/Layouts"; import { CodeHighlightWithCopy, - ColorPickerWithInput, + ResponsiveSelectWithLabel, + ResponsiveButton } from "components/General"; +import { + JUSTIFY_CONTENT, + FLEX_DIRECTION, + ALIGN_ITEM, + ALIGN_CONTENT, + FLEX_WRAP, +} from "./constants"; import style from "./FlexboxGenerator.module.scss"; -const FlexboxGenerator : FC = () => { +const FlexboxGenerator: FC = () => { const [bgColor, setBgColor] = useState("#ffffff0"); - const [shadowColor, setShadowColor] = useState("#ddd"); - const [boxColor, setBoxColor] = useState("#df6a0b77"); - const [horizontalLength, setHorizontalLength] = useState(10); - const [verticalLength, setVerticalLength] = useState(10); - const [blurRadius, setBlurRadius] = useState(0); - const [spreadRadius, setSpreadRadius] = useState(0); + const [boxColor, setBoxColor] = useState("#4f5456"); + const [justifyContent, setJustifyContent] = useState(JUSTIFY_CONTENT[0].value); + const [flexDirection, setFlexDirection] = useState(FLEX_DIRECTION[0].value); + const [alignItem, setAlignItem] = useState(ALIGN_ITEM[0].value); + const [alignContent, setAlignContent] = useState(ALIGN_CONTENT[0].value); + const [flexWrap, setFlexWrap] = useState(FLEX_WRAP[0].value); + const [itemCount, setItemCount] = useState(3); + + const indices = Array.from({ length: itemCount }, (_, index) => index); - const boxStyle = { - width: "25dvh", - height: "25dvh", + const containerStyle = { + width: "70dvh", + height: "50dvh", backgroundColor: boxColor, - margin: "20px auto", - boxShadow: `${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor}`, + borderRadius:".8rem", + display:"flex", + justifyContent: `${justifyContent}`, + flexDirection: `${flexDirection}`, + alignItem: `${alignItem}`, + alignContent: `${alignContent}`, + flexWrap: `${flexWrap}`, }; + const itemStyle = { + width: "5rem", + height: "5rem", + background: "whitesmoke", + color:"black", + margin: "10px", + padding:"10px", + borderRadius:".5rem", + } + const generateCSSCodeString = () => { - const webkit = `-webkit-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; - const mozila = `-moz-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; - const boxShadow = `box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`; + const displayFlexCode = `display: flex`; + const justifyContentCode = `justify-content: ${justifyContent};`; + const flexDirectionCode = `flex-direction: ${flexDirection};`; + const alignItemCode = `align-item: ${alignItem};`; + const alignContentnCode = `align-content: ${alignContent};`; + const flexWrapCode = `flex-wrap: ${flexWrap};`; - return `${webkit}\n${mozila}\n${boxShadow}`; + return `${displayFlexCode}\n${justifyContentCode}\n${flexDirectionCode}\n${alignItemCode}\n${alignContentnCode}\n${flexWrapCode}`; }; + const addItem = () => { + setItemCount(itemCount+ 1); + } + const removeItem = () => { + setItemCount(itemCount - 1); + } return (
-
- - setShadowColor(e.target.value)} - setColor={setShadowColor} - /> - setBoxColor(e.target.value)} - setColor={setBoxColor} - /> - + Container + + + addItem()} + > + Add Item + - setBgColor(e.target.value)} - setColor={setBgColor} - /> + removeItem()} + > + Remove Item + - - { - setHorizontalLength(value); - }} - min={-100} - max={100} - included={false} - tooltip={{ open: true }} - /> - - - { - setVerticalLength(value); - }} - min={-100} - max={100} - included={false} - tooltip={{ open: true }} - /> - - - { - if (value) { - setBlurRadius(value); + + +
+ + + setJustifyContent(option.value) + } + options={JUSTIFY_CONTENT} + /> + + setFlexDirection(option.value) + } + options={FLEX_DIRECTION} + /> + + + + setAlignItem(option.value) + } + options={ALIGN_ITEM} + /> + + setAlignContent(option.value) } - }} - /> - - - { - if (value) { - setSpreadRadius(value); + options={ALIGN_CONTENT} + /> + + + + setFlexWrap(option.value) } - }} - /> - - + options={FLEX_WRAP} + /> + + +
{ style={{ background: bgColor }} > -
+
+ {indices.map((index) => ( +
+ Item {index + 1} +
+ ))} +
diff --git a/ui/src/pages/CSS/FlexboxGenerator/constants.ts b/ui/src/pages/CSS/FlexboxGenerator/constants.ts new file mode 100644 index 00000000..740515c3 --- /dev/null +++ b/ui/src/pages/CSS/FlexboxGenerator/constants.ts @@ -0,0 +1,45 @@ +const JUSTIFY_CONTENT = [ + { label: "flext-start", value: "flext-start"}, + { label: "flex-end", value: "flex-end" }, + { label: "center", value: "center" }, + { label: "space-evenly", value: "space-evenly" }, + { label: "space-around", value: "space-around" }, + { label: "space-between", value: "space-between" }, +]; + +const FLEX_DIRECTION = [ + { label: "row", value: "row"}, + { label: "column", value: "column" }, + { label: "row-reverse", value: "row-reverse" }, + { label: "column-reverse", value: "column-reverse" }, +]; + +const ALIGN_ITEM = [ + { label: "flex-start", value: "flex-start"}, + { label: "flex-end", value: "flex-end" }, + { label: "center", value: "center" }, + { label: "stretch", value: "stretch" }, + { label: "baseline", value: "baseline" }, +]; + +const ALIGN_CONTENT = [ + { label: "flex-start", value: "flex-start"}, + { label: "flex-end", value: "flex-end" }, + { label: "center", value: "center" }, + { label: "stretch", value: "stretch" }, + { label: "baseline", value: "baseline" }, +]; + +const FLEX_WRAP = [ + { label: "nowrap", value: "nowrap"}, + { label: "wrap", value: "wrap" }, + { label: "wrap-reverse", value: "wrap-reverse" }, +]; + +export { + JUSTIFY_CONTENT, + FLEX_DIRECTION, + ALIGN_ITEM, + ALIGN_CONTENT, + FLEX_WRAP, +}; From cc405a7c6f78bc2a7d30164c522a0f8930c9892d Mon Sep 17 00:00:00 2001 From: Imamul Islam nAyeem Date: Sun, 7 Jan 2024 14:42:33 +0600 Subject: [PATCH 3/3] sorted route data content, add types for flexbox css class values, fixed linter errors for unused setter --- ui/src/data/routeData.tsx | 4 +-- .../CSS/FlexboxGenerator/FlexboxGenerator.tsx | 36 +++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/ui/src/data/routeData.tsx b/ui/src/data/routeData.tsx index 6ae56082..7c3597ba 100644 --- a/ui/src/data/routeData.tsx +++ b/ui/src/data/routeData.tsx @@ -80,6 +80,7 @@ export type RouteId = | "editor" | "feedback" | "fileconverter" + | "flexboxgenerator" | "github" | "githubissue" | "icon" @@ -110,8 +111,7 @@ export type RouteId = | "tvseries" | "uiux" | "units" - | "youtube" - | "flexboxgenerator"; + | "youtube"; interface Route { path: string; diff --git a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx index e55ea0fb..27c1783f 100644 --- a/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx +++ b/ui/src/pages/CSS/FlexboxGenerator/FlexboxGenerator.tsx @@ -16,8 +16,8 @@ import { import style from "./FlexboxGenerator.module.scss"; const FlexboxGenerator: FC = () => { - const [bgColor, setBgColor] = useState("#ffffff0"); - const [boxColor, setBoxColor] = useState("#4f5456"); + const [bgColor] = useState("#ffffff0"); + const [boxColor] = useState("#4f5456"); const [justifyContent, setJustifyContent] = useState(JUSTIFY_CONTENT[0].value); const [flexDirection, setFlexDirection] = useState(FLEX_DIRECTION[0].value); const [alignItem, setAlignItem] = useState(ALIGN_ITEM[0].value); @@ -25,29 +25,35 @@ const FlexboxGenerator: FC = () => { const [flexWrap, setFlexWrap] = useState(FLEX_WRAP[0].value); const [itemCount, setItemCount] = useState(3); - const indices = Array.from({ length: itemCount }, (_, index) => index); + const containerItems = Array.from({ length: itemCount }, (_, index) => index); + + type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse"; + type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"; + type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline"; + type AlignContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch"; + type FlexWrap = "nowrap" | "wrap" | "wrap-reverse"; const containerStyle = { width: "70dvh", height: "50dvh", backgroundColor: boxColor, - borderRadius:".8rem", - display:"flex", - justifyContent: `${justifyContent}`, - flexDirection: `${flexDirection}`, - alignItem: `${alignItem}`, - alignContent: `${alignContent}`, - flexWrap: `${flexWrap}`, + borderRadius: ".8rem", + display: "flex", + justifyContent: `${justifyContent}` as JustifyContent, + flexDirection: `${flexDirection}` as FlexDirection, + alignItems: `${alignItem}` as AlignItems, + alignContent: `${alignContent}` as AlignContent, + flexWrap: `${flexWrap}` as FlexWrap, }; const itemStyle = { width: "5rem", height: "5rem", background: "whitesmoke", - color:"black", + color: "black", margin: "10px", - padding:"10px", - borderRadius:".5rem", + padding: "10px", + borderRadius: ".5rem", } const generateCSSCodeString = () => { @@ -62,7 +68,7 @@ const FlexboxGenerator: FC = () => { }; const addItem = () => { - setItemCount(itemCount+ 1); + setItemCount(itemCount + 1); } const removeItem = () => { setItemCount(itemCount - 1); @@ -151,7 +157,7 @@ const FlexboxGenerator: FC = () => { >
- {indices.map((index) => ( + {containerItems.map((index) => (
Item {index + 1}