binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1679] chore: relation and attachment icons (#5005)

Browse source 
* chore: attachment icon improvement

* chore: relation and dropdown icon added

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-07-02 16:15:42 +05:30 • committed by GitHub
parent 78e0405971
commit b591203da6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 62 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/ui/src/icons/dropdown-icon.tsx Normal file
View file

@ -0,0 +1,15 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DropdownIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
<svg
viewBox="0 0 7 5"
className={`${className} stroke-2`}
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path d="M2.77267 4.0211L0.457719 1.78653C0.162864 1.50191 0.0961218 1.17467 0.257492 0.8048C0.418861 0.434934 0.70939 0.25 1.12908 0.25H5.72716C6.14685 0.25 6.43738 0.434934 6.59875 0.8048C6.76012 1.17467 6.69338 1.50191 6.39855 1.78653L4.08357 4.0211C3.98662 4.1147 3.88435 4.18329 3.77676 4.22687C3.66918 4.27046 3.55297 4.29225 3.42813 4.29225C3.30328 4.29225 3.18706 4.27046 3.07948 4.22687C2.97191 4.18329 2.86964 4.1147 2.77267 4.0211Z" />
</svg>
);

2
packages/ui/src/icons/index.ts
View file

@ -21,3 +21,5 @@ export * from "./related-icon";
export * from "./side-panel-icon";
export * from "./transfer-icon";
export * from "./info-icon";
export * from "./relations-icon";
export * from "./dropdown-icon";

25
packages/ui/src/icons/relations-icon.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const RelationsIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
<svg
viewBox="0 0 16 16"
className={`${className}`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
{...rest}
>
<path d="M7.99998 4.66536C8.92045 4.66536 9.66665 3.91917 9.66665 2.9987C9.66665 2.07822 8.92045 1.33203 7.99998 1.33203C7.07951 1.33203 6.33331 2.07822 6.33331 2.9987C6.33331 3.91917 7.07951 4.66536 7.99998 4.66536Z" />
<path d="M6.80001 4.19922L4.20001 6.79922" />
<path d="M2.99998 9.66536C3.92045 9.66536 4.66665 8.91917 4.66665 7.9987C4.66665 7.07822 3.92045 6.33203 2.99998 6.33203C2.07951 6.33203 1.33331 7.07822 1.33331 7.9987C1.33331 8.91917 2.07951 9.66536 2.99998 9.66536Z" />
<path d="M4.66669 8H11.3334" />
<path d="M13 9.66536C13.9205 9.66536 14.6666 8.91917 14.6666 7.9987C14.6666 7.07822 13.9205 6.33203 13 6.33203C12.0795 6.33203 11.3333 7.07822 11.3333 7.9987C11.3333 8.91917 12.0795 9.66536 13 9.66536Z" />
<path d="M9.20001 11.7992L11.8 9.19922" />
<path d="M7.99998 14.6654C8.92045 14.6654 9.66665 13.9192 9.66665 12.9987C9.66665 12.0782 8.92045 11.332 7.99998 11.332C7.07951 11.332 6.33331 12.0782 6.33331 12.9987C6.33331 13.9192 7.07951 14.6654 7.99998 14.6654Z" />
</svg>
);

38
web/core/components/icons/attachment/attachment-icon.tsx
View file

@ -16,44 +16,44 @@ import {
VideoIcon,
} from "@/components/icons/attachment";
export const getFileIcon = (fileType: string) => {
export const getFileIcon = (fileType: string, size: number = 28) => {
switch (fileType) {
case "pdf":
return <PdfIcon height={28} width={28} />;
return <PdfIcon height={size} width={size} />;
case "csv":
return <CsvIcon height={28} width={28} />;
return <CsvIcon height={size} width={size} />;
case "xlsx":
return <SheetIcon height={28} width={28} />;
return <SheetIcon height={size} width={size} />;
case "css":
return <CssIcon height={28} width={28} />;
return <CssIcon height={size} width={size} />;
case "doc":
return <DocIcon height={28} width={28} />;
return <DocIcon height={size} width={size} />;
case "fig":
return <FigmaIcon height={28} width={28} />;
return <FigmaIcon height={size} width={size} />;
case "html":
return <HtmlIcon height={28} width={28} />;
return <HtmlIcon height={size} width={size} />;
case "png":
return <PngIcon height={28} width={28} />;
return <PngIcon height={size} width={size} />;
case "jpg":
return <JpgIcon height={28} width={28} />;
return <JpgIcon height={size} width={size} />;
case "js":
return <JavaScriptIcon height={28} width={28} />;
return <JavaScriptIcon height={size} width={size} />;
case "txt":
return <TxtIcon height={28} width={28} />;
return <TxtIcon height={size} width={size} />;
case "svg":
return <SvgIcon height={28} width={28} />;
return <SvgIcon height={size} width={size} />;
case "mp3":
return <AudioIcon height={28} width={28} />;
return <AudioIcon height={size} width={size} />;
case "wav":
return <AudioIcon height={28} width={28} />;
return <AudioIcon height={size} width={size} />;
case "mp4":
return <VideoIcon height={28} width={28} />;
return <VideoIcon height={size} width={size} />;
case "wmv":
return <VideoIcon height={28} width={28} />;
return <VideoIcon height={size} width={size} />;
case "mkv":
return <VideoIcon height={28} width={28} />;
return <VideoIcon height={size} width={size} />;
default:
return <DefaultIcon height={28} width={28} />;
return <DefaultIcon height={size} width={size} />;
}
};

2
web/core/components/issues/attachment/attachment-detail.tsx
View file

@ -58,7 +58,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
<div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm">
<Link href={attachment.asset} target="_blank" rel="noopener noreferrer">
<div className="flex items-center gap-3">
<div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset))}</div>
<div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset), 28)}</div>
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<Tooltip tooltipContent={getFileName(attachment.attributes.name)} isMobile={isMobile}>