Skip to content

Commit a16bd23

Browse files
committed
fix mismatch context menu color in queue management widgets, wan/lan seperate lines
1 parent a430bcd commit a16bd23

File tree

4 files changed

+62
-45
lines changed

4 files changed

+62
-45
lines changed

frontend/src/components/dashboard/base-items/widgets/MediaRequestManagerWidget.tsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -717,14 +717,6 @@ export const MediaRequestManagerWidget: React.FC<MediaRequestManagerWidgetProps>
717717
lineHeight: '1.5'
718718
}
719719
}
720-
},
721-
paper: {
722-
sx: {
723-
backgroundColor: 'rgba(30, 30, 30, 0.95)',
724-
backdropFilter: 'blur(10px)',
725-
border: '1px solid rgba(255,255,255,0.1)',
726-
maxHeight: 450 // Ensure paper can accommodate the listbox
727-
}
728720
}
729721
}}
730722
/>

frontend/src/components/dashboard/base-items/widgets/QueueManagementWidget.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -276,24 +276,17 @@ const QueueItemComponent: React.FC<QueueItemComponentProps> = ({ item, serviceNa
276276
anchorEl={menuAnchorEl}
277277
open={menuOpen}
278278
onClose={handleMenuClose}
279-
PaperProps={{
280-
sx: {
281-
backgroundColor: 'rgba(30, 30, 30, 0.95)',
282-
backdropFilter: 'blur(10px)',
283-
border: '1px solid rgba(255, 255, 255, 0.1)'
284-
}
285-
}}
286279
>
287280
<MenuItem
288281
onClick={() => handleRemove(true, false)}
289-
sx={{ fontSize: '0.9rem', py: 1, color: 'white' }}
282+
sx={{ fontSize: '0.9rem', py: 1 }}
290283
>
291284
<Delete fontSize='small' sx={{ mr: 1 }} />
292285
Remove from Queue
293286
</MenuItem>
294287
<MenuItem
295288
onClick={() => handleRemove(false, false)}
296-
sx={{ fontSize: '0.9rem', py: 1, color: 'white' }}
289+
sx={{ fontSize: '0.9rem', py: 1 }}
297290
>
298291
<Delete fontSize='small' sx={{ mr: 1 }} />
299292
Remove (Keep in Client)

frontend/src/components/dashboard/base-items/widgets/SystemMonitorWidget/SystemMonitorWidget.tsx

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const SystemMonitorWidget = ({ config, editMode }: SystemMonitorWidgetPro
5252
const [errorMessage, setErrorMessage] = useState<string | null>(null);
5353
const [isLoading, setIsLoading] = useState(false);
5454
const [internetTooltipOpen, setInternetTooltipOpen] = useState(false);
55-
const [publicIP, setPublicIP] = useState<string | null>(null);
55+
const [ipAddress, setIPAddress] = useState<{ wan?: string | null; lan?: string | null } | string | null>(null);
5656

5757
const { internetStatus } = useInternetStatus();
5858

@@ -452,19 +452,16 @@ export const SystemMonitorWidget = ({ config, editMode }: SystemMonitorWidgetPro
452452
const ipType = config?.ipDisplayType || 'wan';
453453

454454
if (ipType === 'both') {
455-
const parts = [];
456-
if (ips.wan) parts.push(`WAN: ${ips.wan}`);
457-
if (ips.lan) parts.push(`LAN: ${ips.lan}`);
458-
setPublicIP(parts.join(' • '));
455+
setIPAddress({ wan: ips.wan, lan: ips.lan });
459456
} else if (ipType === 'lan') {
460-
setPublicIP(ips.lan);
457+
setIPAddress(ips.lan);
461458
} else {
462-
setPublicIP(ips.wan);
459+
setIPAddress(ips.wan);
463460
}
464461
};
465462
fetchIPs();
466463
} else {
467-
setPublicIP(null);
464+
setIPAddress(null);
468465
}
469466
}, [showIP, internetStatus, config?.ipDisplayType]);
470467

