mirror of
https://github.com/wassname/talk.git
synced 2026-08-12 12:30:39 +08:00
Merge branch 'master' of github.com:coralproject/talk into featured-comments
This commit is contained in:
@@ -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],
|
||||
}
|
||||
};
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user