Merge pull request #318 from ashik-75/work

scrollable menu and download

ui/src/components/General/DropdownDownloadButton/index.tsx

@@ -0,0 +1,46 @@
+import { MenuProps } from "antd";
+import React from "react";
+import { ResponsiveDropdownButton } from "components/General/FormComponents";
+import Icon from "components/General/Icon";
+import { DropdownDownloadButtonPropsType } from "./utils/types";
+const imageType = {
+	jpeg: ".jpeg",
+	png: ".png",
+};
+
+const DropdownDownloadButton: React.FC<DropdownDownloadButtonPropsType> = ({
+	handleDownload,
+}) => {
+	const handleMenuClick: MenuProps["onClick"] = (e) => {
+		handleDownload(e.key);
+	};
+
+	const items: MenuProps["items"] = [
+		{
+			label: "Download JPEG",
+			key: imageType.jpeg,
+		},
+		{
+			label: "Download PNG",
+			key: imageType.png,
+		},
+	];
+
+	const menuProps = {
+		items,
+		onClick: handleMenuClick,
+	};
+
+	return (
+		<ResponsiveDropdownButton
+			menu={menuProps}
+			icon={<Icon name="ChevronDown" />}
+			placement="top"
+			onClick={() => handleDownload(imageType.png)}
+		>
+			Download
+		</ResponsiveDropdownButton>
+	);
+};
+
+export default DropdownDownloadButton;

ui/src/components/General/DropdownDownloadButton/utils/types.ts

@@ -0,0 +1,5 @@
+interface DropdownDownloadButtonPropsType {
+	handleDownload: (val: string) => void;
+}
+
+export type { DropdownDownloadButtonPropsType };

ui/src/components/General/FormComponents/index.tsx

@@ -5,6 +5,7 @@ import {
 	Select,
 	Button as AntButton,
 	ButtonProps,
+	Dropdown,
 } from "antd";
 import React from "react";
 import withLabelSize from "components/Hoc/withLabelSize";
@@ -14,6 +15,7 @@ import {
 	SelectComponentPropsType,
 } from "./utils/types";
 import withSize from "components/Hoc/withSize";
+import { DropdownButtonProps } from "antd/es/dropdown";
 
 const ResponsiveSelect: React.FC<SelectComponentPropsType> = (props) => {
 	return <Select {...props} />;
@@ -35,14 +37,22 @@ const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
 	return <AntButton {...props}>{children}</AntButton>;
 };
 
+const DropdownButton: React.FC<DropdownButtonProps> = ({
+	children,
+	...props
+}) => {
+	return <Dropdown.Button {...props}>{children}</Dropdown.Button>;
+};
 const ResponsiveSelectWithLabel = withLabelSize(ResponsiveSelect);
 const ResponsiveSegementWithLabel = withLabelSize(ResponsiveSegment);
 const ResponsiveInputWithLabel = withLabelSize(ResponsiveInput);
 const ResponsiveButton = withSize(Button);
+const ResponsiveDropdownButton = withSize(DropdownButton);
 
 export {
 	ResponsiveSelectWithLabel,
 	ResponsiveSegementWithLabel,
 	ResponsiveInputWithLabel,
 	ResponsiveButton,
+	ResponsiveDropdownButton,
 };

ui/src/components/General/Warning/Warning.module.scss

