diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index a41e7e3f5..a05a1ffeb 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -1,3 +1,4 @@ +import { MobileRibbons } from './Mobile/Ribbon/MobileRibbon'; import { DashboardDetailView } from './Views/DetailView'; import { DashboardEditView } from './Views/EditView'; import { useEditModeStore } from './Views/useEditModeStore'; @@ -10,7 +11,14 @@ export const Dashboard = () => { return ( <> {/* The following elemens are splitted because gridstack doesn't reinitialize them when using same item. */} - {isEditMode ? : } + {isEditMode ? ( + <> + + + + ) : ( + + )} ); }; diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx new file mode 100644 index 000000000..29da1710d --- /dev/null +++ b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx @@ -0,0 +1,53 @@ +import { ActionIcon, createStyles, useMantineTheme } from '@mantine/core'; +import { useMediaQuery } from '@mantine/hooks'; +import { IconChevronLeft, IconChevronRight } from '@tabler/icons'; + +export const MobileRibbons = () => { + const theme = useMantineTheme(); + const { classes, cx } = useStyles(); + + const screenSmallerThanSm = useMediaQuery(`(min-width: ${theme.breakpoints.sm}px)`); + + if (screenSmallerThanSm) { + return <>; + } + + return ( +
+ + + + + + + +
+ ); +}; + +const useStyles = createStyles(() => ({ + root: { + position: 'absolute', + top: 0, + left: 0, + width: '100vw', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + pointerEvents: 'none', + }, + button: { + height: 100, + width: 36, + pointerEvents: 'auto', + }, + removeBorderLeft: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + removeBorderRight: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, +})); \ No newline at end of file diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index 18c2025e7..ad53764c8 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -14,20 +14,28 @@ export const ToggleEditModeAction = () => { const smallerThanSm = useScreenSmallerThan('sm'); + const toggleButtonClicked = () => { + toggleEditMode(); + setPopoverManuallyHidden(false); + }; + return ( {smallerThanSm ? ( - + toggleButtonClicked()} + variant="default" + radius="md" + size="xl" + color="blue" + > {enabled ? : } ) : (