Merge branch 'master' of github.com:coralproject/talk into featured-comments

This commit is contained in:
Belen Curcio
2017-07-13 12:04:04 -03:00
90 changed files with 1954 additions and 560 deletions
@@ -66,7 +66,7 @@ input.error{
}
.userBox {
padding: 10px 0 20px;
margin: 10px 0 20px;
letter-spacing: 0.1px;
}
@@ -45,8 +45,10 @@ class LikeButton extends React.Component {
className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span>{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}</span>
<Icon name="thumb_up" className={`${plugin}-icon`} />
<span className={cn(`${plugin}-label`, styles.label)}>
{t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')}
</span>
<Icon name="thumb_up" className={cn(`${plugin}-icon`, styles.icon)} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
</div>
@@ -23,3 +23,13 @@
}
}
}
.icon {
padding: 0 2px;
}
@media (max-width: 425px) {
.label {
display: none;
}
}
@@ -45,8 +45,10 @@ class LoveButton extends React.Component {
className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span>{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}</span>
<Icon name="favorite" className={`${plugin}-icon`} />
<span className={cn(`${plugin}-label`, styles.label)}>
{t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')}
</span>
<Icon name="favorite" className={cn(`${plugin}-icon`, styles.icon)} />
<span className={`${plugin}-count`}>{count > 0 && count}</span>
</button>
</div>
@@ -23,3 +23,13 @@
}
}
}
.icon {
padding: 0 2px;
}
@media (max-width: 425px) {
.label {
display: none;
}
}
@@ -45,11 +45,11 @@ class RespectButton extends React.Component {
className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)}
onClick={this.handleClick}
>
<span className={`${plugin}-button-text`}>
<span className={cn(`${plugin}-label`, styles.label)}>
{t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')}
</span>
<Icon className={cn(styles.icon, `${plugin}-icon`)} />
<span className={cn(styles.icon, `${plugin}-count`)}>{count > 0 && count}</span>
<span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
</button>
</div>
);
@@ -26,5 +26,11 @@
}
.icon {
padding: 0 5px;
padding: 0 2px;
}
@media (max-width: 425px) {
.label {
display: none;
}
}
@@ -1,20 +1,17 @@
.root {
float: right;
text-align: right;
position: relative;
display: inline-block;
min-width: 220px;
z-index: 10;
position: relative;
cursor: pointer;
}
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
}
.list {
background: white;
position: absolute;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
right: 3px;
right: 0px;
top: 20px;
z-index: 10;
}
.list > ul, .list > ul > li {
@@ -25,4 +22,5 @@
.list > ul > li {
padding: 10px;
list-style: none;
white-space: nowrap;
}
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import styles from './ViewingOptions.css';
import {Slot} from 'plugin-api/beta/client/components';
import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
import {Icon} from 'plugin-api/beta/client/components/ui';
const ViewingOptions = (props) => {
@@ -12,29 +12,38 @@ const ViewingOptions = (props) => {
props.closeViewingOptions();
}
};
const handleClickOutside = () => {
if (props.open) {
props.closeViewingOptions();
}
};
return (
<div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
<div>
<a onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
</a>
<ClickOutside onClickOutside={handleClickOutside}>
<div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
<div>
<button className={styles.button} onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
</button>
</div>
{
props.open ? (
<div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
<ul>
{
React.Children.map(<Slot fill="viewingOptions" />, (component) => {
return React.createElement('li', {
className: 'coral-plugin-viewing-options-item'
}, component);
})
}
</ul>
</div>
) : null
}
</div>
{
props.open ? (
<div className={cn([styles.list, 'coral-plugin-viewing-options-list'])}>
<ul>
{
React.Children.map(<Slot fill="viewingOptions" />, (component) => {
return React.createElement('li', {
className: 'coral-plugin-viewing-options-item'
}, component);
})
}
</ul>
</div>
) : null
}
</div>
</ClickOutside>
);
};
@@ -4,6 +4,6 @@ import reducer from './reducer';
export default {
reducer,
slots: {
streamBox: [ViewingOptions]
streamFilter: [ViewingOptions]
}
};
@@ -0,0 +1,14 @@
{
"presets": [
"es2015"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-async-to-generator",
"transform-react-jsx"
]
}
@@ -0,0 +1,23 @@
{
"env": {
"browser": true,
"es6": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
}
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-console": ["warn", { "allow": ["warn", "error"] }]
}
}
@@ -0,0 +1,9 @@
import React from 'react';
import {TabCount} from 'plugin-api/beta/client/components/ui';
// TODO: This is just example code, and needs to replaced by an actual implementation.
export default ({active, asset: {recentComments}}) => (
<span>
Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
</span>
);
@@ -0,0 +1,16 @@
import React from 'react';
// TODO: This is just example code, and needs to replaced by an actual implementation.
export default ({asset: {recentComments}}) => (
<div>
{recentComments.map((comment) => (
<div key={comment.id}>
<div><strong>{comment.user.username}</strong></div>
<div>
{comment.body}
</div>
<hr />
</div>
))}
</div>
);
@@ -0,0 +1,17 @@
import {compose, gql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import Tab from '../components/Tab';
// TODO: This is just example code, and needs to replaced by an actual implementation.
const enhance = compose(
withFragments({
asset: gql`
fragment TalkFeatured_Tab_asset on Asset {
recentComments {
id
}
}`,
}),
);
export default enhance(Tab);
@@ -0,0 +1,22 @@
import {compose, gql} from 'react-apollo';
import withFragments from 'coral-framework/hocs/withFragments';
import TabPane from '../components/TabPane';
// TODO: This is just example code, and needs to replaced by an actual implementation.
const enhance = compose(
withFragments({
asset: gql`
fragment TalkFeatured_TabPane_asset on Asset {
recentComments {
id
body
user {
id
username
}
}
}`,
}),
);
export default enhance(TabPane);
@@ -0,0 +1,9 @@
import Tab from './containers/Tab';
import TabPane from './containers/TabPane';
export default {
slots: {
streamTabs: [Tab],
streamTabPanes: [TabPane],
}
};
+2
View File
@@ -0,0 +1,2 @@
module.exports = {};
@@ -42,8 +42,8 @@
}
.button {
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 0px 5px 10px;
cursor: pointer;
}
.copyButton {