From 4b69109a141f0e3239d29f845b58727eee8d945b Mon Sep 17 00:00:00 2001 From: Aaryan Porwal Date: Wed, 24 May 2023 12:53:55 +0530 Subject: [PATCH] fix(detailed pages): Make delete btns more visible on detail pages update breakpoint, btn look and text and new hook --- src/context/useDeleteIcon.tsx | 13 +++++++++++++ .../instances/actions/DeleteInstanceBtn.tsx | 11 +++++++---- .../profiles/actions/DeleteProfileBtn.tsx | 11 +++++++---- src/pages/storage/StorageDetailHeader.tsx | 1 + src/pages/storage/actions/DeleteStorageBtn.tsx | 18 ++++++++++++++---- src/sass/_instance_detail_page.scss | 6 ------ src/sass/_profile_detail_page.scss | 6 ------ src/sass/_rename_header.scss | 2 +- 8 files changed, 43 insertions(+), 25 deletions(-) create mode 100644 src/context/useDeleteIcon.tsx diff --git a/src/context/useDeleteIcon.tsx b/src/context/useDeleteIcon.tsx new file mode 100644 index 000000000..5d52275be --- /dev/null +++ b/src/context/useDeleteIcon.tsx @@ -0,0 +1,13 @@ +import useEventListener from "@use-it/event-listener"; +import { useState } from "react"; +import { isWidthBelow } from "util/helpers"; + +export const useDeleteIcon = (): boolean => { + const [isSmallScreen, setIsSmallScreen] = useState(isWidthBelow(620)); + const handleResize = () => { + const newSmall = isWidthBelow(620); + newSmall !== isSmallScreen && setIsSmallScreen(newSmall); + }; + useEventListener("resize", handleResize); + return isSmallScreen; +}; diff --git a/src/pages/instances/actions/DeleteInstanceBtn.tsx b/src/pages/instances/actions/DeleteInstanceBtn.tsx index 6cef365b8..7ec1f3084 100644 --- a/src/pages/instances/actions/DeleteInstanceBtn.tsx +++ b/src/pages/instances/actions/DeleteInstanceBtn.tsx @@ -6,12 +6,14 @@ import { useNavigate } from "react-router-dom"; import { useNotify } from "context/notify"; import ItemName from "components/ItemName"; import { deletableStatuses } from "util/instanceDelete"; +import { useDeleteIcon } from "context/useDeleteIcon"; interface Props { instance: LxdInstance; } const DeleteInstanceBtn: FC = ({ instance }) => { + const isDeleteIcon = useDeleteIcon(); const notify = useNotify(); const [isLoading, setLoading] = useState(false); const navigate = useNavigate(); @@ -42,11 +44,11 @@ const DeleteInstanceBtn: FC = ({ instance }) => { return ( Are you sure you want to delete instance{" "} @@ -57,7 +59,8 @@ const DeleteInstanceBtn: FC = ({ instance }) => { confirmButtonLabel="Delete" onConfirm={handleDelete} isDisabled={isDisabled} - isDense + isDense={false} + icon={isDeleteIcon ? "delete" : undefined} /> ); }; diff --git a/src/pages/profiles/actions/DeleteProfileBtn.tsx b/src/pages/profiles/actions/DeleteProfileBtn.tsx index f3fe471f6..3b6c07116 100644 --- a/src/pages/profiles/actions/DeleteProfileBtn.tsx +++ b/src/pages/profiles/actions/DeleteProfileBtn.tsx @@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom"; import { LxdProfile } from "types/profile"; import { useNotify } from "context/notify"; import ItemName from "components/ItemName"; +import { useDeleteIcon } from "context/useDeleteIcon"; interface Props { profile: LxdProfile; @@ -17,6 +18,7 @@ const DeleteProfileBtn: FC = ({ project, featuresProfiles, }) => { + const isDeleteIcon = useDeleteIcon(); const notify = useNotify(); const [isLoading, setLoading] = useState(false); const navigate = useNavigate(); @@ -38,11 +40,11 @@ const DeleteProfileBtn: FC = ({ return ( Are you sure you want to delete profile{" "} @@ -53,7 +55,8 @@ const DeleteProfileBtn: FC = ({ confirmButtonLabel="Delete" onConfirm={handleDelete} isDisabled={profile.name === "default" || !featuresProfiles} - isDense + isDense={false} + icon={isDeleteIcon ? "delete" : undefined} /> ); }; diff --git a/src/pages/storage/StorageDetailHeader.tsx b/src/pages/storage/StorageDetailHeader.tsx index 383dcb27b..84ad7451a 100644 --- a/src/pages/storage/StorageDetailHeader.tsx +++ b/src/pages/storage/StorageDetailHeader.tsx @@ -64,6 +64,7 @@ const StorageDetailHeader: FC = ({ name, storagePool, project }) => { key="delete" storage={storagePool} project={project} + shouldExpand={true} /> } isLoaded={true} diff --git a/src/pages/storage/actions/DeleteStorageBtn.tsx b/src/pages/storage/actions/DeleteStorageBtn.tsx index 85b15c521..65b1d2b5e 100644 --- a/src/pages/storage/actions/DeleteStorageBtn.tsx +++ b/src/pages/storage/actions/DeleteStorageBtn.tsx @@ -7,13 +7,20 @@ import { queryKeys } from "util/queryKeys"; import { useNotify } from "context/notify"; import ItemName from "components/ItemName"; import { useNavigate } from "react-router-dom"; +import { useDeleteIcon } from "context/useDeleteIcon"; interface Props { storage: LxdStoragePool; project: string; + shouldExpand?: boolean; } -const DeleteStorageBtn: FC = ({ storage, project }) => { +const DeleteStorageBtn: FC = ({ + storage, + project, + shouldExpand = false, +}) => { + const isSmallScreen = useDeleteIcon(); const navigate = useNavigate(); const notify = useNotify(); const [isLoading, setLoading] = useState(false); @@ -40,11 +47,13 @@ const DeleteStorageBtn: FC = ({ storage, project }) => { return ( Are you sure you want to delete storage{" "} @@ -54,7 +63,8 @@ const DeleteStorageBtn: FC = ({ storage, project }) => { } confirmButtonLabel="Delete" onConfirm={handleDelete} - isDense={true} + isDense={!shouldExpand} + icon={!isSmallScreen && shouldExpand ? undefined : "delete"} /> ); }; diff --git a/src/sass/_instance_detail_page.scss b/src/sass/_instance_detail_page.scss index 66f19c243..2e5810c48 100644 --- a/src/sass/_instance_detail_page.scss +++ b/src/sass/_instance_detail_page.scss @@ -9,12 +9,6 @@ } } - .delete-instance-btn { - margin: 0; - padding-left: $sph--x-large; - padding-right: $sph--x-large; - } - .p-panel__content { margin-top: -$spv--medium; padding-bottom: 0; diff --git a/src/sass/_profile_detail_page.scss b/src/sass/_profile_detail_page.scss index 2ebd1e60a..cb99f8f31 100644 --- a/src/sass/_profile_detail_page.scss +++ b/src/sass/_profile_detail_page.scss @@ -1,10 +1,4 @@ .profile-detail-page { - .delete-profile-btn { - margin: 0; - padding-left: $sph--x-large; - padding-right: $sph--x-large; - } - .p-panel__content { margin-top: -$spv--medium; padding-bottom: 0; diff --git a/src/sass/_rename_header.scss b/src/sass/_rename_header.scss index 455313e3b..c6c8772de 100644 --- a/src/sass/_rename_header.scss +++ b/src/sass/_rename_header.scss @@ -4,7 +4,7 @@ flex-direction: column; max-width: none; - @include large { + @include extra-large { align-items: center; flex-direction: row; }