Fix TextField for the Configure Stream.

client/coral-configure/components/ConfigureCommentStream.css

@@ -49,3 +49,21 @@ p {
 .hidden {
   display: none;
 }
+
+/* Question Box Styles */
+
+.configSettingQuestionBox {
+  background: white;
+}
+
+.configSettingQuestionBoxInfo {
+  top: 0;
+  border: 10px;
+  background: white;
+  color: inherit;
+  width: 100%;
+  text-align: left;
+  padding: 5px;
+  font-weight: bold;
+  display: block;
+}

client/coral-configure/components/ConfigureCommentStream.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Button, Checkbox} from 'coral-ui';
+import {Button, Checkbox, TextField} from 'coral-ui';
+
 import styles from './ConfigureCommentStream.css';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -32,22 +33,6 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               title: lang.t('configureCommentStream.enablePremod'),
               description: lang.t('configureCommentStream.enablePremodDescription')
             }} />
-          {/* To be implimented
-          <ul>
-            <li>
-              <Checkbox
-                className={styles.checkbox}
-                cStyle={changed ? 'green' : 'darkGrey'}
-                name="premodLinks"
-                onChange={handleChange}
-                defaultChecked={props.premodLinks}
-                info={{
-                  title: lang.t('configureCommentStream.enablePremodLinks'),
-                  description: lang.t('configureCommentStream.enablePremodDescription')
-                }} />
-            </li>
-          </ul>
-          */}
         </li>
         <li>
           <Checkbox
@@ -60,12 +45,17 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               title: lang.t('configureCommentStream.enableQuestionBox'),
               description: lang.t('configureCommentStream.enableQuestionBoxDescription')
             }} />
-          <div className={styles.content}>
-            <div className={`${styles.configSettingQuestionBox} ${props.questionBoxEnable ? null : styles.hidden}`} >
-              Pepe
-            </div>
+
+          <div className={`${styles.configSettingQuestionBox} ${props.questionBoxEnable ? null : styles.hidden}`} >
+            <TextField
+              className={`${styles.configSettingQuestionBoxInfo}`}
+              onChange={handleChange}
+              rows={3}
+              questionBoxContent={props.questionBoxContent}
+            />
           </div>
         </li>
+
       </ul>
     </div>
   </form>

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -28,9 +28,7 @@ class ConfigureStreamContainer extends Component {
     const {elements} = e.target;
     const premod = elements.premod.checked;
     const questionBoxEnable = elements.qboxenable.checked;
-    const questionBoxContent = ''; // elements.qboxcontent.value;
-
-    console.log('debug ', questionBoxContent);
+    const questionBoxContent = elements.qboxcontent.value;
 
     // const premodLinks = elements.premodLinks.checked;
     const {changed} = this.state;
@@ -51,7 +49,10 @@ class ConfigureStreamContainer extends Component {
     }
   }
 
-  handleChange () {
+  handleChange (e) {
+    if (e.target && e.target.id === 'qboxenable') {
+      this.props.asset.settings.questionBoxEnable = e.target.checked;
+    }
     this.setState({
       changed: true
     });
@@ -104,7 +105,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = dispatch => ({
   updateStatus: status => dispatch(updateOpenStatus(status)),
-  updateConfiguration: newConfig => dispatch(updateConfiguration(newConfig))
+  updateConfiguration: newConfig => dispatch(updateConfiguration(newConfig)),
 });
 
 export default compose(

client/coral-configure/translations.json

@@ -8,22 +8,22 @@
       "enablePremodDescription": "Moderators must approve any comment before its published.",
       "enablePremodLinks": "Pre-Moderate Comments Containing Links",
       "enablePremodLinksDescription": "Moderators must approve any comment containing a link before its published.",
-      "enableQuestionBox": "Enable Question Box",
-      "enableQuestionBoxDescription": "Commenters will see a question at the top of the comments stream.",
-      "includeQuestionHere": "Include your question here."
+      "enableQuestionBox": "Ask readers a question",
+      "enableQuestionBoxDescription": "This question will appear at the top of this comment stram. Ask readers about a certain issue in the article or pose discussion questions, etc.",
+      "includeQuestionHere": "Write your question here."
     }
   },
   "es": {
     "configureCommentStream": {
       "apply": "Aplicar",
       "title": "Configurar los comentarios",
-      "description": "Como Administrador puedes modificar las opciones de los comentarios en este artículo",
+      "description": "Como Administrador/a puedes modificar las opciones de los comentarios en este artículo",
       "enablePremod": "Activar Pre Moderación",
-      "enablePremodDescription": "Los Moderadores deben aprobar cualquier comentario antes de su publicación",
+      "enablePremodDescription": "Los y las Moderadoras deben aprobar cualquier comentario antes de su publicación",
       "enablePremodLinks": "Pre-Moderar Commentarios que contienen Links",
-      "enablePremodLinksDescription": "Los Moderadores deben probar cualquier comentario que contengan links antes de su publicación.",
-      "enableQuestionBox": "Activar Caja de Pregunta",
-      "enableQuestionBoxDescription": "Una pregunta estara en la parte de arriba del hilo de comentarios.",
+      "enablePremodLinksDescription": "Los y las Moderadoras deben probar cualquier comentario que contengan links antes de su publicación.",
+      "enableQuestionBox": "Hacer una pregunta a los y las lectoras.",
+      "enableQuestionBoxDescription": "Esta pregunta aparecera en la parte de arriba del hilo de comentarios.",
       "includeQuestionHere": "Escribir la pregunta aquí."
     }
   }

client/coral-ui/components/TextField.js

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {Textfield as TextFieldMDL} from 'react-mdl';
+import 'material-design-lite';
 
-const TextField = ({onChange, label, rows}) => (
-  <TextFieldMDL
-    onChange={onChange}
-    label={label}
-    rows={rows}/>
-);
-
-export default TextField;
+export default class TextField extends Component {
+  render() {
+    const {className, onChange, rows, questionBoxContent} = this.props;
+    return (
+      <TextFieldMDL
+        className={className}
+        onChange={onChange}
+        label=""
+        rows={rows}
+        id="qboxcontent"
+        value={questionBoxContent}
+        expandable={false}
+        style={{width: '100%'}}
+      />
+    );
+  }
+}

client/coral-ui/index.js

@@ -14,6 +14,7 @@ export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as FormField} from './components/FormField';
+export {default as TextField} from './components/TextField';
 export {default as Success} from './components/Success';
 export {default as Pager} from './components/Pager';
 export {default as Wizard} from './components/Wizard';