Replicate ferdium#497

m-roberts · Dec 24, 2022 · a61b0a7 · a61b0a7
1 parent 21582fd
commit a61b0a7
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 19 deletions.
diff --git 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<IProps> {
     }
   }
 
+  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<IProps> {
             shortcutIndex={0}
           />
           {workspaces.map((workspace, index) => (
-            <WorkspaceDrawerItem
-              key={workspace.id}
-              name={workspace.name}
-              isActive={actualWorkspace === workspace}
-              onClick={() => {
-                if (actualWorkspace === workspace) {
-                  return;
-                }
-                workspaceActions.activate({ workspace });
-                workspaceActions.toggleWorkspaceDrawer();
-              }}
-              onContextMenuEditClick={() =>
-                workspaceActions.edit({ workspace })
-              }
-              services={getServicesForWorkspace(workspace)}
-              shortcutIndex={index + 1}
-            />
+            <div className="wrapper-workspaces-drawer-item">
+              <div className="wrapper-workspaces-drawer-item__workspaces">
+                <WorkspaceDrawerItem
+                  key={workspace.id}
+                  name={workspace.name}
+                  isActive={actualWorkspace === workspace}
+                  onClick={() => {
+                    if (actualWorkspace === workspace) {
+                      return;
+                    }
+                    workspaceActions.activate({ workspace });
+                    workspaceActions.toggleWorkspaceDrawer();
+                  }}
+                  onContextMenuEditClick={() =>
+                    workspaceActions.edit({ workspace })
+                  }
+                  services={getServicesForWorkspace(workspace)}
+                  shortcutIndex={index + 1}
+                />
+              </div>
+              <div className="wrapper-workspaces-drawer-item__buttons">
+                {index !== 0 && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      this.handleClick('goUp', workspaces, index);
+                    }}
+                    className="button-up"
+                  >
+                    <Icon icon={mdiMenuUp} size={1.5} />
+                  </button>
+                )}
+                {index !== workspaces.length - 1 && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      this.handleClick('goDown', workspaces, index);
+                    }}
+                    className="button-down"
+                  >
+                    <Icon icon={mdiMenuDown} size={1.5} />
+                  </button>
+                )}
+              </div>
+            </div>
           ))}
           <div
             className={classes.addNewWorkspaceLabel}

diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
@@ -97,6 +97,31 @@ $tabitem-bias: 30px;
   }
 }
 
+.wrapper-workspaces-drawer-item {
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  width: 107%;
+
+  &__workspaces {
+    display: flex;
+    flex-basis: 100%;
+
+    & > 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;

diff --git a/src/styles/vertical.scss.orig b/src/styles/vertical.scss.orig
@@ -0,0 +1,120 @@
+@import './globals.scss';
+@import './config.scss';
+
+$sidebar-width: 75px;
+$sidebar-bias: 28px;
+$tabitem-bias: 30px;
+
+.sidebar {
+  width: 100vw;
+  height: $sidebar-width;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-bottom: 0px;
+  overflow: hidden !important;
+
+  &::after {
+    top: -10px;
+    right: -10px;
+    bottom: 0;
+    left: -10px;
+    clip-path: inset(10px 10px 0 10px);
+  }
+
+  >div:first-of-type {
+    overflow-x: scroll!important;
+    width: 100%;
+  }
+
+  .tabs {
+    flex-direction: row;
+
+    .tab-item {
+
+      &.is-active {
+        border-left-width: 0px !important;
+        border-top-width: 4px;
+        border-top-style: solid;
+        overflow: hidden;
+        height: $sidebar-width + 4;
+      }
+
+      &:not(.is-active) {
+        padding-top: 4px;
+      }
+
+      &.is-label-enabled{
+        min-width: 70px;
+        max-width: 140px;
+        height: $sidebar-width + 10;
+        width: max-content !important;
+        overflow: hidden;
+        padding-left: 4px;
+        padding-right: 4px;
+        padding-top: 8px;
+      }
+
+      .tab-item__icon {
+        margin-left: 0;
+      }
+    }
+  }
+  div{
+    overflow: hidden !important;
+  }
+
+  .sidebar__button--workspaces.is-active {
+    position: absolute;
+    right: 300px;
+    height: 100%;
+    background-color: #f7f7f9;
+  }
+}
+
+.app .app__content {
+  padding-top: $sidebar-width + $sidebar-bias;
+}
+
+.workspaces-drawer {
+  margin-top: -$sidebar-width;
+  height: 100vh;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -10px;
+    right: 0;
+    bottom: -10px;
+    left: -10px;
+    z-index: 1000;
+    pointer-events: none;
+    clip-path: inset(10px 0 10px 10px);
+    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12),
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
+  }
+}
+
+.theme__dark {
+  .sidebar .sidebar__button--workspaces.is-active {
+    background-color: #2d2f31;
+  }
+
+  .workspaces-drawer::after {
+    box-shadow: inset 0 0 10px 0 $dark-theme-black,
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+  }
+}
+
+.darwin .sidebar {
+  height: $sidebar-width + $sidebar-bias;
+
+  .sidebar__button--workspaces.is-active {
+    height: $sidebar-width - $sidebar-bias;
+  }
+  .tab-item .is-label-enabled{
+    height: $sidebar-width + $tabitem-bias;
+  }
+}