feat: arranged the ui for creating and viewing

src/views/App.css

@@ -13,3 +13,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.Workspace {
+  display: flex;
+  justify-content: space-between;
+}

src/views/App.js

@@ -1,22 +1,18 @@
 import React, { Component } from 'react'
 import './App.css'
 import 'semantic-ui-css/semantic.min.css'
-import CreateTableForm from './CreateTable/CreateTableForm'
-import TableList from './TableList/TableList'
-import CreateNodule from './CreateNodule/CreateNodule'
-import NoduleList from './NoduleList/NoduleList'
 import DataTable from './DataTable/DataTable'
+import ListViewer from './ListViewer/ListViewer'
 
 class App extends Component {
   render = () => {
     return (
       <div className='App'>
-        <CreateTableForm />
+        <div className='Workspace'>
-        <CreateNodule />
+          <ListViewer />
-        <TableList />
-        <NoduleList />
           <DataTable />
         </div>
+      </div>
     )
   }
 }

src/views/CreateNodule/CreateNodule.css

@@ -1,5 +1,6 @@
 .CreateNodule {
   width: 380px;
+  height: 100%;
   padding: 40px;
   border-radius: 6px;
   border: solid rgb(240, 240, 240) 1px;

src/views/CreateTable/CreateTableForm.css

@@ -1,10 +1,19 @@
 .CreateTableForm {
   width: 380px;
+  height: 100%;
   padding: 40px;
   border-radius: 6px;
   border: solid rgb(240, 240, 240) 1px;
 }
 
+.CreateTablePopOver {
+  position: fixed;
+  top: 30%;
+  left: 40%;
+  z-index: 1000;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 20px;
+}
+
 .creatTableFormSubmitButtons {
   margin-top: 6px;
   display: flex;

src/views/CreateTable/CreateTablePopOver.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import CreateTableForm from './CreateTableForm'
+import './CreateTableForm.css'
+
+class CreateTablePopOver extends Component {
+  render = () => {
+    return (
+      <div className='CreateTablePopOver'>
+        <CreateTableForm />
+      </div>
+    )
+  }
+}
+
+export default CreateTablePopOver

src/views/DataTable/DataTable.css

@@ -0,0 +1,4 @@
+.DataTable {
+  height: calc(100vh - 40px);
+  overflow: scroll;
+}

src/views/DataTable/DataTable.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Table } from 'semantic-ui-react'
+import './DataTable.css'
 
 import Tables from '../../Models/Tables'
 import FocusTable from '../../Models/FocusTable'

src/views/ListViewer/ListViewer.css

@@ -0,0 +1,3 @@
+.ListViewer {
+  width: 400px;
+}

src/views/ListViewer/ListViewer.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import TableList from '../TableList/TableList'
+import NoduleList from '../NoduleList/NoduleList'
+import './ListViewer.css'
+import { Tab } from 'semantic-ui-react'
+
+class ListViewer extends Component {
+  constructor () {
+    super()
+    this.panes = [
+      { menuItem: 'Tables', render: () => <Tab.Pane><TableList /></Tab.Pane> },
+      { menuItem: 'Nodules', render: () => <Tab.Pane><NoduleList /></Tab.Pane> }
+    ]
+  }
+  render = () => {
+    return (
+      <div className='ListViewer'>
+        <Tab panes={this.panes} />
+      </div>
+    )
+  }
+}
+
+export default ListViewer

src/views/NoduleList/NoduleList.css

@@ -0,0 +1,3 @@
+.NoduleList {
+  height: calc(100vh - 100px);
+}

src/views/NoduleList/NoduleList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Card } from 'semantic-ui-react'
+import { Card, Icon, Button } from 'semantic-ui-react'
+import CreateNodule from '../CreateNodule/CreateNodule'
 import NoduleListItem from './NoduleListItem'
 import './NoduleList.css'
 
@@ -12,11 +13,16 @@ class NoduleList extends Component {
 
     this.nodules = new Nodule()
     this.controller = new NoduleListController()
-    this.state = { nodules: this.nodules.getCollectionProps() }
+    this.state = {
+      adding: false,
+      nodules: this.nodules.getCollectionProps()
+    }
 
     document.addEventListener('updateNodules', this.updateNoduleList)
   }
 
+  toggleAddingNodule = () => { this.setState({ adding: !this.state.adding }) }
+
   updateNoduleList = () => {
     this.setState({nodules: this.nodules.getCollectionProps()})
   }
@@ -29,8 +35,13 @@ class NoduleList extends Component {
 
   render = () => {
     return (
-      <div className='TableList'>
+      <div className='NoduleList'>
         <Card.Group>
+          <Button animated primary style={{ width: '100%', display: 'block' }} onClick={this.toggleAddingNodule}>
+            <Button.Content visible>Add Nodule</Button.Content>
+            <Button.Content hidden><Icon name='add' /></Button.Content>
+          </Button>
+          {this.state.adding ? <CreateNodule /> : ''}
           { this.renderTableListElements() }
         </Card.Group>
       </div>

src/views/NoduleList/NoduleListItem.js

@@ -13,7 +13,7 @@ class NoduleListItem extends Component {
   render = () => {
     const { nodule } = this.props 
     return (
-      <Card key={nodule.id} id={nodule.id}>
+      <Card key={nodule.id} id={nodule.id} style={{ width: '380px' }}>
         <Card.Content>
           <Card.Header>{ nodule.label }</Card.Header>
           <Card.Meta>{`${nodule.tables.length} tables`}</Card.Meta>

src/views/TableList/TableList.css

@@ -0,0 +1,7 @@
+.TableList {
+  height: calc(100vh - 100px);
+}
+
+.listItem {
+  width: 400px;
+}

src/views/TableList/TableList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Card } from 'semantic-ui-react'
+import { Card, Button, Icon } from 'semantic-ui-react'
+import CreateTableForm from '../CreateTable/CreateTableForm'
 import TableListItem from './TableListItem'
 import './TableList.css'
 
@@ -12,11 +13,16 @@ class TableList extends Component {
 
     this.tables = new Tables()
     this.controller = new TableListController()
-    this.state = { tables: this.tables.getCollectionProps() }
+    this.state = {
+      adding: false,
+      tables: this.tables.getCollectionProps()
+    }
 
     document.addEventListener('updateTables', this.updateTableList)
   }
 
+  toggleAddingTable = () => { this.setState({ adding: !this.state.adding }) }
+
   updateTableList = () => {
     this.setState({tables: this.tables.getCollectionProps()})
   }
@@ -31,6 +37,11 @@ class TableList extends Component {
     return (
       <div className='TableList'>
         <Card.Group>
+        <Button animated primary style={{ width: '100%', display: 'block' }} onClick={this.toggleAddingTable}>
+          <Button.Content visible>Add Table</Button.Content>
+          <Button.Content hidden><Icon name='add' /></Button.Content>
+        </Button>
+        {this.state.adding ? <CreateTableForm /> : ''}
           { this.renderTableListElements() }
         </Card.Group>
       </div>

src/views/TableList/TableListItem.js

@@ -13,7 +13,7 @@ class TableListItem extends Component {
   render = () => {
     const { table } = this.props
     return (
-      <Card key={table.id} id={table.id}>
+      <Card key={table.id} id={table.id} style={{ width: '380px' }}>
         <Card.Content>
           <Card.Header>{ table.label }</Card.Header>
           <Card.Meta>{`${table.rows.length} rows`}</Card.Meta>