mirror of
https://github.com/makeplane/plane.git
synced 2025-12-29 00:24:56 +01:00
fix: moving all web icons to prople
This commit is contained in:
sriramveeraghanta
@@ -1,8 +1,6 @@
|
||||
// icons
|
||||
import { EUserPermissions } from "@plane/constants";
|
||||
import { SettingIcon } from "@/components/icons/attachment";
|
||||
// types
|
||||
import type { Props } from "@/components/icons/types";
|
||||
import { SettingIcon } from "@plane/propel/icons";
|
||||
// constants
|
||||
|
||||
export const PROJECT_SETTINGS = {
|
||||
@@ -60,7 +58,7 @@ export const PROJECT_SETTINGS = {
|
||||
href: `/automations`,
|
||||
access: [EUserPermissions.ADMIN],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
|
||||
Icon: SettingIcon,
|
||||
Icon: <SettingIcon />,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -70,7 +68,7 @@ export const PROJECT_SETTINGS_LINKS: {
|
||||
href: string;
|
||||
access: EUserPermissions[];
|
||||
highlight: (pathname: string, baseUrl: string) => boolean;
|
||||
Icon: React.FC<Props>;
|
||||
Icon: React.ReactNode;
|
||||
}[] = [
|
||||
PROJECT_SETTINGS["general"],
|
||||
PROJECT_SETTINGS["members"],
|
||||
|
||||
@@ -6,12 +6,10 @@ import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
// components
|
||||
import { SettingIcon } from "@/components/icons";
|
||||
import { SettingIcon } from "@plane/propel/icons";
|
||||
// hooks
|
||||
import { useUserPermissions } from "@/hooks/store/user";
|
||||
import { useAppRouter } from "@/hooks/use-app-router";
|
||||
// plane wev constants
|
||||
// plane web helpers
|
||||
import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
|
||||
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import {
|
||||
AudioIcon,
|
||||
CssIcon,
|
||||
CsvIcon,
|
||||
DefaultIcon,
|
||||
DocIcon,
|
||||
FigmaIcon,
|
||||
HtmlIcon,
|
||||
JavaScriptIcon,
|
||||
JpgIcon,
|
||||
PdfIcon,
|
||||
PngIcon,
|
||||
RarIcon,
|
||||
SheetIcon,
|
||||
SvgIcon,
|
||||
TxtIcon,
|
||||
VideoIcon,
|
||||
ZipIcon,
|
||||
} from "@/components/icons/attachment";
|
||||
|
||||
export const getFileIcon = (fileType: string, size: number = 28) => {
|
||||
switch (fileType) {
|
||||
case "pdf":
|
||||
return <PdfIcon height={size} width={size} />;
|
||||
case "csv":
|
||||
return <CsvIcon height={size} width={size} />;
|
||||
case "xlsx":
|
||||
return <SheetIcon height={size} width={size} />;
|
||||
case "css":
|
||||
return <CssIcon height={size} width={size} />;
|
||||
case "doc":
|
||||
return <DocIcon height={size} width={size} />;
|
||||
case "fig":
|
||||
return <FigmaIcon height={size} width={size} />;
|
||||
case "html":
|
||||
return <HtmlIcon height={size} width={size} />;
|
||||
case "png":
|
||||
return <PngIcon height={size} width={size} />;
|
||||
case "jpg":
|
||||
return <JpgIcon height={size} width={size} />;
|
||||
case "js":
|
||||
return <JavaScriptIcon height={size} width={size} />;
|
||||
case "txt":
|
||||
return <TxtIcon height={size} width={size} />;
|
||||
case "svg":
|
||||
return <SvgIcon height={size} width={size} />;
|
||||
case "mp3":
|
||||
return <AudioIcon height={size} width={size} />;
|
||||
case "wav":
|
||||
return <AudioIcon height={size} width={size} />;
|
||||
case "mp4":
|
||||
return <VideoIcon height={size} width={size} />;
|
||||
case "wmv":
|
||||
return <VideoIcon height={size} width={size} />;
|
||||
case "mkv":
|
||||
return <VideoIcon height={size} width={size} />;
|
||||
case "zip":
|
||||
return <ZipIcon height={size} width={size} />;
|
||||
case "rar":
|
||||
return <RarIcon height={size} width={size} />;
|
||||
|
||||
default:
|
||||
return <DefaultIcon height={size} width={size} />;
|
||||
}
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import AudioFileIcon from "@/public/attachment/audio-icon.png";
|
||||
|
||||
export type AudioIconProps = {
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
|
||||
export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
|
||||
<Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import CssFileIcon from "@/public/attachment/css-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={CssFileIcon} height={height} width={width} alt="CssFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import CSVFileIcon from "@/public/attachment/csv-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={CSVFileIcon} height={height} width={width} alt="CSVFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import DefaultFileIcon from "@/public/attachment/default-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import DocFileIcon from "@/public/attachment/doc-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={DocFileIcon} height={height} width={width} alt="DocFileIcon" />
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import type { Props } from "../types";
|
||||
|
||||
export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill={color}
|
||||
d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import FigmaFileIcon from "@/public/attachment/figma-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={FigmaFileIcon} height={height} width={width} alt="FigmaFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import HtmlFileIcon from "@/public/attachment/html-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={HtmlFileIcon} height={height} width={width} alt="HtmlFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import ImgFileIcon from "@/public/attachment/img-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={ImgFileIcon} height={height} width={width} alt="ImgFileIcon" />
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
export * from "./attachment-icon";
|
||||
export * from "./audio-file-icon";
|
||||
export * from "./css-file-icon";
|
||||
export * from "./csv-file-icon";
|
||||
export * from "./default-file-icon";
|
||||
export * from "./doc-file-icon";
|
||||
export * from "./document-icon";
|
||||
export * from "./figma-file-icon";
|
||||
export * from "./html-file-icon";
|
||||
export * from "./img-file-icon";
|
||||
export * from "./jpg-file-icon";
|
||||
export * from "./js-file-icon";
|
||||
export * from "./pdf-file-icon";
|
||||
export * from "./png-file-icon";
|
||||
export * from "./setting-icon";
|
||||
export * from "./sheet-file-icon";
|
||||
export * from "./svg-file-icon";
|
||||
export * from "./tune-icon";
|
||||
export * from "./txt-file-icon";
|
||||
export * from "./video-file-icon";
|
||||
export * from "./zip-file-icon";
|
||||
export * from "./rar-file-icon";
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import JpgFileIcon from "@/public/attachment/jpg-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={JpgFileIcon} height={height} width={width} alt="JpgFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import JsFileIcon from "@/public/attachment/js-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import PDFFileIcon from "@/public/attachment/pdf-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={PDFFileIcon} height={height} width={width} alt="PDFFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import PngFileIcon from "@/public/attachment/png-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={PngFileIcon} height={height} width={width} alt="PngFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import RarFileIcon from "@/public/attachment/rar-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={RarFileIcon} height={height} width={width} alt="RarFileIcon" />
|
||||
);
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import type { Props } from "../types";
|
||||
|
||||
export const SettingIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill={color}
|
||||
d="M12.9062 1.375C13.0518 1.375 13.1936 1.42121 13.3112 1.50695C13.4288 1.59269 13.5162 1.71355 13.5607 1.85212L14.317 4.202C14.6346 4.35737 14.9385 4.532 15.2286 4.72862L17.6431 4.20888C17.7854 4.17848 17.9338 4.19406 18.0667 4.25336C18.1997 4.31267 18.3103 4.41264 18.3828 4.53888L20.2886 7.8375C20.3614 7.96366 20.3922 8.10968 20.3766 8.2545C20.361 8.39931 20.2999 8.53544 20.202 8.64325L18.5451 10.472C18.5692 10.8227 18.5692 11.1746 18.5451 11.5252L20.202 13.3567C20.2999 13.4646 20.361 13.6007 20.3766 13.7455C20.3922 13.8903 20.3614 14.0363 20.2886 14.1625L18.3828 17.4625C18.3101 17.5885 18.1994 17.6882 18.0664 17.7472C17.9335 17.8063 17.7853 17.8216 17.6431 17.7911L15.2286 17.2714C14.9398 17.4666 14.6346 17.6426 14.3183 17.798L13.5607 20.1479C13.5162 20.2864 13.4288 20.4073 13.3112 20.4931C13.1936 20.5788 13.0518 20.625 12.9062 20.625H9.0947C8.94915 20.625 8.80735 20.5788 8.68973 20.4931C8.57211 20.4073 8.48474 20.2864 8.4402 20.1479L7.68533 17.7994C7.36856 17.6445 7.06302 17.4676 6.77095 17.27L4.35783 17.7911C4.21547 17.8215 4.06713 17.8059 3.93419 17.7466C3.80125 17.6873 3.69057 17.5874 3.61808 17.4611L1.71233 14.1625C1.63956 14.0363 1.60873 13.8903 1.6243 13.7455C1.63987 13.6007 1.70103 13.4646 1.79895 13.3567L3.45583 11.5252C3.43183 11.1755 3.43183 10.8245 3.45583 10.4748L1.79895 8.64325C1.70103 8.53544 1.63987 8.39931 1.6243 8.2545C1.60873 8.10968 1.63956 7.96366 1.71233 7.8375L3.61808 4.5375C3.69077 4.41151 3.80154 4.31183 3.93446 4.25278C4.06739 4.19373 4.21562 4.17836 4.35783 4.20888L6.77095 4.73C7.06245 4.53338 7.3677 4.356 7.68533 4.20063L8.44158 1.85212C8.48597 1.714 8.57293 1.59346 8.69 1.50776C8.80706 1.42205 8.94824 1.37559 9.09333 1.375H12.9048H12.9062ZM12.403 2.75H9.59795L8.81695 5.17963L8.29033 5.43675C8.03144 5.56344 7.78152 5.70769 7.54233 5.8685L7.05558 6.1985L4.55858 5.6595L3.15608 8.0905L4.86795 9.98525L4.8267 10.5682C4.80695 10.8557 4.80695 11.1443 4.8267 11.4318L4.86795 12.0147L3.15333 13.9095L4.5572 16.3405L7.0542 15.8029L7.54095 16.1315C7.78015 16.2923 8.03007 16.4366 8.28895 16.5632L8.81558 16.8204L9.59795 19.25H12.4057L13.1895 16.819L13.7147 16.5632C13.9733 16.4369 14.2228 16.2926 14.4613 16.1315L14.9467 15.8029L17.4451 16.3405L18.8476 13.9095L17.1343 12.0147L17.1756 11.4318C17.1954 11.1438 17.1954 10.8548 17.1756 10.5669L17.1343 9.98388L18.849 8.0905L17.4451 5.6595L14.9467 6.19575L14.4613 5.8685C14.2228 5.70737 13.9733 5.5631 13.7147 5.43675L13.1895 5.181L12.4043 2.75H12.403ZM11.0005 6.875C12.0945 6.875 13.1437 7.3096 13.9173 8.08318C14.6909 8.85677 15.1255 9.90598 15.1255 11C15.1255 12.094 14.6909 13.1432 13.9173 13.9168C13.1437 14.6904 12.0945 15.125 11.0005 15.125C9.90644 15.125 8.85723 14.6904 8.08364 13.9168C7.31005 13.1432 6.87545 12.094 6.87545 11C6.87545 9.90598 7.31005 8.85677 8.08364 8.08318C8.85723 7.3096 9.90644 6.875 11.0005 6.875ZM11.0005 8.25C10.2711 8.25 9.57164 8.53973 9.05591 9.05546C8.54018 9.57118 8.25045 10.2707 8.25045 11C8.25045 11.7293 8.54018 12.4288 9.05591 12.9445C9.57164 13.4603 10.2711 13.75 11.0005 13.75C11.7298 13.75 12.4293 13.4603 12.945 12.9445C13.4607 12.4288 13.7505 11.7293 13.7505 11C13.7505 10.2707 13.4607 9.57118 12.945 9.05546C12.4293 8.53973 11.7298 8.25 11.0005 8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import SheetFileIcon from "@/public/attachment/excel-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={SheetFileIcon} height={height} width={width} alt="SheetFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import SvgFileIcon from "@/public/attachment/svg-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={SvgFileIcon} height={height} width={width} alt="SvgFileIcon" />
|
||||
);
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import type { Props } from "../types";
|
||||
|
||||
export const TuneIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
className={className}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
|
||||
fill="#212529"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import TxtFileIcon from "@/public/attachment/txt-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={TxtFileIcon} height={height} width={width} alt="TxtFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import VideoFileIcon from "@/public/attachment/video-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
|
||||
);
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
// image
|
||||
import ZipFileIcon from "@/public/attachment/zip-icon.png";
|
||||
// type
|
||||
import type { ImageIconPros } from "../types";
|
||||
|
||||
export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
|
||||
<Image src={ZipFileIcon} height={height} width={width} alt="ZipFileIcon" />
|
||||
);
|
||||
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { AlertCircle, X } from "lucide-react";
|
||||
// ui
|
||||
import { FileIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import {
|
||||
convertBytesToSize,
|
||||
@@ -15,9 +16,6 @@ import {
|
||||
renderFormattedDate,
|
||||
truncateText,
|
||||
} from "@plane/utils";
|
||||
// icons
|
||||
//
|
||||
import { getFileIcon } from "@/components/icons";
|
||||
// components
|
||||
import { IssueAttachmentDeleteModal } from "@/components/issues/attachment/delete-attachment-modal";
|
||||
// helpers
|
||||
@@ -50,7 +48,6 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
|
||||
const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
|
||||
const fileName = getFileName(attachment?.attributes.name ?? "");
|
||||
const fileExtension = getFileExtension(attachment?.asset_url ?? "");
|
||||
const fileIcon = getFileIcon(fileExtension, 28);
|
||||
const fileURL = getFileURL(attachment?.asset_url ?? "");
|
||||
// hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
@@ -70,7 +67,9 @@ 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={fileURL ?? ""} target="_blank" rel="noopener noreferrer">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-7">{fileIcon}</div>
|
||||
<div className="h-7 w-7">
|
||||
<FileIcon extension={fileExtension} size={28} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip tooltipContent={fileName} isMobile={isMobile}>
|
||||
|
||||
@@ -3,18 +3,16 @@
|
||||
import type { FC } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Trash } from "lucide-react";
|
||||
// plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { FileIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import type { TIssueServiceType } from "@plane/types";
|
||||
import { EIssueServiceType } from "@plane/types";
|
||||
// ui
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import { convertBytesToSize, getFileExtension, getFileName, getFileURL, renderFormattedDate } from "@plane/utils";
|
||||
// components
|
||||
//
|
||||
import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
|
||||
import { getFileIcon } from "@/components/icons";
|
||||
// helpers
|
||||
// hooks
|
||||
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
|
||||
import { useMember } from "@/hooks/store/use-member";
|
||||
@@ -40,7 +38,6 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
|
||||
const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
|
||||
const fileName = getFileName(attachment?.attributes.name ?? "");
|
||||
const fileExtension = getFileExtension(attachment?.attributes.name ?? "");
|
||||
const fileIcon = getFileIcon(fileExtension, 18);
|
||||
const fileURL = getFileURL(attachment?.asset_url ?? "");
|
||||
// hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
@@ -58,7 +55,9 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
|
||||
>
|
||||
<div className="group flex items-center justify-between gap-3 h-11 hover:bg-custom-background-90 pl-9 pr-2">
|
||||
<div className="flex items-center gap-3 text-sm truncate">
|
||||
<div className="flex items-center gap-3">{fileIcon}</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<FileIcon extension={fileExtension} size={18} />
|
||||
</div>
|
||||
<Tooltip tooltipContent={`${fileName}.${fileExtension}`} isMobile={isMobile}>
|
||||
<p className="text-custom-text-200 font-medium truncate">{`${fileName}.${fileExtension}`}</p>
|
||||
</Tooltip>
|
||||
|
||||
@@ -2,12 +2,10 @@
|
||||
|
||||
import { observer } from "mobx-react";
|
||||
// ui
|
||||
import { FileIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import { CircularProgressIndicator } from "@plane/ui";
|
||||
// components
|
||||
import { getFileExtension } from "@plane/utils";
|
||||
import { getFileIcon } from "@/components/icons";
|
||||
// helpers
|
||||
// hooks
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
// types
|
||||
@@ -23,14 +21,15 @@ export const IssueAttachmentsUploadItem: React.FC<Props> = observer((props) => {
|
||||
// derived values
|
||||
const fileName = uploadStatus.name;
|
||||
const fileExtension = getFileExtension(uploadStatus.name ?? "");
|
||||
const fileIcon = getFileIcon(fileExtension, 18);
|
||||
// hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 h-11 bg-custom-background-90 pl-9 pr-2 pointer-events-none">
|
||||
<div className="flex items-center gap-3 text-sm truncate">
|
||||
<div className="flex-shrink-0">{fileIcon}</div>
|
||||
<div className="flex-shrink-0">
|
||||
<FileIcon extension={fileExtension} size={18} />
|
||||
</div>
|
||||
<Tooltip tooltipContent={fileName} isMobile={isMobile}>
|
||||
<p className="text-custom-text-200 font-medium truncate">{fileName}</p>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { observer } from "mobx-react";
|
||||
// plane imports
|
||||
import { FileIcon } from "@plane/propel/icons";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import { CircularProgressIndicator } from "@plane/ui";
|
||||
import { getFileExtension, truncateText } from "@plane/utils";
|
||||
// ui
|
||||
// icons
|
||||
import { getFileIcon } from "@/components/icons";
|
||||
// helpers
|
||||
// hooks
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
// types
|
||||
@@ -23,14 +21,15 @@ export const IssueAttachmentsUploadDetails: React.FC<Props> = observer((props) =
|
||||
// derived values
|
||||
const fileName = uploadStatus.name;
|
||||
const fileExtension = getFileExtension(uploadStatus.name ?? "");
|
||||
const fileIcon = getFileIcon(fileExtension, 28);
|
||||
// hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
return (
|
||||
<div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-90 px-4 py-2 text-sm pointer-events-none">
|
||||
<div className="flex-shrink-0 flex items-center gap-3">
|
||||
<div className="h-7 w-7">{fileIcon}</div>
|
||||
<div className="h-7 w-7">
|
||||
<FileIcon extension={fileExtension} size={28} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip tooltipContent={fileName} isMobile={isMobile}>
|
||||
|
||||
Reference in New Issue
Block a user