diff --git a/renderer/components/Sidebar/index.js b/renderer/components/Sidebar/index.js index 2293167ab..e9ec30c1a 100644 --- a/renderer/components/Sidebar/index.js +++ b/renderer/components/Sidebar/index.js @@ -6,6 +6,7 @@ import MenuBar from './MenuBar'; import { IconSearch, IconChevronsRight, IconSettings, IconShieldCheck, IconShieldX, IconLayoutGrid} from '@tabler/icons'; import { updateLeftSidebarWidth, updateIsDragging, toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'; import StyledWrapper from './StyledWrapper'; +import WorkspaceSelector from 'components/Workspaces/WorkspaceSelector'; const MIN_LEFT_SIDEBAR_WIDTH = 222; const MAX_LEFT_SIDEBAR_WIDTH = 600; @@ -73,6 +74,7 @@ const Sidebar = () => {
+
diff --git a/renderer/components/Workspaces/WorkspaceConfigurer/index.js b/renderer/components/Workspaces/WorkspaceConfigurer/index.js new file mode 100644 index 000000000..25ea54d8a --- /dev/null +++ b/renderer/components/Workspaces/WorkspaceConfigurer/index.js @@ -0,0 +1,39 @@ +import Modal from "components/Modal/index"; +import React from "react"; +import { useSelector } from "react-redux"; + +const WorkspaceConfigurer = ({onClose}) => { + const { workspaces } = useSelector((state) => state.workspaces); + + const onSubmit = () => { + onClose(); + } + + return ( + +
    + {workspaces && workspaces.length && workspaces.map((workspace) => ( +
    +
  • {workspace.name}
  • + +
    + ))} +
+
+ ) + +} + +export default WorkspaceConfigurer; diff --git a/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js b/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js new file mode 100644 index 000000000..615e17d54 --- /dev/null +++ b/renderer/components/Workspaces/WorkspaceSelector/StyledWrapper.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + .current-workspace { + margin-inline: .5rem; + background: #fff; + border-radius: 5px; + + .caret { + margin-left: 0.25rem; + color: rgb(140, 140, 140); + fill: rgb(140, 140, 140); + } + } +`; + +export default Wrapper; diff --git a/renderer/components/Workspaces/WorkspaceSelector/index.js b/renderer/components/Workspaces/WorkspaceSelector/index.js new file mode 100644 index 000000000..6f6eabc41 --- /dev/null +++ b/renderer/components/Workspaces/WorkspaceSelector/index.js @@ -0,0 +1,68 @@ +import React, { useRef, forwardRef, useState, useEffect } from 'react'; +import Dropdown from 'components/Dropdown'; +import { IconAdjustmentsHorizontal, IconCaretDown, IconBox } from '@tabler/icons'; +import WorkspaceConfigurer from "../WorkspaceConfigurer"; +import { useDispatch, useSelector } from 'react-redux'; +import { selectWorkspace } from 'providers/ReduxStore/slices/workspaces'; +import StyledWrapper from './StyledWrapper'; + +const WorkspaceSelector = () => { + const dropdownTippyRef = useRef(); + const [openWorkspacesModal, setOpenWorkspacesModal] = useState(false); + const [activeWorkspace, setActiveWorkspace] = useState({}); + const dispatch = useDispatch(); + + const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces); + + useEffect(() => { + setActiveWorkspace(workspaces.find((workspace) => workspace.uid === activeWorkspaceUid)); + }, [activeWorkspaceUid]); + + const Icon = forwardRef((props, ref) => { + return ( +
+
+ + + + + {activeWorkspace.name} + +
+ +
+ ); + }); + + const onDropdownCreate = (ref) => dropdownTippyRef.current = ref; + + const handleSelectWorkspace = (workspace) => { + dispatch(selectWorkspace(workspace)); + } + + return ( + +
+ } placement='bottom-end'> + {workspaces && workspaces.length && workspaces.map((workspace) => ( +
handleSelectWorkspace(workspace)}> + {workspace.name} +
+ ))} + +
{ + setOpenWorkspacesModal(true); + }}> +
+ +
+ Configure +
+
+
+ {openWorkspacesModal && setOpenWorkspacesModal(false)}/>} +
+ ); +}; + +export default WorkspaceSelector; diff --git a/renderer/providers/ReduxStore/index.js b/renderer/providers/ReduxStore/index.js index d86b18fc4..f0bdebf72 100644 --- a/renderer/providers/ReduxStore/index.js +++ b/renderer/providers/ReduxStore/index.js @@ -2,12 +2,14 @@ import { configureStore } from '@reduxjs/toolkit'; import appReducer from './slices/app'; import collectionsReducer from './slices/collections'; import tabsReducer from './slices/tabs'; +import workspacesReducer from './slices/workspaces'; export const store = configureStore({ reducer: { app: appReducer, collections: collectionsReducer, - tabs: tabsReducer + tabs: tabsReducer, + workspaces: workspacesReducer } }); diff --git a/renderer/providers/ReduxStore/slices/workspaces.js b/renderer/providers/ReduxStore/slices/workspaces.js new file mode 100644 index 000000000..2d9aa4470 --- /dev/null +++ b/renderer/providers/ReduxStore/slices/workspaces.js @@ -0,0 +1,31 @@ +import { createSlice } from '@reduxjs/toolkit' + +const initialState = { + workspaces: [{ + uid: 123, + name: 'My Workspace' + },{ + uid: 234, + name: 'workspace B' + },{ + uid: 345, + name: 'workspace C' + }], + activeWorkspaceUid: 123 +}; + +export const workspacesSlice = createSlice({ + name: 'workspaces', + initialState, + reducers: { + selectWorkspace: (state, action) => { + state.activeWorkspaceUid = action.payload.uid; + }, + } +}); + +export const { + selectWorkspace +} = workspacesSlice.actions; + +export default workspacesSlice.reducer;