Use code from section action dropdown in quick action cell because it…

… works better
code-dot-org · Jan 4, 2018 · 14ec3ec · 14ec3ec
1 parent 9469843
commit 14ec3ec
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 89 deletions.
diff --git a/apps/src/templates/manageStudents/ManageStudentsTable.jsx b/apps/src/templates/manageStudents/ManageStudentsTable.jsx
@@ -7,8 +7,8 @@ import ShowSecret from './ShowSecret';
 import {SectionLoginType} from '@cdo/apps/util/sharedConstants';
 import i18n from "@cdo/locale";
 import {tableLayoutStyles, sortableOptions} from "../tables/tableConstants";
-import QuickAction from "../tables/QuickAction";
 import QuickActionsCell from "../tables/QuickActionsCell";
+import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu";
 
 export const studentSectionDataPropType = PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -85,16 +85,17 @@ const passwordFormatter = (loginType, {rowData}) => {
 const actionsFormatter = function (actions, {rowData}) {
   return (
     <QuickActionsCell>
-      <QuickAction
-        text={"Edit"}
-        action={()=>{}}
-      />
-      <QuickAction
-        text={"Remove student"}
-        action={()=>{}}
-        hasLineAbove={true}
-        isDelete={true}
-      />
+      <PopUpMenu.Item
+        onClick={() => {}}
+      >
+        {"Edit"}
+      </PopUpMenu.Item>
+      <MenuBreak/>
+      <PopUpMenu.Item
+        onClick={() => {}}
+      >
+        {"Remove student"}
+      </PopUpMenu.Item>
     </QuickActionsCell>
   );
 };

diff --git a/apps/src/templates/projects/PersonalProjectsTable.jsx b/apps/src/templates/projects/PersonalProjectsTable.jsx
@@ -8,8 +8,8 @@ import wrappedSortable from '../tables/wrapped_sortable';
 import orderBy from 'lodash/orderBy';
 import {PROJECT_TYPE_MAP, personalProjectDataPropType} from './projectConstants';
 import QuickActionsCell from '../tables/QuickActionsCell';
-import QuickAction from '../tables/QuickAction';
 import {tableLayoutStyles, sortableOptions} from "../tables/tableConstants";
+import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu";
 
 const PROJECT_DEFAULT_IMAGE = '/blockly/media/projects/project_default.png';
 
@@ -89,20 +89,22 @@ const isPublishedFormatter = function (isPublished) {
 const actionsFormatter = function (actions, {rowData}) {
   return (
     <QuickActionsCell>
-      <QuickAction
-        text={i18n.rename()}
-        action={()=>{}}
-      />
-      <QuickAction
-        text={i18n.remix()}
-        action={()=>{}}
-      />
-      <QuickAction
-        text={i18n.deleteProject()}
-        action={()=>{}}
-        hasLineAbove={true}
-        isDelete={true}
-      />
+      <PopUpMenu.Item
+        onClick={() => {}}
+      >
+        {i18n.rename()}
+      </PopUpMenu.Item>
+      <PopUpMenu.Item
+        onClick={() => {}}
+      >
+        {i18n.remix()}
+      </PopUpMenu.Item>
+      <MenuBreak/>
+      <PopUpMenu.Item
+        onClick={() => {}}
+      >
+        {i18n.deleteProject()}
+      </PopUpMenu.Item>
     </QuickActionsCell>
   );
 };

diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx
@@ -1,76 +1,116 @@
 import React, {Component, PropTypes} from 'react';
-import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import color from "../../util/color";
-import $ from 'jquery';
-import QuickActionsBox from "./QuickActionsBox";
+import PopUpMenu from "@cdo/apps/lib/ui/PopUpMenu";
+import styleConstants from '../../styleConstants';
+import throttle from 'lodash/debounce';
 
 const styles = {
-  selected: {
+  actionButton:{
+    border: '1px solid ' + color.white,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 5,
+    color: color.lighter_gray,
+    margin: 3,
+    cursor: 'pointer',
+  },
+  hoverFocus: {
     backgroundColor: color.lighter_gray,
-    borderRadius: 3,
-    padding: 5,
-    width: 9
+    border: '1px solid ' + color.light_gray,
+    borderRadius: 5,
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 5,
+    paddingRight: 5,
+    color: color.white,
   },
-  nonSelected: {
-    padding: 5,
-    width: 9
+  xIcon: {
+    paddingRight: 5,
   },
-  actionBox: {
-    position: 'absolute',
-    marginTop: 32,
-    marginLeft: 32
+  heading: {
+    borderTopWidth: 0,
+    borderBottomWidth: 1,
+    borderRightWidth: 0,
+    borderLeftWidth: 0,
+    borderStyle: 'solid',
+    borderColor: color.default_text,
+    paddingBottom: 20,
+    marginBottom: 30,
   },
-  cellContainer: {
-    display: 'flex',
-    justifyContent: 'center'
-  }
 };
 
 class QuickActionsCell extends Component {
   static propTypes = {
     children: PropTypes.arrayOf(PropTypes.element).isRequired
   };
 
-  state = {actionsOpen: false};
+  state = {
+    open: false,
+    canOpen: true,
+    menuTop: 0, // location of dropdown menu
+    menuLeft: 0,
+    currWindowWidth: window.innerWidth, // used to calculate location of menu on resize
+  };
 
-  toggleActionBox = (event) => {
-    if (!this.state.actionsOpen) {
-      this.minimizeOnClickAnywhere();
-    }
-    this.setState({actionsOpen: !this.state.actionsOpen});
+  // Menu open
+  open = () => {
+    this.updateMenuLocation();
+    window.addEventListener("resize", throttle(this.updateMenuLocation, 50));
+    this.setState({open: true, canOpen: false});
+  }
+
+  // Menu closed
+  close = () => {
+    window.removeEventListener("resize", throttle(this.updateMenuLocation, 50));
+    this.setState({open: false});
+  }
+
+  // Menu closed
+  beforeClose = (_, resetPortalState) => {
+    resetPortalState();
+    this.setState({
+      open: false,
+      canOpen: true});
   };
 
-  minimizeOnClickAnywhere = (event) => {
-    // The first time we click anywhere, hide any open children
-    $(document.body).one('click', (event) => {
+  updateMenuLocation = () => {
+    const rect = this.icon.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    if (windowWidth > styleConstants['content-width']) { // Accounts for resizing when page is not scrollable
       this.setState({
-        actionsOpen: false
-      });
-    });
-  };
+        menuTop: rect.bottom + window.pageYOffset,
+        menuLeft: rect.left - rect.width - (windowWidth - this.state.currWindowWidth)/2,
+        currWindowWidth : window.innerWidth});
+    } else { // Accounts for scrolling or resizing when scrollable
+      this.setState({
+        menuTop: rect.bottom + window.pageYOffset,
+        menuLeft: rect.left - rect.width + window.pageXOffset});
+    }
+  }
 
   render() {
-    const selectedStyle = this.state.actionsOpen ? styles.selected : styles.nonSelected;
+    const targetPoint = {top: this.state.menuTop, left: this.state.menuLeft};
+
     return (
-      <div style={styles.cellContainer}>
-        <div
-          style={selectedStyle}
-          ref={icon => this.icon = icon}
-          onClick={this.toggleActionBox}
+      <span ref={span => this.icon = span}>
+        <a
+          icon="chevron-down"
+          style={this.state.open ? {...styles.actionButton, ...styles.hoverFocus} : styles.actionButton}
+          onClick={this.state.canOpen ? this.open : undefined}
+        >
+          <i className="fa fa-chevron-down ui-test-section-dropdown"></i>
+        </a>
+        <PopUpMenu
+          targetPoint={targetPoint}
+          isOpen={this.state.open}
+          beforeClose={this.beforeClose}
+          showTail={false}
         >
-          <FontAwesome icon="angle-down" />
-        </div>
-        {this.state.actionsOpen &&
-          <div
-            style={styles.actionBox}
-            ref={actionBox => this.actionBox = actionBox}
-          >
-            <QuickActionsBox>
-              {this.props.children}
-            </QuickActionsBox>
-          </div>
-        }
-      </div>
+          {this.props.children}
+        </PopUpMenu>
+      </span>
     );
   }
 }

diff --git a/apps/src/templates/tables/QuickActionsCell.story.jsx b/apps/src/templates/tables/QuickActionsCell.story.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import QuickActionsCell from './QuickActionsCell';
-import QuickAction from './QuickAction';
+import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu";
 
 export default storybook => {
   storybook
@@ -11,18 +11,17 @@ export default storybook => {
           description: 'Shown with 2 QuickActions as children',
           story: () => (
             <QuickActionsCell>
-              <QuickAction
-                text={"Action one"}
-                action={()=>{}}
-                hasLineAbove={false}
-                isDelete={false}
-              />
-              <QuickAction
-                text={"Delete project"}
-                action={()=>{}}
-                hasLineAbove={true}
-                isDelete={true}
-              />
+              <PopUpMenu.Item
+                onClick={() => {console.log("clicked");}}
+              >
+                {"Action 2"}
+              </PopUpMenu.Item>
+              <MenuBreak/>
+              <PopUpMenu.Item
+                onClick={() => {console.log("clicked");}}
+              >
+                {"Action 2"}
+              </PopUpMenu.Item>
             </QuickActionsCell>
           )
         },