From 39479fd9ad3c68766b649c0e5c9ebc219421863c Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 12 Dec 2016 17:07:43 -0500 Subject: [PATCH 01/10] Add character count field. --- .../containers/Configure/CommentSettings.js | 32 +++++++++++++++++++ .../src/containers/Configure/Configure.css | 16 ++++++++++ 2 files changed, 48 insertions(+) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 194af720c..429893b34 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -11,6 +11,19 @@ import { Checkbox } from 'react-mdl'; +const updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); +}; + +const updateCharCount = (updateSettings) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/)) { + //Show error + } + updateSettings({charCount: charCount}); +}; + const updateModeration = (updateSettings, mod) => () => { const moderation = mod === 'pre' ? 'post' : 'pre'; updateSettings({moderation}); @@ -40,6 +53,25 @@ const CommentSettings = (props) => {lang.t('configure.enable-pre-moderation')} + + + + + + Limit Content Length +

+ Comments will be limited to + + characters. +

+ + Date: Mon, 12 Dec 2016 17:35:33 -0500 Subject: [PATCH 02/10] Updating settings box style. --- .../src/containers/Configure/CommentSettings.js | 15 ++++++++++----- .../src/containers/Configure/Configure.css | 15 ++++++++++++++- client/coral-admin/src/translations.json | 2 ++ 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 429893b34..53f769da4 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -45,22 +45,27 @@ const updateClosedMessage = (updateSettings) => (event) => { }; const CommentSettings = (props) => - + - {lang.t('configure.enable-pre-moderation')} + +
{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')} +

+ - + - Limit Content Length +
Limit Content Length

Comments will be limited to

- + Date: Mon, 12 Dec 2016 17:45:20 -0500 Subject: [PATCH 03/10] Moving text to translations file. --- .../src/containers/Configure/CommentSettings.js | 6 +++--- .../coral-admin/src/containers/Configure/Configure.css | 2 +- client/coral-admin/src/translations.json | 10 ++++++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 53f769da4..f33b7204f 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -65,15 +65,15 @@ const CommentSettings = (props) => checked={props.settings.charCountEnable} /> -
Limit Content Length
+
{lang.t('configure.comment-count-header')}

- Comments will be limited to + {lang.t('configure.comment-count-text-pre')} - characters. + {lang.t('configure.comment-count-text-post')}

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index f1519df56..ad811a351 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -112,7 +112,7 @@ } .disabledSetting { - padding-left: 23px; + padding-left: 22px; } .hidden { diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 7672cdfce..743380621 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -56,7 +56,10 @@ "configure": "Configure", "community": "Community", "closed-comments-desc": "Write a message for closed threads", - "closed-comments-label": "Write a message..." + "closed-comments-label": "Write a message...", + "comment-count-header": "Limit Content Length", + "comment-count-text-pre": "Comments will be limited to ", + "comment-count-text-post": " characters." }, "bandialog": { "ban_user": "Ban User?", @@ -112,7 +115,10 @@ "configure": "Configurar", "community": "Comunidad", "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados", - "closed-comments-label": "Escribe un mensaje..." + "closed-comments-label": "Escribe un mensaje...", + "comment-count-header": "tracundeme", + "comment-count-text-pre": "tracundeme", + "comment-count-text-post": "tracundeme" }, "bandialog": { "ban_user": "Quieres suspender el Usuario?", From 4a4b92299cd9cba8ab0fa111790d0346a5a6c5f9 Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 12 Dec 2016 18:10:47 -0500 Subject: [PATCH 04/10] Adding error message. --- .../containers/Configure/CommentSettings.js | 216 ++++++++++-------- .../src/containers/Configure/Configure.css | 11 +- client/coral-admin/src/translations.json | 3 +- 3 files changed, 134 insertions(+), 96 deletions(-) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index f33b7204f..9e162fc30 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {Component, PropTypes} from 'react'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; import styles from './Configure.css'; @@ -8,108 +8,136 @@ import { ListItemContent, ListItemAction, Textfield, - Checkbox + Checkbox, + Icon } from 'react-mdl'; -const updateCharCountEnable = (updateSettings, charCountChecked) => () => { - const charCountEnable = !charCountChecked; - updateSettings({charCountEnable}); -}; +class CommentSettings extends Component { -const updateCharCount = (updateSettings) => (event) => { - const charCount = event.target.value; - if (charCount.match(/[^0-9]/)) { - //Show error + state = { + charCountError: false } - updateSettings({charCount: charCount}); -}; -const updateModeration = (updateSettings, mod) => () => { - const moderation = mod === 'pre' ? 'post' : 'pre'; - updateSettings({moderation}); -}; + static propTypes = { + updateSettings: PropTypes.func.isRequired, + settings: PropTypes.object.isRequired + } -const updateInfoBoxEnable = (updateSettings, infoBox) => () => { - const infoBoxEnable = !infoBox; - updateSettings({infoBoxEnable}); -}; + updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); + }; -const updateInfoBoxContent = (updateSettings) => (event) => { - const infoBoxContent = event.target.value; - updateSettings({infoBoxContent}); -}; + updateCharCount = (updateSettings) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/)) { + this.setState({charCountError: true}); + } else { + this.setState({charCountError: false}); + } + updateSettings({charCount: charCount}); + }; -const updateClosedMessage = (updateSettings) => (event) => { - const closedMessage = event.target.value; - updateSettings({closedMessage}); -}; + updateModeration = (updateSettings, mod) => () => { + const moderation = mod === 'pre' ? 'post' : 'pre'; + updateSettings({moderation}); + }; -const CommentSettings = (props) => - - - - - -
{lang.t('configure.enable-pre-moderation')}
-

- {lang.t('configure.enable-pre-moderation-text')} -

- - - - - - - -
{lang.t('configure.comment-count-header')}
-

- {lang.t('configure.comment-count-text-pre')} - - {lang.t('configure.comment-count-text-post')} -

- - - - - - - - {lang.t('configure.include-comment-stream')} -

- {lang.t('configure.include-comment-stream-desc')} -

- - - - - - - - - - {lang.t('configure.closed-comments-desc')} - - - -; + updateInfoBoxEnable = (updateSettings, infoBox) => () => { + const infoBoxEnable = !infoBox; + updateSettings({infoBoxEnable}); + }; + + updateInfoBoxContent = (updateSettings) => (event) => { + const infoBoxContent = event.target.value; + updateSettings({infoBoxContent}); + }; + + updateClosedMessage = (updateSettings) => (event) => { + const closedMessage = event.target.value; + updateSettings({closedMessage}); + }; + + render() { + + const {updateSettings, settings} = this.props; + + return + + + + + +
{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')} +

+ + + + + + + +
{lang.t('configure.comment-count-header')}
+

+ {lang.t('configure.comment-count-text-pre')} + + {lang.t('configure.comment-count-text-post')} + { + this.state.charCountError && + +
+ + {lang.t('configure.comment-count-error')} + + } +

+ + + + + + + + {lang.t('configure.include-comment-stream')} +

+ {lang.t('configure.include-comment-stream-desc')} +

+ + + + + + + + + + {lang.t('configure.closed-comments-desc')} + + + + ; + } +} export default CommentSettings; diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index ad811a351..4788110de 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -18,11 +18,20 @@ .configSetting { border: 1px solid #ccc; border-radius: 4px; - height: 90px; + height: 95px; margin-bottom: 10px; align-items: flex-start; } +.settingsError { + color: #d50000; +} + +.settingsError i { + font-size: 14px; + margin-right: 3px; +} + .settingsHeader { margin-top: 3px; margin-bottom: 10px; diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 743380621..1780bc133 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -59,7 +59,8 @@ "closed-comments-label": "Write a message...", "comment-count-header": "Limit Content Length", "comment-count-text-pre": "Comments will be limited to ", - "comment-count-text-post": " characters." + "comment-count-text-post": " characters.", + "comment-count-error": "Please enter a valid number." }, "bandialog": { "ban_user": "Ban User?", From ba8a845741090ec7ed6efcfa61799fe7acac74e0 Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 12 Dec 2016 18:14:03 -0500 Subject: [PATCH 05/10] Making character input field green to match designs. --- .../coral-admin/src/containers/Configure/CommentSettings.js | 2 +- client/coral-admin/src/containers/Configure/Configure.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 9e162fc30..b3ab8d62a 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -87,7 +87,7 @@ class CommentSettings extends Component {

{lang.t('configure.comment-count-text-pre')} diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 4788110de..667bb4744 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -71,6 +71,10 @@ border-width: 0px 0px 1px 0px; } +.charCountTexfieldEnabled { + border-color: #4caf50; +} + .charCountTexfield:focus { outline: none; } From cd63f49a5e56706068d6c84bccb8585c4ffb8bb6 Mon Sep 17 00:00:00 2001 From: David Jay Date: Mon, 12 Dec 2016 19:08:35 -0500 Subject: [PATCH 06/10] Disabling save button on error and updating translations. --- client/coral-admin/src/actions/settings.js | 5 +- .../containers/Configure/CommentSettings.js | 217 ++++++++---------- .../src/containers/Configure/Configure.js | 21 +- client/coral-admin/src/translations.json | 9 +- models/setting.js | 10 +- 5 files changed, 136 insertions(+), 126 deletions(-) diff --git a/client/coral-admin/src/actions/settings.js b/client/coral-admin/src/actions/settings.js index 71106e1f7..1dfda51b9 100644 --- a/client/coral-admin/src/actions/settings.js +++ b/client/coral-admin/src/actions/settings.js @@ -26,7 +26,10 @@ export const updateSettings = settings => { }; export const saveSettingsToServer = () => (dispatch, getState) => { - const settings = getState().settings.toJS().settings; + let settings = getState().settings.toJS().settings; + if (settings.charCount) { + settings.charCount = parseInt(settings.charCount); + } dispatch({type: SAVE_SETTINGS_LOADING}); coralApi('/settings', {method: 'PUT', body: settings}) .then(() => { diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index b3ab8d62a..6589e115e 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -12,132 +12,115 @@ import { Icon } from 'react-mdl'; -class CommentSettings extends Component { +const updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); +}; - state = { - charCountError: false +const updateCharCount = (updateSettings, settingsError) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/)) { + settingsError('charCount', true); + } else { + settingsError('charCount', false); } + updateSettings({charCount: charCount}); +}; - static propTypes = { - updateSettings: PropTypes.func.isRequired, - settings: PropTypes.object.isRequired - } +const updateModeration = (updateSettings, mod) => () => { + const moderation = mod === 'pre' ? 'post' : 'pre'; + updateSettings({moderation}); +}; - updateCharCountEnable = (updateSettings, charCountChecked) => () => { - const charCountEnable = !charCountChecked; - updateSettings({charCountEnable}); - }; +const updateInfoBoxEnable = (updateSettings, infoBox) => () => { + const infoBoxEnable = !infoBox; + updateSettings({infoBoxEnable}); +}; - updateCharCount = (updateSettings) => (event) => { - const charCount = event.target.value; - if (charCount.match(/[^0-9]/)) { - this.setState({charCountError: true}); - } else { - this.setState({charCountError: false}); - } - updateSettings({charCount: charCount}); - }; +const updateInfoBoxContent = (updateSettings) => (event) => { + const infoBoxContent = event.target.value; + updateSettings({infoBoxContent}); +}; - updateModeration = (updateSettings, mod) => () => { - const moderation = mod === 'pre' ? 'post' : 'pre'; - updateSettings({moderation}); - }; +const updateClosedMessage = (updateSettings) => (event) => { + const closedMessage = event.target.value; + updateSettings({closedMessage}); +}; - updateInfoBoxEnable = (updateSettings, infoBox) => () => { - const infoBoxEnable = !infoBox; - updateSettings({infoBoxEnable}); - }; - - updateInfoBoxContent = (updateSettings) => (event) => { - const infoBoxContent = event.target.value; - updateSettings({infoBoxContent}); - }; - - updateClosedMessage = (updateSettings) => (event) => { - const closedMessage = event.target.value; - updateSettings({closedMessage}); - }; - - render() { - - const {updateSettings, settings} = this.props; - - return - - - - - -

{lang.t('configure.enable-pre-moderation')}
-

- {lang.t('configure.enable-pre-moderation-text')} +const CommentSettings = ({updateSettings, settingsError, settings, errors}) => + + + + + +

{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')} +

+ + + + + + + +
{lang.t('configure.comment-count-header')}
+

+ {lang.t('configure.comment-count-text-pre')} + + {lang.t('configure.comment-count-text-post')} + { + errors.charCount && + +
+ + {lang.t('configure.comment-count-error')} + + }

- - - - - - -
{lang.t('configure.comment-count-header')}
-

- {lang.t('configure.comment-count-text-pre')} - - {lang.t('configure.comment-count-text-post')} - { - this.state.charCountError && - -
- - {lang.t('configure.comment-count-error')} - - } -

- - - - - - - - {lang.t('configure.include-comment-stream')} -

- {lang.t('configure.include-comment-stream-desc')} -

- - - - - - - - - - {lang.t('configure.closed-comments-desc')} - - - - ; - } -} + + + + + + + {lang.t('configure.include-comment-stream')} +

+ {lang.t('configure.include-comment-stream-desc')} +

+ + + + + + + + + + {lang.t('configure.closed-comments-desc')} + + + + ; export default CommentSettings; diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js index db3bf6f20..8dd106cd0 100644 --- a/client/coral-admin/src/containers/Configure/Configure.js +++ b/client/coral-admin/src/containers/Configure/Configure.js @@ -22,7 +22,8 @@ class Configure extends React.Component { this.state = { activeSection: 'comments', wordlist: [], - changed: false + changed: false, + errors: {} }; } @@ -64,12 +65,23 @@ class Configure extends React.Component { this.props.dispatch(updateSettings(setting)); } + // Sets an arbitrary error string and a boolean state. + // This allows the system to track multiple errors. + onSettingError = (error, state) => { + this.setState((prevState) => { + prevState.errors[error] = state; + return prevState; + }); + } + getSection = (section) => { switch(section){ case 'comments': return ; + updateSettings={this.onSettingUpdate} + errors={this.state.errors} + settingsError={this.onSettingError}/>; case 'embed': return ; case 'wordlist': @@ -94,6 +106,9 @@ class Configure extends React.Component { let pageTitle = this.getPageTitle(this.state.activeSection); const section = this.getSection(this.state.activeSection); + const showSave = Object.keys(this.state.errors).reduce( + (bool, error) => this.state.errors[error] ? false : bool, this.state.changed); + if (this.props.fetchingSettings) { pageTitle += ' - Loading...'; } @@ -119,7 +134,7 @@ class Configure extends React.Component { { - this.state.changed ? + showSave ?