moar ui

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

Hide file tree

Showing 8 changed files with 56 additions and 69 deletions.
diff --git a/src/App.js b/src/App.js
@@ -31,6 +31,7 @@ function App() {
   return (
     <div className="App">
       <ThemeProvider theme={theme}>
+      <AppBar/>
       <div style={{display:'flex', flexDirection:'row', height:'100%'}}>
         <Drawer width='15%'/>
         <DataTable width='85%'/>

diff --git a/src/Components/AppBar/AppBar.js b/src/Components/AppBar/AppBar.js
@@ -1,16 +1,30 @@
 import React, { useEffect, useMemo } from 'react';
 
+import {Button, Heading} from 'evergreen-ui'
 // Change projects, also views for current project
 function AppBar() {
 
   return (
     <div style={{width:'100%', 
-                 height:'56px', 
+                 height:'48px', 
                  left:'0px', 
                  top:'0px', 
                  padding:'1%',
                  boxSizing:'border-box',
-                 display:'flex'}}>
+                 display:'flex',
+                 backgroundColor:'#2979FF',
+                 boxShadow:"0px 2px 2px 1px rgba(0,0,0,0.35)",
+                 zIndex:'1000',
+                 display:'flex',
+                 alignItems:'center',
+                 justifyContent:'space-between'
+                 }}>
+        <Heading size='700' color='white'>matte.</Heading>
+        <div style={{display:'flex'}}>
+          <Button appearance="minimal" height={40} style={{color:'white'}}>Search</Button>
+          <Button appearance="minimal" height={40} style={{color:'white'}}>Organize</Button>
+          <Button appearance="minimal" height={40} style={{color:'white'}}>Discover</Button>
+        </div>
     </div>
   );
 }

