From 5cc2fac8bc1d0edd78886c6c3f87a30249432618 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Tue, 25 Jul 2023 21:07:43 +0200 Subject: [PATCH 01/19] =?UTF-8?q?=E2=9C=A8=20Tooltip=20for=20widget=20opti?= =?UTF-8?q?ons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 190 ++++++++++++------ src/widgets/widgets.ts | 9 + 2 files changed, 141 insertions(+), 58 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index f37f4f1a5..aeadcf000 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -13,16 +13,17 @@ import { Text, TextInput, Title, + Tooltip, + useMantineTheme, } from '@mantine/core'; import { ContextModalProps } from '@mantine/modals'; -import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react'; +import { IconAlertTriangle, IconPlaylistX, IconPlus, IconAlertCircle } from '@tabler/icons-react'; import { Trans, useTranslation } from 'next-i18next'; import { FC, useState } from 'react'; import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { mapObject } from '../../../../tools/client/objects'; -import { useColorTheme } from '../../../../tools/color'; import Widgets from '../../../../widgets'; import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets'; import { IWidget } from '../../../../widgets/widgets'; @@ -135,70 +136,120 @@ const WidgetOptionTypeSwitch: FC<{ handleChange: (key: string, value: IntegrationOptionsValueType) => void; }> = ({ option, widgetId, propName: key, value, handleChange }) => { const { t } = useTranslation([`modules/${widgetId}`, 'common']); - const { primaryColor } = useColorTheme(); + const { fn } = useMantineTheme(); switch (option.type) { case 'switch': return ( - handleChange(key, ev.currentTarget.checked)} - /> + + handleChange(key, ev.currentTarget.checked)} + {...option.inputProps} + /> + {option.info? + + + : undefined + } + ); case 'text': return ( - handleChange(key, ev.currentTarget.value)} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, ev.currentTarget.value)} + {...option.inputProps} + /> + ); case 'multi-select': return ( - handleChange(key, v)} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, v)} + {...option.inputProps} + /> + ); case 'select': return ( - handleChange(key, v ?? option.defaultValue)} + {...option.inputProps} + /> + ); case 'number': return ( - handleChange(key, v!)} - {...option.inputProps} - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + handleChange(key, v!)} + {...option.inputProps} + /> + ); case 'slider': return ( - - {t(`descriptor.settings.${key}.label`)} + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + handleChange(key, v)} + {...option.inputProps} /> ); @@ -237,7 +288,14 @@ const WidgetOptionTypeSwitch: FC<{ return ( - {t(`descriptor.settings.${key}.label`)} + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + handleChange(key, v)} @@ -262,28 +320,44 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'multiple-text': return ( - ({ value: name, label: name }))} - label={t(`descriptor.settings.${key}.label`)} - description={t(`descriptor.settings.${key}.description`)} - defaultValue={value as string[]} - withinPortal - searchable - creatable - getCreateLabel={(query) => t('common:createItem', { item: query })} - onChange={(values) => - handleChange( - key, - values.map((item: string) => item) - ) - } - /> + + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + + ({ value: name, label: name }))} + description={t(`descriptor.settings.${key}.description`)} + defaultValue={value as string[]} + withinPortal + searchable + creatable + getCreateLabel={(query) => t('common:createItem', { item: query })} + onChange={(values) => + handleChange( + key, + values.map((item: string) => item) + ) + } + /> + ); case 'draggable-editable-list': const { t: translateDraggableList } = useTranslation('widgets/draggable-list'); return ( - {t(`descriptor.settings.${key}.label`)} + + {t(`descriptor.settings.${key}.label`)} + {option.info? + + + : undefined + } + ({ data: v, diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts index 989de520c..18e3e7eac 100644 --- a/src/widgets/widgets.ts +++ b/src/widgets/widgets.ts @@ -53,6 +53,7 @@ interface DataType { export type IMultiSelectOptionValue = { type: 'multi-select'; defaultValue: string[]; + info?: boolean; data: DataType[]; inputProps?: Partial; }; @@ -61,6 +62,7 @@ export type IMultiSelectOptionValue = { export type ISelectOptionValue = { type: 'select'; defaultValue: string; + info?: boolean; data: DataType[]; inputProps?: Partial; }; @@ -69,6 +71,7 @@ export type ISelectOptionValue = { export type ISwitchOptionValue = { type: 'switch'; defaultValue: boolean; + info?: boolean; inputProps?: Partial; }; @@ -76,6 +79,7 @@ export type ISwitchOptionValue = { export type ITextInputOptionValue = { type: 'text'; defaultValue: string; + info?: boolean; inputProps?: Partial; }; @@ -83,6 +87,7 @@ export type ITextInputOptionValue = { export type INumberInputOptionValue = { type: 'number'; defaultValue: number; + info?: boolean; inputProps?: Partial; }; @@ -90,6 +95,7 @@ export type INumberInputOptionValue = { export type ISliderInputOptionValue = { type: 'slider'; defaultValue: number; + info?: boolean; min: number; max: number; step: number; @@ -108,6 +114,7 @@ export type IDraggableListInputValue = { key: string; subValues?: Record; }[]; + info?: boolean; items: Record< string, Record, 'defaultValue'>> @@ -117,6 +124,7 @@ export type IDraggableListInputValue = { export type IDraggableEditableListInputValue = { type: 'draggable-editable-list'; defaultValue: TData[]; + info?: boolean; create: () => TData; getLabel: (data: TData) => string | JSX.Element; itemComponent: (props: { @@ -130,6 +138,7 @@ export type IDraggableEditableListInputValue = { export type IMultipleTextInputOptionValue = { type: 'multiple-text'; defaultValue: string[]; + info?: boolean; inputProps?: Partial; }; From a15469698c2daf219e3c2eb99de153ca0d09fc9d Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Tue, 25 Jul 2023 21:52:36 +0200 Subject: [PATCH 02/19] =?UTF-8?q?=F0=9F=92=84=20Tooltip=20background=20not?= =?UTF-8?q?=20user=20selected=20anymore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 47 +++++++++++-------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index aeadcf000..6dbbabda9 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -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 ( handleChange(key, ev.currentTarget.checked)} {...option.inputProps} /> - {option.info? - + {info? + : undefined } ); case 'text': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -174,12 +176,13 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'multi-select': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -194,12 +197,13 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'select': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -214,12 +218,13 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'number': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -232,12 +237,13 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'slider': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : 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<{ {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -319,12 +326,13 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'multiple-text': + var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } @@ -347,13 +355,14 @@ const WidgetOptionTypeSwitch: FC<{ ); case 'draggable-editable-list': + var info = option.info !== undefined ? option.info : false; const { t: translateDraggableList } = useTranslation('widgets/draggable-list'); return ( {t(`descriptor.settings.${key}.label`)} - {option.info? - + {info? + : undefined } From c56edfdc655a2a97f72fa390aca4023035415e02 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Tue, 25 Jul 2023 22:16:59 +0200 Subject: [PATCH 03/19] =?UTF-8?q?=F0=9F=90=9B=20Multiline=20tooltip=20and?= =?UTF-8?q?=20=F0=9F=8E=A8=20one=20line=20code=20rework?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 81 ++++++++++++++++--- 1 file changed, 72 insertions(+), 9 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 6dbbabda9..2737b3f4d 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -150,7 +150,14 @@ const WidgetOptionTypeSwitch: FC<{ {...option.inputProps} /> {info? - + : undefined } @@ -163,7 +170,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -182,7 +196,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -203,7 +224,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -224,7 +252,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -243,7 +278,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -298,7 +340,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -332,7 +381,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } @@ -362,7 +418,14 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} {info? - + : undefined } From a79e110aa3b241b76d84379ccdc8ed351f746d01 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Thu, 27 Jul 2023 02:56:12 +0200 Subject: [PATCH 04/19] =?UTF-8?q?=F0=9F=90=9B=20Multiline=20tooltip=20agai?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 2737b3f4d..e6b92a176 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -136,7 +136,7 @@ const WidgetOptionTypeSwitch: FC<{ handleChange: (key: string, value: IntegrationOptionsValueType) => void; }> = ({ option, widgetId, propName: key, value, handleChange }) => { const { t } = useTranslation([`modules/${widgetId}`, 'common']); - const { fn, colorScheme } = useMantineTheme(); + const { colorScheme } = useMantineTheme(); switch (option.type) { case 'switch': @@ -155,7 +155,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -175,7 +175,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -201,7 +201,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -229,7 +229,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -257,7 +257,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -283,7 +283,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -345,7 +345,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -386,7 +386,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > @@ -423,7 +423,7 @@ const WidgetOptionTypeSwitch: FC<{ position="right-start" c={ colorScheme === 'light' ? "black" : "dark.0" } color={ colorScheme === 'light' ? "dark.0" : "dark.6" } - width={300} + styles={{ tooltip: { '&': { maxWidth: 300, }, }, }} multiline > From a0052f88f462fd422031468e6dae601940fa53af Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Sat, 29 Jul 2023 01:23:46 +0200 Subject: [PATCH 05/19] =?UTF-8?q?=F0=9F=8E=A8=20Refactor=20repeating=20cod?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Tiles/Widgets/WidgetsEditModal.tsx | 64 ++++++++----------- src/widgets/widgets.ts | 19 +++--- 2 files changed, 36 insertions(+), 47 deletions(-) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index e6b92a176..4f7945bb0 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -137,10 +137,10 @@ const WidgetOptionTypeSwitch: FC<{ }> = ({ option, widgetId, propName: key, value, handleChange }) => { const { t } = useTranslation([`modules/${widgetId}`, 'common']); const { colorScheme } = useMantineTheme(); + const info = option.info ?? false; switch (option.type) { case 'switch': - var info = option.info !== undefined ? option.info : false; return ( handleChange(key, ev.currentTarget.checked)} {...option.inputProps} /> - {info? + {info && - : undefined + } ); case 'text': - var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {info? + {info && - : undefined + } ); case 'multi-select': - var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {info? + {info && - : undefined + } ); case 'select': - var info = option.info !== undefined ? option.info : false; return ( {t(`descriptor.settings.${key}.label`)} - {info? + {info && - : undefined + } handleChange(key, v ?? option.defaultValue)} + withinPortal {...option.inputProps} /> @@ -247,18 +204,7 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} - {info && - - - - } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && - - - - } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && - - - - } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && - - - - } + {info && } ({ value: name, label: name }))} @@ -409,18 +322,7 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} - {info && - - - - } + {info && } ({ @@ -462,3 +364,23 @@ const WidgetOptionTypeSwitch: FC<{ return null; } }; + +interface InfoTooltipProps { + label: string; +} + +const InfoTooltip = ({ label }: InfoTooltipProps) => { + const { colorScheme } =useMantineTheme(); + return ( + + + + ) +}; \ No newline at end of file diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts index 527e83abe..ca843c74a 100644 --- a/src/widgets/widgets.ts +++ b/src/widgets/widgets.ts @@ -11,7 +11,6 @@ import React from 'react'; import { AreaType } from '../types/area'; import { ShapeType } from '../types/shape'; -import { boolean } from 'zod'; // Type of widgets which are saved to config export type IWidget = { From 7235b5b17ac82c55f377205cd8c8654283613f44 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Wed, 2 Aug 2023 03:48:10 +0200 Subject: [PATCH 09/19] =?UTF-8?q?=E2=9C=A8=20General=20Element=20+=20Toolt?= =?UTF-8?q?ip=20to=20HoverCard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 7 ++- public/locales/en/modules/bookmark.json | 4 +- .../Tiles/Widgets/WidgetsEditModal.tsx | 41 +++++------------ src/components/InfoCard/InfoCard.tsx | 44 +++++++++++++++++++ src/widgets/bookmark/BookmarkWidgetTile.tsx | 1 + 5 files changed, 62 insertions(+), 35 deletions(-) create mode 100644 src/components/InfoCard/InfoCard.tsx diff --git a/package.json b/package.json index 0230cf27e..0b6003403 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@mantine/modals": "^6.0.0", "@mantine/next": "^6.0.0", "@mantine/notifications": "^6.0.0", + "@mantine/tiptap": "^6.0.17", "@nivo/core": "^0.83.0", "@nivo/line": "^0.83.0", "@react-native-async-storage/async-storage": "^1.18.1", @@ -48,6 +49,10 @@ "@tanstack/react-query": "^4.2.1", "@tanstack/react-query-devtools": "^4.24.4", "@tanstack/react-query-persist-client": "^4.28.0", + "@tiptap/extension-link": "^2.0.4", + "@tiptap/pm": "^2.0.4", + "@tiptap/react": "^2.0.4", + "@tiptap/starter-kit": "^2.0.4", "@trpc/client": "^10.29.1", "@trpc/next": "^10.29.1", "@trpc/react-query": "^10.29.1", @@ -219,4 +224,4 @@ ] } } -} \ No newline at end of file +} diff --git a/public/locales/en/modules/bookmark.json b/public/locales/en/modules/bookmark.json index d8052dfba..a3e694914 100644 --- a/public/locales/en/modules/bookmark.json +++ b/public/locales/en/modules/bookmark.json @@ -6,9 +6,7 @@ "title": "Bookmark settings", "name": { "label": "Widget Title", - "placeholder": { - "label" : "Leave empty to keep the title hidden" - } + "info": "Leave empty to keep the title hidden. See More..." }, "items": { "label": "Items" diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index e0bb3879b..e84675238 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -13,14 +13,13 @@ import { Text, TextInput, Title, - Tooltip, - useMantineTheme, } from '@mantine/core'; import { ContextModalProps } from '@mantine/modals'; import { IconAlertTriangle, IconPlaylistX, IconPlus, IconInfoCircle } from '@tabler/icons-react'; import { Trans, useTranslation } from 'next-i18next'; import { FC, useState } from 'react'; +import { InfoCard } from '../../../InfoCard/InfoCard'; import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { mapObject } from '../../../../tools/client/objects'; @@ -148,7 +147,7 @@ const WidgetOptionTypeSwitch: FC<{ onChange={(ev) => handleChange(key, ev.currentTarget.checked)} {...option.inputProps} /> - {info && } + {info && } ); case 'text': @@ -156,7 +155,7 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } ({ value: name, label: name }))} @@ -322,7 +323,7 @@ const WidgetOptionTypeSwitch: FC<{ {t(`descriptor.settings.${key}.label`)} - {info && } + {info && } ({ diff --git a/src/components/InfoCard/InfoCard.tsx b/src/components/InfoCard/InfoCard.tsx index f985d4cd5..fae682d20 100644 --- a/src/components/InfoCard/InfoCard.tsx +++ b/src/components/InfoCard/InfoCard.tsx @@ -9,17 +9,21 @@ import { Link, RichTextEditor, RichTextEditorProps } from '@mantine/tiptap'; import { IconInfoCircle } from '@tabler/icons-react'; import { useEditor } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; +import { useTranslation } from 'next-i18next'; interface InfoCardProps { bg?: SystemProp; cardProp?: Partial; - content: string; + message: string; + link?: string; hoverProp?: Partial; 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 { t } = useTranslation('common'); + const content = link? message + ` ${t('seeMore')}` : message; const editor = useEditor({ content, editable: false, diff --git a/src/widgets/bookmark/BookmarkWidgetTile.tsx b/src/widgets/bookmark/BookmarkWidgetTile.tsx index c1fbbaaed..dd04b87ae 100644 --- a/src/widgets/bookmark/BookmarkWidgetTile.tsx +++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx @@ -15,7 +15,6 @@ import { Title, createStyles, useMantineTheme, - InputProps, } from '@mantine/core'; import { useForm } from '@mantine/form'; import { @@ -55,6 +54,7 @@ const definition = defineWidget({ type: 'text', defaultValue: '', info: true, + infoLink: "https://homarr.dev/docs/widgets/bookmarks/", }, items: { type: 'draggable-editable-list', diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts index ca843c74a..a6b60e0dc 100644 --- a/src/widgets/widgets.ts +++ b/src/widgets/widgets.ts @@ -52,6 +52,7 @@ interface DataType { interface ICommonWidgetOptions { info?: boolean; + infoLink?: string; }; // will show a multi-select with specified data From d994f4ec8992280d5466ce1052a1bb52364f010b Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Sat, 5 Aug 2023 23:19:52 +0200 Subject: [PATCH 19/19] =?UTF-8?q?=F0=9F=A4=A1=20frogot=20a=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index bc9b2d62b..0d7cbcfb4 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -239,6 +239,7 @@ const WidgetOptionTypeSwitch: FC<{ handleChange={handleChange} widgetId={widgetId} info={info} + infoLink={link} /> );