From d01453ea1d8c24169808d08e9392325af71265a0 Mon Sep 17 00:00:00 2001 From: Charles Date: Thu, 1 Dec 2022 08:51:11 +0000 Subject: [PATCH] [WIFI-11858] Sticky device page top bar Signed-off-by: Charles --- package-lock.json | 4 +- package.json | 2 +- src/components/Containers/Card/index.tsx | 19 ++- src/index.css | 2 +- src/pages/Device/Wrapper.tsx | 171 ++++++++++++++++------- 5 files changed, 144 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index cc4fd9e..279588c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ucentral-client", - "version": "2.8.0(27)", + "version": "2.8.0(28)", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ucentral-client", - "version": "2.8.0(27)", + "version": "2.8.0(28)", "license": "ISC", "dependencies": { "@chakra-ui/icons": "^2.0.11", diff --git a/package.json b/package.json index 024cddb..708f361 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ucentral-client", - "version": "2.8.0(27)", + "version": "2.8.0(30)", "description": "", "private": true, "main": "index.tsx", diff --git a/src/components/Containers/Card/index.tsx b/src/components/Containers/Card/index.tsx index 45dfdb1..ab0c3ff 100644 --- a/src/components/Containers/Card/index.tsx +++ b/src/components/Containers/Card/index.tsx @@ -1,7 +1,22 @@ import React from 'react'; -import { BackgroundProps, Box, InteractivityProps, LayoutProps, SpaceProps, useStyleConfig } from '@chakra-ui/react'; +import { + BackgroundProps, + Box, + EffectProps, + InteractivityProps, + LayoutProps, + PositionProps, + SpaceProps, + useStyleConfig, +} from '@chakra-ui/react'; -export interface CardProps extends LayoutProps, SpaceProps, BackgroundProps, InteractivityProps { +export interface CardProps + extends LayoutProps, + SpaceProps, + BackgroundProps, + InteractivityProps, + PositionProps, + EffectProps { variant?: string; onClick?: () => void; className?: string; diff --git a/src/index.css b/src/index.css index 8647090..e932f6e 100644 --- a/src/index.css +++ b/src/index.css @@ -2,7 +2,7 @@ display: -webkit-box; display: -ms-flexbox; display: flex; - margin-left: -30px; + margin-left: -20px; width: auto; } .my-masonry-grid_column { diff --git a/src/pages/Device/Wrapper.tsx b/src/pages/Device/Wrapper.tsx index 0f0efc8..96c676b 100644 --- a/src/pages/Device/Wrapper.tsx +++ b/src/pages/Device/Wrapper.tsx @@ -1,5 +1,18 @@ import * as React from 'react'; -import { Box, Heading, HStack, Spacer, Tag, TagLabel, TagLeftIcon, Tooltip, useDisclosure } from '@chakra-ui/react'; +import { + Box, + Heading, + HStack, + Portal, + Spacer, + Tag, + TagLabel, + TagLeftIcon, + Tooltip, + useBreakpoint, + useColorModeValue, + useDisclosure, +} from '@chakra-ui/react'; import { Heart, HeartBreak, LockSimple, WifiHigh, WifiSlash } from 'phosphor-react'; import { useTranslation } from 'react-i18next'; import Masonry from 'react-masonry-css'; @@ -18,6 +31,7 @@ import { ConfigureModal } from 'components/Modals/ConfigureModal'; import { EventQueueModal } from 'components/Modals/EventQueueModal'; import FactoryResetModal from 'components/Modals/FactoryResetModal'; import { FirmwareUpgradeModal } from 'components/Modals/FirmwareUpgradeModal'; +import { useScriptModal } from 'components/Modals/ScriptModal/useScriptModal'; import { TelemetryModal } from 'components/Modals/TelemetryModal'; import { TraceModal } from 'components/Modals/TraceModal'; import { WifiScanModal } from 'components/Modals/WifiScanModal'; @@ -29,6 +43,7 @@ type Props = { const DevicePageWrapper = ({ serialNumber }: Props) => { const { t } = useTranslation(); + const breakpoint = useBreakpoint(); const getDevice = useGetDevice({ serialNumber }); const getStatus = useGetDeviceStatus({ serialNumber }); const getHealth = useGetDeviceHealthChecks({ serialNumber, limit: 1 }); @@ -39,7 +54,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => { const upgradeModalProps = useDisclosure(); const telemetryModalProps = useDisclosure(); const traceModalProps = useDisclosure(); - + const scriptModal = useScriptModal(); const connectedTag = React.useMemo(() => { if (!getStatus.data) return null; @@ -83,6 +98,10 @@ const DevicePageWrapper = ({ serialNumber }: Props) => { ); }, [getStatus.data, getHealth.data]); + // Sticky-top styles + const isCompact = breakpoint === 'base' || breakpoint === 'sm' || breakpoint === 'md'; + const boxShadow = useColorModeValue('0px 7px 23px rgba(0, 0, 0, 0.05)', 'none'); + const refresh = () => { getDevice.refetch(); getStatus.refetch(); @@ -91,54 +110,110 @@ const DevicePageWrapper = ({ serialNumber }: Props) => { return ( <> - - - - {serialNumber} - {connectedTag} - {healthTag} - {getDevice.data?.restrictedDevice && ( - - - {t('devices.restricted')} - - )} - - - - {getDevice?.data && ( - + + + {serialNumber} + {connectedTag} + {healthTag} + {getDevice.data?.restrictedDevice && ( + + + {t('devices.restricted')} + + )} + + + + {getDevice?.data && ( + + )} + - )} - - - - - - - - - - - - + + + + ) : ( + + + + + {serialNumber} + {connectedTag} + {healthTag} + {getDevice.data?.restrictedDevice && ( + + + {t('devices.restricted')} + + )} + + + + {getDevice?.data && ( + + )} + + + + + + )} + + + + + + + + {scriptModal.modal} +