Implement workspace screen and save functionality

Cyfurion · Dec 6, 2021 · 160623c · 160623c
1 parent 9897e83
commit 160623c
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 607 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -115,6 +115,7 @@ body {
   position: absolute;
   display: grid;
   place-items: center;
+  font-family: Arial;
   background-color: #c4c4c4;
   width: 100%;
   height: 76%;
@@ -204,7 +205,6 @@ body {
   transform: scale(2);
 }
 
-#workspace-home,
 #workspace-edit {
   background-color: #d4d4f5;
   width: 90%;
@@ -217,22 +217,21 @@ body {
   width: 35%;
   height: 5%;
   font-size: 16pt;
-  margin: 5px;
+  margin: 5px 0 5px 2.5%;
 }
 
 #list-space {
+  display: grid;
+  grid-template-columns: 1fr 10fr;
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
   background-color: #2c2f70;
-  width: 90%;
-  height: 60%;
-}
-
-#edit-numbering {
-  position: absolute;
-  left: 0%;
-  top: 0%;
-  width: 20%;
-  height: 100%;
-  background-color: var(--swatch-status);
+  width: 93%;
+  height: 75%;
+  margin-left: 2.5%;
+  padding: 1%;
+  border-radius: 10px;
 }
 
 #edit-items {
@@ -244,39 +243,36 @@ body {
   background-color: var(--swatch-primary);
 }
 
+.workspace-button {
+  float: right;
+  font-size: 24pt;
+  font-weight: bold;
+  width: 15%;
+  margin-right: 2.5%;
+  margin-top: 0.5%;
+}
+
 .item-number,
-.top5-item,
-.top5-item-dragged-to {
+.top5-item {
   display: flex;
+  background-color: #d4af37;
   align-items: center;
-  font-size: 48pt;
-  height: 20%;
+  font-size: 24pt;
+  border-radius: 10px;
 }
 
 .item-number {
   justify-content: center;
-  width: 100%;
-  border: 1px 0px 1px 1px;
-  border-color: black;
-  background-color: linen;
-  color: black;
+  font-weight: bold;
 }
 
 input {
   font-size: 20pt;
 }
 
-.top5-item,
-.top5-item-dragged-to {
-  text-align: left;
-  width: 95%;
-  padding-left: 5%;
-}
 .top5-item {
-  background-color: var(--swatch-complement);
-}
-.top5-item-dragged-to {
-  background-color: var(--swatch-accent);
+  text-align: left;
+  padding-left: 1%;
 }
 
 .disabled {

diff --git a/client/src/common/jsTPS.js b/client/src/common/jsTPS.js
diff --git a/client/src/components/HomeScreen.js b/client/src/components/HomeScreen.js
@@ -38,9 +38,7 @@ const HomeScreen = () => {
     return (
         <div id="top5-list-selector">
             <Toolbar />
-            <div id="list-selector-list">
-                {listCard}
-            </div>
+            <div id="list-selector-list">{listCard}</div>
             {deleteModal}
         </div>)
 }

diff --git a/client/src/components/ListCard.js b/client/src/components/ListCard.js
@@ -96,7 +96,7 @@ function ListCard(props) {
                         <ListItem>4. {listInfo.items[3]}</ListItem>
                         <ListItem>5. {listInfo.items[4]}</ListItem>
                     </Stack>
-                    <u style={{color:"red", "fontWeight":"bold"}}>Edit</u>
+                    <u style={{color:"red", "fontWeight":"bold"}} onClick={(event) => handleLoadList(event, listInfo._id)}>Edit</u>
                 </Box>
                 <Box>
                     <IconButton onClick={(event) => {

diff --git a/client/src/components/Toolbar.js b/client/src/components/Toolbar.js
@@ -1,3 +1,5 @@
+import { useContext } from 'react';
+import { GlobalStoreContext } from '../store/index.js';
 import { Box, IconButton } from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
 import GroupIcon from '@mui/icons-material/Groups';
@@ -6,18 +8,22 @@ import FunctionsIcon from '@mui/icons-material/Functions';
 import SortIcon from '@mui/icons-material/Sort';
 
 function Toolbar() {
+    const { store } = useContext(GlobalStoreContext);
+
+    function handleChangeView(view) { store.setView(view); }
+
     return (
         <div id="list-selector-heading">
-            <IconButton aria-label="home">
+            <IconButton aria-label="home" onClick={() => handleChangeView("home")}>
                 <HomeIcon />
             </IconButton>
-            <IconButton aria-label="all">
+            <IconButton aria-label="all" onClick={() => handleChangeView("all")}>
                 <GroupIcon />
             </IconButton>
-            <IconButton aria-label="user">
+            <IconButton aria-label="user" onClick={() => handleChangeView("user")}>
                 <PersonIcon />
             </IconButton>
-            <IconButton aria-label="community">
+            <IconButton aria-label="community" onClick={() => handleChangeView("community")}>
                 <FunctionsIcon />
             </IconButton>
             <input type="text" id="search-bar" />