From 1980e0e779029fa1c038a7da8e00c826693cf783 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 16 May 2021 12:59:47 +0200
Subject: [PATCH] mockup menu actions

add buttons for upcoming actions
- collapse all
- expand all
- goto selected
---
 .../common/components/buttons/CollapseBtn.jsx  | 18 ++++++++++++++++++
 .../components/buttons/CollapseIconBtn.jsx     | 17 -----------------
 .../common/components/buttons/CurrentBtn.jsx   | 18 ++++++++++++++++++
 .../common/components/buttons/ExpandBtn.jsx    | 18 ++++++++++++++++++
 client/src/features/menu/EventListMenu.jsx     |  6 ++++++
 5 files changed, 60 insertions(+), 17 deletions(-)
 create mode 100644 client/src/common/components/buttons/CollapseBtn.jsx
 delete mode 100644 client/src/common/components/buttons/CollapseIconBtn.jsx
 create mode 100644 client/src/common/components/buttons/CurrentBtn.jsx
 create mode 100644 client/src/common/components/buttons/ExpandBtn.jsx

diff --git a/client/src/common/components/buttons/CollapseBtn.jsx b/client/src/common/components/buttons/CollapseBtn.jsx
new file mode 100644
index 000000000..5e98ef4d1
--- /dev/null
+++ b/client/src/common/components/buttons/CollapseBtn.jsx
@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiChevronsUp } from 'react-icons/fi';
+
+export default function CollapseBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiChevronsUp />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Collapse All
+    </Button>
+  );
+}
diff --git a/client/src/common/components/buttons/CollapseIconBtn.jsx b/client/src/common/components/buttons/CollapseIconBtn.jsx
deleted file mode 100644
index 830e038dd..000000000
--- a/client/src/common/components/buttons/CollapseIconBtn.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiArrowDownCircle } from 'react-icons/fi';
-
-export default function CollapseIconBtn(props) {
-  const { clickhandler, active, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiArrowDownCircle />}
-      colorScheme='orange'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}
diff --git a/client/src/common/components/buttons/CurrentBtn.jsx b/client/src/common/components/buttons/CurrentBtn.jsx
new file mode 100644
index 000000000..2bea19028
--- /dev/null
+++ b/client/src/common/components/buttons/CurrentBtn.jsx
@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiTarget } from 'react-icons/fi';
+
+export default function CurrentBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiTarget />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Goto Current
+    </Button>
+  );
+}
diff --git a/client/src/common/components/buttons/ExpandBtn.jsx b/client/src/common/components/buttons/ExpandBtn.jsx
new file mode 100644
index 000000000..0ad8a9296
--- /dev/null
+++ b/client/src/common/components/buttons/ExpandBtn.jsx
@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiChevronsDown } from 'react-icons/fi';
+
+export default function ExpandBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiChevronsDown />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Expand All
+    </Button>
+  );
+}
diff --git a/client/src/features/menu/EventListMenu.jsx b/client/src/features/menu/EventListMenu.jsx
index 9f8a85f07..988a0748c 100644
--- a/client/src/features/menu/EventListMenu.jsx
+++ b/client/src/features/menu/EventListMenu.jsx
@@ -10,6 +10,9 @@ import {
 } from '@chakra-ui/react';
 import style from './EventListMenu.module.css';
 import MenuActionButtons from '../editors/list/MenuActionButtons';
+import CollapseBtn from 'common/components/buttons/CollapseBtn';
+import ExpandBtn from 'common/components/buttons/ExpandBtn';
+import CurrentBtn from 'common/components/buttons/CurrentBtn';
 
 const EventListMenu = ({ eventsHandler }) => {
   const buttonProps = {
@@ -69,6 +72,9 @@ const EventListMenu = ({ eventsHandler }) => {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
+      <CurrentBtn size='sm' />
+      <CollapseBtn size='sm' />
+      <ExpandBtn size='sm' />
       <MenuActionButtons actionHandler={actionHandler} size='sm' />
     </div>
   );