diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index fc6ea645e..944374b7c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -2,7 +2,14 @@
"actions": {
"save": "Save",
"cancel": "Cancel",
- "ok": "Okay"
+ "ok": "Okay",
+ "edit": "Edit",
+ "changePosition": "Change position",
+ "remove": "Remove"
+ },
+ "sections": {
+ "settings": "Settings",
+ "dangerZone": "Danger zone"
},
"tip": "Tip: ",
"time": {
diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index cbd9744bc..dfbd890fd 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -15,7 +15,6 @@ import { useState } from 'react';
import PingComponent from '../../modules/ping/PingModule';
import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types';
-import { TileMenu } from '../Dashboard/Menu/TileMenu';
const useStyles = createStyles((theme) => ({
item: {
@@ -104,7 +103,7 @@ export function AppShelfItem(props: any) {
opacity: hovering ? 1 : 0,
}}
>
- { /* TODO: Remove this component */ }
+ {/* TODO: Remove this component */}
diff --git a/src/components/Dashboard/Menu/TileMenu.tsx b/src/components/Dashboard/Menu/TileMenu.tsx
deleted file mode 100644
index 22c0c1de6..000000000
--- a/src/components/Dashboard/Menu/TileMenu.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ActionIcon, Menu, Text } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
-import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconEdit, IconMenu, IconTrash } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
-import { useColorTheme } from '../../../tools/color';
-import { ServiceType } from '../../../types/service';
-
-interface TileMenuProps {
- service: ServiceType;
-}
-
-export const TileMenu = ({ service }: TileMenuProps) => {
- const { secondaryColor } = useColorTheme();
- const { t } = useTranslation('layout/app-shelf-menu');
- const updateConfig = useConfigStore((x) => x.updateConfig);
- const { name: configName } = useConfigContext();
-
- return (
-
- );
-};
diff --git a/src/components/Dashboard/Tiles/Clock/ClockTile.tsx b/src/components/Dashboard/Tiles/Clock/ClockTile.tsx
index daea226c0..4239816c9 100644
--- a/src/components/Dashboard/Tiles/Clock/ClockTile.tsx
+++ b/src/components/Dashboard/Tiles/Clock/ClockTile.tsx
@@ -1,4 +1,4 @@
-import { Card, Center, Stack, Text, Title } from '@mantine/core';
+import { Center, Stack, Text, Title } from '@mantine/core';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import { useSetSafeInterval } from '../../../../tools/hooks/useSetSafeInterval';
diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
new file mode 100644
index 000000000..155b3ced8
--- /dev/null
+++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
@@ -0,0 +1,57 @@
+import { ActionIcon, Menu } from '@mantine/core';
+import { IconDots, IconLayoutKanban, IconPencil, IconTrash } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { useEditModeStore } from '../Views/useEditModeStore';
+
+interface GenericTileMenuProps {
+ handleClickEdit: () => void;
+ handleClickChangePosition: () => void;
+ handleClickDelete: () => void;
+ displayEdit: boolean;
+}
+
+export const GenericTileMenu = ({
+ handleClickEdit,
+ handleClickChangePosition,
+ handleClickDelete,
+ displayEdit,
+}: GenericTileMenuProps) => {
+ const { t } = useTranslation('common');
+ const isEditMode = useEditModeStore((x) => x.enabled);
+
+ if (!isEditMode) {
+ return null;
+ }
+
+ return (
+
+ );
+};
diff --git a/src/components/Dashboard/Tiles/IntegrationChangePositionModal.tsx b/src/components/Dashboard/Tiles/IntegrationChangePositionModal.tsx
index 539c3e29b..07aabb448 100644
--- a/src/components/Dashboard/Tiles/IntegrationChangePositionModal.tsx
+++ b/src/components/Dashboard/Tiles/IntegrationChangePositionModal.tsx
@@ -1,4 +1,3 @@
-import React, { ReactNode } from 'react';
import {
Button,
Center,
@@ -10,14 +9,10 @@ import {
SelectItem,
Stack,
Text,
- TextInput,
Title,
} from '@mantine/core';
+import { useForm } from '@mantine/form';
import { ContextModalProps } from '@mantine/modals';
-import { useTranslation } from 'next-i18next';
-import { ClockIntegrationType, IntegrationsType } from '../../../types/integration';
-import { integrationModuleTranslationsMap } from './IntegrationsEditModal';
-import { TileBaseType } from '../../../types/tile';
import {
IconArrowsUpDown,
IconCalendarTime,
@@ -25,11 +20,14 @@ import {
IconCloudRain,
IconFileDownload,
} from '@tabler/icons';
-import { ServiceIcon } from './Service/ServiceIcon';
-import { useForm } from '@mantine/form';
-import { Tiles } from './tilesDefinitions';
+import { useTranslation } from 'next-i18next';
import { useConfigContext } from '../../../config/provider';
import { useConfigStore } from '../../../config/store';
+import { IntegrationsType } from '../../../types/integration';
+import { TileBaseType } from '../../../types/tile';
+import { integrationModuleTranslationsMap } from './IntegrationsEditModal';
+import { ServiceIcon } from './Service/ServiceIcon';
+import { Tiles } from './tilesDefinitions';
export type IntegrationChangePositionModalInnerProps = {
integration: keyof IntegrationsType;
diff --git a/src/components/Dashboard/Tiles/Integrations/IntegrationsMenu.tsx b/src/components/Dashboard/Tiles/Integrations/IntegrationsMenu.tsx
index 280d5f3d8..97f04e9f4 100644
--- a/src/components/Dashboard/Tiles/Integrations/IntegrationsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Integrations/IntegrationsMenu.tsx
@@ -1,9 +1,9 @@
-import { ActionIcon, Menu, Title } from '@mantine/core';
-import { IconDots, IconLayoutKanban, IconPencil, IconTrash } from '@tabler/icons';
+import { Title } from '@mantine/core';
import { useTranslation } from 'next-i18next';
import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
import { IntegrationsType } from '../../../../types/integration';
import { TileBaseType } from '../../../../types/tile';
+import { GenericTileMenu } from '../GenericTileMenu';
import { IntegrationChangePositionModalInnerProps } from '../IntegrationChangePositionModal';
import { IntegrationRemoveModalInnerProps } from '../IntegrationRemoveModal';
import {
@@ -65,34 +65,11 @@ export const IntegrationsMenu =
};
return (
-
+
);
};
diff --git a/src/components/Dashboard/Tiles/Service/ServiceMenu.tsx b/src/components/Dashboard/Tiles/Service/ServiceMenu.tsx
new file mode 100644
index 000000000..8b14f4c61
--- /dev/null
+++ b/src/components/Dashboard/Tiles/Service/ServiceMenu.tsx
@@ -0,0 +1,39 @@
+import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
+import { ServiceType } from '../../../../types/service';
+import { GenericTileMenu } from '../GenericTileMenu';
+
+interface TileMenuProps {
+ service: ServiceType;
+}
+
+export const ServiceMenu = ({ service }: TileMenuProps) => {
+ const handleClickEdit = () => {
+ openContextModalGeneric<{ service: ServiceType }>({
+ modal: 'editService',
+ size: 'xl',
+ innerProps: {
+ service,
+ },
+ });
+ };
+
+ const handleClickChangePosition = () => {
+ openContextModalGeneric({
+ modal: 'changeTilePosition',
+ innerProps: {
+ tile: service,
+ },
+ });
+ };
+
+ const handleClickDelete = () => {};
+
+ return (
+
+ );
+};
diff --git a/src/components/Dashboard/Tiles/Service/ServiceTile.tsx b/src/components/Dashboard/Tiles/Service/ServiceTile.tsx
index 2ab86879b..ce71dd60f 100644
--- a/src/components/Dashboard/Tiles/Service/ServiceTile.tsx
+++ b/src/components/Dashboard/Tiles/Service/ServiceTile.tsx
@@ -1,11 +1,11 @@
-import { ActionIcon, Card, Center, Text, UnstyledButton } from '@mantine/core';
+import { Card, Center, Text, UnstyledButton } from '@mantine/core';
import { NextLink } from '@mantine/next';
import { createStyles } from '@mantine/styles';
-import { IconDots } from '@tabler/icons';
import { ServiceType } from '../../../../types/service';
import { useCardStyles } from '../../../layout/useCardStyles';
import { useEditModeStore } from '../../Views/useEditModeStore';
import { BaseTileProps } from '../type';
+import { ServiceMenu } from './ServiceMenu';
interface ServiceTileProps extends BaseTileProps {
service: ServiceType;
@@ -26,6 +26,7 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
{service.name}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -34,6 +35,11 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
return (
{/* TODO: add service menu */}
+
+
+
+
+
{!service.url || isEditMode ? (
{
);
};
-const useStyles = createStyles((theme, _params, getRef) => {
- return {
- image: {
- ref: getRef('image'),
- maxHeight: '80%',
- maxWidth: '80%',
- transition: 'transform 100ms ease-in-out',
+const useStyles = createStyles((theme, _params, getRef) => ({
+ image: {
+ ref: getRef('image'),
+ maxHeight: '80%',
+ maxWidth: '80%',
+ transition: 'transform 100ms ease-in-out',
+ },
+ serviceName: {
+ ref: getRef('serviceName'),
+ },
+ button: {
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: 4,
+ },
+ link: {
+ [`&:hover .${getRef('image')}`]: {
+ // TODO: add styles for image when hovering card
},
- serviceName: {
- ref: getRef('serviceName'),
+ [`&:hover .${getRef('serviceName')}`]: {
+ // TODO: add styles for service name when hovering card
},
- button: {
- height: '100%',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- gap: 4,
- },
- link: {
- [`&:hover .${getRef('image')}`]: {
- // TODO: add styles for image when hovering card
- },
- [`&:hover .${getRef('serviceName')}`]: {
- // TODO: add styles for service name when hovering card
- },
- },
- };
-});
+ },
+}));
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index b235b3295..3d8ae9828 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,5 +1,4 @@
-import { Box, createStyles, Group, Header as MantineHeader, Text } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
+import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
import { useConfigContext } from '../../../config/provider';
import { Logo } from '../Logo';
import { useCardStyles } from '../useCardStyles';
@@ -23,21 +22,6 @@ export function Header(props: any) {
- {
- openContextModal({
- modal: 'changeTilePosition',
- title: 'Change tile position',
- innerProps: {
- tile: config?.services[0],
- },
- });
- }}
- variant="link"
- >
- Test
-
-