From a17541e62f14af6c07184cd2cf7f0b0e653ca8f0 Mon Sep 17 00:00:00 2001 From: amitamrutiya Date: Fri, 31 Jan 2025 18:25:06 +0530 Subject: [PATCH] feat: created some styled componnet Signed-off-by: amitamrutiya --- .../DesignTableColumnConfig.tsx | 2 - src/custom/FlipCard/FlipCard.tsx | 7 +- src/custom/Workspaces/DesignTable.tsx | 3 - src/custom/Workspaces/WorkspaceCard.tsx | 174 +++++++----------- .../Workspaces/WorkspaceTransferButton.tsx | 3 +- .../Workspaces/hooks/useDesignAssignment.tsx | 3 - src/custom/Workspaces/styles.tsx | 100 ++++++++-- 7 files changed, 160 insertions(+), 132 deletions(-) diff --git a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx index 0d0559f6..e26dba4b 100644 --- a/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx +++ b/src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx @@ -25,7 +25,6 @@ interface ColumnConfigProps { handleCopyUrl: (type: string, name: string, id: string) => void; handleClone: (name: string, id: string) => void; handleShowDetails: (designId: string, designName: string) => void; - getDownloadUrl: (id: string) => string; handleDownload: (design: Pattern) => void; isDownloadAllowed: boolean; isCopyLinkAllowed: boolean; @@ -56,7 +55,6 @@ export const createDesignsColumnsConfig = ({ handleCopyUrl, handleClone, handleShowDetails, - // getDownloadUrl, handleDownload, isUnpublishAllowed, isCopyLinkAllowed, diff --git a/src/custom/FlipCard/FlipCard.tsx b/src/custom/FlipCard/FlipCard.tsx index cb5380c0..89596477 100644 --- a/src/custom/FlipCard/FlipCard.tsx +++ b/src/custom/FlipCard/FlipCard.tsx @@ -8,6 +8,7 @@ export type FlipCardProps = { onShow?: () => void; children: [React.ReactNode, React.ReactNode]; disableFlip?: boolean; + padding?: string; }; /** @@ -73,7 +74,8 @@ export function FlipCard({ onClick, onShow, children, - disableFlip = false + disableFlip = false, + padding }: FlipCardProps) { const [flipped, setFlipped] = React.useState(false); const [activeBack, setActiveBack] = React.useState(false); @@ -113,7 +115,8 @@ export function FlipCard({ {!activeBack ? ( diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index ae407734..c75df7c4 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -37,7 +37,6 @@ export interface DesignTableProps { workspaceName: string, workspaceId: string ) => void; - getDownloadUrl: (id: string) => string; handlePublish: (publishModal: PublishModalState, data: any) => void; publishModalHandler: any; handleUnpublishModal: (design: Pattern, modalRef: React.RefObject) => void; @@ -84,7 +83,6 @@ const DesignTable: React.FC = ({ handleShowDetails, handleUnpublishModal, handleWorkspaceDesignDeleteModal, - getDownloadUrl, publishModalHandler, isCopyLinkAllowed, isDeleteAllowed, @@ -124,7 +122,6 @@ const DesignTable: React.FC = ({ handleCopyUrl, handleClone, handleShowDetails, - getDownloadUrl, handleDownload, isCopyLinkAllowed, isDeleteAllowed, diff --git a/src/custom/Workspaces/WorkspaceCard.tsx b/src/custom/Workspaces/WorkspaceCard.tsx index fe1fdedc..d06340cf 100644 --- a/src/custom/Workspaces/WorkspaceCard.tsx +++ b/src/custom/Workspaces/WorkspaceCard.tsx @@ -1,18 +1,28 @@ import { useTheme } from '@mui/material'; -import { Backdrop, CircularProgress, Grid, Typography } from '../../base'; +import { Backdrop, CircularProgress, Grid } from '../../base'; import { FlipCard } from '../FlipCard'; import { RecordRow, RedirectButton, TransferButton } from './WorkspaceTransferButton'; import { formattoLongDate } from './helper'; import { + AllocationColumnGrid, AllocationWorkspace, BulkSelectCheckbox, + CardBackActionsGrid, + CardBackTitleGrid, + CardBackTopGrid, + CardBackWrapper, + CardFrontWrapper, CardTitle, - CardWrapper, + DateColumnGrid, + DateGrid, DateLabel, DescriptionLabel, EmptyDescription, L5DeleteIcon, - L5EditIcon + L5EditIcon, + RecentActivityGrid, + RecentActivityTitle, + WorkspaceCardGrid } from './styles'; interface WorkspaceDetails { @@ -138,7 +148,10 @@ const WorkspaceCard = ({ }: WorkspaceCardProps) => { const deleted = workspaceDetails.deleted_at.Valid; return ( - + { - const theme = useTheme(); return ( - - + + e.stopPropagation()}> {name} - - + + {description ? ( e.stopPropagation()} sx={{ maxHeight: '105px' }}> {description} @@ -222,7 +227,7 @@ const CardFront = ({ gap: 1 }} > - + e.stopPropagation()}> {isEnvironmentAllowed ? ( - - + + + e.stopPropagation()}> {isTeamAllowed ? ( - - + + e.stopPropagation()}> {isDesignAndViewAllowed ? ( - + - + ); }; @@ -294,74 +300,41 @@ const CardBack = ({ const theme = useTheme(); return ( - - - - - e.stopPropagation()} - onChange={onSelect} - disabled={deleted ? true : !isDeleteWorkspaceAllowed} - /> - e.stopPropagation()} - > - {name} - - - + + + e.stopPropagation()} + onChange={onSelect} + disabled={deleted ? true : !isDeleteWorkspaceAllowed} + /> + e.stopPropagation()} > - - - - - + {name} + + + + + + + - - Recent Activity - + Recent Activity - + {loadingEvents ? ( - - + + + e.stopPropagation()}> Updated At: {formattoLongDate(updatedDate)} - - + + e.stopPropagation()}> Created At: {formattoLongDate(createdDate)} - - - + + + ); }; diff --git a/src/custom/Workspaces/WorkspaceTransferButton.tsx b/src/custom/Workspaces/WorkspaceTransferButton.tsx index 4eba00f1..7fb1cfea 100644 --- a/src/custom/Workspaces/WorkspaceTransferButton.tsx +++ b/src/custom/Workspaces/WorkspaceTransferButton.tsx @@ -101,7 +101,8 @@ export const RecordRow: React.FC = ({ title, name, date }) => { fontSize: 14, fontStyle: 'italic', color: `${theme.palette.text.disabled}`, - paddingRight: '12px' + paddingRight: '12px', + textAlign: 'end' }} > {date ? formatShortDate(date) : '-'} diff --git a/src/custom/Workspaces/hooks/useDesignAssignment.tsx b/src/custom/Workspaces/hooks/useDesignAssignment.tsx index 31f268ff..4f6f5fb3 100644 --- a/src/custom/Workspaces/hooks/useDesignAssignment.tsx +++ b/src/custom/Workspaces/hooks/useDesignAssignment.tsx @@ -95,9 +95,6 @@ const useDesignAssignment = ({ }; const getAddedAndRemovedDesigns = (allAssignedDesigns: Pattern[]): AddedAndRemovedDesigns => { - if (Array.isArray(workspaceDesignsData) && workspaceDesignsData.length === 0) { - return { addedDesignsIds: [], removedDesignsIds: [] }; - } const originalDesignsIds = workspaceDesignsData.map((design) => design.id); const updatedDesignsIds = allAssignedDesigns.map((design) => design.id); diff --git a/src/custom/Workspaces/styles.tsx b/src/custom/Workspaces/styles.tsx index 8e6ca707..998fe1fb 100644 --- a/src/custom/Workspaces/styles.tsx +++ b/src/custom/Workspaces/styles.tsx @@ -94,17 +94,6 @@ export const TableIconsContainer = styled('div')(() => ({ } })); -export const CardWrapper = styled(Card)(({ theme }) => ({ - width: '100%', - display: 'flex', - flexDirection: 'column', - backgroundColor: theme.palette.background.card, - padding: '20px', - '&:hover': { - cursor: 'pointer' - } -})); - export const BulkSelectCheckbox = styled(Checkbox)({ padding: 0, marginRight: '0.5rem', @@ -171,10 +160,7 @@ export const DescriptionLabel = styled(EmptyDescription)({ }); export const AllocationButton = styled(Box)(({ theme }) => ({ - background: - theme.palette.mode === 'dark' - ? theme.palette.background.brand?.default - : theme.palette.icon.weather, + background: theme.palette.background.brand?.default, padding: '10px 10px 1px 10px', borderRadius: '4px', height: '100%', @@ -257,7 +243,7 @@ export const IconWrapper = styled('div')(({ disabled = false } })); export const Record = styled(Grid)(({ theme }) => ({ - borderBottom: `1px solid ${theme.palette.border.default}`, + borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', flexDirection: 'row', padding: '5px 0' @@ -336,3 +322,85 @@ export const L5EditIcon = ({ onClick, disabled, bulk, style }: ExtendedEditIconP ); }; + +export const WorkspaceCardGrid = styled(Grid)({ + display: 'flex', + flexDirection: 'row' +}); + +export const DescriptionGrid = styled(Grid)({ + display: 'flex', + alignItems: 'center', + marginTop: 1 +}); + +export const AllocationColumnGrid = styled(Grid)({ + width: '-moz-available' +}); + +export const CardWrapper = styled(Card)(({ theme }) => ({ + width: '100%', + display: 'flex', + flexDirection: 'column', + backgroundColor: theme.palette.background.paper, + padding: theme.spacing(2.5), + cursor: 'pointer' +})); + +export const CardBackWrapper = styled(CardWrapper)(({ theme }) => ({ + minHeight: theme.spacing(50), + background: 'linear-gradient(180deg, #007366 0%, #000 100%)' +})); + +export const CardFrontWrapper = styled(CardWrapper)(({ theme }) => ({ + minHeight: theme.spacing(50), + + backgroundColor: theme.palette.background.paper, + boxShadow: 'none' +})); + +export const CardBackTopGrid = styled(Grid)({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between' +}); + +export const CardBackTitleGrid = styled(Grid)({ + display: 'flex', + alignItems: 'flex-start' +}); + +export const CardBackActionsGrid = styled(Grid)({ + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end' +}); + +export const RecentActivityTitle = styled(Typography)(({ theme }) => ({ + fontSize: '1.25rem', + fontWeight: 600, + padding: '0.5rem 0', + color: theme.palette.background.constant?.white +})); + +export const RecentActivityGrid = styled(Grid)({ + display: 'flex', + flexDirection: 'column', + maxHeight: '14.5rem', + overflowY: 'scroll' +}); + +export const DateGrid = styled(Grid)(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + position: 'absolute', + bottom: '20px', + width: '100%', + color: `${theme.palette.background.constant?.white}99`, + justifyContent: 'space-between', + paddingRight: '40px' +})); + +export const DateColumnGrid = styled(Grid)({ + textAlign: 'left' +});