diff --git a/package.json b/package.json index bdf2571ea..c398dc5cc 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "dayjs": "^1.11.7", "dockerode": "^3.3.2", "fily-publish-gridstack": "^0.0.13", - "framer-motion": "^6.5.1", + "framer-motion": "^9.0.2", "html-entities": "^2.3.3", "i18next": "^21.9.1", "js-file-download": "^0.4.12", diff --git a/public/locales/da/modules/dashdot.json b/public/locales/da/modules/dashdot.json index 5842ba00b..abcc8897f 100644 --- a/public/locales/da/modules/dashdot.json +++ b/public/locales/da/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Viser graferne for en ekstern Dash. instans i Homarr.", "settings": { "title": "Indstillinger for Dash. widget", - "cpuMultiView": { - "label": "CPU Multikerne Visning" - }, - "storageMultiView": { - "label": "Multidrevet Lagervisning" - }, - "useCompactView": { - "label": "Brug kompakt tilstand" - }, - "graphs": { - "label": "Grafer" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/de/modules/dashdot.json b/public/locales/de/modules/dashdot.json index eda1d7840..89d6d8e9f 100644 --- a/public/locales/de/modules/dashdot.json +++ b/public/locales/de/modules/dashdot.json @@ -4,23 +4,77 @@ "description": "Zeigt die Graphen einer externen Dash.-Instanz innerhalb von Homarr an.", "settings": { "title": "Einstellungen für Dash. Widget", - "cpuMultiView": { - "label": "CPU Multi-Core View" - }, - "storageMultiView": { - "label": "Speicher Multi-Drive View" - }, - "useCompactView": { - "label": "Kompaktmodus verwenden" - }, - "graphs": { - "label": "Graphen" - }, "url": { "label": "Dash. URL" }, "usePercentages": { "label": "Prozentangaben anzeigen" + }, + "columns": { + "label": "Anzahl Spalten" + }, + "graphHeight": { + "label": "Höhe der Graphen" + }, + "graphsOrder": { + "label": "Graphen (Reihenfolge)", + "storage": { + "label": "Speicher", + "enabled": { + "label": "Im Widget anzeigen" + }, + "span": { + "label": "Spaltenbreite" + }, + "compactView": { + "label": "Als Text anzeigen (Kompakt)" + }, + "multiView": { + "label": "Als Multi-Laufwerk anzeigen" + } + }, + "network": { + "label": "Netzwerk", + "enabled": { + "label": "Im Widget anzeigen" + }, + "span": { + "label": "Spaltenbreite" + }, + "compactView": { + "label": "Als Text anzeigen (Kompakt)" + } + }, + "cpu": { + "label": "CPU", + "enabled": { + "label": "Im Widget anzeigen" + }, + "span": { + "label": "Spaltenbreite" + }, + "multiView": { + "label": "Als Multi-Core anzeigen" + } + }, + "ram": { + "label": "RAM", + "enabled": { + "label": "Im Widget anzeigen" + }, + "span": { + "label": "Spaltenbreite" + } + }, + "gpu": { + "label": "GPU", + "enabled": { + "label": "Im Widget anzeigen" + }, + "span": { + "label": "Spaltenbreite" + } + } } } }, @@ -50,7 +104,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/el/modules/dashdot.json b/public/locales/el/modules/dashdot.json index 047c3fb3a..217aa0611 100644 --- a/public/locales/el/modules/dashdot.json +++ b/public/locales/el/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Εμφανίζει τα γραφήματα μιας εξωτερικής Dash. μέσα στο Homarr.", "settings": { "title": "Ρυθμίσεις για το widget Dash", - "cpuMultiView": { - "label": "Προβολή πολλαπλών πυρήνων CPU" - }, - "storageMultiView": { - "label": "Προβολή πολλαπλών μονάδων αποθήκευσης" - }, - "useCompactView": { - "label": "Χρήση Συμπαγούς Προβολής" - }, - "graphs": { - "label": "Γραφήματα" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "Μνήμη RAM" }, "gpu": { diff --git a/public/locales/en/modules/dashdot.json b/public/locales/en/modules/dashdot.json index 31532659e..488a02225 100644 --- a/public/locales/en/modules/dashdot.json +++ b/public/locales/en/modules/dashdot.json @@ -4,23 +4,77 @@ "description": "Displays the graphs of an external Dash. instance inside of Homarr.", "settings": { "title": "Settings for Dash. widget", - "cpuMultiView": { - "label": "CPU Multi-Core View" - }, - "storageMultiView": { - "label": "Storage Multi-Drive View" - }, - "useCompactView": { - "label": "Use Compact View" - }, - "graphs": { - "label": "Graphs" - }, "url": { "label": "Dash. URL" }, "usePercentages": { "label": "Display percentages" + }, + "columns": { + "label": "Display columns" + }, + "graphHeight": { + "label": "Height of graphs" + }, + "graphsOrder": { + "label": "Graphs (Order)", + "storage": { + "label": "Storage", + "enabled": { + "label": "Show in widget" + }, + "span": { + "label": "Column span" + }, + "compactView": { + "label": "Show as text (compact)" + }, + "multiView": { + "label": "Show as multi-drive-view" + } + }, + "network": { + "label": "Network", + "enabled": { + "label": "Show in widget" + }, + "span": { + "label": "Column span" + }, + "compactView": { + "label": "Show as text (compact)" + } + }, + "cpu": { + "label": "CPU", + "enabled": { + "label": "Show in widget" + }, + "span": { + "label": "Column span" + }, + "multiView": { + "label": "Show as multi-core-view" + } + }, + "ram": { + "label": "RAM", + "enabled": { + "label": "Show in widget" + }, + "span": { + "label": "Column span" + } + }, + "gpu": { + "label": "GPU", + "enabled": { + "label": "Show in widget" + }, + "span": { + "label": "Column span" + } + } } } }, @@ -50,7 +104,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/es/modules/dashdot.json b/public/locales/es/modules/dashdot.json index f70aad204..d78a8de61 100644 --- a/public/locales/es/modules/dashdot.json +++ b/public/locales/es/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Muestra los gráficos de una instancia de Dash. externa, dentro de Homarr.", "settings": { "title": "Ajustes para el widget Dash.", - "cpuMultiView": { - "label": "Vista CPU Multinúcleo" - }, - "storageMultiView": { - "label": "Vista Almacenamiento Multidisco" - }, - "useCompactView": { - "label": "Usar vista Compacta" - }, - "graphs": { - "label": "Gráficos" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/fr/modules/dashdot.json b/public/locales/fr/modules/dashdot.json index 0ef538f2f..0740f87ed 100644 --- a/public/locales/fr/modules/dashdot.json +++ b/public/locales/fr/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Affiche les graphiques d'une instance externe de Dash. dans Homarr.", "settings": { "title": "Paramètres du widget Dash", - "cpuMultiView": { - "label": "Vue du CPU multi-cœur" - }, - "storageMultiView": { - "label": "Vue du stockage multidisque" - }, - "useCompactView": { - "label": "Utiliser la vue compacte" - }, - "graphs": { - "label": "Graphiques" - }, "url": { "label": "URL Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/he/modules/dashdot.json b/public/locales/he/modules/dashdot.json index 36552683b..0eda12e91 100644 --- a/public/locales/he/modules/dashdot.json +++ b/public/locales/he/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "מציג נתוני גרפים.", "settings": { "title": "הגדרות עבור וידג׳ט Dash.", - "cpuMultiView": { - "label": "תצוגת מעבד מרובת ליבות" - }, - "storageMultiView": { - "label": "תצוגת אחסון מרובת כוננים" - }, - "useCompactView": { - "label": "השתמש בתצוגה קומפקטית" - }, - "graphs": { - "label": "גרפים" - }, "url": { "label": "כתובת אתר Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "מעבד" }, - "memory": { + "ram": { "title": "זיכרון פנימי" }, "gpu": { diff --git a/public/locales/it/modules/dashdot.json b/public/locales/it/modules/dashdot.json index 68be4c2bb..2e1ed177a 100644 --- a/public/locales/it/modules/dashdot.json +++ b/public/locales/it/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Visualizza i grafici di un'istanza Dash. esterna all'interno di Homarr.", "settings": { "title": "Impostazioni del widget Dash.", - "cpuMultiView": { - "label": "Vista CPU Multi-Core" - }, - "storageMultiView": { - "label": "Visualizzazione archiviazione Multi-Drive" - }, - "useCompactView": { - "label": "Visualizzazione compatta" - }, - "graphs": { - "label": "Grafici" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/ja/modules/dashdot.json b/public/locales/ja/modules/dashdot.json index 88b64c660..0acb36182 100644 --- a/public/locales/ja/modules/dashdot.json +++ b/public/locales/ja/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Homarr内部の外部Dash.インスタンスのグラフを表示します。", "settings": { "title": "Dash.ウィジェットの設定", - "cpuMultiView": { - "label": "CPUマルチコアビュー" - }, - "storageMultiView": { - "label": "ストレージマルチドライブビュー" - }, - "useCompactView": { - "label": "コンパクトビューを使用する" - }, - "graphs": { - "label": "グラフ" - }, "url": { "label": "ダッシュURL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "ラム" }, "gpu": { diff --git a/public/locales/ko/modules/dashdot.json b/public/locales/ko/modules/dashdot.json index 29b39ffd1..558b6806a 100644 --- a/public/locales/ko/modules/dashdot.json +++ b/public/locales/ko/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "", "settings": { "title": "", - "cpuMultiView": { - "label": "CPU 멀티 코어 보기" - }, - "storageMultiView": { - "label": "저장소 모든 드라이브 보기" - }, - "useCompactView": { - "label": "작은 모듈 사용" - }, - "graphs": { - "label": "그래프" - }, "url": { "label": "Dash. 주소" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/lol/modules/dashdot.json b/public/locales/lol/modules/dashdot.json index 5c58b8e2e..022b020e6 100644 --- a/public/locales/lol/modules/dashdot.json +++ b/public/locales/lol/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Displays Teh Grafs Ov An External Dash. Instance Inside Ov Homarr.", "settings": { "title": "Settings 4 Dash. Widget", - "cpuMultiView": { - "label": "CPU Multi-Coer View" - }, - "storageMultiView": { - "label": "Storagzzz Multi-Driveh View" - }, - "useCompactView": { - "label": "Ues Compact View" - }, - "graphs": { - "label": "Graphz" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/nl/modules/dashdot.json b/public/locales/nl/modules/dashdot.json index e40b1330a..4423a2945 100644 --- a/public/locales/nl/modules/dashdot.json +++ b/public/locales/nl/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Toont de grafieken van een externe Dash. instantie binnen Homarr.", "settings": { "title": "Instellingen voor Dash. widget", - "cpuMultiView": { - "label": "CPU Multi-Core Weergave" - }, - "storageMultiView": { - "label": "Opslag Multi-Drive weergave" - }, - "useCompactView": { - "label": "Compacte weergave gebruiken" - }, - "graphs": { - "label": "Grafieken" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/no/modules/dashdot.json b/public/locales/no/modules/dashdot.json index 7c7f752bf..59b393adb 100644 --- a/public/locales/no/modules/dashdot.json +++ b/public/locales/no/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Viser grafene til en ekstern Dash. Eksempel inni av Homarr.", "settings": { "title": "Innstillinger for Dash. widget", - "cpuMultiView": { - "label": "CPU flerkjernevisning" - }, - "storageMultiView": { - "label": "Lagring flerdiskvisning" - }, - "useCompactView": { - "label": "Bruk kompakt visning" - }, - "graphs": { - "label": "Grafer" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/pl/modules/dashdot.json b/public/locales/pl/modules/dashdot.json index 766f4eaf4..51e958f07 100644 --- a/public/locales/pl/modules/dashdot.json +++ b/public/locales/pl/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Wyświetla wykresy zewnętrznej instancji Dash. wewnątrz Homarr.", "settings": { "title": "Ustawienia dla widgetu Dash.", - "cpuMultiView": { - "label": "Widok wielordzeniowy procesora" - }, - "storageMultiView": { - "label": "Widok wielu dysków" - }, - "useCompactView": { - "label": "Użyj trybu kompaktowego" - }, - "graphs": { - "label": "Wykresy" - }, "url": { "label": "Adres URL usługi Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/pt/modules/dashdot.json b/public/locales/pt/modules/dashdot.json index 69d8cdda8..8e186cc72 100644 --- a/public/locales/pt/modules/dashdot.json +++ b/public/locales/pt/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Apresenta os gráficos de um Dash. exemplo externo dentro de Homarr.", "settings": { "title": "Definições para o Dash. widget", - "cpuMultiView": { - "label": "Visualização múltipla de CPU" - }, - "storageMultiView": { - "label": "Exibição Multi-Drive de armazenamento" - }, - "useCompactView": { - "label": "Usar visualização compacta" - }, - "graphs": { - "label": "Gráficos" - }, "url": { "label": "URL do Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/ru/modules/dashdot.json b/public/locales/ru/modules/dashdot.json index 6f5b5783f..35559797d 100644 --- a/public/locales/ru/modules/dashdot.json +++ b/public/locales/ru/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Показывает графики внешнего экземпляра Dash. в Homarr.", "settings": { "title": "Настройки для виджета Dash.", - "cpuMultiView": { - "label": "Показать все ядра ЦП" - }, - "storageMultiView": { - "label": "Хранилище с несколькими дисками" - }, - "useCompactView": { - "label": "Использовать компактный вид" - }, - "graphs": { - "label": "Графики" - }, "url": { "label": "URL-адрес Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "ЦП" }, - "memory": { + "ram": { "title": "ОЗУ" }, "gpu": { diff --git a/public/locales/sk/modules/dashdot.json b/public/locales/sk/modules/dashdot.json index 2381cb6da..d54a1864f 100644 --- a/public/locales/sk/modules/dashdot.json +++ b/public/locales/sk/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Zobrazovať grafy externej Dash. vo vnútri Homarru.", "settings": { "title": "Nastavenia pre Dash. mini aplikácie", - "cpuMultiView": { - "label": "CPU Multi-Core Zobrazenie" - }, - "storageMultiView": { - "label": "Zobrazenie Multi-Drive úložiska" - }, - "useCompactView": { - "label": "Použi kompaktné zobrazenie" - }, - "graphs": { - "label": "Grafy" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/sl/modules/dashdot.json b/public/locales/sl/modules/dashdot.json index 0184054f9..858f8fa98 100644 --- a/public/locales/sl/modules/dashdot.json +++ b/public/locales/sl/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Prikaže grafe zunanjega primerka Dash. znotraj Homarra.", "settings": { "title": "Nastavitve za pripomoček Dash", - "cpuMultiView": { - "label": "Pogled večjedrnih procesorjev" - }, - "storageMultiView": { - "label": "Pogled naprav za shranjevanje" - }, - "useCompactView": { - "label": "Uporaba kompaktnega pogleda" - }, - "graphs": { - "label": "Grafi" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/sv/modules/dashdot.json b/public/locales/sv/modules/dashdot.json index 40441c40c..3a884a643 100644 --- a/public/locales/sv/modules/dashdot.json +++ b/public/locales/sv/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Visar graferna för en extern Dash.-instans i Homarr.", "settings": { "title": "Inställningar för Dash. widget", - "cpuMultiView": { - "label": "Flerkärnig CPU vy" - }, - "storageMultiView": { - "label": "Visning av flera lagringsenheter" - }, - "useCompactView": { - "label": "Använd kompakt vy" - }, - "graphs": { - "label": "Grafer" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/uk/modules/dashdot.json b/public/locales/uk/modules/dashdot.json index 14ab03307..6d4277156 100644 --- a/public/locales/uk/modules/dashdot.json +++ b/public/locales/uk/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Показує графіки зовнішньої Dash. всередині Homarr.", "settings": { "title": "Налаштування віджета Dash.", - "cpuMultiView": { - "label": "Процесор по ядрах" - }, - "storageMultiView": { - "label": "Сховище по дисках" - }, - "useCompactView": { - "label": "Компактний вигляд" - }, - "graphs": { - "label": "Графіки" - }, "url": { "label": "Dash. URL" }, @@ -50,7 +38,7 @@ "cpu": { "title": "Процесор" }, - "memory": { + "ram": { "title": "Оперативна пам'ять" }, "gpu": { diff --git a/public/locales/vi/modules/dashdot.json b/public/locales/vi/modules/dashdot.json index 2e5f70ff9..7e6cb127b 100644 --- a/public/locales/vi/modules/dashdot.json +++ b/public/locales/vi/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "Hiển thị biểu đồ của Dash. bên trong Homarr.", "settings": { "title": "Cài đặt cho tiện ích Dash.", - "cpuMultiView": { - "label": "Chế độ hiện đa nhân CPU" - }, - "storageMultiView": { - "label": "Chế độ hiện đa ổ đĩa" - }, - "useCompactView": { - "label": "Dùng chế độ thu gọn" - }, - "graphs": { - "label": "Biểu đồ" - }, "url": { "label": "URL của Dash." }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "RAM" }, "gpu": { diff --git a/public/locales/zh/modules/dashdot.json b/public/locales/zh/modules/dashdot.json index 547fe75a1..a779c41d6 100644 --- a/public/locales/zh/modules/dashdot.json +++ b/public/locales/zh/modules/dashdot.json @@ -4,18 +4,6 @@ "description": "在Homarr中显示一个外部Dash的图表。", "settings": { "title": "设置Dash小部件", - "cpuMultiView": { - "label": "CPU多核视图" - }, - "storageMultiView": { - "label": "存储多驱动器视图" - }, - "useCompactView": { - "label": "使用紧凑型视图" - }, - "graphs": { - "label": "图表" - }, "url": { "label": "Dash. 网址" }, @@ -50,7 +38,7 @@ "cpu": { "title": "CPU" }, - "memory": { + "ram": { "title": "内存" }, "gpu": { diff --git a/src/components/Dashboard/Tiles/Widgets/DraggableList.tsx b/src/components/Dashboard/Tiles/Widgets/DraggableList.tsx new file mode 100644 index 000000000..7622e203b --- /dev/null +++ b/src/components/Dashboard/Tiles/Widgets/DraggableList.tsx @@ -0,0 +1,135 @@ +import { Collapse, createStyles, Flex, Stack, Text } from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { IconChevronDown, IconGripVertical } from '@tabler/icons'; +import { Reorder, useDragControls } from 'framer-motion'; +import { FC, ReactNode, useEffect, useRef } from 'react'; +import { IDraggableListInputValue } from '../../../../widgets/widgets'; + +const useStyles = createStyles((theme) => ({ + container: { + display: 'flex', + flexDirection: 'column', + borderRadius: theme.radius.md, + border: `1px solid ${ + theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2] + }`, + backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white, + marginBottom: theme.spacing.xs, + }, + row: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '12px 16px', + gap: theme.spacing.sm, + }, + middle: { + flexGrow: 1, + }, + symbol: { + fontSize: 16, + }, + clickableIcons: { + color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6], + cursor: 'pointer', + userSelect: 'none', + transition: 'transform .3s ease-in-out', + }, + rotate: { + transform: 'rotate(180deg)', + }, + collapseContent: { + padding: '12px 16px', + }, +})); + +type DraggableListParams = { + value: IDraggableListInputValue['defaultValue']; + onChange: (value: IDraggableListInputValue['defaultValue']) => void; + labels: Record; + children?: Record; +}; + +export const DraggableList: FC = (props) => { + const keys = props.value.map((v) => v.key); + + return ( +
+ + props.onChange(order.map((key) => props.value.find((v) => v.key === key)!)) + } + as="div" + > + {props.value.map((item) => ( + + {props.children?.[item.key]} + + ))} + +
+ ); +}; + +const ListItem: FC<{ + item: IDraggableListInputValue['defaultValue'][number]; + label: string; +}> = (props) => { + const { classes, cx } = useStyles(); + const controls = useDragControls(); + + const [opened, handlers] = useDisclosure(false); + const hasContent = props.children != null && Object.keys(props.children).length !== 0; + + // Workaround for mobile drag controls not working + // https://github.com/framer/motion/issues/1597#issuecomment-1235026724 + const dragRef = useRef(null); + useEffect(() => { + const touchHandler: EventListener = (e) => e.preventDefault(); + + const dragItem = dragRef.current; + + if (dragItem) { + dragItem.addEventListener('touchstart', touchHandler, { passive: false }); + + return () => { + dragItem.removeEventListener('touchstart', touchHandler); + }; + } + + return undefined; + }, [dragRef]); + + return ( + +
+
+ controls.start(e)}> + + + +
+ {props.label} +
+ + {hasContent && ( + handlers.toggle()} + size={18} + stroke={1.5} + /> + )} +
+ + {hasContent && ( + + {props.children} + + )} +
+ + ); +}; diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 62a2550a4..f58f30750 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -3,24 +3,26 @@ import { Button, Group, MultiSelect, + NumberInput, + Select, + Slider, Stack, Switch, - TextInput, Text, - NumberInput, - Slider, - Select, + TextInput, } from '@mantine/core'; import { ContextModalProps } from '@mantine/modals'; import { IconAlertTriangle } from '@tabler/icons'; import { Trans, useTranslation } from 'next-i18next'; -import { useState } from 'react'; -import Widgets from '../../../../widgets'; -import type { IWidgetOptionValue } from '../../../../widgets/widgets'; +import { FC, useState } from 'react'; import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; -import { IWidget } from '../../../../widgets/widgets'; +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'; +import { DraggableList } from './DraggableList'; export type WidgetEditModalInnerProps = { widgetId: string; @@ -93,7 +95,17 @@ export const WidgetsEditModal = ({ ); } - return WidgetOptionTypeSwitch(option, index, t, key, value, handleChange); + + return ( + + ); })}