fix: create campaign speed dial open/close behavior (#1627)

* fix: unclear tooltip titles for create menu --------- Co-authored-by: Hiemanshu Sharma <[email protected]>
politics-rewired · Sep 12, 2023 · d8428e3 · d8428e3
1 parent 652b80c
commit d8428e3
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 35 deletions.
diff --git a/src/components/CreateCampaignFromTemplateDialog.tsx b/src/components/CreateCampaignFromTemplateDialog.tsx
@@ -128,6 +128,7 @@ export const CreateCampaignFromTemplateDialog: React.FC<CreateCampaignFromTempla
       onClose={props.onClose}
       aria-labelledby="create-from-template-dialog-title"
       open={props.open}
+      disableRestoreFocus
     >
       <DialogTitle id="create-from-template-dialog-title">
         Create Campaign from Template

diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx
@@ -1,10 +1,14 @@
 import { gql } from "@apollo/client";
+import { withStyles } from "@material-ui/core";
+import Box from "@material-ui/core/Box";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Snackbar from "@material-ui/core/Snackbar";
+import Typography from "@material-ui/core/Typography";
+import ClearIcon from "@material-ui/icons/Clear";
 import CreateIcon from "@material-ui/icons/Create";
 import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
 import MuiAlert from "@material-ui/lab/Alert";
@@ -36,27 +40,54 @@ const styles = {
   }
 };
 
+const AdminCampaignListSpeedDialAction = withStyles(() => ({
+  staticTooltipLabel: {
+    display: "inline-block",
+    width: "max-content"
+  }
+}))(SpeedDialAction);
+
+const AdminCampaignListSpeedDial = withStyles(() => ({
+  root: {
+    "align-items": "flex-end"
+  }
+}))(SpeedDial);
+
+const AdminCampaignListSpeedDialIcon = withStyles(() => ({
+  root: {
+    display: "inline-box",
+    position: "relative",
+    width: "100%"
+  },
+  openIcon: {
+    width: "100%"
+  }
+}))(SpeedDialIcon);
+
 // The campaign list uses infinite scrolling now so we fix the page size
 const DEFAULT_PAGE_SIZE = 10;
 
 class AdminCampaignList extends React.Component {
-  state = {
-    speedDialOpen: false,
-    createFromTemplateOpen: false,
-    // created from template state
-    showCreatedFromTemplateSnackbar: false,
-    createdFromTemplateIds: [],
-    createdFromTemplateTitle: "",
-    // end created from template state
-    isCreating: false,
-    campaignsFilter: {
-      isArchived: false
-    },
-    releasingInProgress: false,
-    releasingAllReplies: false,
-    releaseAllRepliesError: undefined,
-    releaseAllRepliesResult: undefined
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      speedDialOpen: false,
+      createFromTemplateOpen: false,
+      // created from template state
+      showCreatedFromTemplateSnackbar: false,
+      createdFromTemplateIds: [],
+      createdFromTemplateTitle: "",
+      // end created from template state
+      isCreating: false,
+      campaignsFilter: {
+        isArchived: false
+      },
+      releasingInProgress: false,
+      releasingAllReplies: false,
+      releaseAllRepliesError: undefined,
+      releaseAllRepliesResult: undefined
+    };
+  }
 
   handleClickNewButton = async () => {
     const { history, match } = this.props;
@@ -90,11 +121,6 @@ class AdminCampaignList extends React.Component {
     });
   };
 
-  handleClickSpeedDial = () => {
-    const { speedDialOpen } = this.state;
-    this.setState({ speedDialOpen: !speedDialOpen });
-  };
-
   handleCreatedFromTemplateSnackbarClose = (_event, reason) => {
     if (reason === "clickaway") {
       return;
@@ -135,6 +161,36 @@ class AdminCampaignList extends React.Component {
     this.setState({ releasingAllReplies: true });
   };
 
+  handleOnCreateClickFromTemplate = () => {
+    this.setState({
+      createFromTemplateOpen: true,
+      speedDialOpen: false
+    });
+  };
+
+  handleSpeedDialOnKeyDown = (event) => {
+    /* "toggle", "blur", "mouseLeave", "escapeKeyDown" are the possible close events,
+      so we're handling escapeKeyDown here * */
+    if (event.key === "Escape") {
+      this.setState({ speedDialOpen: false });
+    }
+  };
+
+  handleSpeedDialOnFocus = () => {
+    this.setState({ speedDialOpen: true });
+  };
+
+  handleSpeedDialOnBlur = () => {
+    this.setState({ speedDialOpen: false });
+  };
+
+  /**
+   * We listen to mouse down because we don't close the speed dial menu right after opening it in the focus event
+   */
+  handleSpeedDialOnMouseDown = () => {
+    this.setState({ speedDialOpen: !this.state.speedDialOpen });
+  };
+
   releaseAllReplies = () => {
     const ageInHours = parseFloat(this.numberOfHoursToReleaseRef.input.value);
     const releaseOnRestricted = this.releaseOnRestrictedRef.state.switched;
@@ -191,7 +247,6 @@ class AdminCampaignList extends React.Component {
       createdFromTemplateIds,
       createdFromTemplateTitle,
       showCreatedFromTemplateSnackbar,
-      speedDialOpen,
       isCreating
     } = this.state;
 
@@ -310,26 +365,61 @@ class AdminCampaignList extends React.Component {
         )}
 
         {isAdmin ? (
-          <SpeedDial
-            ariaLabel="SpeedDial example"
+          <AdminCampaignListSpeedDial
+            id="adminCampaignListSpeedDial"
+            ariaLabel="Open create campaign actions"
             style={theme.components.floatingButton}
-            icon={<SpeedDialIcon />}
-            onClick={this.handleClickSpeedDial}
-            onOpen={() => this.setState({ speedDialOpen: true })}
-            open={speedDialOpen}
+            onFocus={this.handleSpeedDialOnFocus}
+            onMouseDown={this.handleSpeedDialOnMouseDown}
+            onBlur={this.handleSpeedDialOnBlur}
+            onKeyDown={this.handleSpeedDialOnKeyDown}
+            open={this.state.speedDialOpen}
             direction="up"
+            FabProps={{ variant: "extended" }}
+            icon={
+              <AdminCampaignListSpeedDialIcon
+                icon={
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignContent: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    <SpeedDialIcon />
+                    <Typography variant="button">
+                      {" "}
+                      Create a campaign{" "}
+                    </Typography>
+                  </Box>
+                }
+                openIcon={
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignContent: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    <ClearIcon />
+                  </Box>
+                }
+              />
+            }
           >
-            <SpeedDialAction
+            <AdminCampaignListSpeedDialAction
               icon={<CreateIcon />}
-              tooltipTitle="Create Blank"
+              tooltipOpen
+              tooltipTitle="Create new campaign"
               onClick={this.handleClickNewButton}
             />
-            <SpeedDialAction
+            <AdminCampaignListSpeedDialAction
               icon={<FileCopyIcon />}
-              tooltipTitle="Create from Template"
-              onClick={() => this.setState({ createFromTemplateOpen: true })}
+              tooltipOpen
+              tooltipTitle="Create campaign from template"
+              onClick={this.handleOnCreateClickFromTemplate}
             />
-          </SpeedDial>
+          </AdminCampaignListSpeedDial>
         ) : null}
         <CreateCampaignFromTemplateDialog
           organizationId={organizationId}