Merge branch 'master' into subscriptions

client/coral-admin/src/containers/Community/CommunityContainer.js

@@ -28,11 +28,12 @@ class CommunityContainer extends Component {
     super(props);
 
     this.state = {
-      searchValue: ''
+      searchValue: '',
+      timer: null
     };
 
     this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onChangeHandler = this.onChangeHandler.bind(this);
+    this.onSearchChange = this.onSearchChange.bind(this);
     this.onHeaderClickHandler = this.onHeaderClickHandler.bind(this);
     this.onNewPageHandler = this.onNewPageHandler.bind(this);
   }
@@ -48,9 +49,16 @@ class CommunityContainer extends Component {
     }
   }
 
-  onChangeHandler(e) {
-    this.setState({
-      searchValue: e.target.value
+  onSearchChange(e) {
+    const value = e.target.value;
+    this.setState((prevState) => {
+      prevState.searchValue = value;
+      clearTimeout(prevState.timer);
+      const fetchAccounts = this.props.fetchAccounts;
+      prevState.timer = setTimeout(() => {
+        fetchAccounts({value});
+      }, 350);
+      return prevState;
     });
   }
 
@@ -86,11 +94,11 @@ class CommunityContainer extends Component {
           isFetching={community.isFetchingPeople}
           commenters={community.accounts}
           searchValue={searchValue}
+          onSearchChange={this.onSearchChange}
           error={community.errorPeople}
           totalPages={community.totalPagesPeople}
           page={community.pagePeople}
           onKeyDown={this.onKeyDownHandler}
-          onChange={this.onChangeHandler}
           onHeaderClickHandler={this.onHeaderClickHandler}
           onNewPageHandler={this.onNewPageHandler}
         />

client/coral-admin/src/containers/Community/People.js

@@ -5,7 +5,7 @@ import translations from 'coral-admin/src/translations.json';
 import styles from './Community.css';
 import Table from './Table';
 import Loading from './Loading';
-import {Pager} from 'coral-ui';
+import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../components/EmptyCard';
 
 const lang = new I18n(translations);
@@ -29,28 +29,22 @@ const tableHeaders = [
   }
 ];
 
-const People = ({isFetching, commenters, ...props}) => {
+const People = ({isFetching, commenters, searchValue, onSearchChange, ...props}) => {
   const hasResults = !isFetching && !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
-        <form action="">
-          <div className={`${styles.searchBox}`}>
-            <label htmlFor="commenters-search">
-              <i className="material-icons">search</i>
-            </label>
-            <div className="">
-              <input
-                id="commenters-search"
-                className={`${styles.searchInput}`}
-                type="text"
-                value={props.searchValue}
-                onKeyDown={props.onKeyDownHandler}
-                onChange={props.onChangeHandler}
-              />
-            </div>
-          </div>
-        </form>
+        <div className={styles.searchBox}>
+          <Icon name='search' className={styles.searchIcon}/>
+          <input
+            id="commenters-search"
+            type="text"
+            className={styles.searchBoxInput}
+            value={searchValue}
+            onChange={onSearchChange}
+            placeholder={lang.t('streams.search')}
+          />
+        </div>
       </div>
       <div className={styles.mainContent}>
         { isFetching && <Loading /> }

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

@@ -80,8 +80,8 @@ hr {
 .coral-plugin-infobox-info {
   top: 0;
   border: 0;
-  background: rgb(35,118,216);
-  color: white;
+  background: #DEEDFF;
+  color: #2a2a2a;
   width: 100%;
   text-align: left;
   padding: 10px;
@@ -92,6 +92,24 @@ hr {
 }
 
 
+.coral-plugin-infobox-info em{
+  font-style: italic;
+}
+
+.coral-plugin-infobox-info strong{
+  font-weight: bold;
+}
+
+.coral-plugin-infobox-info blockquote{
+  border-left: solid 2px #2a2a2a;
+  padding-left: 10px;
+}
+
+
+.coral-plugin-infobox-info a{
+  color: #2a2a2a;
+}
+
 .commentStream .material-icons {
   vertical-align: middle;
   width: 1em;
@@ -111,15 +129,15 @@ hr {
   margin-bottom: 0px;
   font-weight: bold;
   font-size: 14px;
-  display: block;
   overflow: hidden;
-  height: 50px;
+  min-height: 50px;
+  display: flex;
 }
 
 .coral-plugin-questionbox-icon.bubble{
   position: absolute;
   top: 11px;
-  left: 15px;
+  left: 10px;
   color: #949393;
   font-size: 20px;
   z-index: 0;
@@ -128,7 +146,7 @@ hr {
 .coral-plugin-questionbox-icon.person{
   z-index: 2;
   top: 20px;
-  left: 20px;
+  left: 15px;
   position: absolute;
   font-size: 24px;
   color: white;
@@ -143,12 +161,19 @@ hr {
   margin-left: 0px !important;
   margin-right: 10px;
   display: inline-block;
-  width: 15px;
-  height: 100%;
-  padding: 3px 20px;
+  width: 10px;
+  min-height: 100%;
+  padding: 5px 20px;
   vertical-align: middle;
 }
 
+.coral-plugin-questionbox-content {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .hidden  {
   visibility: hidden;
   display: none;

client/coral-embed/src/index.js

@@ -2,6 +2,7 @@ import pym from 'pym.js';
 
 import {stringify} from 'querystring';
 
+// TODO: Styles should live in a separate file
 const snackbarStyles = {
   position: 'fixed',
   cursor: 'default',
@@ -20,7 +21,8 @@ const snackbarStyles = {
   opacity: 0,
   transform: 'translate(-50%, 20px)',
   bottom: 0,
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  fontFamily: 'Helvetica, \'Helvetica Neue\', Verdana, sans-serif'
 };
 
 // This function should return value of window.Coral

client/coral-framework/actions/notification.js

@@ -1,4 +1,4 @@
-import {pym} from '../../coral-framework';
+import pym from '../services/PymConnection';
 
 export const addNotification = (notifType, text) => {
   pym.sendMessage('coral-alert', `${notifType}|${text}`);

client/coral-plugin-questionbox/QuestionBox.js

@@ -7,7 +7,9 @@ const QuestionBox = ({enable, content}) =>
     <i className={`${packagename}-icon material-icons bubble`}>chat_bubble</i>
     <i className={`${packagename}-icon material-icons person`}>person</i>
   </div>
-  {content}
+  <div className={`${packagename}-content`}>
+    {content}
+  </div>
 </div>;
 
 export default QuestionBox;

client/coral-settings/containers/ProfileContainer.js

@@ -8,7 +8,6 @@ import {myCommentHistory} from 'coral-framework/graphql/queries';
 import {link} from 'coral-framework/services/PymConnection';
 import NotLoggedIn from '../components/NotLoggedIn';
 import {Spinner} from 'coral-ui';
-import ProfileHeader from '../components/ProfileHeader';
 import CommentHistory from 'coral-plugin-history/CommentHistory';
 
 import translations from '../translations';
@@ -44,7 +43,6 @@ class ProfileContainer extends Component {
 
     return (
       <div>
-        <ProfileHeader username={this.props.userData.username} />
         {
 
           // Hiding bio until moderation can get figured out

client/coral-sign-in/components/FakeComment.js

@@ -28,10 +28,10 @@ class FakeComment extends React.Component {
           author={{'name': username}}/>
         <PubDate created_at={created_at} />
         <Content body={body} />
-          <div className="commentActionsLeft">
+          <div className="commentActionsLeft comment__action-container">
               <div className={`${'coral-plugin-likes'}-container`}>
-                <button className={`${'coral-plugin-likes'}-button`}>
-                  <span className={`${'coral-plugin-likes'}-button-text`}>{lang.t('like')}</span>
+                <button className={'coral-plugin-likes-button'}>
+                  <span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
                   <i className={`${'coral-plugin-likes'}-icon material-icons`}
                     aria-hidden={true}>thumb_up</i>
                 </button>
@@ -43,16 +43,16 @@ class FakeComment extends React.Component {
                 banned={false}
               />
             </div>
-        <div className="commentActionsRight">
+        <div className="commentActionsRight comment__action-container">
           <div className="coral-plugin-permalinks-container">
             <button className="coral-plugin-permalinks-button">
+              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
               <i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
-              {lang.t('permalink.permalink')}
             </button>
           </div>
           <div className={`${'coral-plugin-flags'}-container`}>
             <button className={`${'coral-plugin-flags'}-button`}>
-              <span className={`${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
+              <span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
               <i className={`${'coral-plugin-flags'}-icon material-icons`}
                 aria-hidden={true}>flag</i>
             </button>

client/coral-sign-in/translations.json

@@ -25,14 +25,14 @@
       "emailInUse": "Email address already in use",
       "emailORusernameInUse": "Email address or Username already in use",
       "requiredField": "This field is required",
-      "passwordsDontMatch": "Passwords don\"t match.",
+      "passwordsDontMatch": "Passwords don't match.",
       "specialCharacters": "Usernames can contain letters, numbers and _ only",
       "checkTheForm": "Invalid Form. Please, check the fields"
     },
     "createdisplay": {
       "writeyourusername": "Edit your username",
       "yourusername": "Your username appears on every comment you post.",
-      "ifyoudontchangeyourname": "If you don\"t change your username at this step, your Facebook display name will appear alongside of all your comments.",
+      "ifyoudontchangeyourname": "If you don't change your username at this step, your Facebook display name will appear alongside of all your comments.",
       "username": "Username",
       "continue": "Continue with the same Facebook username",
       "save": "Save",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "talk",
-  "version": "1.4.0",
-  "description": "A commenting platform from The Coral Project. https://coralproject.net",
+  "version": "1.5.0",
+  "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "scripts": {
     "postinstall": "./bin/cli plugins reconcile --skip-remote",
@@ -17,7 +17,7 @@
     "e2e": "NODE_ENV=test nightwatch",
     "poste2e": "NODE_ENV=test scripts/poste2e.sh",
     "embed-start": "NODE_ENV=development yarn build && ./bin/cli serve --jobs",
-    "heroku-postbuild": "yarn build"
+    "heroku-postbuild": "./bin/cli plugins reconcile && yarn build"
   },
   "config": {
     "pre-git": {

plugins.js

@@ -47,8 +47,8 @@ const hookSchemas = {
     pre: Joi.func(),
     post: Joi.func()
   }))),
-  loaders: Joi.object().pattern(/\w/, Joi.object().pattern(/\w/, Joi.func())),
-  mutators: Joi.object().pattern(/\w/, Joi.object().pattern(/\w/, Joi.func())),
+  loaders: Joi.func().maxArity(1),
+  mutators: Joi.func().maxArity(1),
   resolvers: Joi.object().pattern(/\w/, Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.func())),
   typeDefs: Joi.string()
 };
@@ -124,7 +124,12 @@ function itteratePlugins(plugins) {
 // Add each plugin folder to the allowed import path so that they can import our
 // internal dependancies.
 Object.keys(plugins).forEach((type) => itteratePlugins(plugins[type]).forEach((plugin) => {
-  amp.enableForDir(path.dirname(plugin.path));
+
+  // The plugin may be remote, and therefore not installed. We check here if the
+  // plugin path is available before trying to monkeypatch it's require path.
+  if (plugin.path) {
+    amp.enableForDir(path.dirname(plugin.path));
+  }
 }));
 
 /**

services/email/suspension.html.ejs

@@ -0,0 +1 @@
+<%= body %>