feat: vscode themed menubar

2022-01-31 10:36:29 +05:30 · 2022-01-31 10:36:29 +05:30 · 87907eeb53
commit 87907eeb53
parent 42fa05bc0f
11 changed files with 169 additions and 72 deletions
--- a/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
@ -1,6 +1,20 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  .collection-dropdown {
+    color: rgb(110 110 110);
+
+    &:hover {
+      color: inherit;
+    }
+
+    .tippy-box {
+      top: -0.5rem;
+      position: relative;
+      user-select: none;
+    }
+  }
+  
 `;

 export default StyledWrapper;
--- a/packages/grafnode-components/src/components/Navbar/index.js
+++ b/packages/grafnode-components/src/components/Navbar/index.js
@ -1,15 +1,49 @@
-import React from 'react';
-import { IconLayoutGrid } from '@tabler/icons';
+import React, { useState, forwardRef, useRef } from 'react';
+import Dropdown from '../Dropdown';
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconBox, IconSearch, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';

 const Navbar = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const menuDropdownTippyRef = useRef();
+  const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="dropdown-icon cursor-pointer">
+        <IconDots size={22}/>
+      </div>
+    );
+  });
+
  return (
    <StyledWrapper className="px-2 py-2 flex items-center">
-      <IconLayoutGrid size={20} strokeWidth={1.5}/>
-      <span className="ml-2">My Workspace</span>
-      <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
+      <div>
+        <span className="ml-2">My Workspace</span>
+        <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
+      </div>
+      <div className="collection-dropdown flex flex-grow items-center justify-end">
+        <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+            setModalOpen(true);
+          }}>
+            Create Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Import Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Settings
+          </div>
+        </Dropdown>
+      </div>
    </StyledWrapper>
  )
 };
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js
@ -18,13 +18,12 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
    return <div></div>;
  }

-  let asideWidth = 230;
+  let asideWidth = 270;
  let {
    schema 
  } = useGraphqlSchema('https://api.spacex.land/graphql');
  const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar
  const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2);
-  console.log((window.innerWidth - asideWidth)/2);
  const [dragging, setDragging] = useState(false);
  const handleMouseMove = (e) => {
    if(dragging) {
@ -64,7 +63,6 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
  };

  const onGraphqlQueryChange = (value) => {
-    console.log(value);
    dispatch({
      type: actions.REQUEST_GQL_QUERY_CHANGED,
      query: value,
--- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@ -32,20 +32,14 @@ const Wrapper = styled.div`
    }

    &.item-focused-in-tab {
-      background: var(--color-brand);
-      color: white;
+      background: var(--color-sidebar-collection-item-active-background);

      &:hover {
-        background: var(--color-brand) !important;
-        color: white !important;
-      }
-
-      .menu-icon {
-        color: white !important;
+        background: var(--color-sidebar-collection-item-active-background) !important;
      }

      .indent-block {
-        border-right: solid 1px var(--color-sidebar-collection-item-focused-indent-border);
+        border-right: solid 1px var(--color-sidebar-collection-item-active-indent-border);
      }
    }

--- a/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js
@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background-color: rgb(44, 44, 44);
+  color: rgba(255, 255, 255, 0.5);
+
+  .menu-item {
+    padding: 0.6rem;
+    cursor: pointer;
+
+    &:hover, &.active {
+      color: rgba(255, 255, 255);
+    }
+  }
+`;
+
+export default Wrapper;
--- a/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js
+++ b/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js
@ -0,0 +1,37 @@
+import React from 'react';
+import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconLayoutGrid } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const MenuBar = () => {
+  return (
+    <StyledWrapper className="h-full flex flex-col">
+      <div className="flex flex-col">
+        <div className="menu-item active">
+          <IconCode size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconStack size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconGitPullRequest size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconUsers size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconLayoutGrid size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+      <div className="flex flex-col flex-grow justify-end">
+        <div className="menu-item">
+          <IconUser size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconSettings size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default MenuBar;
--- a/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js
@ -1,6 +1,11 @@
 import styled from 'styled-components';

 const Wrapper = styled.aside`
