From 87907eeb538e96e55b6c6480e471821631122c03 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Mon, 31 Jan 2022 10:36:29 +0530 Subject: [PATCH] feat: vscode themed menubar --- .../src/components/Navbar/StyledWrapper.js | 14 +++ .../src/components/Navbar/index.js | 44 ++++++++- .../src/components/RequestTabPanel/index.js | 4 +- .../CollectionItem/StyledWrapper.js | 12 +-- .../Sidebar/MenuBar/StyledWrapper.js | 17 ++++ .../src/components/Sidebar/MenuBar/index.js | 37 ++++++++ .../src/components/Sidebar/StyledWrapper.js | 5 + .../src/components/Sidebar/index.js | 93 ++++++++++--------- .../src/hooks/useGraphqlSchema/index.js | 1 - .../src/pageComponents/Main/StyledWrapper.js | 7 -- packages/grafnode-run/src/styles/globals.css | 7 +- 11 files changed, 169 insertions(+), 72 deletions(-) create mode 100644 packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js create mode 100644 packages/grafnode-components/src/components/Sidebar/MenuBar/index.js diff --git a/packages/grafnode-components/src/components/Navbar/StyledWrapper.js b/packages/grafnode-components/src/components/Navbar/StyledWrapper.js index 195b0632f..4a4d12302 100644 --- 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; \ No newline at end of file diff --git a/packages/grafnode-components/src/components/Navbar/index.js b/packages/grafnode-components/src/components/Navbar/index.js index 59415f8de..635f2236c 100644 --- 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 ( +
+ +
+ ); + }); + return ( - - My Workspace - +
+ My Workspace + +
+
+ } placement='bottom-start'> +
{ + menuDropdownTippyRef.current.hide(); + setModalOpen(true); + }}> + Create Collection +
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Import Collection +
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Settings +
+ +
) }; diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js index 2c611d4e8..a259c001c 100644 --- 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
; } - 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, diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index 77b84fd21..2794f5cc4 100644 --- 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); } } diff --git a/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js new file mode 100644 index 000000000..e9980f196 --- /dev/null +++ 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; diff --git a/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js b/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js new file mode 100644 index 000000000..b43707651 --- /dev/null +++ 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 ( + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ + ); +}; + +export default MenuBar; \ No newline at end of file diff --git a/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js index 6ef7bda54..d3eca4ed1 100644 --- 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 { diff --git a/packages/grafnode-components/src/components/Sidebar/index.js b/packages/grafnode-components/src/components/Sidebar/index.js index 1dc35a590..fbdcbec87 100644 --- 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} - +
+ -
- - Collections -
- } placement='bottom-start'> -
{ - menuDropdownTippyRef.current.hide(); - setModalOpen(true); - }}> - Create Collection +
+ + +
+ Collections +
+ } placement='bottom-start'> +
{ + menuDropdownTippyRef.current.hide(); + setModalOpen(true); + }}> + Create Collection +
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Import Collection +
+
{ + menuDropdownTippyRef.current.hide(); + }}> + Settings +
+
-
{ - menuDropdownTippyRef.current.hide(); - }}> - Import Collection +
+ +
+
+ + +
-
{ - menuDropdownTippyRef.current.hide(); - }}> - Settings -
- + +
+ +
- -
-
- - - -
- -
- - ); }; diff --git a/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js b/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js index f5e7cebb7..43d3ee4d9 100644 --- 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); }); }, []); diff --git a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js index 2bb60e845..98a029a71 100644 --- 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; diff --git a/packages/grafnode-run/src/styles/globals.css b/packages/grafnode-run/src/styles/globals.css index 16898c11d..d51a6c934 100644 --- 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 {