diff --git a/apps/src/templates/manageStudents/ManageStudentsTable.jsx b/apps/src/templates/manageStudents/ManageStudentsTable.jsx
index 3947788216aca..27867a82f08b5 100644
--- 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 (
- {}}
- />
- {}}
- hasLineAbove={true}
- isDelete={true}
- />
+ {}}
+ >
+ {"Edit"}
+
+
+ {}}
+ >
+ {"Remove student"}
+
);
};
diff --git a/apps/src/templates/projects/PersonalProjectsTable.jsx b/apps/src/templates/projects/PersonalProjectsTable.jsx
index 7843fb9d04ae6..cedfd83252515 100644
--- 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 (
- {}}
- />
- {}}
- />
- {}}
- hasLineAbove={true}
- isDelete={true}
- />
+ {}}
+ >
+ {i18n.rename()}
+
+ {}}
+ >
+ {i18n.remix()}
+
+
+ {}}
+ >
+ {i18n.deleteProject()}
+
);
};
diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx
index c8a449dbbc83a..d99bb293cd51c 100644
--- a/apps/src/templates/tables/QuickActionsCell.jsx
+++ b/apps/src/templates/tables/QuickActionsCell.jsx
@@ -1,29 +1,44 @@
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 {
@@ -31,46 +46,71 @@ class QuickActionsCell extends Component {
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 (
-
-
this.icon = icon}
- onClick={this.toggleActionBox}
+
this.icon = span}>
+
+
+
+
-
-
- {this.state.actionsOpen &&
-
this.actionBox = actionBox}
- >
-
- {this.props.children}
-
-
- }
-
+ {this.props.children}
+
+
);
}
}
diff --git a/apps/src/templates/tables/QuickActionsCell.story.jsx b/apps/src/templates/tables/QuickActionsCell.story.jsx
index 324d44ae1a6d7..159a3f1edb91b 100644
--- 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: () => (
- {}}
- hasLineAbove={false}
- isDelete={false}
- />
- {}}
- hasLineAbove={true}
- isDelete={true}
- />
+ {console.log("clicked");}}
+ >
+ {"Action 2"}
+
+
+ {console.log("clicked");}}
+ >
+ {"Action 2"}
+
)
},