diff --git a/src/Components/Drawer/Drawer.js b/src/Components/Drawer/Drawer.js
@@ -12,6 +12,8 @@ function Drawer({orgs, projects, width}) {
       border="default"
       flexDirection="column"
       alignItems="flex-start"
+      border="none"
+      boxShadow="1px 0px 2px 1px rgba(0,0,0,0.125)"
     >
       <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'}}/>

diff --git a/src/Components/Table/DataTable.js b/src/Components/Table/DataTable.js
@@ -4,7 +4,7 @@ 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 {Heading, Table} from 'evergreen-ui'
 
 import { WebsocketProvider } from 'y-websocket'
 import * as chroma from 'chroma-js'
@@ -18,8 +18,9 @@ import GlobalControls from './GlobalControls'
 
 const Styles = styled.div`
   width: ${props => props.width};
+  padding: 24px;
   table {
-    margin: 5px 20px 5px 20px;
+    margin: 4px 0px 4px 0px;
     color: ${props => props.theme.text};
     border-spacing: 0;
     border: 1px solid ${props => props.theme.text};
@@ -165,7 +166,6 @@ function DataTable({width}) {
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
-                // <th {...column.getHeaderProps()}>
                   <TableHeader column={column}/>
             //       {column.canGroupBy ? (
             //         <span {...column.getGroupByToggleProps()}>

diff --git a/src/Components/Table/GlobalControls.js b/src/Components/Table/GlobalControls.js
@@ -9,10 +9,10 @@ import Collaborators from '../Collaborators/Collaborators';
 function GlobalControls({collabs}) {
 
   return (
-    <div style={{display:'flex', margin:'20px 20px 0px 20px', alignItems:'center', justifyContent:'space-between'}}>
+    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
         <div style={{display:'flex'}}>
-          <IconButton icon={GroupObjectsIcon} marginRight={10}/>
-          <IconButton icon={FilterListIcon} marginRight={10}/>
+          <IconButton icon={GroupObjectsIcon} marginRight={8}/>
+          <IconButton icon={FilterListIcon} marginRight={8}/>
           <IconButton icon={CogIcon}/>
         </div>
         <Collaborators collabs={collabs}/>

diff --git a/src/Components/Table/Row.js b/src/Components/Table/Row.js
@@ -6,6 +6,7 @@ import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useTable, useGroupBy, useExpanded, useRowState } from 'react-table'
 import { useYDoc, useYArray, useYMap } from 'zustand-yjs'
+import { Button, ChevronDownIcon, ChevronRightIcon, CollapseAllIcon, ExpandAllIcon, Heading } from 'evergreen-ui'
 
 export const EditCell = ({
   value: initialValue,
@@ -69,31 +70,18 @@ export const EditRow = ({
     <tr {...row.getRowProps()}>
       {row.cells.map(cell => {
         return (
-          <td 
-            {...cell.getCellProps()}
-            style={{
-              background: cell.isGrouped
-                ? '#0aff0082' // green
-                : cell.isAggregated
-                ? '#ffa50078' // orange
-                : cell.isPlaceholder
-                ? '#ff000042'
-                : 'default'
-              }}
-            >
-              {cell.isGrouped ? (
-                <>
-                  <span {...row.getToggleRowExpandedProps()}>
-                    {row.isExpanded ? '👇' : '👉'}
-                  </span>{' '}
-                  {cell.render('Cell')} ({row.subRows.length})
-                </>
-                ) : cell.isAggregated ? (
-                  cell.render('Aggregated')
-                ) : cell.isPlaceholder? null : (
-                  cell.render(EditCell, {value:cell.value, column: cell.column.id, row:cell.row.id, set: set, awareProvider, collabs})
-                )
-              }
+          <td {...cell.getCellProps()}>
+            {cell.isPlaceholder ? (
+                <></>
+              ) : (
+                cell.render(EditCell, {value:cell.value, 
+                                        column: cell.column.id, 
+                                        row:cell.row.id, 
+                                        set: set, 
+                                        awareProvider, 
+                                        collabs})
+              )
+            }
           </td>
         )
       })}
@@ -107,38 +95,19 @@ export const GroupedRow = ({
 
   return (
     <tr {...row.getRowProps()}>
-      {row.cells.map(cell => {
-        return (
-          <td 
-            {...cell.getCellProps()}
-            style={{
-              background: cell.isGrouped
-                ? '#0aff0082' // green
-                : cell.isAggregated
-                ? '#ffa50078' // orange
-                : cell.isPlaceholder
-                ? '#ff000042'
-                : 'white'
-              }}
-            >
-              {cell.isGrouped ? (
-                <>
-                  <span {...row.getToggleRowExpandedProps()}>
-                    {row.isExpanded ? '👇' : '👉'}
-                  </span>{' '}
-                  {cell.render('Cell')} ({row.subRows.length})
-                </>
-                ) : cell.isAggregated ? (
-                  cell.render('Aggregated')
-                ) : cell.isPlaceholder ? null : (
-                  cell.render('Cell') // this shouldn't happen?
-                )
-              }
-          </td>
-        )
+      {row.cells.map((cell, i) => {
+          if(i > row.depth) return 
+          return (
+            i === row.depth ?
+              <td colSpan={Object.keys(row.values).length - i} style={{display:'flex'}} {...cell.getCellProps()}>
+                <Button height={32} appearance="minimal" iconBefore={row.isExpanded ? <ChevronDownIcon/>  : <ChevronRightIcon/>}  {...row.getToggleRowExpandedProps()}> 
+                  {row.groupByVal}
+                </Button>
+              </td>
+              :
+              cell.render(<td></td>)
+          )
       })}
     </tr>  
   )
-}
-
-// export {EditCell, EditRow, GroupedRow}
+}
diff --git a/src/Components/Table/TableHeader.js b/src/Components/Table/TableHeader.js
@@ -18,7 +18,7 @@ function TableHeader({column}) {
           <Menu>
             <Menu.Group>
               <Menu.Item icon={EditIcon}>Rename</Menu.Item>
-              <Menu.Item icon={GroupObjectsIcon}>Group by</Menu.Item>
+              <Menu.Item icon={GroupObjectsIcon} {...column.getGroupByToggleProps()}>Group by</Menu.Item>
             </Menu.Group>
           </Menu>
         }>

diff --git a/src/Components/Table/Toolbar.js b/src/Components/Table/Toolbar.js
@@ -5,7 +5,7 @@ import Collaborators from '../Collaborators/Collaborators'
 
 import * as Y from 'yjs'
 
-import {Button, ImportIcon, Pane, PlusIcon, Popover, Position} from 'evergreen-ui'
+import {Button, ExportIcon, ImportIcon, Pane, PlusIcon, Popover, Position} from 'evergreen-ui'
 
 import ImportCSV from '../ImportCSV/ImportCSV'
 
@@ -33,7 +33,7 @@ function Toolbar({yDoc, yPush, yInsert}) {
 
   return (
     <div style={{width:'100%', display:'flex', alignItems:'flex-start'}}>
-      <Button iconBefore={PlusIcon} onClick={addRow} marginLeft={20} marginRight={10}>Add Row</Button>
+      <Button iconBefore={PlusIcon} onClick={addRow} marginRight={8}>Add Row</Button>
       <Popover
         bringFocusInside
         position={Position.BOTTOM}
@@ -48,8 +48,9 @@ function Toolbar({yDoc, yPush, yInsert}) {
             <ImportCSV doc={yDoc} yPush={yPush} yInsert={yInsert}/>
           </Pane> 
         }>
-          <Button iconBefore={ImportIcon}>Import CSV</Button>
+          <Button iconBefore={ImportIcon} marginRight={8}>Import CSV</Button>
         </Popover>
+        <Button iconBefore={ExportIcon}>Export CSV</Button>
     </div>
   );
 }