@@ -551,13 +548,32 @@ export const SystemMonitorWidget = ({ config, editMode }: SystemMonitorWidgetPro
551548
<Tooltip
552549
title={
553550
<Box>
554-
<Typography variant='body2'>
551+
<Typography variant='body2' sx={{ textAlign: 'center' }}>
555552
{internetStatus === 'online' ? 'Internet Connected' : internetStatus === 'offline' ? 'No Internet Connection' : 'Checking Internet...'}
556553
</Typography>
557-
{showIP && publicIP && internetStatus === 'online' && (
558-
<Typography variant='caption' sx={{ display: 'block', mt: 0.5 }}>
559-
{(config?.ipDisplayType || 'wan') === 'wan' ? 'WAN: ' : (config?.ipDisplayType || 'wan') === 'lan' ? 'LAN: ' : ''}{publicIP}
560-
</Typography>
554+
{showIP && ipAddress && internetStatus === 'online' && (
555+
<Box sx={{ mt: 0.5 }}>
556+
{typeof ipAddress === 'object' ? (
557+
<>
558+
{ipAddress.wan && (
559+
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
560+
<Typography variant='caption'>WAN:</Typography>
561+
<Typography variant='caption'>{ipAddress.wan}</Typography>
562+
</Box>
563+
)}
564+
{ipAddress.lan && (
565+
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
566+
<Typography variant='caption'>LAN:</Typography>
567+
<Typography variant='caption'>{ipAddress.lan}</Typography>
568+
</Box>
569+
)}
570+
</>
571+
) : (
572+
<Typography variant='caption' sx={{ display: 'block', textAlign: 'right' }}>
573+
{(config?.ipDisplayType || 'wan') === 'wan' ? 'WAN: ' : 'LAN: '}{ipAddress}
574+
</Typography>
575+
)}
576+
</Box>
561577
)}
562578
</Box>
563579
}
@@ -572,7 +588,7 @@ export const SystemMonitorWidget = ({ config, editMode }: SystemMonitorWidgetPro
572588
disableFocusListener
573589
disableTouchListener
574590
PopperProps={{
575-
disablePortal: true,
591+
disablePortal: false,
576592
}}
577593
slotProps={{
578594
tooltip: {

frontend/src/components/navbar/ResponsiveAppBar.tsx

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const ResponsiveAppBar = ({ children }: Props) => {
5454
const [openUpdateModal, setOpenUpdateModal] = useState(false);
5555
const [openVersionModal, setOpenVersionModal] = useState(false);
5656
const [internetTooltipOpen, setInternetTooltipOpen] = useState(false);
57-
const [publicIP, setPublicIP] = useState<string | null>(null);
57+
const [ipAddress, setIPAddress] = useState<{ wan?: string | null; lan?: string | null } | string | null>(null);
5858
const [originalLayoutSnapshot, setOriginalLayoutSnapshot] = useState<DashboardItem[] | null>(null);
5959

6060
const { internetStatus } = useInternetStatus();
@@ -121,19 +121,16 @@ export const ResponsiveAppBar = ({ children }: Props) => {
121121
const ipType = config?.ipDisplayType || 'wan';
122122

123123
if (ipType === 'both') {
124-
const parts = [];
125-
if (ips.wan) parts.push(`WAN: ${ips.wan}`);
126-
if (ips.lan) parts.push(`LAN: ${ips.lan}`);
127-
setPublicIP(parts.join(' • '));
124+
setIPAddress({ wan: ips.wan, lan: ips.lan });
128125
} else if (ipType === 'lan') {
129-
setPublicIP(ips.lan);
126+
setIPAddress(ips.lan);
130127
} else {
131-
setPublicIP(ips.wan);
128+
setIPAddress(ips.wan);
132129
}
133130
};
134131
fetchIPs();
135132
} else {
136-
setPublicIP(null);
133+
setIPAddress(null);
137134
}
138135
}, [showIP, internetStatus, config?.ipDisplayType]);
139136

@@ -436,13 +433,32 @@ export const ResponsiveAppBar = ({ children }: Props) => {
436433
key='internet-tooltip'
437434
title={
438435
<Box>
439-
<Typography variant='body2'>
436+
<Typography variant='body2' sx={{ textAlign: 'center' }}>
440437
{internetStatus === 'online' ? 'Internet Connected' : internetStatus === 'offline' ? 'No Internet Connection' : 'Checking Internet...'}
441438
</Typography>
442-
{showIP && publicIP && internetStatus === 'online' && (
443-
<Typography variant='caption' sx={{ display: 'block', mt: 0.5 }}>
444-
{(config?.ipDisplayType || 'wan') === 'wan' ? 'WAN: ' : (config?.ipDisplayType || 'wan') === 'lan' ? 'LAN: ' : ''}{publicIP}
445-
</Typography>
439+
{showIP && ipAddress && internetStatus === 'online' && (
440+
<Box sx={{ mt: 0.5 }}>
441+
{typeof ipAddress === 'object' ? (
442+
<>
443+
{ipAddress.wan && (
444+
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
445+
<Typography variant='caption'>WAN:</Typography>
446+
<Typography variant='caption'>{ipAddress.wan}</Typography>
447+
</Box>
448+
)}
449+
{ipAddress.lan && (
450+
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
451+
<Typography variant='caption'>LAN:</Typography>
452+
<Typography variant='caption'>{ipAddress.lan}</Typography>
453+
</Box>
454+
)}
455+
</>
456+
) : (
457+
<Typography variant='caption' sx={{ display: 'block', textAlign: 'right' }}>
458+
{(config?.ipDisplayType || 'wan') === 'wan' ? 'WAN: ' : 'LAN: '}{ipAddress}
459+
</Typography>
460+
)}
461+
</Box>
446462
)}
447463
</Box>
448464
}
@@ -457,7 +473,7 @@ export const ResponsiveAppBar = ({ children }: Props) => {
457473
disableFocusListener
458474
disableTouchListener
459475
PopperProps={{
460-
disablePortal: true,
476+
disablePortal: false,
461477
}}
462478
slotProps={{
463479
tooltip: {

0 commit comments

Comments
 (0)