From de3de57a6580ddbed0d65a9dc98bf18421d1f9fd Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Wed, 7 Mar 2018 15:06:11 -0800 Subject: [PATCH] clicking the cog icon opens a QuickActionsBox to edit all and control project sharing --- apps/i18n/common/en_us.json | 2 + .../ManageStudentsActionsHeaderCell.jsx | 29 ++++++ .../manageStudents/ManageStudentsTable.jsx | 15 ++- .../src/templates/tables/QuickActionsCell.jsx | 94 ++++++++++++++----- .../tables/QuickActionsCell.story.jsx | 23 ++++- apps/src/util/experiments.js | 1 + 6 files changed, 136 insertions(+), 28 deletions(-) create mode 100644 apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json index b7c6cdf246bf1..560b3114dce93 100644 --- a/apps/i18n/common/en_us.json +++ b/apps/i18n/common/en_us.json @@ -173,6 +173,7 @@ "contractMatchBadName": "Your contract has the wrong name.", "contractMatchBadNameCase": "Function names are case-sensitive. Try changing the case of your contract's name.", "contractMatchBadRange": "Your contract has the wrong range.", + "controlProjectSharing": "Control project sharing", "copy": "Copy", "copyright": "Copyright", "correct": "Correct", @@ -394,6 +395,7 @@ "dropletBlock_whileBlock_description": "Creates a loop consisting of a conditional expression and a block of statements executed for each iteration of the loop. The loop continues to execute as long as the condition evaluates to true", "dropletBlock_whileBlock_signatureOverride": "while loop", "edit": "Edit", + "editAll": "Edit all", "editSectionDetails": "Edit Section Details", "editable": "Editable", "eligibilityExplanation": "In order to be eligible to receive a code for a subsidized Circuit Playground kit, you must meet the following requirements:", diff --git a/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx b/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx new file mode 100644 index 0000000000000..b9177b5b3b856 --- /dev/null +++ b/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; +import QuickActionsCell from "../tables/QuickActionsCell"; +import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu"; +import i18n from '@cdo/locale'; + +export default class ManageStudentsActionsHeaderCell extends Component { + + render() { + return ( +
+ + console.log('edit all was clicked!')} + > + {i18n.editAll()} + + + console.log('control project sharing was clicked!')} + > + {i18n.controlProjectSharing()} + + +
+ ); + } +} diff --git a/apps/src/templates/manageStudents/ManageStudentsTable.jsx b/apps/src/templates/manageStudents/ManageStudentsTable.jsx index 179eb496f15e2..d3bd19688d184 100644 --- a/apps/src/templates/manageStudents/ManageStudentsTable.jsx +++ b/apps/src/templates/manageStudents/ManageStudentsTable.jsx @@ -11,11 +11,15 @@ import ManageStudentsNameCell from './ManageStudentsNameCell'; import ManageStudentsAgeCell from './ManageStudentsAgeCell'; import ManageStudentsGenderCell from './ManageStudentsGenderCell'; import ManageStudentsActionsCell from './ManageStudentsActionsCell'; +import ManageStudentsActionsHeaderCell from './ManageStudentsActionsHeaderCell'; import {convertStudentDataToArray, AddStatus, RowType, saveAllStudents} from './manageStudentsRedux'; import { connect } from 'react-redux'; import Notification, {NotificationType} from '../Notification'; import AddMultipleStudents from './AddMultipleStudents'; import Button from '../Button'; +import experiments from '@cdo/apps/util/experiments'; + +const showShareColumn = experiments.isEnabled(experiments.SHARE_COLUMN); export const studentSectionDataPropType = PropTypes.shape({ id: PropTypes.number.isRequired, @@ -176,7 +180,16 @@ class ManageStudentsTable extends Component { /> } {numberOfEditingRows <= 1 && - i18n.actions() + +
+ {i18n.actions()} +
+
+ {showShareColumn && + + } +
+ } ); diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx index 13aee4f0c9801..7936fabb07cc4 100644 --- a/apps/src/templates/tables/QuickActionsCell.jsx +++ b/apps/src/templates/tables/QuickActionsCell.jsx @@ -1,30 +1,62 @@ import React, {Component, PropTypes} from 'react'; +import Radium from 'radium'; import color from "../../util/color"; import PopUpMenu from "@cdo/apps/lib/ui/PopUpMenu"; import styleConstants from '../../styleConstants'; import throttle from 'lodash/debounce'; +import FontAwesome from '../FontAwesome'; + +export const QuickActionsCellType = { + header: 'header', + body: 'body' +}; const styles = { - actionButton:{ - border: '1px solid ' + color.white, - paddingLeft: 5, - paddingRight: 5, - paddingTop: 4, - paddingBottom: 4, - borderRadius: 5, - color: color.lighter_gray, - margin: 3, - cursor: 'pointer', + actionButton: { + [QuickActionsCellType.body]: { + border: '1px solid ' + color.white, + paddingLeft: 5, + paddingRight: 5, + paddingTop: 4, + paddingBottom: 4, + borderRadius: 5, + color: color.lighter_gray, + margin: 3, + cursor: 'pointer', + }, + [QuickActionsCellType.header]: { + paddingLeft: 5, + paddingRight: 5, + paddingTop: 4, + paddingBottom: 4, + fontSize: 20, + marginTop: -3, + color: color.darker_gray, + cursor: 'pointer', + } }, hoverFocus: { - backgroundColor: color.lighter_gray, - border: '1px solid ' + color.light_gray, - borderRadius: 5, - paddingTop: 4, - paddingBottom: 4, - paddingLeft: 5, - paddingRight: 5, - color: color.white, + [QuickActionsCellType.body]: { + backgroundColor: color.lighter_gray, + border: '1px solid ' + color.light_gray, + borderRadius: 5, + paddingTop: 4, + paddingBottom: 4, + paddingLeft: 5, + paddingRight: 5, + color: color.white, + }, + [QuickActionsCellType.header]: { + paddingLeft: 5, + paddingRight: 5, + paddingTop: 4, + paddingBottom: 4, + fontSize: 20, + // float: 'right', + color: color.darker_gray, + margin: 3, + cursor: 'pointer', + } }, }; @@ -33,7 +65,12 @@ class QuickActionsCell extends Component { children: PropTypes.oneOfType([ PropTypes.node, PropTypes.array - ]).isRequired + ]).isRequired, + type: PropTypes.oneOf(Object.keys(QuickActionsCellType)) + }; + + static defaultProps = { + type: 'body' }; state = { @@ -81,17 +118,22 @@ class QuickActionsCell extends Component { }; render() { + const {type} = this.props; const targetPoint = {top: this.state.menuTop, left: this.state.menuLeft}; + const icons = { + header: 'cog', + body: 'chevron-down' + }; + return ( this.icon = span}> - - - + className="ui-test-section-dropdown" + /> { .storiesOf('QuickActionsCell', module) .addStoryTable([ { - name: 'QuickActionsCell', + name: 'QuickActionsCell - 2 children', description: 'Shown with 2 QuickActions as children', story: () => ( @@ -25,5 +25,26 @@ export default storybook => { ) }, + { + name: 'QuickActionsCell - different icon', + description: 'Override the default cheveron down icon', + story: () => ( + + {console.log("clicked");}} + > + {"Action 1"} + + + {console.log("clicked");}} + > + {"Action 2"} + + + ) + }, ]); }; diff --git a/apps/src/util/experiments.js b/apps/src/util/experiments.js index a79970008b7e2..7a4e520da3163 100644 --- a/apps/src/util/experiments.js +++ b/apps/src/util/experiments.js @@ -15,6 +15,7 @@ const STORAGE_KEY = 'experimentsList'; const GA_EVENT = 'experiments'; const EXPERIMENT_LIFESPAN_HOURS = 12; +experiments.SHARE_COLUMN = 'shareColumn'; /** * Get our query string. Provided as a method so that tests can mock this. */