From b1d90dfd8768c488be4040eac7ed28803198428c Mon Sep 17 00:00:00 2001 From: gaba Date: Tue, 14 Feb 2017 15:31:12 -0800 Subject: [PATCH] Fix TextField for the Configure Stream. --- .../components/ConfigureCommentStream.css | 18 +++++++++++ .../components/ConfigureCommentStream.js | 32 +++++++------------ .../containers/ConfigureStreamContainer.js | 11 ++++--- client/coral-configure/translations.json | 16 +++++----- client/coral-ui/components/TextField.js | 28 ++++++++++------ client/coral-ui/index.js | 1 + 6 files changed, 63 insertions(+), 43 deletions(-) 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') }} /> -
    -
    - Pepe -
    + +
    +
    • + 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';