@pie-lib/config-ui 11.2.1 → 11.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "11.2.1",
+  "version": "11.3.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -10,7 +10,7 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/editable-html": "^9.4.0",
+    "@pie-lib/editable-html": "^9.5.0",
     "@pie-lib/icons": "^2.4.26",
     "@pie-lib/render-ui": "^4.13.7",
     "classnames": "^2.2.6",
@@ -26,5 +26,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "7f09c22d79137a0c566882c1079349830a0d9ed2"
+  "gitHead": "629368c10c78d61b6551df2b0f0a04ec56fdef99"
 }

package/src/checkbox.jsx

@@ -40,7 +40,7 @@ Checkbox.defaultProps = {
 
 export default withStyles((theme) => ({
   label: {
-    fontSize: '13px',
+    fontSize: theme.typography.fontSize - 1,
     transform: 'translate(-4%, 2%)',
     color: 'rgba(0,0,0,1.0)',
   },
@@ -53,7 +53,7 @@ export default withStyles((theme) => ({
   miniLabel: {
     marginLeft: theme.spacing.unit,
     color: grey[700],
-    fontSize: '11px',
+    fontSize: theme.typography.fontSize - 3,
   },
   mini: {
     margin: 0,

package/src/choice-configuration/feedback-menu.jsx

@@ -30,7 +30,6 @@ export class IconMenu extends React.Component {
 
   render() {
     const { opts, onClick } = this.props;
-
     const keys = Object.keys(opts);
 
     const handleMenuClick = (key) => () => {
@@ -66,10 +65,8 @@ export default class FeedbackMenu extends React.Component {
 
   render() {
     const { value, onChange, classes } = this.props;
-
     const t = value && value.type;
     const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
-
     const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
 
     const icon = (

package/src/choice-configuration/index.jsx

@@ -61,7 +61,7 @@ const EditableHtmlContainer = withStyles((theme) => ({
   },
 );
 
-const Feedback = withStyles(() => ({
+const Feedback = withStyles((theme) => ({
   text: {
     width: '100%',
   },
@@ -69,7 +69,7 @@ const Feedback = withStyles(() => ({
     position: 'relative',
   },
   arrowIcon: {
-    fill: '#ccc',
+    fill: theme.palette.grey[400],
     left: -56,
     position: 'absolute',
     top: 20,
@@ -146,6 +146,7 @@ export class ChoiceConfiguration extends React.Component {
 
   _changeFn = (key) => (update) => {
     const { data, onChange } = this.props;
+
     if (onChange) {
       onChange({ ...data, [key]: update });
     }
@@ -177,6 +178,7 @@ export class ChoiceConfiguration extends React.Component {
   onFeedbackTypeChange = (t) => {
     const { data, onChange } = this.props;
     const fb = { ...data.feedback, type: t };
+
     if (fb.type !== 'custom') {
       fb.value = undefined;
     }
@@ -210,6 +212,7 @@ export class ChoiceConfiguration extends React.Component {
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
     const names = classNames(classes.choiceConfiguration, className);
+
     return (
       <div className={names}>
         <div className={classes.topRow}>
@@ -218,6 +221,7 @@ export class ChoiceConfiguration extends React.Component {
               {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
             </span>
           )}
+
           <InputToggle
             className={classes.toggle}
             onChange={this.onCheckedChange}
@@ -225,6 +229,7 @@ export class ChoiceConfiguration extends React.Component {
             checked={!!data.correct}
             error={noCorrectAnswerError}
           />
+
           <div className={classes.middleColumn}>
             <EditableHtmlContainer
               label={!noLabels ? 'Label' : ''}
@@ -251,6 +256,7 @@ export class ChoiceConfiguration extends React.Component {
               />
             )}
           </div>
+
           {allowFeedBack && (
             <InputContainer className={classes.feedback} label={!noLabels ? 'Feedback' : ''}>
               <FeedbackMenu
@@ -262,6 +268,7 @@ export class ChoiceConfiguration extends React.Component {
               />
             </InputContainer>
           )}
+
           {allowDelete && (
             <InputContainer className={classes.delete} label={!noLabels ? 'Delete' : ''}>
               <IconButton aria-label="delete" className={classes.deleteIcon} onClick={onDelete}>
@@ -277,7 +284,7 @@ export class ChoiceConfiguration extends React.Component {
 
 const styles = (theme) => ({
   index: {
-    padding: '24px 10px 0 0',
+    padding: '24px 8px 0 0',
   },
   choiceConfiguration: {},
   topRow: {
@@ -321,8 +328,8 @@ const styles = (theme) => ({
     flexDirection: 'column',
   },
   errorText: {
-    fontSize: '12px',
-    color: 'red',
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
   },
 });
 

package/src/feedback-config/feedback-selector.jsx

@@ -13,9 +13,10 @@ const feedbackLabels = {
 
 const holder = (theme, extras) => ({
   marginTop: '0px',
-  background: '#e0dee0',
-  padding: theme.spacing.unit * 0.9,
+  background: theme.palette.grey[300],
+  padding: theme.spacing.unit,
   marginBottom: theme.spacing.unit * 2,
+  borderRadius: '4px',
   ...extras,
 });
 
@@ -33,7 +34,7 @@ const style = (theme) => ({
     paddingBottom: 0,
   },
   customHolder: holder(theme, {
-    background: '#e0dee0',
+    background: theme.palette.grey[400],
     padding: 0,
   }),
   defaultHolder: holder(theme, {
@@ -66,11 +67,13 @@ export class FeedbackSelector extends React.Component {
 
   changeType = (type) => {
     const { onChange, feedback } = this.props;
+
     onChange({ ...feedback, type });
   };
 
   changeCustom = (custom) => {
     const { onChange, feedback } = this.props;
+
     onChange({ ...feedback, type: 'custom', custom });
   };
 
@@ -95,6 +98,7 @@ export class FeedbackSelector extends React.Component {
             feedbackLabels={feedbackLabels}
           />
         </InputContainer>
+
         {feedback.type === 'custom' && (
           <div className={classes.customHolder}>
             <EditableHTML
@@ -106,6 +110,7 @@ export class FeedbackSelector extends React.Component {
             />
           </div>
         )}
+
         {feedback.type === 'default' && <div className={classes.defaultHolder}> {feedback.default}</div>}
       </div>
     );

package/src/feedback-config/group.jsx

@@ -4,9 +4,9 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 
-const styles = () => ({
+const styles = (theme) => ({
   radioLabel: {
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
   },
   choice: {
     display: 'flex',
@@ -29,9 +29,7 @@ const Group = (props) => {
             <RadioWithLabel
               value={key}
               checked={value === key}
-              classes={{
-                label: classes.radioLabel,
-              }}
+              classes={{ label: classes.radioLabel }}
               onChange={(e) => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />

package/src/feedback-config/index.jsx

@@ -51,11 +51,14 @@ export class FeedbackConfig extends React.Component {
   onChange(key, config) {
     const { feedback, onChange } = this.props;
     const update = { ...feedback, [key]: config };
+
     onChange(update);
   }
 
   onCorrectChange = this.onChange.bind(this, 'correct');
+
   onIncorrectChange = this.onChange.bind(this, 'incorrect');
+
   onPartialChange = this.onChange.bind(this, 'partial');
 
   render() {
@@ -66,6 +69,7 @@ export class FeedbackConfig extends React.Component {
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={classes.heading}>Feedback</Typography>
         </ExpansionPanelSummary>
+
         <ExpansionPanelDetails>
           <div className={classes.feedbackContainer}>
             <FeedbackSelector
@@ -74,6 +78,7 @@ export class FeedbackConfig extends React.Component {
               onChange={this.onCorrectChange}
               toolbarOpts={toolbarOpts}
             />
+
             {allowPartial && (
               <FeedbackSelector
                 label="If partially correct, show"
@@ -82,6 +87,7 @@ export class FeedbackConfig extends React.Component {
                 toolbarOpts={toolbarOpts}
               />
             )}
+
             <FeedbackSelector
               label="If incorrect, show"
               feedback={feedback.incorrect}

package/src/help.jsx

@@ -21,18 +21,19 @@ const RawHelpButton = ({ onClick, classes }) => (
     <HelpIcon />
   </IconButton>
 );
+
 RawHelpButton.propTypes = {
   onClick: PropTypes.func,
   classes: PropTypes.object.isRequired,
 };
 
-export const HelpButton = withStyles({
+export const HelpButton = withStyles((theme) => ({
   icon: {
     '&:hover': {
-      color: '#ddd',
+      color: theme.palette.grey[300],
     },
   },
-})(RawHelpButton);
+}))(RawHelpButton);
 
 export const HelpDialog = ({ open, onClose, children, title }) => (
   <Dialog open={open} onRequestClose={onClose}>
@@ -70,9 +71,11 @@ class Help extends React.Component {
 
   render() {
     const { children, title } = this.props;
+
     return (
       <div>
         <HelpButton color="accent" onClick={() => this.setState({ open: true })} />
+
         <HelpDialog open={this.state.open} title={title} onClose={() => this.setState({ open: false })}>
           {children}
         </HelpDialog>

package/src/inputs.jsx

@@ -70,21 +70,21 @@ const RawInputRadio = (props) => {
 
 RawInputRadio.propTypes = { ...InputTypes };
 
-const InputCheckbox = withStyles({
+const InputCheckbox = withStyles((theme) => ({
   checkboxRoot: {
     transform: 'translate(-25%, 20%)',
   },
   error: {
-    color: 'red',
+    color: theme.palette.error.main,
   },
-})(RawInputCheckbox);
+}))(RawInputCheckbox);
 
-const InputRadio = withStyles(() => ({
+const InputRadio = withStyles((theme) => ({
   radioRoot: {
     transform: 'translate(-20%, 20%)',
   },
   error: {
-    color: 'red',
+    color: theme.palette.error.main,
   },
 }))(RawInputRadio);
 

package/src/langs.jsx

@@ -45,6 +45,7 @@ export class RawLangs extends React.Component {
 
   choose = (event) => {
     log('[choose] event: ', event);
+
     if (this.props.onChange) {
       this.props.onChange(event.target.value);
     }
@@ -52,13 +53,16 @@ export class RawLangs extends React.Component {
 
   render() {
     let { langs, selected, label, classes } = this.props;
+
     log('[render] selected:', selected);
+
     return (
       <div className={classes.root}>
         <FormControl className={classes.formControl}>
           <InputLabel className={classes.inputLabel} htmlFor={this.uid}>
             {label}
           </InputLabel>
+
           <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
             {langs.map((l, index) => (
               <MenuItem key={index} value={l}>

package/src/layout/config-layout.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import Measure from 'react-measure';
+import { withContentRect } from 'react-measure';
 import PropTypes from 'prop-types';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
 
-class ConfigLayout extends React.Component {
+class MeasuredConfigLayout extends React.Component {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
@@ -55,4 +56,6 @@ class ConfigLayout extends React.Component {
   }
 }
 
+const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+
 export default ConfigLayout;

package/src/layout/layout-contents.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core';
-import Tabs from '../tabs';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+import Tabs from '../tabs';
 
 class RawLayoutContents extends React.Component {
   static propTypes = {
@@ -65,7 +65,7 @@ class RawLayoutContents extends React.Component {
         {mode === 'inline' && (
           <div className={classnames(classes.flow, classes.contentContainer)}>
             <div className={classes.configContainer}>{children}</div>
-            {hasSettingsPanel && <div>{secondary}</div>}
+            {hasSettingsPanel && <div className={classes.settingsContainer}>{secondary}</div>}
           </div>
         )}
 
@@ -97,7 +97,9 @@ const styles = (theme) => ({
   },
   configContainer: {
     flex: '1',
-    marginRight: theme.spacing.unit * 2,
+  },
+  settingsContainer: {
+    marginLeft: theme.spacing.unit * 2,
   },
 });
 

package/src/layout/settings-box.jsx

@@ -18,17 +18,16 @@ export class SettingsBox extends React.Component {
     return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
   }
 }
-const styles = () => ({
+const styles = (theme) => ({
   settingsBox: {
-    backgroundColor: '#FFF',
-    border: '2px solid #EEE',
+    backgroundColor: theme.palette.background.paper,
+    border: `2px solid ${theme.palette.grey[200]}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'flex-start',
     minWidth: '275px',
     maxWidth: '300px',
     padding: '20px 4px 4px 20px',
-    width: '80%',
     zIndex: 99,
   },
 });

package/src/settings/index.js

@@ -19,6 +19,7 @@ const toChoice = (opt) => {
 export const radio = function() {
   const args = Array.prototype.slice.call(arguments);
   const [label, choices, isConfigProperty = false] = args;
+
   return {
     type: 'radio',
     label,

package/src/settings/panel.jsx

@@ -61,10 +61,10 @@ const Radio = ({ classes, label, value, onChange, choices }) => {
 
 Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
 
-const StyledRadio = withStyles({
+const StyledRadio = withStyles((theme) => ({
   radioSettings: {
-    marginTop: '4px',
-    paddingBottom: '4px',
+    marginTop: theme.spacing.unit / 2,
+    paddingBottom: theme.spacing.unit / 2,
     width: '100%',
     '& > label': {
       color: 'rgba(0, 0, 0, 0.89)',
@@ -72,26 +72,26 @@ const StyledRadio = withStyles({
       fontSize: '14px',
     },
     '& > div': {
-      marginTop: '20px',
+      marginTop: theme.spacing.unit * 2.5,
     },
   },
   label: {
     display: 'none',
   },
-})(Radio);
+}))(Radio);
 
-const Dropdown = withStyles({
+const Dropdown = withStyles((theme) => ({
   label: {
     margin: 0,
-    fontSize: '14px',
+    fontSize: theme.typography.fontSize,
   },
   wrapper: {
-    marginTop: '4px',
+    marginTop: theme.spacing.unit / 2,
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: '0 8px',
+    padding: `0 ${theme.spacing.unit}px`,
   },
-})(({ classes, label, value, onChange, choices = [] }) => {
+}))(({ classes, label, value, onChange, choices = [] }) => {
   return (
     <div>
       {label && <p className={classes.label}>{label}</p>}
@@ -114,19 +114,19 @@ const Dropdown = withStyles({
 
 Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
 
-const NumberField = withStyles({
+const NumberField = withStyles((theme) => ({
   field: {
     width: '35%',
-    marginRight: '24px',
-    marginTop: '8px',
+    marginRight: theme.spacing.unit * 3,
+    marginTop: theme.spacing.unit,
   },
   wrapper: {
-    marginTop: '4px',
+    marginTop: theme.spacing.unit / 2,
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: '0 8px',
+    padding: `0 ${theme.spacing.unit}px`,
   },
-})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
+}))(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
   return (
     <NumberTextField
       label={label || 'Label'}
@@ -164,18 +164,18 @@ const tagMap = {
   checkbox: CheckboxChoice,
 };
 
-const Group = withStyles(() => ({
+const Group = withStyles((theme) => ({
   group: {
-    margin: '0 0 16px 0',
+    margin: `0 0 ${theme.spacing.unit * 2}px 0`,
   },
   groupHeader: {
     color: '#495B8F',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize + 2,
     fontWeight: 600,
-    marginBottom: '8px',
+    marginBottom: theme.spacing.unit,
   },
   numberFields: {
-    fontSize: '0.85rem',
+    fontSize: theme.typography.fontSize,
     marginBottom: 0,
   },
 }))((props) => {
@@ -273,6 +273,7 @@ export class Panel extends React.Component {
 
   render() {
     const { groups, model, configuration } = this.props;
+
     log('render:', model);
 
     const renderedGroups = Object.keys(groups || {}).map((group) => {

package/src/settings/settings-radio-label.jsx

@@ -3,14 +3,14 @@ import Radio from '@material-ui/core/Radio';
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 
-export default withStyles({
+export default withStyles((theme) => ({
   label: {
     color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
     left: '-5px',
     position: 'relative',
   },
-})(({ label, value, checked, onChange, classes }) => (
+}))(({ label, value, checked, onChange, classes }) => (
   <FormControlLabel
     value={value}
     classes={classes}

package/src/settings/toggle.jsx

@@ -12,7 +12,7 @@ const Toggle = withStyles((theme) => ({
   },
   label: {
     color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '14px',
+    fontSize: theme.typography.fontSize,
     paddingTop: theme.spacing.unit * 2,
   },
 }))(({ checked, label, toggle, classes }) => (

package/src/tags-input/index.jsx

@@ -95,7 +95,7 @@ export class TagsInput extends React.Component {
 
 const styles = (theme) => ({
   tagsInput: {
-    border: 'solid 0px white',
+    border: `0px solid ${theme.palette.background.paper}`,
     display: 'flex',
     flexWrap: 'wrap',
   },
@@ -105,7 +105,7 @@ const styles = (theme) => ({
     minWidth: '30px',
     width: '100%',
     flex: '1',
-    border: 'solid 0px white',
+    border: `0px solid ${theme.palette.background.paper}`,
     height: '28px',
     fontSize: theme.typography.fontSize,
     fontFamily: theme.typography.fontFamily,