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

Refactor changed widgets to match themes.

Browse Source
This commit is contained in:
chight
2026-10-20 16:19:45 -07:00
parent 0ec4f27640
commit 0c178baa01
5 changed files with 144 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/IvansAlerts.jsx
+25 -23
View File
@@ -43,30 +43,31 @@ export default function IvansAlerts({ settings, widgetID }) {
}).join('\n\n');
navigator.clipboard.writeText(dataText)
.then(() => {
alert('Copied to clipboard!');
alert('Copied to clipboard!');
})
.catch((err => {
console.error('Failed to copy: ', err);
console.error('Failed to copy: ', err);
}));
updateSettings(widgetID, {copyToClipboard: false});
}
}, [settings, some_data, widgetID, updateSettings]);
// Cleaned hardcoded grays for transparent so glass shell shows through
if (isLoading) return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<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 (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
<Text color="red.400">{error}</Text>
</Flex>
);
if (some_data.length === 0) return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
<Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
</Flex>
);
@@ -78,7 +79,7 @@ export default function IvansAlerts({ settings, widgetID }) {
p={2} gap={2}
overflow="auto"
borderRadius="xl"
bg="gray.800"
bg="transparent" // Let the global widgetRecipe glass shell show through
>
{some_data.map((item, index) => {
if (thisWidget?.size === "large") return (
@@ -96,31 +97,31 @@ export default function IvansAlerts({ settings, widgetID }) {
gap={2}
borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.600"
bg="widgetItemBg"
>
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
<Text truncate>{item.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
</Flex>
<Flex w="100%" minW={0} justify="right">
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
</Flex>
</Flex>
</Collapsible.Trigger>
<Collapsible.Content w="100%" h="auto">
{/* This box needs to be at h="100%" for the pdf toolbar to appear */}
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
<Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
<Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
<Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Preparer: {item?.preparer}</Text>
<Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
<Flex direction="column" gap={2} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
<Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
<Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
</Flex>
{item?.files?.map((file, index) => {
return (
<Box w="100%" h="100%" key={index} p={1}>
<br />
<Flex mb={2} justify="space-between">
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
<Box borderRadius="lg" bg="gray.700" color="gray.300" pl={1} pr={1} fontSize={13} asChild>
<Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
<Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
<a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
Open
</a>
@@ -131,8 +132,8 @@ export default function IvansAlerts({ settings, widgetID }) {
type="application/pdf"
style={{ width: '100%', height: '100%', display: 'block' }}
>
<Flex w="100%" h="100%" p={4} color="gray.400">
<Text mb={2} color="fg.muted">
<Flex w="100%" h="100%" p={4} color="widgetTextMuted">
<Text mb={2}>
Your browser cannot display this PDF directly.
</Text>
<a href={file?.url} target="_blank">
@@ -151,19 +152,20 @@ export default function IvansAlerts({ settings, widgetID }) {
)
else if (thisWidget?.size === "small") return (
<Flex direction="row"
key={index} // Added missing map key
w="100%"
justify="space-between" align="center"
p={1} pl={3} pr={3}
gap={2}
borderRadius="lg"
bg="gray.600"
bg="widgetItemBg"
>
<Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
<Text truncate>{item.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
<Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
</Flex>
<Flex w="100%" minW={0} justify="right">
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
<Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
</Flex>
</Flex>
)