diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx index 61284d81af..848cf1e245 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.tsx +++ b/src/features/workspaces/components/WorkspaceDrawer.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import withStyles, { WithStylesProps } from 'react-jss'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import ReactTooltip from 'react-tooltip'; -import { mdiPlusBox, mdiCog } from '@mdi/js'; +import { mdiPlusBox, mdiCog, mdiMenuUp, mdiMenuDown } from '@mdi/js'; import { noop } from 'lodash'; import { H1 } from '../../../components/ui/headline'; import Icon from '../../../components/ui/icon'; @@ -63,7 +63,7 @@ const styles = theme => ({ }, workspaces: { height: 'auto', - overflowY: 'auto', + overflowY: 'visible', }, addNewWorkspaceLabel: { height: 'auto', @@ -103,6 +103,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(): ReactElement { const { classes, getServicesForWorkspace } = this.props; const { intl } = this.props; @@ -144,23 +165,51 @@ 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} + /> +
+
+ {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;