Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues 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;
}> = ({ option, widgetId, propName: key, value, handleChange }) => {
const { t } = useTranslation([`modules/${widgetId}`, 'common']);
const { fn } = useMantineTheme();
const { fn, colorScheme } = useMantineTheme();
switch (option.type) {
case 'switch':
var info = option.info !== undefined ? option.info : false;
return (
<Group align="center" spacing="sm">
<Switch
@@ -148,20 +149,21 @@ const WidgetOptionTypeSwitch: FC<{
onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
{...option.inputProps}
/>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
</Group>
);
case 'text':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -174,12 +176,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'multi-select':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -194,12 +197,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'select':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -214,12 +218,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'number':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -232,12 +237,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'slider':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -264,6 +270,7 @@ const WidgetOptionTypeSwitch: FC<{
);
case 'draggable-list':
var info = option.info !== undefined ? option.info : false;
/* eslint-disable no-case-declarations */
const typedVal = value as IDraggableListInputValue['defaultValue'];
@@ -290,8 +297,8 @@ const WidgetOptionTypeSwitch: FC<{
<Stack spacing="xs">
<Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -319,12 +326,13 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'multiple-text':
var info = option.info !== undefined ? option.info : false;
return (
<Stack spacing={0}>
<Group align="center" spacing="sm">
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}
@@ -347,13 +355,14 @@ const WidgetOptionTypeSwitch: FC<{
</Stack>
);
case 'draggable-editable-list':
var info = option.info !== undefined ? option.info : false;
const { t: translateDraggableList } = useTranslation('widgets/draggable-list');
return (
<Stack spacing="xs">
<Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text>
{option.info?
<Tooltip.Floating label={t(`descriptor.settings.${key}.info`)} position="right-start" color={fn.darken(fn.primaryColor(), 0.5)}>
{info?
<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 }} />
</Tooltip.Floating> : undefined
}