From de3de57a6580ddbed0d65a9dc98bf18421d1f9fd Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Wed, 7 Mar 2018 15:06:11 -0800 Subject: [PATCH 1/5] 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. */ From a0024c8dfac577ef2776b8756fb1190d07318d14 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Thu, 8 Mar 2018 13:04:52 -0800 Subject: [PATCH 2/5] remove redundant styles, better name stories --- .../manageStudents/ManageStudentsTable.jsx | 11 ++++- .../src/templates/tables/QuickActionsCell.jsx | 45 ++++++++----------- .../tables/QuickActionsCell.story.jsx | 8 ++-- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/apps/src/templates/manageStudents/ManageStudentsTable.jsx b/apps/src/templates/manageStudents/ManageStudentsTable.jsx index fbd9e61c06361..f9a56c2771bbc 100644 --- a/apps/src/templates/manageStudents/ManageStudentsTable.jsx +++ b/apps/src/templates/manageStudents/ManageStudentsTable.jsx @@ -21,6 +21,13 @@ import experiments from '@cdo/apps/util/experiments'; const showShareColumn = experiments.isEnabled(experiments.SHARE_COLUMN); +const styles = { + inline: { + width: '40%', + float: 'left', + }, +}; + export const studentSectionDataPropType = PropTypes.shape({ id: PropTypes.number.isRequired, name: PropTypes.string, @@ -182,10 +189,10 @@ class ManageStudentsTable extends Component { } {numberOfEditingRows <= 1 && -
+
{i18n.actions()}
-
+
{showShareColumn && } diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx index 7936fabb07cc4..cc7e0a0397151 100644 --- a/apps/src/templates/tables/QuickActionsCell.jsx +++ b/apps/src/templates/tables/QuickActionsCell.jsx @@ -12,27 +12,24 @@ export const QuickActionsCellType = { }; const styles = { + icon: { + paddingLeft: 5, + paddingRight: 5, + paddingTop: 4, + paddingBottom: 4, + 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: { @@ -40,23 +37,8 @@ const styles = { 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', - } }, }; @@ -126,11 +108,22 @@ class QuickActionsCell extends Component { body: 'chevron-down' }; + const styleByType = type === "header" ? + styles.actionButton["header"] : + this.state.open ? + styles.hoverFocus["body"] : + styles.actionButton["body"]; + + const iconStyle = { + ...styles.icon, + ...styleByType + }; + return ( this.icon = span}> diff --git a/apps/src/templates/tables/QuickActionsCell.story.jsx b/apps/src/templates/tables/QuickActionsCell.story.jsx index 778a759195c29..395a0257989a0 100644 --- a/apps/src/templates/tables/QuickActionsCell.story.jsx +++ b/apps/src/templates/tables/QuickActionsCell.story.jsx @@ -7,8 +7,8 @@ export default storybook => { .storiesOf('QuickActionsCell', module) .addStoryTable([ { - name: 'QuickActionsCell - 2 children', - description: 'Shown with 2 QuickActions as children', + name: 'QuickActionsCell - default body', + description: 'Shown with 2 QuickActions as children, the default body cell has a down chevron', story: () => ( { ) }, { - name: 'QuickActionsCell - different icon', - description: 'Override the default cheveron down icon', + name: 'QuickActionsCell - header', + description: 'Override the default cheveron down icon for use in the header cell', story: () => ( Date: Thu, 8 Mar 2018 15:17:23 -0800 Subject: [PATCH 3/5] remove Radium, use QuickActionsCellType.type instead of strings --- apps/src/templates/tables/QuickActionsCell.jsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx index cc7e0a0397151..c0116683f2023 100644 --- a/apps/src/templates/tables/QuickActionsCell.jsx +++ b/apps/src/templates/tables/QuickActionsCell.jsx @@ -1,5 +1,4 @@ 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'; @@ -42,7 +41,7 @@ const styles = { }, }; -class QuickActionsCell extends Component { +export default class QuickActionsCell extends Component { static propTypes = { children: PropTypes.oneOfType([ PropTypes.node, @@ -52,7 +51,7 @@ class QuickActionsCell extends Component { }; static defaultProps = { - type: 'body' + type: QuickActionsCellType.body }; state = { @@ -108,7 +107,7 @@ class QuickActionsCell extends Component { body: 'chevron-down' }; - const styleByType = type === "header" ? + const styleByType = type === QuickActionsCellType.header ? styles.actionButton["header"] : this.state.open ? styles.hoverFocus["body"] : @@ -139,5 +138,3 @@ class QuickActionsCell extends Component { ); } } - -export default Radium(QuickActionsCell); From c720eb68fe032673c27c77dbc23e036a5a38502d Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Thu, 8 Mar 2018 15:32:51 -0800 Subject: [PATCH 4/5] remove negative margin in favor of lineHeight --- apps/src/templates/tables/QuickActionsCell.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/src/templates/tables/QuickActionsCell.jsx b/apps/src/templates/tables/QuickActionsCell.jsx index c0116683f2023..f373657cef8b7 100644 --- a/apps/src/templates/tables/QuickActionsCell.jsx +++ b/apps/src/templates/tables/QuickActionsCell.jsx @@ -27,7 +27,7 @@ const styles = { }, [QuickActionsCellType.header]: { fontSize: 20, - marginTop: -3, + lineHeight: '15px', color: color.darker_gray, } }, From 7d9e5cf8eac1d037484dc160ecba6c596ac30e84 Mon Sep 17 00:00:00 2001 From: Erin Bond Date: Fri, 9 Mar 2018 09:31:37 -0800 Subject: [PATCH 5/5] use QuickActionsCellType --- .../manageStudents/ManageStudentsActionsHeaderCell.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx b/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx index b9177b5b3b856..ac7c490bf4d79 100644 --- a/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx +++ b/apps/src/templates/manageStudents/ManageStudentsActionsHeaderCell.jsx @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import QuickActionsCell from "../tables/QuickActionsCell"; +import QuickActionsCell, {QuickActionsCellType} from "../tables/QuickActionsCell"; import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu"; import i18n from '@cdo/locale'; @@ -9,7 +9,7 @@ export default class ManageStudentsActionsHeaderCell extends Component { return (
console.log('edit all was clicked!')}