major ui improvements

NGimbal · Mar 23, 2021 · 48b6185 · 48b6185
1 parent b6c1607
commit 48b6185
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 105 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,9 +3,9 @@ import './App.css'
 
 import create from 'zustand'
 
-import Table from './Components/Table/Table'
+import DataTable from './Components/Table/DataTable'
 import Drawer from './Components/Drawer/Drawer'
-
+import AppBar from './Components/AppBar/AppBar'
 import {ThemeProvider} from 'styled-components'
 
 const theme = {
@@ -24,19 +24,16 @@ const theme = {
 
     grey: '#CED3DF',
   }
+
 
 function App() {
 
   return (
     <div className="App">
       <ThemeProvider theme={theme}>
       <div style={{display:'flex', flexDirection:'row', height:'100%'}}>
-        <Drawer/>
-        <div style={{display:'flex', flexDirection:'column', width:'85%'}}>
-          <div style={{display:'flex', flexDirection:'column'}}>
-              <Table/>
-          </div>
-        </div>
+        <Drawer width='15%'/>
+        <DataTable width='85%'/>
       </div>
       </ThemeProvider>
     </div>

diff --git a/src/Components/AppBar/AppBar.js b/src/Components/AppBar/AppBar.js
@@ -1,23 +1,17 @@
 import React, { useEffect, useMemo } from 'react';
 
-import Collaborators from '../Collaborators/Collaborators'
-
 // Change projects, also views for current project
-function AppBar({collabs}) {
+function AppBar() {
 
   return (
     <div style={{width:'100%', 
-                 height:'75px', 
-                 background:'light-grey', 
-                 position:'sticky', 
+                 height:'56px', 
                  left:'0px', 
                  top:'0px', 
                  padding:'1%',
                  boxSizing:'border-box',
                  display:'flex'}}>
-      <Collaborators collabs={collabs}/>
     </div>
-
   );
 }
 

diff --git a/src/Components/Collaborators/Collaborators.css b/src/Components/Collaborators/Collaborators.css
@@ -0,0 +1,7 @@
+.anim_container:hover .anim_avatar:not(:last-child){
+  margin-right:8px;
+}
+
+.anim_avatar{
+  transition: margin 500ms ease-in-out;
+}
diff --git a/src/Components/Collaborators/Collaborators.js b/src/Components/Collaborators/Collaborators.js
@@ -1,38 +1,17 @@
 import React, { useEffect, useMemo } from 'react';
 
 import {Avatar} from 'evergreen-ui'
+import './Collaborators.css'
 
 // click on icon to set name / color
 function Collaborators({collabs}) {
 
   return (
-    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
-      {/* { 
-        collabs.length ?
-        <span style={{fontWeight:'bold', color:collabs[0].color}}>
-          {collabs[0].name}
-        </span> : <></>
-      } */}
-      <div style={{display:'flex', justifyContent:'flex-end', margin:'10px'}}>
-        {collabs.map((friend, i) => {
-          // return <div style={{display:'flex',
-          //                     alignItems:'center', 
-          //                     justifyContent:'center', 
-          //                     backgroundColor:friend.color,
-          //                     boxShadow: i === 0 ? '0px 0px 8px 0px rgba(0,0,0,0.7)' : 'none',
-          //                     color:'white',
-          //                     margin:'0.5%',
-          //                     height:'35px', 
-          //                     width:'35px', 
-          //                     borderRadius:'18px',
-          //                     margin:'4px'}}>
-          //   {friend.name.match(/(^\S\S?|\b\S)?/g).join("").match(/(^\S|\S$)?/g).join("").toUpperCase()}
-          // </div>
-          return <Avatar isSolid name={friend.name ? friend.name : "Anonymous Mouse"} size={40} style={{bacgroundColor:friend.color, zIndex:i*-1}} marginRight={-15} />
-        })}
-      </div>
+    <div className="anim_container" style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
+      {collabs.map((friend, i) => {
+        return <Avatar className="anim_avatar" isSolid name={friend.name ? friend.name : "Anonymous Mouse"} size={36} style={{zIndex:i*-1}} marginRight={-15} />
+      })}
     </div>
-
   );
 }
 

diff --git a/src/Components/Drawer/Drawer.js b/src/Components/Drawer/Drawer.js
@@ -1,26 +1,26 @@
+import { Heading, ListItem, Pane, Text, TickCircleIcon, UnorderedList, Menu, Link } from 'evergreen-ui';
 import React, { useEffect, useMemo } from 'react';
 
 // Change projects, also views for current project
-function Drawer({orgs, projects}) {
+function Drawer({orgs, projects, width}) {
 
   return (
-    <div style={{height:'100%', width:'15%', background:'grey', position:'sticky', left:'0px'}}>
-      <h4>Born Ready Architecture</h4>
-      <ul>
-        <li>
-          Project 1
-        </li>
-        <li>
-          Project 2
-        </li>
-        <li>
-          Project 3
-        </li>
-        <li>
-          Project 4
-        </li>
-      </ul>
-    </div>
+    <Pane
+      height="100%"
+      width={width}
+      display="flex"
+      border="default"
+      flexDirection="column"
+      alignItems="flex-start"
+    >
+      <Heading size={600} marginTop={24} marginLeft={8} marginBottom={16}>Projects</Heading>
+      <div style={{marginLeft:'8px', borderBottom:'1px solid #E4E7EB',width:'85%',height:'1px',boxSizing:'border-box'}}/>
+      <UnorderedList marginLeft={32}>
+        <ListItem icon={TickCircleIcon} iconColor="success"><Link href='#' color="neutral">Project 1</Link></ListItem>
+        <ListItem icon={TickCircleIcon} iconColor="success"><Link href='#' color="neutral">Project 2</Link></ListItem>
+        <ListItem icon={TickCircleIcon} iconColor="success"><Link href='#' color="neutral">Project 3</Link></ListItem>
+      </UnorderedList>
+    </Pane>
 
   );
 }

diff --git a/src/Components/ImportCSV/ImportCSV.js b/src/Components/ImportCSV/ImportCSV.js
@@ -1,3 +1,4 @@
+import { FilePicker } from 'evergreen-ui';
 import React, { useEffect, useMemo } from 'react';
 import { useAsyncCallback } from 'react-async-hook';
 
@@ -90,10 +91,11 @@ function ImportCSV(props) {
   },[fileContents.result])
 
   return (
-    <div>
-      <label htmlFor="input-file">Choose a CSV File:</label>
-      <input id="input-file" type="file" onChange={getFile}></input>
-    </div>
+    // <div>
+    //   <label htmlFor="input-file">Choose a CSV File:</label>
+    //   <input id="input-file" type="file" onChange={getFile}></input>
+    // </div>
+    <FilePicker onChange={getFile} placeholder="Choose a CSV File"/>
   );
 }
 

diff --git a/src/Components/Table/Table.js → src/Components/Table/DataTable.js b/src/Components/Table/Table.js → src/Components/Table/DataTable.js
@@ -4,20 +4,22 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { useTable, useGroupBy, useExpanded, useRowState } from 'react-table'
 import { useYDoc, useYArray, useYMap } from 'zustand-yjs'
-
+import {Table} from 'evergreen-ui'
 
 import { WebsocketProvider } from 'y-websocket'
 import * as chroma from 'chroma-js'
 
 import Toolbar from './Toolbar'
 import {EditRow, EditCell, GroupedRow} from './Row'
 import {Footer} from './Toolbar'
+import TableHeader from './TableHeader'
 
 import GlobalControls from './GlobalControls'
 
 const Styles = styled.div`
-  margin:10px;  
+  width: ${props => props.width};
   table {
+    margin: 5px 20px 5px 20px;
     color: ${props => props.theme.text};
     border-spacing: 0;
     border: 1px solid ${props => props.theme.text};
@@ -109,7 +111,7 @@ const useAwareness = (initAwareness) => {
   return [collabs, setAwareness]
 }
 
-function Table() {
+function DataTable({width}) {
   const yDoc = useYDoc('docguid', connectDoc)
   const {data, push: yPush, insert: yInsert} = useYArray(yDoc.getArray('table1'))
 
@@ -156,22 +158,22 @@ function Table() {
   )
 
   return (
-    <Styles>
+    <Styles width={width}>
       <GlobalControls collabs={collabs}/>
       <table {...getTableProps()}>
-
         <thead>
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps()}>
-                  {column.canGroupBy ? (
-                    <span {...column.getGroupByToggleProps()}>
-                      {column.isGrouped ? '🤌' : '🖐'}
-                    </span>
-                  ) : null}
-                  {column.render('Header')}
-                </th>
+                // <th {...column.getHeaderProps()}>
+                  <TableHeader column={column}/>
+            //       {column.canGroupBy ? (
+            //         <span {...column.getGroupByToggleProps()}>
+            //           {column.isGrouped ? '🤌' : '🖐'}
+            //         </span>
+            //       ) : null}
+            //       {column.render('Header')}
+            //     </th>
               ))}
             </tr>
           ))}
@@ -200,4 +202,4 @@ function Table() {
   )
 }
 
-export default Table
+export default DataTable
diff --git a/src/Components/Table/GlobalControls.css b/src/Components/Table/GlobalControls.css
diff --git a/src/Components/Table/GlobalControls.js b/src/Components/Table/GlobalControls.js
@@ -1,27 +1,23 @@
 // Add row, import CSV, download CSV buttons
 import React from 'react';
 
-import Collaborators from '../Collaborators/Collaborators'
-
-import {Button} from 'evergreen-ui'
+import {IconButton} from 'evergreen-ui'
 import {CogIcon, GroupObjectsIcon, FilterListIcon} from 'evergreen-ui'
+import Collaborators from '../Collaborators/Collaborators';
 
 // Change projects, also views for current project
 function GlobalControls({collabs}) {
 
   return (
-    <div style={{width:'100%', display:'flex'}}>
-      <div style={{width:'40%', display:'flex'}}>
-        <Button iconBefore={GroupObjectsIcon}> Group </Button>
-        <Button iconBefore={FilterListIcon}> Filter </Button>
-        <Button iconBefore={CogIcon}>Settings</Button>  
-      </div>
-      <Collaborators collabs={collabs}/>
+    <div style={{display:'flex', margin:'20px 20px 0px 20px', alignItems:'center', justifyContent:'space-between'}}>
+        <div style={{display:'flex'}}>
+          <IconButton icon={GroupObjectsIcon} marginRight={10}/>
+          <IconButton icon={FilterListIcon} marginRight={10}/>
+          <IconButton icon={CogIcon}/>
+        </div>
+        <Collaborators collabs={collabs}/>
     </div>
   );
 }
 
-export default GlobalControls;
-
-
-
+export default GlobalControls;
diff --git a/src/Components/Table/TableHeader.js b/src/Components/Table/TableHeader.js
@@ -0,0 +1,40 @@
+// Add row, import CSV, download CSV buttons
+import React, { useEffect, useMemo } from 'react';
+
+import Collaborators from '../Collaborators/Collaborators'
+
+import * as Y from 'yjs'
+
+import {Table, Menu, Popover, Position, TextDropdownButton, MoreIcon, EditIcon, GroupObjectsIcon} from 'evergreen-ui'
+
+// Change projects, also views for current project
+function TableHeader({column}) {
+
+  return (
+    <th {...column.getHeaderProps()}>
+      <Popover
+        position={Position.BOTTOM_LEFT}
+        content={
+          <Menu>
+            <Menu.Group>
+              <Menu.Item icon={EditIcon}>Rename</Menu.Item>
+              <Menu.Item icon={GroupObjectsIcon}>Group by</Menu.Item>
+            </Menu.Group>
+          </Menu>
+        }>
+          <TextDropdownButton
+            icon={MoreIcon}
+            style={{
+              width:'calc(100% - 20px)',
+              justifyContent:'space-between',
+              padding:'0px 10px',
+            }}
+          >
+            {column.render('Header')}
+          </TextDropdownButton>
+        </Popover>
+    </th>
+  );
+}
+
+export default TableHeader;
diff --git a/src/Components/Table/Toolbar.js b/src/Components/Table/Toolbar.js
@@ -5,6 +5,8 @@ import Collaborators from '../Collaborators/Collaborators'
 
 import * as Y from 'yjs'
 
+import {Button, ImportIcon, Pane, PlusIcon, Popover, Position} from 'evergreen-ui'
+
 import ImportCSV from '../ImportCSV/ImportCSV'
 
 const blankRow = {
@@ -30,9 +32,24 @@ function Toolbar({yDoc, yPush, yInsert}) {
   }
 
   return (
-    <div style={{width:'100%', display:'flex'}}>
-      <input type="button" value="+" onClick={addRow}/>
-      <ImportCSV doc={yDoc} yPush={yPush} yInsert={yInsert}/>
+    <div style={{width:'100%', display:'flex', alignItems:'flex-start'}}>
+      <Button iconBefore={PlusIcon} onClick={addRow} marginLeft={20} marginRight={10}>Add Row</Button>
+      <Popover
+        bringFocusInside
+        position={Position.BOTTOM}
+        content={
+          <Pane
+          paddingX={10}
+          paddingY={10}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          flexDirection="column">
+            <ImportCSV doc={yDoc} yPush={yPush} yInsert={yInsert}/>
+          </Pane> 
+        }>
+          <Button iconBefore={ImportIcon}>Import CSV</Button>
+        </Popover>
     </div>
   );
 }