Release 2.0.0-beta32

YeonV · Oct 22, 2021 · 6ac3f0a · 6ac3f0a
1 parent 95c87e6
commit 6ac3f0a
Show file tree

Hide file tree

Showing 19 changed files with 385 additions and 298 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ledfx",
-    "version": "2.0.0-beta31",
+    "version": "2.0.0-beta32",
     "description": "LedFx - BladeMOD",
     "author": "YeonV aka Blade",
     "private": true,

diff --git a/src/components/Bars/BarTop.jsx b/src/components/Bars/BarTop.jsx
@@ -4,7 +4,7 @@ import useStore from '../../utils/apiStore';
 import { useLocation, Link, useHistory } from 'react-router-dom';
 import clsx from 'clsx';
 import { AppBar, Toolbar, Typography, IconButton, Menu, MenuItem, ListItemIcon, Button } from '@material-ui/core';
-import { Menu as MenuIcon, MoreVert, PlayCircleOutline, Language, BarChart, Pause, Settings, AccountCircle, ChevronLeft } from '@material-ui/icons';
+import { Menu as MenuIcon, MoreVert, PlayCircleOutline, Language, BarChart, Pause, Settings, GitHub, ChevronLeft } from '@material-ui/icons';
 import { Login, Logout } from '@mui/icons-material';
 import { drawerWidth } from '../../utils/helpers';
 import TourDevice from '../Tours/TourDevice';
@@ -40,7 +40,12 @@ const useStyles = makeStyles((theme) => ({
     '@media (max-width: 599px)': {
       top: 10
     }
-  }
+  },
+  bladeMenu: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme.palette.grey[900]
+    }
+  },
 }));
 
 
@@ -92,9 +97,9 @@ const TopBar = () => {
     setIsLogged(false);
   };
 