@@ -1,3 +1,6 @@
+/* Add this CSS to your component's stylesheet (e.g., Sorting.module.scss) */
+
+/* Style for the Warning component */
 .warning {
 	display: flex;
 	flex-direction: column;

ui/src/index.css

@@ -121,3 +121,8 @@ h5 {
 	display: flex;
 	align-items: center;
 }
+
+/* collapsible menu scroll */
+.ant-menu-submenu-popup .ant-menu-vertical {
+	max-height: 300px !important;
+}

ui/src/pages/Data/Avatar/index.tsx

@@ -1,10 +1,8 @@
-import { saveAs } from "file-saver";
-import { toPng } from "html-to-image";
+import { toPng, toJpeg } from "html-to-image";
 import { Card, Form, Slider, Avatar as AntAvatar, Space } from "antd";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import WebFont from "webfontloader";
 import {
-	ResponsiveButton,
 	ResponsiveInputWithLabel,
 	ResponsiveSegementWithLabel,
 	ResponsiveSelectWithLabel,
@@ -19,6 +17,7 @@ import {
 } from "./utils/constants";
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
+import DropdownDownloadButton from "components/General/DropdownDownloadButton";
 
 const Avatar = () => {
 	const [text, setText] = useState<string>("BT");
@@ -36,13 +35,22 @@ const Avatar = () => {
 
 	const domEl = useRef<HTMLDivElement>(null);
 
-	const onButtonClick = async () => {
+	const onButtonClick = async (ext: string) => {
 		if (!domEl.current || text.length === 0) return;
+		let dataUrl;
 
-		const dataUrl = await toPng(domEl.current);
+		if (ext === ".jpeg") {
+			dataUrl = await toJpeg(domEl.current);
+		} else {
+			dataUrl = await toPng(domEl.current);
+		}
 
-		const blob = await fetch(dataUrl).then((res) => res.blob());
-		saveAs(blob, `image-${Date.now()}.png`);
+		const a = document.createElement("a");
+		a.download = `image-${Date.now()}${ext}`;
+		a.href = dataUrl;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
 	};
 
 	// Load the selected font when it changes
@@ -153,9 +161,7 @@ const Avatar = () => {
 						{text}
 					</AntAvatar>
 
-					<ResponsiveButton onClick={onButtonClick}>
-						Download avatar
-					</ResponsiveButton>
+					<DropdownDownloadButton handleDownload={onButtonClick} />
 				</Space>
 			</Card>
 		</PageGrid>

ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss

@@ -6,11 +6,29 @@
 	&__colors {
 		grid-column: 1 / -1;
 		margin-top: var(--bt-size-16);
+		position: relative;
+		background-color: rgba(255, 255, 255, 0.212);
+	}
+
+	&__background {
+		background: url("../../../assets/grid_back.svg") repeat;
+		position: absolute;
+		inset: 0;
 	}
 
 	&__image__container {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--bt-size-16);
+		position: relative;
+	}
+
+	&__image {
+		display: flex;
+		flex-direction: column;
+		gap: var(--bt-size-16);
+		&__title {
+			text-align: center;
+		}
 	}
 }

ui/src/pages/Data/ImageGeneratorFromColors/index.tsx

@@ -117,12 +117,14 @@ const ImageGeneratorFromColors: React.FC = () => {
 					</Space>
 				</Card>
 			</PageGrid>
+
 			{colors.length > 0 && (
 				<Card className={style.igfc__colors}>
+					<div className={style.igfc__background}></div>
 					<div className={style.igfc__image__container}>
 						{colors.map((color: string) => {
 							return (
-								<div key={color}>
+								<div key={color} className={style.igfc__image}>
 									<div
 										ref={(ref) => {
 											if (ref) {
@@ -136,7 +138,12 @@ const ImageGeneratorFromColors: React.FC = () => {
 											borderRadius: `${rounded}px`,
 										}}
 									/>
-									<Title level={5}>{color}</Title>
+									<Title
+										className={style.igfc__image__title}
+										level={5}
+									>
+										{color}
+									</Title>
 								</div>
 							);
 						})}

ui/src/pages/Data/QRcode/index.tsx

@@ -1,8 +1,9 @@
-import { Button, Card, Form, QRCode, Input, Badge } from "antd";
+import { Card, Form, QRCode, Input, Badge } from "antd";
 import PageGrid from "components/Layouts/PageGrid";
 import React, { useEffect, useState } from "react";
 import { detectQrData, downloadQRCode } from "./utils/helper";
 import style from "./QRcode.module.scss";
+import DropdownDownloadButton from "components/General/DropdownDownloadButton";
 import Warning from "components/General/Warning";
 
 const { TextArea } = Input;
@@ -52,7 +53,11 @@ const QRcode: React.FC = () => {
 							bgColor="#fff"
 							style={{ marginBottom: 16 }}
 						/>
-						<Button onClick={downloadQRCode}>Download</Button>
+						<div>
+							<DropdownDownloadButton
+								handleDownload={downloadQRCode}
+							/>
+						</div>
 					</div>
 				) : (
 					<Warning

ui/src/pages/Data/QRcode/utils/helper.ts

@@ -39,14 +39,14 @@ function detectQrData(data: string) {
 	return "Mixed value";
 }
 
-const downloadQRCode = () => {
+const downloadQRCode = (ext: string) => {
 	const canvas = document
 		.getElementById("myqrcode")
 		?.querySelector<HTMLCanvasElement>("canvas");
 	if (canvas) {
 		const url = canvas.toDataURL();
 		const a = document.createElement("a");
-		a.download = "QRCode.png";
+		a.download = `QRcode${ext}`;
 		a.href = url;
 		document.body.appendChild(a);
 		a.click();