From 2301e3b35264b82ee1302a81f2bbcf36cec00e1a Mon Sep 17 00:00:00 2001 From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com> Date: Fri, 10 Nov 2023 14:22:47 +0800 Subject: [PATCH] styles(media): adjustments from design feedback --- .../CreateMediaFolderModal.stories.tsx | 1 + .../CreateMediaFolderModal.tsx | 53 ++++-- .../DeleteMediaModal/DeleteMediaModal.tsx | 2 +- .../MoveMediaModal/MoveMediaModal.tsx | 2 +- src/layouts/Media/Media.tsx | 17 +- .../Media/components/FilePreviewCard.tsx | 159 ++++++++++++------ 6 files changed, 165 insertions(+), 69 deletions(-) diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx index 6315eb4e9a..1907dc6f8a 100644 --- a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx +++ b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.stories.tsx @@ -56,6 +56,7 @@ const createMediaFolderModalTemplate: StoryFn<
- + - Create a new {singularDirectoryLabel} - {originalSelectedMedia.length > 0 - ? ` with ${originalSelectedMedia.length} ${ - originalSelectedMedia.length === 1 - ? singularMediaLabel - : pluralMediaLabel - }` - : ""} + + Create a new {singularDirectoryLabel} + {originalSelectedMedia.length > 0 + ? ` with ${originalSelectedMedia.length} ${ + originalSelectedMedia.length === 1 + ? singularMediaLabel + : pluralMediaLabel + }` + : ""} + @@ -213,15 +220,28 @@ export const CreateMediaFolderModal = ({ py="1rem" > - {mediaData.map( - (data) => + {mediaData.map((data) => + data && mediaType === "images" ? ( + + selectedData.filePath === data.mediaPath + )} + isMenuNeeded={false} + onClick={() => handleSelect(data)} + onCheck={() => handleSelect(data)} + /> + ) : ( data && ( - handleSelect(data)} /> ) + ) )} diff --git a/src/components/DeleteMediaModal/DeleteMediaModal.tsx b/src/components/DeleteMediaModal/DeleteMediaModal.tsx index f4ffd0642f..320ba4c1c4 100644 --- a/src/components/DeleteMediaModal/DeleteMediaModal.tsx +++ b/src/components/DeleteMediaModal/DeleteMediaModal.tsx @@ -64,7 +64,7 @@ export const DeleteMediaModal = ({ {selectedMedia.length === 1 && ( <> - + Delete {selectedMedia[0].filePath.split("/").pop()}? diff --git a/src/components/MoveMediaModal/MoveMediaModal.tsx b/src/components/MoveMediaModal/MoveMediaModal.tsx index 67fe270b3a..afcf5b8d6e 100644 --- a/src/components/MoveMediaModal/MoveMediaModal.tsx +++ b/src/components/MoveMediaModal/MoveMediaModal.tsx @@ -118,7 +118,7 @@ export const MoveMediaModal = ({ - + Move{" "} {selectedMedia.length === 1 ? getLastChildOfPath(selectedMedia[0].filePath) diff --git a/src/layouts/Media/Media.tsx b/src/layouts/Media/Media.tsx index 26c51e271f..56cbf1bd6d 100644 --- a/src/layouts/Media/Media.tsx +++ b/src/layouts/Media/Media.tsx @@ -357,6 +357,7 @@ export const Media = (): JSX.Element => { data) || []} isWriteDisabled={isWriteDisabled} @@ -467,7 +468,11 @@ export const Media = (): JSX.Element => { onMoveModalOpen()}> - Move images to album + Move{" "} + {selectedMedia.length === 1 + ? singularMediaLabel + : pluralMediaLabel}{" "} + to {singularDirectoryLabel} {directoryLevel < MAX_MEDIA_LEVELS && ( @@ -479,7 +484,10 @@ export const Media = (): JSX.Element => { mr="1rem" fontSize="1.25rem" /> - Create new album with images + Create new {singularDirectoryLabel} with{" "} + {selectedMedia.length === 1 + ? singularMediaLabel + : pluralMediaLabel} )} @@ -638,9 +646,14 @@ export const Media = (): JSX.Element => { data && ( + selectedData.filePath === data.mediaPath + )} onOpen={() => setIndividualMedia(getSelectedMediaDto(data)) } + onCheck={() => handleSelect(data)} onDelete={onDeleteModalOpen} onMove={onMoveModalOpen} /> diff --git a/src/layouts/Media/components/FilePreviewCard.tsx b/src/layouts/Media/components/FilePreviewCard.tsx index 1cfd0629ec..69f3d74827 100644 --- a/src/layouts/Media/components/FilePreviewCard.tsx +++ b/src/layouts/Media/components/FilePreviewCard.tsx @@ -1,81 +1,142 @@ -import { - LinkBox, - LinkOverlay, - Icon, - Text, - Divider, - HStack, - Box, -} from "@chakra-ui/react" +import { Box, Divider, HStack, Icon, Text } from "@chakra-ui/react" +import { Checkbox } from "@opengovsg/design-system-react" import { BiChevronRight, BiEditAlt, BiFolder, BiTrash } from "react-icons/bi" import { Link as RouterLink, useRouteMatch } from "react-router-dom" import { Card, CardBody } from "components/Card" import { ContextMenu } from "components/ContextMenu" +import useRedirectHook from "hooks/useRedirectHook" + import { BxFileArchiveSolid } from "assets" interface FilePreviewCardProps { name: string + isSelected: boolean + isMenuNeeded?: boolean onOpen?: () => void + onClick?: () => void + onCheck?: () => void onDelete?: () => void onMove?: () => void } export const FilePreviewCard = ({ name, + isSelected, + isMenuNeeded = true, onOpen, + onClick, + onCheck, onDelete, onMove, }: FilePreviewCardProps): JSX.Element => { const { url } = useRouteMatch() + const { setRedirectToPage } = useRedirectHook() const encodedName = encodeURIComponent(name) return ( - - - + {/* Checkbox overlay */} + { + if (onCheck) onCheck() + }} + /> + + { + // For some weird reason, the onClick event is treated as a submit event + // We can safely disable the default behaviour here since we define the + // onClick behaviour ourselves + e.preventDefault() + + if (onClick) { + onClick() + } else { + setRedirectToPage(`${url}/editMediaSettings/${encodedName}`) + } + }} + > + - - - - - {name} - - - - - - - - - } - as={RouterLink} - to={`${url}/editMediaSettings/${encodedName}`} - > - Edit details - - } onClick={onMove}> - - Move to - - - - <> - + + {!isSelected && ( + + )} + + {name} + + + + + + {isMenuNeeded && ( + + + } - color="interaction.critical.default" - onClick={onDelete} + icon={} + as={RouterLink} + to={`${url}/editMediaSettings/${encodedName}`} > - Delete file + Edit details + + } onClick={onMove}> + + Move to + + - - - + <> + + } + color="interaction.critical.default" + onClick={onDelete} + > + Delete file + + + + + )} ) }