diff --git a/client/coral-configure/components/ConfigureCommentStream.css b/client/coral-configure/components/ConfigureCommentStream.css
index dfa860995..cbe2ba715 100644
--- a/client/coral-configure/components/ConfigureCommentStream.css
+++ b/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;
+}
diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index 4298384e0..3afd1336c 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/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
-
- */}
(
title: lang.t('configureCommentStream.enableQuestionBox'),
description: lang.t('configureCommentStream.enableQuestionBoxDescription')
}} />
-
diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
index 2f0b01800..9092a2673 100644
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ b/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(
diff --git a/client/coral-configure/translations.json b/client/coral-configure/translations.json
index bd45d6159..a40c12bc1 100644
--- a/client/coral-configure/translations.json
+++ b/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í."
}
}
diff --git a/client/coral-ui/components/TextField.js b/client/coral-ui/components/TextField.js
index 9cdddf5c8..80855dbf1 100644
--- a/client/coral-ui/components/TextField.js
+++ b/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}) => (
-
-);
-
-export default TextField;
+export default class TextField extends Component {
+ render() {
+ const {className, onChange, rows, questionBoxContent} = this.props;
+ return (
+
+ );
+ }
+}
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index beb2396f5..bfc5acb16 100644
--- a/client/coral-ui/index.js
+++ b/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';