diff --git a/src/features/workspaces/components/WorkspaceDrawer.jsx b/src/features/workspaces/components/WorkspaceDrawer.jsx index b0b0e639ab..2f37a10db8 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.jsx +++ b/src/features/workspaces/components/WorkspaceDrawer.jsx @@ -5,7 +5,7 @@ import injectSheet from 'react-jss'; import { defineMessages, injectIntl } from 'react-intl'; import ReactTooltip from 'react-tooltip'; -import { mdiPlusBox, mdiCog } from '@mdi/js'; +import { mdiPlusBox, mdiCog, mdiMenuUp, mdiMenuDown } from '@mdi/js'; import { H1 } from '../../../components/ui/headline'; import Icon from '../../../components/ui/icon'; @@ -64,7 +64,7 @@ const styles = theme => ({ }, workspaces: { height: 'auto', - overflowY: 'auto', + overflowY: 'visible', }, addNewWorkspaceLabel: { height: 'auto', @@ -104,6 +104,27 @@ class WorkspaceDrawer extends Component { } } + handleClick(e, workspaces, index) { + switch (e) { + case 'goUp': + if (index !== 0) { + const toIndex = index - 1; + const element = workspaces.splice(index, 1)[0]; + workspaces.splice(toIndex, 0, element); + } + break; + case 'goDown': + if (index !== workspaces.length - 1) { + const toIndex = index + 1; + const element = workspaces.splice(index, 1)[0]; + workspaces.splice(toIndex, 0, element); + } + break; + default: + break; + } + } + render() { const { classes, getServicesForWorkspace } = this.props; const { intl } = this.props; @@ -144,21 +165,53 @@ class WorkspaceDrawer extends Component { shortcutIndex={0} /> {workspaces.map((workspace, index) => ( - { - if (actualWorkspace === workspace) return; - workspaceActions.activate({ workspace }); - workspaceActions.toggleWorkspaceDrawer(); - }} - onContextMenuEditClick={() => - workspaceActions.edit({ workspace }) - } - services={getServicesForWorkspace(workspace)} - shortcutIndex={index + 1} - /> +
+
+ { + if (actualWorkspace === workspace) { + return; + } + workspaceActions.activate({ workspace }); + workspaceActions.toggleWorkspaceDrawer(); + }} + onContextMenuEditClick={() => + workspaceActions.edit({ workspace }) + } + services={getServicesForWorkspace(workspace)} + shortcutIndex={index + 1} + workspaces={workspaces} + className="wrapper-workspaces-drawer-item__workspace" + /> +
+
+ {index !== 0 && ( + + )} + {index !== workspaces.length - 1 && ( + + )} +
+
))}
div { + width: 100%; + overflow: auto; + } + } + &__buttons { + display: flex; + flex-direction: column; + position: relative; + top: 0; + right: 9%; + bottom: 0; + } +} + .theme__dark { .sidebar .sidebar__button--workspaces.is-active { background-color: #2d2f31;