-useEffect(() => {
-  setIsLogged(!!localStorage.getItem('jwt'))
-}, [pathname])
+  useEffect(() => {
+    setIsLogged(!!localStorage.getItem('jwt'))
+  }, [pathname])
 
   return (
     <AppBar
@@ -143,10 +148,11 @@ useEffect(() => {
           keepMounted
           open={Boolean(anchorEl)}
           onClose={() => setAnchorEl(null)}
+          className={classes.bladeMenu}
         >
           {isLogged && <MenuItem disabled divider>
             <ListItemIcon>
-              <AccountCircle />
+              <GitHub />
             </ListItemIcon>
             {localStorage.getItem('username')}
           </MenuItem>}
@@ -183,9 +189,9 @@ useEffect(() => {
           {parseInt(window.localStorage.getItem('BladeMod')) > 10 &&
             <MenuItem onClick={(e) => isLogged ? logout(e) : window.location.href = `https://strapi.yeonv.com/connect/github?callback=${window.location.origin}`} >
               <ListItemIcon>
-              {isLogged ? <Logout /> : <Login />}
+                {isLogged ? <Logout /> : <Login />}
               </ListItemIcon>
-              {isLogged ? 'Logout' : 'Login'}
+              {isLogged ? 'Logout' : 'Login with Gihub'}
             </MenuItem>}
         </Menu>
       </Toolbar>

diff --git a/src/components/Dialogs/AddDeviceDialog.jsx b/src/components/Dialogs/AddDeviceDialog.jsx
@@ -135,8 +135,8 @@ const AddDeviceDialog = () => {
     >
       <DialogTitle id="form-dialog-title">
         {initial.config &&
-        Object.keys(initial.config).length === 0 &&
-        initial.config.constructor === Object
+          Object.keys(initial.config).length === 0 &&
+          initial.config.constructor === Object
           ? `Add ${deviceType.toUpperCase()} Device`
           : `${deviceType.toUpperCase()} Config`}
       </DialogTitle>
@@ -149,6 +149,9 @@ const AddDeviceDialog = () => {
           <label>Device Type</label>
           <Select
             label="Type"
+            disabled={!(initial.config &&
+              Object.keys(initial.config).length === 0 &&
+              initial.config.constructor === Object)}
             style={{ flexGrow: 1 }}
             disableUnderline
             value={deviceType}
@@ -168,6 +171,7 @@ const AddDeviceDialog = () => {
             schema={currentSchema}
             model={model}
             onModelChange={handleModelChange}
+            hideToggle={!deviceType}
           />
         )}
       </DialogContent>
@@ -177,8 +181,8 @@ const AddDeviceDialog = () => {
         </Button>
         <Button onClick={handleAddDevice} color="primary">
           {initial.config &&
-          Object.keys(initial.config).length === 0 &&
-          initial.config.constructor === Object
+            Object.keys(initial.config).length === 0 &&
+            initial.config.constructor === Object
             ? "Add"
             : "Save"}
         </Button>

diff --git a/src/components/Dialogs/AddIntegrationDialog.jsx b/src/components/Dialogs/AddIntegrationDialog.jsx
@@ -167,6 +167,7 @@ const AddIntegrationDialog = () => {
         <Divider style={{ marginBottom: "1rem" }} />
         {model && (
           <BladeSchemaForm
+            hideToggle={!integrationType}
             schema={currentSchema}
             model={model}
             onModelChange={handleModelChange}

diff --git a/src/components/Popover.jsx b/src/components/Popover.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import PopoverOriginal from '@material-ui/core/Popover';
 import { Typography, Button, MenuItem, ListItemIcon, } from '@material-ui/core';
@@ -25,6 +25,8 @@ export default function Popover({
   text = 'Are you sure?',
   direction = 'left',
   vertical = 'center',
+  anchorOrigin,
+  transformOrigin,
   size = 'small',
   icon = <Delete />,
   content,
@@ -109,11 +111,11 @@ export default function Popover({
         open={open}
         anchorEl={anchorEl}
         onClose={handleClose}
-        anchorOrigin={{
+        anchorOrigin={anchorOrigin || {
           vertical: vertical,
           horizontal: direction,
         }}
-        transformOrigin={{
+        transformOrigin={transformOrigin || {
           vertical: vertical,
           horizontal: direction === 'center' ? 'center' : 'right',
         }}

diff --git a/src/components/SchemaForm/BladeBoolean.jsx b/src/components/SchemaForm/BladeBoolean.jsx
@@ -13,20 +13,15 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.paper,
   },
   wrapper: {
-    // minWidth: "140px",
     padding: '10px 10px 2px 10px',
     border: '1px solid rgba(255, 255, 255, 0.1)',
     borderRadius: '10px',
     position: 'relative',
-    // margin: "0.5rem",
     display: 'flex',
     alignItems: 'center',
-    order: '-3',
-    // "@media (max-width: 580px)": {
     flexBasis: '23.5%',
     minWidth: 'unset',
     margin: '0.5rem 0',
-    // },
 
     "@media (max-width: 580px)": {
       flexBasis: "37vw",
@@ -62,7 +57,7 @@ const BladeBoolean = ({
   const classes = useStyles();
 
   const Frame = ({ children }) => (variant === 'outlined' ? (
-    <div className={`${classes.wrapper} step-effect-${index}`} style={{ ...style, ...{ order: required ? -1 : 5 } }}>
+    <div className={`${classes.wrapper} step-effect-${index}`} style={style}>
       <label className={'MuiFormLabel-root'}>{schema.title.replaceAll('_', ' ').replaceAll('Color', 'c')}{required ? '*' : ''}</label>
       {children}
     </div>

diff --git a/src/components/SchemaForm/BladeColorPicker.jsx b/src/components/SchemaForm/BladeColorPicker.jsx
@@ -14,26 +14,18 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.paper,
   },
   picker: {
-    // width: '135px',
     height: '30px',
     margin: '15px 10px 10px 10px',
     borderRadius: '10px',
     cursor: 'pointer',
     border: '1px solid #fff',
-    "@media (max-width: 580px)": {
-      // width: "31vw",
-    },
   },
   wrapper: {
     border: '1px solid rgba(255, 255, 255, 0.1)',
     borderRadius: '10px',
     position: 'relative',
-    // margin: "0.5rem",
-    order: '-2',
-    // "@media (max-width: 580px)": {
     width: '100%',
     margin: '0.5rem 0',
-    // },
     '& > label': {
       top: '-0.5rem',
       display: 'flex',
@@ -109,7 +101,6 @@ const BladeColorPicker = ({ sendColor, col, clr, index }) => {
   return (
     <div className={`${classes.wrapper} step-effect-${index}`}>
       <label className={'MuiFormLabel-root'}>
-        {/* <Palette /> */}
         {clr.replaceAll('_', ' ').replaceAll('background', 'bg')}
       </label>
       <div
@@ -120,7 +111,6 @@ const BladeColorPicker = ({ sendColor, col, clr, index }) => {
       />
       <ClickAwayListener
         onClickAway={() => {
-          // console.log('anchorEl');
           // setAnchorEl(null);
         }}
       >