chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: comm coor widget settings ui

Browse Source 
wip: themes for checkboxes
This commit is contained in:
vkuchenik
2026-11-09 08:00:02 -08:00
parent 7b3e7d3d0c
commit 5798b90ab7
5 changed files with 164 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/CommCoorReport.jsx
+6 -3
View File
@@ -114,19 +114,22 @@ export default function CommCoorReport({ settings, widgetID }) {
}
}, [settings, widgetID, updateSettings, apiData]);
if (isLoading) return (
if (isLoading)
return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
<Spinner size="xl" color="blue.400" thickness="4px"/>
</Flex>
);
if (error) return (
if (error)
return (
<Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
<Text color="red.400">{error}</Text>
</Flex>
);
if (!apiData) return (
if (!apiData)
return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
<Text textAlign="center" color="gray.400">No data</Text>
</Flex>
client/src/components/Widgets/IvansAlerts.jsx
+5 -7
View File
@@ -117,16 +117,14 @@ export default function IvansAlerts({ settings, widgetID }) {
</Flex>
{item?.files?.map((file, index) => {
return (
<Box w="100%" h="100%" key={index} p={1}>
<Flex direction="row" mb={2} gap={1} justify="space-between">
<Box w="100%" h="100%" key={index}>
<Flex direction="row" w="100%">
<Text w="100%" p={1} fontWeight="semibold" bg="widgetBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
<a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
<Text mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
File: {file?.name}
<Text truncate w="100%" p={1} bg="widgetBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
{file?.name}
</Text>
</a>
{/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
{/* Open*/}
{/*</Box>*/}
</Flex>
<object
data={`${file?.url}#view=FitH&toolbar=1`}
client/src/components/Widgets/settings/CommCoorReportSettings.jsx
+23 -10
View File
@@ -1,4 +1,4 @@
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
import {Button, Field, Flex, Input, Switch, Text, Fieldset, Separator, HStack} from "@chakra-ui/react";
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
import {useState} from "react";
@@ -17,17 +17,17 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
return (
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
{/* COPY TO CLIPBOARD */}
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
{/* DOWNLOAD REPORT */}
<Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
<Fieldset.Root>
<Fieldset.Content>
<HStack>
<Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
<Separator flex="1" size="sm"/> {/*line seperator*/}
</HStack>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
<Flex direction="column" w="100%" h="100%" justify="center" gap="2">
<Field.Root invalid={!!startError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
<Text w="50%" align="center" justify="center" mt={2} color="text">
Start Date
</Text>
<Flex direction="column" w="100%">
@@ -53,7 +53,7 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
</Field.Root>
<Field.Root invalid={!!endError}>
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
<Text w="50%" align="center" justify="center" mt={2} color="text">
End Date
</Text>
<Flex direction="column" w="100%">
@@ -78,6 +78,19 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
</Flex>
</Field.Root>
</Flex>
<HStack>
<Text flexShrink="0" fontWeight="semibold">Tools</Text>
<Separator flex="1" size="sm"/> {/*line seperator*/}
</HStack>
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
{/* COPY TO CLIPBOARD */}
<Button w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy Report</Button>
{/* DOWNLOAD REPORT */}
<Button w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleDownloadReport}>Download Report</Button>
</Flex>
</Fieldset.Content>
</Fieldset.Root>
</Flex>
)
}
client/src/components/Widgets/settings/IvansAlertsSettings.jsx
+45 -29
View File
@@ -1,4 +1,16 @@
import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} from "@chakra-ui/react";
import {
Button,
Field,
Flex,
Input,
Switch,
Text,
Fieldset,
CheckboxCard,
Separator,
HStack,
useSlotRecipe
} from "@chakra-ui/react";
import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
import {useState} from "react";
@@ -7,6 +19,10 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
const [startError, setStartError] = useState(null);
const [endError, setEndError] = useState(null);
const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
const popoverStyles = popoverRecipe();
const handleCopyToClipboard = () => {
updateSettings(widgetId, {copyToClipboard: true});
}
@@ -25,12 +41,11 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
<Fieldset.Content>
{/* SELECTING DATE RANGE */}
<Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Date Range Selection
</Text>
<hr style={{borderColor: "red.700"}} /> {/*line seperator*/}
</Flex>
<HStack>
<Separator flex="1" size="md"/> {/*line seperator*/}
<Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
<Separator flex="1" size="md"/> {/*line seperator*/}
</HStack>
{/* start date */}
<Field.Root invalid={!!startError}>
@@ -49,6 +64,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
type="date"
w="100%"
borderRadius="lg"
bg="widgetBadgeBg"
value={currentSettings?.startDate || ""}
onChange={(e) => {
const value = e.target.value;
@@ -90,6 +106,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
type="date"
w="100%"
borderRadius="lg"
bg="widgetBadgeBg"
value={currentSettings?.endDate || ""}
onChange={(e) => {
const value = e.target.value;
@@ -114,18 +131,17 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
</Flex>
{/* SORTS */}
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Sorts
</Text>
<hr /> {/*line seperator*/}
</Flex>
<HStack>
<Separator flex="1" size="md"/> {/*line seperator*/}
<Text flexShrink="0" fontWeight="semibold">Sorts</Text>
<Separator flex="1" size="md"/> {/*line seperator*/}
</HStack>
{/* time sort */}
<Switch.Root
checked={currentSettings?.activeSorts?.timeSort === "asc"}
onCheckedChange={handleTimeSort}
colorPalette="blue"
colorPalette="orange"
>
<Switch.HiddenInput />
<Switch.Control>
@@ -138,7 +154,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
<Switch.Root
checked={currentSettings?.activeSorts?.volcanoSort}
onCheckedChange={handleVolcanoSort}
colorPalette="blue"
colorPalette="orange"
>
<Switch.HiddenInput />
<Switch.Control>
@@ -147,18 +163,19 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
<Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
</Switch.Root>
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Filters
</Text>
<hr /> {/*line seperator*/}
</Flex>
<HStack>
<Separator flex="1" size="md"/> {/*line seperator*/}
<Text flexShrink="0" fontWeight="semibold">Filters</Text>
<Separator flex="1" size="md"/> {/*line seperator*/}
</HStack>
{/* elevated levels */}
<CheckboxCard.Root
size="sm"
variant="surface"
borderRadius="lg"
css={popoverStyles.checkboxcard}
defaultChecked={currentSettings?.filters?.elevatedLevels}
onCheckedChange={(e) => {
updateSettings(widgetId, {
@@ -177,18 +194,17 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
Only Elevated Levels
</CheckboxCard.Label>
</CheckboxCard.Content>
<CheckboxCard.Indicator />
<CheckboxCard.Indicator css={popoverStyles.checkboxcard} />
</CheckboxCard.Control>
</CheckboxCard.Root>
{/* COPY TO CLIPBOARD */}
<Flex direction="column">
<Text w="100%" fontWeight="bold">
Tools
</Text>
<hr /> {/*line seperator*/}
<Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
</Flex>
<HStack>
<Separator flex="1" size="md"/> {/*line seperator*/}
<Text flexShrink="0" fontWeight="semibold">Tools</Text>
<Separator flex="1" size="md"/> {/*line seperator*/}
</HStack>
<Button mt={-2} colorPalette="orange" w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
</Fieldset.Content>
</Fieldset.Root>
</Flex>
client/src/theme.js
+28 -1
View File
@@ -346,7 +346,7 @@ const widgetRecipe = defineSlotRecipe({
// 6. TRUE POPOVER: Compact floating card for 3-dots menus
const glassPopoverRecipe = defineSlotRecipe({
slots: ["content", "arrow", "positioner"],
slots: ["content", "arrow", "positioner", "checkboxcard", "checkbox"],
base: {
content: {
...glassSurface,
@@ -357,6 +357,33 @@ const glassPopoverRecipe = defineSlotRecipe({
backdropFilter: "blur(15px)",
WebkitBackdropFilter: "blur(15px)",
},
checkboxcard: {
bg: "widgetItemBg",
_hover: {
bg: "widgetBadgeBg"
},
_checked: {
bg: "orange.700"
},
_dark: {
bg: "widgetBadgeBg",
_hover: {
bg: "widgetInnerBadgeBg"
},
_checked: {
bg: "orange.700",
_hover: {
bg: "orange.700/50"
}
}
}
},
checkbox: {
bg: "widgetInnerBadgeBg",
_checked: {
bg: "orange"
}
}
},
});