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

🔒️ Link out of translation files

Browse Source
This commit is contained in:
Tagaishi
2023-08-05 23:19:26 +02:00
parent 165c40506d
commit 048b27a89b
7 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/en/common.json
View File

@@ -35,5 +35,6 @@
"small": "small", "small": "small",
"medium": "medium", "medium": "medium",
"large": "large" "large": "large"
} },
"seeMore": "See more..."
} }

2
public/locales/en/modules/bookmark.json
View File

@@ -6,7 +6,7 @@
"title": "Bookmark settings", "title": "Bookmark settings",
"name": { "name": {
"label": "Widget Title", "label": "Widget Title",
"info": "Leave empty to keep the title hidden. <a href=\"https://homarr.dev/docs/widgets/bookmarks/\" target=\"_blank\">See More...</a>" "info": "Leave empty to keep the title hidden."
}, },
"items": { "items": {
"label": "Items" "label": "Items"

4
src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
View File

@@ -32,6 +32,7 @@ type LocationSelectionProps = {
value: any; value: any;
handleChange: (key: string, value: IntegrationOptionsValueType) => void; handleChange: (key: string, value: IntegrationOptionsValueType) => void;
info?: boolean; info?: boolean;
infoLink?: string;
}; };
export const LocationSelection = ({ export const LocationSelection = ({
@@ -40,6 +41,7 @@ export const LocationSelection = ({
value, value,
handleChange, handleChange,
info, info,
infoLink,
}: LocationSelectionProps) => { }: LocationSelectionProps) => {
const { t } = useTranslation('widgets/location'); const { t } = useTranslation('widgets/location');
const [query, setQuery] = useState(value.name ?? ''); const [query, setQuery] = useState(value.name ?? '');
@@ -63,7 +65,7 @@ export const LocationSelection = ({
<Stack spacing="xs"> <Stack spacing="xs">
<Flex direction="row" justify="space-between" wrap="nowrap"> <Flex direction="row" justify="space-between" wrap="nowrap">
<Title order={5}>{t(`modules/${widgetId}:descriptor.settings.${key}.label`)}</Title> <Title order={5}>{t(`modules/${widgetId}:descriptor.settings.${key}.label`)}</Title>
{info && <InfoCard content={t(`modules/${widgetId}:descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`modules/${widgetId}:descriptor.settings.${key}.info`)} link={infoLink}/>}
</Flex> </Flex>
<Group noWrap align="end"> <Group noWrap align="end">

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

@@ -15,7 +15,7 @@ import {
Title, Title,
} from '@mantine/core'; } from '@mantine/core';
import { ContextModalProps } from '@mantine/modals'; import { ContextModalProps } from '@mantine/modals';
import { IconAlertTriangle, IconPlaylistX, IconPlus, IconInfoCircle } from '@tabler/icons-react'; import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
import { Trans, useTranslation } from 'next-i18next'; import { Trans, useTranslation } from 'next-i18next';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
@@ -136,6 +136,7 @@ const WidgetOptionTypeSwitch: FC<{
}> = ({ 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 info = option.info ?? false; const info = option.info ?? false;
const link = option.infoLink ?? undefined;
switch (option.type) { switch (option.type) {
case 'switch': case 'switch':
@@ -147,7 +148,7 @@ const WidgetOptionTypeSwitch: FC<{
onChange={(ev) => handleChange(key, ev.currentTarget.checked)} onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
{...option.inputProps} {...option.inputProps}
/> />
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
); );
case 'text': case 'text':
@@ -155,7 +156,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<TextInput <TextInput
value={value as string} value={value as string}
@@ -169,7 +170,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<MultiSelect <MultiSelect
data={option.data} data={option.data}
@@ -186,7 +187,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<Select <Select
defaultValue={option.defaultValue} defaultValue={option.defaultValue}
@@ -203,7 +204,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<NumberInput <NumberInput
value={value as number} value={value as number}
@@ -217,7 +218,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<Slider <Slider
label={value} label={value}
@@ -268,7 +269,7 @@ 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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<StaticDraggableList <StaticDraggableList
value={typedVal} value={typedVal}
@@ -297,7 +298,7 @@ const WidgetOptionTypeSwitch: FC<{
<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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<MultiSelect <MultiSelect
data={value.map((name: any) => ({ value: name, label: name }))} data={value.map((name: any) => ({ value: name, label: name }))}
@@ -322,7 +323,7 @@ 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>
{info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>} {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
</Group> </Group>
<DraggableList <DraggableList
items={Array.from(value).map((v: any) => ({ items={Array.from(value).map((v: any) => ({

8
src/components/InfoCard/InfoCard.tsx
View File

@@ -9,17 +9,21 @@ import { Link, RichTextEditor, RichTextEditorProps } from '@mantine/tiptap';
import { IconInfoCircle } from '@tabler/icons-react'; import { IconInfoCircle } from '@tabler/icons-react';
import { useEditor } from '@tiptap/react'; import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit'; import StarterKit from '@tiptap/starter-kit';
import { useTranslation } from 'next-i18next';
interface InfoCardProps { interface InfoCardProps {
bg?: SystemProp<DefaultMantineColor>; bg?: SystemProp<DefaultMantineColor>;
cardProp?: Partial<RichTextEditorProps>; cardProp?: Partial<RichTextEditorProps>;
content: string; message: string;
link?: string;
hoverProp?: Partial<HoverCardProps>; hoverProp?: Partial<HoverCardProps>;
position?: HoverCardProps['position']; position?: HoverCardProps['position'];
} }
export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => { export const InfoCard = ({ bg, cardProp, message, link, hoverProp, position }: InfoCardProps) => {
const { colorScheme } = useMantineTheme(); const { colorScheme } = useMantineTheme();
const { t } = useTranslation('common');
const content = link? message + ` <a href=\"${link}\" target=\"_blank\">${t('seeMore')}</a>` : message;
const editor = useEditor({ const editor = useEditor({
content, content,
editable: false, editable: false,

2
src/widgets/bookmark/BookmarkWidgetTile.tsx
View File

@@ -15,7 +15,6 @@ import {
Title, Title,
createStyles, createStyles,
useMantineTheme, useMantineTheme,
InputProps,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { import {
@@ -55,6 +54,7 @@ const definition = defineWidget({
type: 'text', type: 'text',
defaultValue: '', defaultValue: '',
info: true, info: true,
infoLink: "https://homarr.dev/docs/widgets/bookmarks/",
}, },
items: { items: {
type: 'draggable-editable-list', type: 'draggable-editable-list',

1
src/widgets/widgets.ts
View File

@@ -52,6 +52,7 @@ interface DataType {
interface ICommonWidgetOptions { interface ICommonWidgetOptions {
info?: boolean; info?: boolean;
infoLink?: string;
}; };
// will show a multi-select with specified data // will show a multi-select with specified data