+  min-width: 270px;
+  width: 270px;
+  /* background-color: #F6F8FA; */
+  background-color: var(--color-sidebar-background);
+
  .collection-title {
    line-height: 1.5;
    .collection-dropdown {
--- a/packages/grafnode-components/src/components/Sidebar/index.js
+++ b/packages/grafnode-components/src/components/Sidebar/index.js
@ -1,6 +1,7 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import Collections from './Collections';
 import CreateCollection from './CreateCollection';
+import MenuBar from './MenuBar';
 import Navbar from '../Navbar';
 import Dropdown from '../Dropdown';
 import { IconBox, IconSearch, IconDots } from '@tabler/icons';
@ -24,7 +25,6 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
  };

  const handleConfirm = (values) => {
-    console.log(values);
    dispatch({
      name: values.collectionName,
      type: actions.COLLECTION_CREATE
@ -43,54 +43,59 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
        />
      ) : null}

-      <Navbar />
+      <div className="flex flex-row h-full">
+        <MenuBar />

-      <div className="mt-4 px-2 py-1 flex collection-title">
-        <IconBox size={22} strokeWidth={1.5}/>
-        <span className="ml-2">Collections</span>
-        <div className="collection-dropdown flex flex-grow items-center justify-end">
-          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-              setModalOpen(true);
-            }}>
-              Create Collection
+        <div>
+          <Navbar />
+
+          <div className="mt-4 px-2 py-1 flex collection-title hidden">
+            <span className="ml-2">Collections</span>
+            <div className="collection-dropdown flex flex-grow items-center justify-end">
+              <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                  setModalOpen(true);
+                }}>
+                  Create Collection
+                </div>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                }}>
+                  Import Collection
+                </div>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                }}>
+                  Settings
+                </div>
+              </Dropdown>
            </div>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-            }}>
-              Import Collection
+          </div>
+
+          <div className="mt-4 relative collection-filter px-2">
+            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+              <span className="text-gray-500 sm:text-sm">
+                <IconSearch size={16} strokeWidth={1.5}/>
+              </span>
            </div>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-            }}>
-              Settings
-            </div>
-          </Dropdown>
+            <input
+              type="text"
+              name="price"
+              id="price"
+              className="block w-full pl-7 py-1 sm:text-sm"
+              placeholder="search"
+            />
+          </div>
+
+          <Collections
+            collections={collections}
+            actions={actions}
+            dispatch={dispatch}
+            activeRequestTabId={activeRequestTabId}
+          />
        </div>
      </div>
-
-      <div className="mt-4 relative collection-filter px-2">
-        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-          <span className="text-gray-500 sm:text-sm">
-            <IconSearch size={16} strokeWidth={1.5}/>
-          </span>
-        </div>
-        <input
-          type="text"
-          name="price"
-          id="price"
-          className="block w-full pl-7 py-1 sm:text-sm"
-          placeholder="search"
-        />
-      </div>
-
-      <Collections
-        collections={collections}
-        actions={actions}
-        dispatch={dispatch}
-        activeRequestTabId={activeRequestTabId}
-      />
    </StyledWrapper>
  );
 };
--- a/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js
+++ b/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js
@ -31,7 +31,6 @@ const useGraphqlSchema =(endpoint) => {
      })
      .catch((err) => {
        setError(err);
-        console.log(err);
      });
  }, []);

--- a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
+++ b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
@ -6,13 +6,6 @@ const Wrapper = styled.div`
  height: 100%;
  min-height: 100vh;

-  aside {
-    min-width: 230px;
-    width: 230px;
-    border-right: solid 1px var(--color-layout-border);
-    background-color: #F6F8FA;
-  }
-
  section.main {
    display: flex;

--- a/packages/grafnode-run/src/styles/globals.css
+++ b/packages/grafnode-run/src/styles/globals.css
@ -1,14 +1,15 @@

 :root {
  --color-brand: #546de5;
-  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
-  --color-sidebar-background: #f6f8fa;
+  --color-sidebar-collection-item-active-indent-border: #d0d0d0;
+  --color-sidebar-collection-item-active-background: #dddddd;
+  --color-sidebar-background: rgb(243, 243, 243);
  --color-request-dragbar-background: #e2e2e2;
  --color-request-dragbar-background-active: #bbb;
  --color-tab-active-border: #4d4d4d;
  --color-layout-border: #dedede;
  --color-codemirror-border: #efefef;
-  --color-codemirror-background: #f6f8fa;
+  --color-codemirror-background: rgb(243, 243, 243);
 }

 html, body {