improved layouts, app icons, improved settings and editing

Author: masesk

package-lock.json

@@ -14,7 +14,6 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.6.1",
     "@mui/material": "^5.10.7",
-    "allotment": "^1.18.1",
     "ramda": "^0.27.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -7,6 +7,7 @@ const AddWebApp = () => {
   const id = useRef();
   const width = useRef()
   const height = useRef()
+  const imageUrl = useRef()
   const [titleError, setTitleError] = useState(false)
   const [idError, setIdError] = useState(false)
   const [urlError, setUrlError] = useState(false)
@@ -56,7 +57,8 @@ const AddWebApp = () => {
           width: Number(width.current.value),
           height: Number(height.current.value),
           url: url.current.value,
-          single, deletable, editable
+          single, deletable, editable, 
+          imageUrl: imageUrl.current.value
 
         }
 
@@ -142,11 +144,21 @@ const AddWebApp = () => {
             error={urlError}
             helperText={urlError === true ? "Must be URL and cannot be empty" : ""}
             inputRef={url}
-          /></div>
+          />
+          </div>
+          <div>
+          <TextField
+            label="Image URL"
+            size="small"
+            fullWidth
+            variant="filled"
+            inputRef={imageUrl}
+          />
+          </div>
         <div>
           <FormControlLabel control={<Switch onChange={(e) => setSingle(e.target.checked)} />} label="Singleton" /></div>
-        <div> <FormControlLabel control={<Switch onChange={(e) => setEditable(e.target.checked)} />} label="Editable" /></div>
-        <div><FormControlLabel control={<Switch onChange={(e) => setDeletable(e.target.checked)} />} label="Deletable" /></div>
+        <div> <FormControlLabel control={<Switch defaultChecked={true} onChange={(e) => setEditable(e.target.checked)} />} label="Editable" /></div>
+        <div><FormControlLabel control={<Switch defaultChecked={true} onChange={(e) => setDeletable(e.target.checked)} />} label="Deletable" /></div>
         <div>
           <Button variant="contained" color="success"
             onClick={e => {

public/addwebapp.png

@@ -5,15 +5,17 @@ export const BUILT_IN_APPS = {
         width: 800,
         height: 600,
         single: true,
-        editable: false
+        editable: false,
+        imageUrl: "addwebapp.png"
     },
     chatclient: {
         appid: "chatclient",
         title: "Chat Client",
         width: 700,
         height: 500,
         deletable: true,
-        editable: true
+        editable: true,
+        imageUrl: "chatclient.png"
     },
     statueofliberty: {
         appid: "statueofliberty",

public/chatclient.png

@@ -219,12 +219,18 @@ table {
   white-space: nowrap;
 }
 
-.sash{
+.sash-vertical{
   z-index: 1 !important;
   width: 5px !important;
   background-color: #474747;
 }
 
+.sash-horizontal{
+  z-index: 1 !important;
+  height: 5px !important;
+  background-color: #474747;
+}
+
 :root {
   --separator-border: none !important;
   --focus-border: none !important;