Merge branch 'master'

Conflicts:
	client/coral-admin/src/containers/Configure/StreamSettings.js

client/coral-admin/src/containers/Configure/Configure.css

@@ -24,10 +24,30 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+  max-width: 600px;
 
   h3 {
     margin: 0;
   }
+
+  .actions {
+    display: inline-block;
+    width: 100%;
+
+    .copiedText {
+      display: inline-block;
+      color: #00796b;
+      padding: 12px;
+      font-size: 14px;
+      float: right;
+    }
+
+    .copyButton {
+      display: inline-block;
+      width: 200px;
+      float: right;
+    }
+  }
 }
 
 .settingsError {
@@ -41,7 +61,9 @@
 
 .settingsHeader {
   margin-top: 3px;
-  margin-bottom: 10px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .disabledSettingText {
@@ -58,11 +80,6 @@
   overflow: visible;
 }
 
-.configSettingInfoBox p {
-  font-size: 12px;
-  bottom: 0;
-}
-
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -81,6 +98,8 @@
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
+  font-size: 14px;
+  text-align: center;
 }
 
 .charCountTexfieldEnabled {
@@ -96,29 +115,18 @@
   color: white;
 }
 
-.copiedText {
-  color: #00796b;
-  float: right;
-  padding: 12px;
-  font-size: 14px;
-}
-
-.copyButton {
-  float: right;
-  width: 200px;
-}
-
 .embedInput {
-  border-radius: 3px;
-  border: 1px solid #ccc;
+  width: 100%;
   display: block;
-  width: 90%;
-  vertical-align: middle;
-  margin-bottom: 10px;
-  color: #555;
-  padding: 14px;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
   font-size: 14px;
-  letter-spacing: 0.03em;
+  resize: none;
 }
 
 #bannedWordlist, #suspectWordlist {
@@ -170,3 +178,24 @@
     padding-left: 30px;
   }
 }
+
+.Configure {
+
+  p {
+    line-height: 1.2;
+    max-width: 550px;
+  }
+
+  .wrapper {
+    width: 550px;
+  }
+
+  .descriptionBox {
+    margin-top: 15px;
+    max-width: 550px;
+
+    input {
+      height: 150px;
+    }
+  }
+}

client/coral-admin/src/containers/Configure/Domainlist.js

@@ -10,15 +10,19 @@ const lang = new I18n(translations);
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.domain-list-title')}</h3>
-      <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
-      <TagsInput
-        value={domains}
-        inputProps={{placeholder: 'URL'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeDomainlist('whitelist', tags)}
-      />
+      <div className={styles.wrapper}>
+        <div className={styles.settingsHeader}>{lang.t('configure.domain-list-title')}</div>
+        <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+        <div className={styles.wrapper}>
+          <TagsInput
+            value={domains}
+            inputProps={{placeholder: 'URL'}}
+            addOnPaste={true}
+            pasteSplit={data => data.split(',').map(d => d.trim())}
+            onChange={tags => onChangeDomainlist('whitelist', tags)}
+          />
+        </div>
+      </div>
     </Card>
   );
 };

client/coral-admin/src/containers/Configure/EmbedLink.js

