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}
+