Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-17 10:41:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Multiline tooltip and 🎨 one line code rework

Browse Source
This commit is contained in:
Tagaishi
2023-07-25 22:16:59 +02:00
parent a15469698c
commit c56edfdc65
1 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -150,7 +150,14 @@ const WidgetOptionTypeSwitch: FC<{
{...option.inputProps} {...option.inputProps}
/> />
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -163,7 +170,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -182,7 +196,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -203,7 +224,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -224,7 +252,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -243,7 +278,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -298,7 +340,14 @@ const WidgetOptionTypeSwitch: FC<{
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text> <Text>{t(`descriptor.settings.${key}.label`)}</Text>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -332,7 +381,14 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }
@@ -362,7 +418,14 @@ const WidgetOptionTypeSwitch: FC<{
<Group align="center" spacing="sm"> <Group align="center" spacing="sm">
<Text>{t(`descriptor.settings.${key}.label`)}</Text> <Text>{t(`descriptor.settings.${key}.label`)}</Text>
{info? {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" }> <Tooltip.Floating
label={t(`descriptor.settings.${key}.info`)}
position="right-start"
c={ colorScheme === 'light' ? "black" : "dark.0" }
color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
width={300}
multiline
>
<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
} }