diff --git a/.dockerignore b/.dockerignore index f05b1f265..14b1fb97f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,2 +1,3 @@ node_modules test +.git diff --git a/.gitignore b/.gitignore index 777dcc7f9..29f5961b2 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,3 @@ dump.rdb *.cfg .idea/ coverage/ -yarn.lock diff --git a/Dockerfile b/Dockerfile index 6776e2f04..a01aae254 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,8 @@ FROM node:7 +# Install yarn +RUN npm install -g yarn + # Create app directory RUN mkdir -p /usr/src/app WORKDIR /usr/src/app @@ -12,9 +15,9 @@ EXPOSE 5000 # Install app dependencies COPY package.json /usr/src/app/ -RUN npm install --production +RUN yarn install --production # Bundle app source COPY . /usr/src/app -CMD [ "npm", "start" ] +CMD [ "yarn", "start" ] diff --git a/INSTALL.md b/INSTALL.md index faee7bb25..f5f82f294 100644 --- a/INSTALL.md +++ b/INSTALL.md @@ -27,7 +27,7 @@ Navigate to a directory. ``` git clone https://github.com/coralproject/talk cd talk -npm install +yarn install ``` ### Environmental Variables @@ -42,7 +42,7 @@ Talk uses environmental variables for configuration. You can learn about them in Starting the server: ``` -npm start +yarn start ``` Browse to `http://localhost:3000` (or your custom port.) @@ -54,13 +54,13 @@ Our build process will build all front end components registered [here](https:// One time build: ``` -npm build +yarn build ``` Build, then rebuild when a file is updated (development build): ``` -npm build-watch +yarn build-watch ``` @@ -69,13 +69,13 @@ npm build-watch Run all tests once: ` -npm test +yarn test ` Run our end to end tests (will install Selenium and nightwatch): ` -npm run e2e +yarn e2e ` _Please ensure all tests are passing before submitting a PR!_ diff --git a/circle.yml b/circle.yml index 99b7d852b..f9ac9ea41 100644 --- a/circle.yml +++ b/circle.yml @@ -4,11 +4,20 @@ machine: services: - docker - redis + environment: + PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin" + NODE_ENV: "test" dependencies: + override: + - yarn + cache_directories: + - ~/.cache/yarn post: + # Build the static assets + - yarn build # Lint the project here, before tests are ran. - - npm run lint + - yarn lint database: post: @@ -20,9 +29,9 @@ database: test: override: # Run the tests using the junit reporter. - - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml NPM_PACKAGE_CONFIG_MOCHA_REPORTER=mocha-junit-reporter npm run test + - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test # Run the e2e test suite - - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e npm run e2e + - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e deployment: release: diff --git a/client/coral-admin/README.md b/client/coral-admin/README.md index 067a3cac9..7bc9de36e 100644 --- a/client/coral-admin/README.md +++ b/client/coral-admin/README.md @@ -5,19 +5,19 @@ This app handles moderation for Talk (and maybe more later on) ## Installation - $ npm install + $ yarn install $ cp config.sample.json config.json Then change `config.json` to adjust it to your project ## Building for production - $ npm run build + $ yarn build The public folder has everything you need for deployment. You can just copy that folder to your favorite static web server ## Development - $ npm start + $ yarn start A development server will be running at http://localhost:4132 diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css index 8b1378917..09a94aa55 100644 --- a/client/coral-embed-stream/src/Comment.css +++ b/client/coral-embed-stream/src/Comment.css @@ -1 +1,3 @@ - +.Reply { + position: relative; +} diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js index 529420941..778614880 100644 --- a/client/coral-embed-stream/src/Comment.js +++ b/client/coral-embed-stream/src/Comment.js @@ -16,6 +16,8 @@ import {ReplyBox, ReplyButton} from 'coral-plugin-replies'; import FlagComment from 'coral-plugin-flags/FlagComment'; import LikeButton from 'coral-plugin-likes/LikeButton'; +import styles from './Comment.css'; + const getAction = (type, comment) => comment.actions.filter((a) => a.type === type)[0]; class Comment extends React.Component { @@ -87,7 +89,7 @@ class Comment extends React.Component { return (
@@ -103,11 +105,6 @@ class Comment extends React.Component {
- setActiveReplyBox(comment.id)} - parentCommentId={parentId || comment.id} - currentUserId={currentUser && currentUser.id} - banned={false} /> + setActiveReplyBox(comment.id)} + parentCommentId={parentId || comment.id} + currentUserId={currentUser && currentUser.id} + banned={false} />
+ -
{ activeReplyBox === comment.id diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index 43b4eecae..d31b716e9 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -3,7 +3,7 @@ import {compose} from 'react-apollo'; import {connect} from 'react-redux'; import isEqual from 'lodash/isEqual'; -import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui'; +import {TabBar, Tab, TabContent, Spinner} from 'coral-ui'; const {logout, showSignInDialog, requestConfirmEmail} = authActions; const {addNotification, clearNotification} = notificationActions; @@ -17,28 +17,25 @@ import Stream from './Stream'; import InfoBox from 'coral-plugin-infobox/InfoBox'; import Count from 'coral-plugin-comment-count/CommentCount'; import CommentBox from 'coral-plugin-commentbox/CommentBox'; -import UserBox from '../../coral-sign-in/components/UserBox'; -import SignInContainer from '../../coral-sign-in/containers/SignInContainer'; +import UserBox from 'coral-sign-in/components/UserBox'; +import SignInContainer from 'coral-sign-in/containers/SignInContainer'; +import SuspendedAccount from 'coral-framework/components/SuspendedAccount'; import ChangeDisplayNameContainer from '../../coral-sign-in/containers/ChangeDisplayNameContainer'; -import SuspendedAccount from '../../coral-framework/components/SuspendedAccount'; -import SettingsContainer from '../../coral-settings/containers/SettingsContainer'; -import RestrictedContent from '../../coral-framework/components/RestrictedContent'; -import ConfigureStreamContainer from '../../coral-configure/containers/ConfigureStreamContainer'; +import SettingsContainer from 'coral-settings/containers/SettingsContainer'; +import RestrictedContent from 'coral-framework/components/RestrictedContent'; +import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer'; class Embed extends Component { - constructor (props) { - super(props); + state = {activeTab: 0, showSignInDialog: false}; - this.state = { - activeTab: 0, - showSignInDialog: false - }; + changeTab = (tab) => { - this.changeTab = this.changeTab.bind(this); - } + // Everytime the comes from another tab, the Stream needs to be updated. + if (tab === 0) { + this.props.data.refetch(); + } - changeTab (tab) { this.setState({ activeTab: tab }); @@ -70,7 +67,6 @@ class Embed extends Component { } }, 100); }); - } componentWillReceiveProps (nextProps) { @@ -92,87 +88,90 @@ class Embed extends Component { minHeight: document.body.scrollHeight + 200 } : {}; - return
- { - loading ? - :
+ if (loading) { + return ; + } + + return ( +
+
Settings Configure Stream - {loggedIn && user && } - - { - openStream - ?
- - }> - { - user - ? - : null - } - -
- :

{asset.settings.closedMessage}

- } - {!loggedIn && } - {loggedIn && user && } - - - - - - - - - - - - -
- } -
; + {loggedIn && } + + { + openStream + ?
+ + }> + { + user + ? + : null + } + +
+ :

{asset.settings.closedMessage}

+ } + {!loggedIn && } + {loggedIn && user && } + + + + + + + + + + + + +
+
+ ); } } @@ -186,7 +185,13 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ requestConfirmEmail: () => dispatch(requestConfirmEmail()), loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)), - addNotification: (type, text) => dispatch(addNotification(type, text)), + addNotification: (type, text) => { + pym.sendMessage('getPosition'); + + pym.onMessage('position', position => { + dispatch(addNotification(type, text, position)); + }); + }, clearNotification: () => dispatch(clearNotification()), showSignInDialog: (offset) => dispatch(showSignInDialog(offset)), logout: () => dispatch(logout()), diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 28b2066e6..2d7f478c1 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -1,3 +1,8 @@ +html, body { + width:auto; + height:auto; +} + body { font-family: 'Lato', sans-serif; font-family: 'Open Sans', sans-serif; @@ -46,7 +51,6 @@ hr { /* Notification styles */ #coral-notif { position: fixed; - bottom: 0; border: 0; background: rgb(105,105,105); color: white; @@ -76,6 +80,8 @@ hr { .commentStream { /* prevent absolutely positioned final permalink popover from being clipped */ padding-bottom: 50px; + min-height: 600px; + position: relative; } /* Comment Box Styles */ @@ -219,8 +225,8 @@ hr { .coral-plugin-flags-popup span { min-width: 280px; bottom: 36px; - left: -190px; position: absolute; + right: 10px; } .coral-plugin-flags-popup-form { diff --git a/client/coral-framework/actions/notification.js b/client/coral-framework/actions/notification.js index 4edc17601..f0ac4d951 100644 --- a/client/coral-framework/actions/notification.js +++ b/client/coral-framework/actions/notification.js @@ -1,11 +1,12 @@ export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'; export const CLEAR_NOTIFICATION = 'CLEAR_NOTIFICATION'; -export const addNotification = (notifType, text) => { +export const addNotification = (notifType, text, position) => { return { type: ADD_NOTIFICATION, notifType, - text + text, + position }; }; diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js index 2a5e1d693..709403976 100644 --- a/client/coral-framework/modules/notification/Notification.js +++ b/client/coral-framework/modules/notification/Notification.js @@ -1,4 +1,5 @@ import React from 'react'; +import {SnackBar} from 'coral-ui'; const Notification = (props) => { if (props.notification.text) { @@ -6,14 +7,16 @@ const Notification = (props) => { props.clearNotification(); }, props.notifLength); } - return
- { - props.notification.text && - - {props.notification.text} - - } -
; + return ( +
+ { + props.notification.text && + + {props.notification.text} + + } +
+ ); }; export default Notification; diff --git a/client/coral-framework/reducers/notification.js b/client/coral-framework/reducers/notification.js index ea8b4889d..fbc58230f 100644 --- a/client/coral-framework/reducers/notification.js +++ b/client/coral-framework/reducers/notification.js @@ -1,14 +1,21 @@ -/* Items Notifications */ - import * as actions from '../actions/notification'; -import {fromJS} from 'immutable'; +import {Map} from 'immutable'; -const initialState = fromJS({}); +const initialState = Map({ + text: '', + type: '', + position: 400 +}); export default (state = initialState, action) => { switch (action.type) { case actions.ADD_NOTIFICATION: - return state.set('text', action.text).set('type', action.notifType); + return state + .merge({ + type: action.notifType, + text: action.text, + position: action.position + }); case actions.CLEAR_NOTIFICATION: return initialState; default: diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js index fcf464403..624750c60 100644 --- a/client/coral-plugin-author-name/AuthorName.js +++ b/client/coral-plugin-author-name/AuthorName.js @@ -1,51 +1,47 @@ import React, {Component} from 'react'; import {Tooltip} from 'coral-ui'; -import FlagBio from '../coral-plugin-flags/FlagBio'; +import FlagBio from 'coral-plugin-flags/FlagBio'; const packagename = 'coral-plugin-author-name'; +import styles from './styles.css'; export default class AuthorName extends Component { - constructor (props) { - super(props); - this.state = { - showTooltip: false - }; + state = {showTooltip: false} - this.handleMouseOver = this.handleMouseOver.bind(this); - this.handleMouseLeave = this.handleMouseLeave.bind(this); + handleClick = () => { + this.setState(state => ({ + showTooltip: !state.showTooltip + })); } - handleMouseOver () { - this.setState({ - showTooltip: true - }); - } - - handleMouseLeave () { - this.setState({ - showTooltip: false - }); + handleMouseLeave = () => { + setTimeout(() => { + this.setState({ + showTooltip: false + }); + }, 500); } render () { const {author} = this.props; const {showTooltip} = this.state; return ( -
- {author && author.name} - { showTooltip && author.settings.bio && +
+ + {author && author.name} + {author.settings.bio ? : null} + + {showTooltip && author.settings.bio + && ( +
{author.settings.bio}
- - } + + )}
); } diff --git a/client/coral-plugin-author-name/styles.css b/client/coral-plugin-author-name/styles.css new file mode 100644 index 000000000..55c00b282 --- /dev/null +++ b/client/coral-plugin-author-name/styles.css @@ -0,0 +1,34 @@ +.authorName { + color: black; + display: inline-block; + margin: 10px 0; +} + +.hasBio { + &:hover { + cursor: pointer; + } +} + +.arrowDown { + top: 0; + width: 0; + height: 0; + margin-top: -2px; + margin-left: 2px; + display: inline-block; + vertical-align: middle; + border-bottom: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 3px solid #000000; +} + +.arrowUp { + width: 0; + height: 0; + border-top: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-bottom: 3px solid black; +} diff --git a/client/coral-plugin-flags/FlagComment.js b/client/coral-plugin-flags/FlagComment.js index 5ea2e9fa1..bf3fca286 100644 --- a/client/coral-plugin-flags/FlagComment.js +++ b/client/coral-plugin-flags/FlagComment.js @@ -10,8 +10,8 @@ const getPopupMenu = [ return { header: lang.t('step-1-header'), options: [ - {val: 'USERS', text: lang.t('flag-username')}, - {val: 'COMMENTS', text: lang.t('flag-comment')} + {val: 'COMMENTS', text: lang.t('flag-comment')}, + {val: 'USERS', text: lang.t('flag-username')} ], button: lang.t('continue'), sets: 'itemType' diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js index 782e709d7..1a99a5627 100644 --- a/client/coral-plugin-permalinks/PermalinkButton.js +++ b/client/coral-plugin-permalinks/PermalinkButton.js @@ -3,6 +3,8 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from './translations'; import onClickOutside from 'react-onclickoutside'; const name = 'coral-plugin-permalinks'; +import {Button} from 'coral-ui'; +import styles from './styles.css'; const lang = new I18n(translations); @@ -32,40 +34,37 @@ class PermalinkButton extends React.Component { this.permalinkInput.select(); try { document.execCommand('copy'); - this.setState({copySuccessful: true}); + this.setState({copySuccessful: true, copyFailure: null}); } catch (err) { - this.setState({copyFailure: true}); + this.setState({copyFailure: true, copySuccessful: null}); } setTimeout(() => { this.setState({copyFailure: null, copySuccessful: null}); - }, 4500); + }, 3000); } render () { + const {copySuccessful, copyFailure} = this.state; return (
-
+
this.permalinkInput = input} value={`${this.props.articleURL}#${this.props.commentId}`} onChange={() => {}} /> - - { - this.state.copySuccessful ?

copied to clipboard

: null - } - { - this.state.copyFailure - ?

copying to clipboard not supported in this browser. Use Cmd + C.

- : null - } +
); diff --git a/client/coral-plugin-permalinks/styles.css b/client/coral-plugin-permalinks/styles.css new file mode 100644 index 000000000..863099122 --- /dev/null +++ b/client/coral-plugin-permalinks/styles.css @@ -0,0 +1,74 @@ +.container { + border-radius: 3px; + padding: 15px 10px; + box-sizing: border-box; + /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */ + border: solid 1px rgba(153, 153, 153, 0.33); + width: auto; + margin: 0 auto; + left: 0; + margin: 0 5px; + top: 0; + left: 0; + width: 100%; + margin: 0; + margin-top: -13px; + + &::before { + content: ''; + border: 10px solid transparent; + border-top-color: white; + position: absolute; + right: 8.69em; + bottom: -20px; + z-index: 2; + } + + &::after{ + content: ''; + border: 10px solid transparent; + border-top-color: rgba(153, 153, 153, 0.33); + position: absolute; + right: 8.69em; + bottom: -21px; + z-index: 1; + } + + input { + display: inline-block; + width: calc(100% - 78px); + padding: 8px; + border-radius: 3px; + border: solid 1px #e0e0e0; + height: 32px; + box-sizing: border-box; + font-size: 1em; + } + + button { + display: inline-block; + float: right; + box-sizing: border-box; + margin: 0; + background-color: #e0e0e0; + font-size: 1em; + width: auto; + height: auto; + padding: 2px; + transition: background-color 0.4s ease; + + &:hover{ + color: black; + } + + &.success { + background-color: #00897B; + color: white; + } + + &.failure { + background-color: #FF5252; + color: white; + } + } +} diff --git a/client/coral-plugin-permalinks/translations.json b/client/coral-plugin-permalinks/translations.json index af5c19b0a..9e1523af8 100644 --- a/client/coral-plugin-permalinks/translations.json +++ b/client/coral-plugin-permalinks/translations.json @@ -1,12 +1,12 @@ { "en": { "permalink": { - "permalink": "Permalink" + "permalink": "Link" } }, "es": { "permalink": { - "permalink": "Enlace permanente" + "permalink": "Enlace" } } } diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js index e99c0f88c..5b95095d2 100644 --- a/client/coral-sign-in/components/UserBox.js +++ b/client/coral-sign-in/components/UserBox.js @@ -4,14 +4,11 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; const lang = new I18n(translations); -const UserBox = ({className, user, logout, ...props}) => ( -
+const UserBox = ({className, user, logout, changeTab}) => ( +
{lang.t('signIn.loggedInAs')} - {user.displayName}. {lang.t('signIn.notYou')} - {lang.t('signIn.logout')} + changeTab(1)}>{user.displayName}. {lang.t('signIn.notYou')} + {lang.t('signIn.logout')}
); diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 08146f73f..60a252a20 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -93,7 +93,10 @@ input.error{ margin: 0px; margin-left: 4px; padding-bottom: 2px; - border-bottom: solid 1px black; +} + +.userBox .logout { + border-bottom: solid 1px black; } .attention { diff --git a/client/coral-ui/components/Checkbox.js b/client/coral-ui/components/Checkbox.js index 9b88d83ad..f80666c65 100644 --- a/client/coral-ui/components/Checkbox.js +++ b/client/coral-ui/components/Checkbox.js @@ -1,9 +1,9 @@ import React from 'react'; import styles from './Checkbox.css'; -export default ({name, cStyle = 'base', onChange, label, className, info, ...props}) => ( +export default ({name, cStyle = 'base', onChange, label, className, info, ...attrs}) => (