jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

💄 Tooltip background not user selected anymore

Browse Source
This commit is contained in:
Tagaishi
2023-07-25 21:52:36 +02:00
parent 5cc2fac8bc
commit a15469698c
1 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
View File

@@ -136,10 +136,11 @@ const WidgetOptionTypeSwitch: FC<{
handleChange: (key: string, value: IntegrationOptionsValueType) => void; handleChange: (key: string, value: IntegrationOptionsValueType) => void;
}> = ({ option, widgetId, propName: key, value, handleChange }) => { }> = ({ option, widgetId, propName: key, value, handleChange }) => {
const { t } = useTranslation([`modules/${widgetId}`, 'common']); const { t } = useTranslation([`modules/${widgetId}`, 'common']);
const { fn } = useMantineTheme(); const { fn, colorScheme } = useMantineTheme();
switch (option.type) { switch (option.type) {
case 'switch': case 'switch':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Switch <Switch
@@ -148,20 +149,21 @@ const WidgetOptionTypeSwitch: FC<{
onChange={(ev) => handleChange(key, ev.currentTarget.checked)} onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
{...option.inputProps} {...option.inputProps}
/> />
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
</Group> </Group>
); );
case 'text': case 'text':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -174,12 +176,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'multi-select': case 'multi-select':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -194,12 +197,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'select': case 'select':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -214,12 +218,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'number': case 'number':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -232,12 +237,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'slider': case 'slider':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -264,6 +270,7 @@ const WidgetOptionTypeSwitch: FC<{
); );
case 'draggable-list': case 'draggable-list':
var info = option.info !== undefined ? option.info : false;
/* eslint-disable no-case-declarations */ /* eslint-disable no-case-declarations */
const typedVal = value as IDraggableListInputValue['defaultValue']; const typedVal = value as IDraggableListInputValue['defaultValue'];
@@ -290,8 +297,8 @@ const WidgetOptionTypeSwitch: FC<{
<Stack spacing="xs"> <Stack spacing="xs">
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text> <Text>{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -319,12 +326,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'multiple-text': case 'multiple-text':
var info = option.info !== undefined ? option.info : false;
return ( return (
<Stack spacing={0}> <Stack spacing={0}>
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text> <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }
@@ -347,13 +355,14 @@ const WidgetOptionTypeSwitch: FC<{
</Stack> </Stack>
); );
case 'draggable-editable-list': case 'draggable-editable-list':
var info = option.info !== undefined ? option.info : false;
const { t: translateDraggableList } = useTranslation('widgets/draggable-list'); const { t: translateDraggableList } = useTranslation('widgets/draggable-list');
return ( return (
<Stack spacing="xs"> <Stack spacing="xs">
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text> <Text>{t(`descriptor.settings.${key}.label`)}</Text>
{option.info? {info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}> <Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" }>
<IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} /> <IconAlertCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
</Tooltip.Floating> : undefined </Tooltip.Floating> : undefined
} }