@@ -45,13 +45,19 @@ class EmbedLink extends Component {
     `.trim();
     return (
       <Card shadow="2" className={styles.configSetting}>
-        <h3>Embed Comment Stream</h3>
-        <p>{lang.t('configure.copy-and-paste')}</p>
-        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-        <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-          {lang.t('embedlink.copy')}
-        </Button>
-        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>Embed Comment Stream</div>
+          <p>{lang.t('configure.copy-and-paste')}</p>
+          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+          <div className={styles.actions}>
+            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+              {lang.t('embedlink.copy')}
+            </Button>
+            <div className={styles.copiedText}>
+              {this.state.copied && 'Copied!'}
+            </div>
+          </div>
+        </div>
       </Card>
     );
   }

client/coral-admin/src/containers/Configure/ModerationSettings.js

@@ -23,7 +23,7 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
         <div className={styles.action}>
           <Checkbox

client/coral-admin/src/containers/Configure/StreamSettings.js

@@ -3,8 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon} from 'coral-ui';
+import {Checkbox, Textfield} from 'react-mdl';
+import {Card, Icon, TextArea} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -69,7 +69,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -84,7 +84,9 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
               onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}/>
+              value={settings.charCount}
+              disabled={settings.charCountEnable ? '' : 'disabled'}
+            />
             <span>{lang.t('configure.comment-count-text-post')}</span>
               {
                 errors.charCount &&
@@ -97,54 +99,56 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </p>
         </div>
       </Card>
-      <Card className={`${styles.configSettingInfoBox} ${settings.premodLinksEnable ? on : off}`}>
+      <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
             onChange={updatePremodLinksEnable(updateSettings, settings.premodLinksEnable)}
             checked={settings.premodLinksEnable} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.enable-premod-links')}
+          <div className={styles.settingsHeader}>{lang.t('configure.enable-premod-links')}</div>
           <p>
             {lang.t('configure.enable-premod-links-text')}
           </p>
         </div>
       </Card>
-      <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
             onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
             checked={settings.infoBoxEnable} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.include-comment-stream')}
-          <p>
+          <div className={styles.settingsHeader}>
+            {lang.t('configure.include-comment-stream')}
+          </div>
+          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div className={styles.content}>
-              <Textfield
+            <div>
+              <TextArea
+                className={styles.descriptionBox}
                 onChange={updateInfoBoxContent(updateSettings)}
                 value={settings.infoBoxContent}
-                label={lang.t('configure.include-text')}
-                rows={3}/>
+              />
             </div>
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.closed-comments-desc')}
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
+        <div className={styles.wrapper}>
+          <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
-          <Textfield
-            onChange={updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
+            <TextArea className={styles.descriptionBox}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+            />
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.content}>
           {lang.t('configure.close-after')}
           <br />

client/coral-admin/src/containers/Configure/TechSettings.js

@@ -14,19 +14,20 @@ const updateCustomCssUrl = (updateSettings) => (event) => {
 
 const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
   return (
-    <div>
+    <div className={styles.Configure}>
       <Domainlist
         domains={settings.domains.whitelist}
         onChangeDomainlist={onChangeDomainlist} />
       <EmbedLink />
       <Card className={styles.configSetting}>
-        <h3>{lang.t('configure.custom-css-url')}</h3>
-        <p>{lang.t('configure.custom-css-url-desc')}</p>
-        <br />
-        <input
-          className={styles.customCSSInput}
-          value={settings.customCssUrl}
-          onChange={updateCustomCssUrl(updateSettings)} />
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
+          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <input
+            className={styles.customCSSInput}
+            value={settings.customCssUrl}
+            onChange={updateCustomCssUrl(updateSettings)} />
+        </div>
       </Card>
     </div>
   );

client/coral-admin/src/containers/Configure/Wordlist.js

@@ -8,25 +8,29 @@ import {Card} from 'coral-ui';
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.banned-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.banned-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
-      <TagsInput
-        value={bannedWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('banned', tags)}
-      />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={bannedWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('banned', tags)}
+        />
+      </div>
     </Card>
     <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.suspect-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.suspect-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
-      <TagsInput
-        value={suspectWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('suspect', tags)} />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={suspectWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('suspect', tags)} />
+      </div>
     </Card>
   </div>
 );

client/coral-admin/src/translations.json

@@ -53,6 +53,7 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "closed-stream-settings": "Closed Stream Message",
       "stream-settings": "Stream Settings",
       "moderation-settings": "Moderation Settings",
       "tech-settings": "Tech Settings",
@@ -63,7 +64,7 @@
       "enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
       "require-email-verification": "Require Email Verification",
       "require-email-verification-text": "New Users must verify their email before commenting",
-      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "include-comment-stream": "Include Comment Stream Description for Readers",
       "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
       "include-text": "Include your text here.",
       "enable-premod-links": "Pre-Moderate Comments Containing Links",
@@ -81,7 +82,7 @@
       "configure": "Configure",
       "community": "Community",
       "streams": "Streams",
-      "closed-comments-desc": "Write a message for closed threads",
+      "closed-comments-desc": "Write a message to be displayed when when your comment stream is closed and no longer accepting comments.",
       "closed-comments-label": "Write a message...",
       "hours": "Hours",
       "days": "Days",
@@ -89,7 +90,7 @@
       "close-after": "Close comments after",
       "comment-count-header": "Limit Comment 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.",
       "domain-list-title": "Permitted Domains",
       "domain-list-text": "Enter the domains you would like to permit for Talk, e.g. your local, staging and production environments (ex. localhost:3000, staging.domain.com, domain.com)."
@@ -180,6 +181,7 @@
       "username_flags": ""
     },
     "configure": {
+      "closed-stream-settings": "Mensaje cuando los comentarios están cerrados en el artículo",
       "stream-settings": "Configuración de Comentarios",
       "moderation-settings": "Configuración de Moderación",
       "tech-settings": "Configuración Technical",
@@ -208,7 +210,7 @@
       "configure": "Configurar",
       "community": "Comunidad",
       "streams": "Streams",
-      "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
+      "closed-comments-desc": "Escribe un mensaje que será mostrado cuando los comentarios estén cerrados y no se acepten más comentarios.",
       "closed-comments-label": "Escribe un mensaje...",
       "never": "Nunca",
       "hours": "Horas",

client/coral-embed-stream/style/default.css

@@ -80,6 +80,7 @@ hr {
   padding: 10px;
   margin-bottom: 10px;
   display: block;
+  box-sizing: border-box;
 }
 
 /* Question Box Styles */
@@ -220,7 +221,7 @@ hr {
 
 .comment__action-container .material-icons {
   font-size: 12px;
-  margin-left: 3px;  
+  margin-left: 3px;
 }
 
 button.comment__action-button,

client/coral-ui/components/TextArea.css

@@ -0,0 +1,15 @@
+.textArea {
+  textarea {
+    width: 100%;
+    display: block;
+    outline: none;
+    border: 1px solid rgba(0,0,0,.12);
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 5px auto;
+    min-height: 175px;
+    font-size: 14px;
+    resize: none;
+  }
+}

client/coral-ui/components/TextArea.js

@@ -0,0 +1,14 @@
+import React, {PropTypes} from 'react';
+import styles from './TextArea.css';
+
+const TextArea = ({className, value = '', ...props}) => (
+  <div className={`${styles.textArea} ${className ? className : ''}`}>
+    <textarea value={value} {...props}/>
+  </div>
+);
+
+TextArea.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default TextArea;

client/coral-ui/index.js

@@ -22,3 +22,4 @@ export {default as WizardNav} from './components/WizardNav';
 export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
+export {default as TextArea} from './components/TextArea';