Fix card events (fix #1076)

1 files changed, 90 insertions, 86 deletions

diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js
index 0c1ea492..386dd3f1 100644
--- a/modern/src/common/components/StatusCard.js
+++ b/modern/src/common/components/StatusCard.js
@@ -35,6 +35,7 @@ import { useAttributePreference } from '../util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   card: {
+    pointerEvents: 'auto',
     width: theme.dimensions.popupMaxWidth,
   },
   media: {
@@ -78,6 +79,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'space-between',
   },
   root: ({ desktopPadding }) => ({
+    pointerEvents: 'none',
     position: 'fixed',
     zIndex: 5,
     left: '50%',
@@ -167,97 +169,99 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
   }, [navigate, position]);
 
   return (
-    <div className={classes.root}>
-      {device && (
-        <Draggable
-          handle={`.${classes.media}, .${classes.header}`}
-        >
-          <Card elevation={3} className={classes.card}>
-            {deviceImage ? (
-              <CardMedia
-                className={classes.media}
-                image={`/api/media/${device.uniqueId}/${deviceImage}`}
-              >
+    <>
+      <div className={classes.root}>
+        {device && (
+          <Draggable
+            handle={`.${classes.media}, .${classes.header}`}
+          >
+            <Card elevation={3} className={classes.card}>
+              {deviceImage ? (
+                <CardMedia
+                  className={classes.media}
+                  image={`/api/media/${device.uniqueId}/${deviceImage}`}
+                >
+                  <IconButton
+                    size="small"
+                    onClick={onClose}
+                    onTouchStart={onClose}
+                  >
+                    <CloseIcon fontSize="small" className={classes.mediaButton} />
+                  </IconButton>
+                </CardMedia>
+              ) : (
+                <div className={classes.header}>
+                  <Typography variant="body2" color="textSecondary">
+                    {device.name}
+                  </Typography>
+                  <IconButton
+                    size="small"
+                    onClick={onClose}
+                    onTouchStart={onClose}
+                  >
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                </div>
+              )}
+              {position && (
+                <CardContent className={classes.content}>
+                  <Table size="small" classes={{ root: classes.table }}>
+                    <TableBody>
+                      {positionItems.split(',').filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
+                        <StatusRow
+                          key={key}
+                          name={positionAttributes.hasOwnProperty(key) ? positionAttributes[key].name : key}
+                          content={(
+                            <PositionValue
+                              position={position}
+                              property={position.hasOwnProperty(key) ? key : null}
+                              attribute={position.hasOwnProperty(key) ? null : key}
+                            />
+                          )}
+                        />
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              )}
+              <CardActions classes={{ root: classes.actions }} disableSpacing>
                 <IconButton
-                  size="small"
-                  onClick={onClose}
-                  onTouchStart={onClose}
+                  color="secondary"
+                  onClick={(e) => setAnchorEl(e.currentTarget)}
+                  disabled={!position}
                 >
-                  <CloseIcon fontSize="small" className={classes.mediaButton} />
+                  <PendingIcon />
                 </IconButton>
-              </CardMedia>
-            ) : (
-              <div className={classes.header}>
-                <Typography variant="body2" color="textSecondary">
-                  {device.name}
-                </Typography>
                 <IconButton
-                  size="small"
-                  onClick={onClose}
-                  onTouchStart={onClose}
+                  onClick={() => navigate('/replay')}
+                  disabled={disableActions || !position}
                 >
-                  <CloseIcon fontSize="small" />
+                  <ReplayIcon />
                 </IconButton>
-              </div>
-            )}
-            {position && (
-              <CardContent className={classes.content}>
-                <Table size="small" classes={{ root: classes.table }}>
-                  <TableBody>
-                    {positionItems.split(',').filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
-                      <StatusRow
-                        key={key}
-                        name={positionAttributes.hasOwnProperty(key) ? positionAttributes[key].name : key}
-                        content={(
-                          <PositionValue
-                            position={position}
-                            property={position.hasOwnProperty(key) ? key : null}
-                            attribute={position.hasOwnProperty(key) ? null : key}
-                          />
-                        )}
-                      />
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            )}
-            <CardActions classes={{ root: classes.actions }} disableSpacing>
-              <IconButton
-                color="secondary"
-                onClick={(e) => setAnchorEl(e.currentTarget)}
-                disabled={!position}
-              >
-                <PendingIcon />
-              </IconButton>
-              <IconButton
-                onClick={() => navigate('/replay')}
-                disabled={disableActions || !position}
-              >
-                <ReplayIcon />
-              </IconButton>
-              <IconButton
-                onClick={() => navigate(`/settings/command-send/${deviceId}`)}
-                disabled={disableActions || readonly}
-              >
-                <PublishIcon />
-              </IconButton>
-              <IconButton
-                onClick={() => navigate(`/settings/device/${deviceId}`)}
-                disabled={disableActions || deviceReadonly}
-              >
-                <EditIcon />
-              </IconButton>
-              <IconButton
-                onClick={() => setRemoving(true)}
-                disabled={disableActions || deviceReadonly}
-                className={classes.negative}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </CardActions>
-          </Card>
-        </Draggable>
-      )}
+                <IconButton
+                  onClick={() => navigate(`/settings/command-send/${deviceId}`)}
+                  disabled={disableActions || readonly}
+                >
+                  <PublishIcon />
+                </IconButton>
+                <IconButton
+                  onClick={() => navigate(`/settings/device/${deviceId}`)}
+                  disabled={disableActions || deviceReadonly}
+                >
+                  <EditIcon />
+                </IconButton>
+                <IconButton
+                  onClick={() => setRemoving(true)}
+                  disabled={disableActions || deviceReadonly}
+                  className={classes.negative}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </CardActions>
+            </Card>
+          </Draggable>
+        )}
+      </div>
       {position && (
         <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
           <MenuItem onClick={() => navigate(`/position/${position.id}`)}><Typography color="secondary">{t('sharedShowDetails')}</Typography></MenuItem>
@@ -273,7 +277,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
         itemId={deviceId}
         onResult={(removed) => handleRemove(removed)}
       />
-    </div>
+    </>
   );
 };