diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css index d397185dc..143577cf6 100644 --- a/client/coral-embed-stream/src/components/Comment.css +++ b/client/coral-embed-stream/src/components/Comment.css @@ -157,3 +157,8 @@ .enter { animation: enter 1000ms; } + +.timerIcon { + vertical-align: middle; + font-size: 14px; +} diff --git a/client/coral-embed-stream/src/components/EditableCommentContent.js b/client/coral-embed-stream/src/components/EditableCommentContent.js index 06d8e6b9d..98be14d13 100644 --- a/client/coral-embed-stream/src/components/EditableCommentContent.js +++ b/client/coral-embed-stream/src/components/EditableCommentContent.js @@ -145,7 +145,7 @@ export class EditableCommentContent extends React.Component { } : - {t('edit_comment.edit_window_timer_prefix')} + {t('edit_comment.edit_window_timer_prefix')} (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' } diff --git a/client/coral-embed-stream/src/components/Stream.css b/client/coral-embed-stream/src/components/Stream.css index 06f1efd1f..8c5a4250b 100644 --- a/client/coral-embed-stream/src/components/Stream.css +++ b/client/coral-embed-stream/src/components/Stream.css @@ -22,5 +22,8 @@ } .tabContainer { + position: relative; margin-top: 28px; + padding-bottom: 50px; + min-height: 600px; } diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 887b780ce..90a6250a3 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -21,18 +21,6 @@ body { padding: 4px; } -.talk-stream-tab-container { - padding-bottom: 50px; - min-height: 600px; -} - -.talk-stream-tab-container .material-icons { - vertical-align: middle; - width: 1em; - font-size: 1em; - overflow: hidden; -} - .expandForSignin { min-height: 600px; } @@ -283,11 +271,6 @@ body { float: left; } -.comment__action-container .material-icons { - font-size: 12px; - margin-left: 3px; -} - button.comment__action-button, .comment__action-button button { cursor: pointer; diff --git a/client/coral-plugin-best/BestButton.css b/client/coral-plugin-best/BestButton.css deleted file mode 100644 index b1f169ff6..000000000 --- a/client/coral-plugin-best/BestButton.css +++ /dev/null @@ -1,4 +0,0 @@ -.button { - composes: buttonReset from "coral-framework/styles/reset.css"; - margin: 5px 10px 5px 0px; -} diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 6e17b119f..084e67fc4 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -67,7 +67,7 @@ class CommentBox extends React.Component { postComment(comment, 'comments') .then(({data}) => { - this.setState({loadingState: 'success'}); + this.setState({loadingState: 'success', body: ''}); const postedComment = data.createComment.comment; // Execute postSubmit Hooks @@ -78,8 +78,6 @@ class CommentBox extends React.Component { if (commentPostedHandler) { commentPostedHandler(); } - - this.setState({body: ''}); }) .catch((err) => { this.setState({loadingState: 'error'}); diff --git a/client/coral-plugin-flags/components/FlagButton.js b/client/coral-plugin-flags/components/FlagButton.js index 33499e83d..51b88391e 100644 --- a/client/coral-plugin-flags/components/FlagButton.js +++ b/client/coral-plugin-flags/components/FlagButton.js @@ -155,7 +155,7 @@ export default class FlagButton extends Component { : {t('report')} } {
  • - {t('view_conversation')} + {t('view_conversation')}
  • - + { {t('reply')} - reply ); diff --git a/client/coral-ui/components/Icon.css b/client/coral-ui/components/Icon.css new file mode 100644 index 000000000..16fe6d235 --- /dev/null +++ b/client/coral-ui/components/Icon.css @@ -0,0 +1,3 @@ + +.root { +} diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js index b7c49a799..025b6df9e 100644 --- a/client/coral-ui/components/Icon.js +++ b/client/coral-ui/components/Icon.js @@ -1,8 +1,10 @@ import React, {PropTypes} from 'react'; import {Icon as IconMDL} from 'react-mdl'; +import cn from 'classnames'; +import styles from './Icon.css'; const Icon = ({className = '', name}) => ( - + ); Icon.propTypes = { diff --git a/docs/_data/sidebars/talk_sidebar.yml b/docs/_data/sidebars/talk_sidebar.yml index 62660783c..282defcb5 100644 --- a/docs/_data/sidebars/talk_sidebar.yml +++ b/docs/_data/sidebars/talk_sidebar.yml @@ -46,11 +46,13 @@ entries: - title: Tags url: /architecture-tags.html output: web + - title: Metadata API + url: /architecture-metadata.html + output: web - title: cli url: /architecture-cli.html output: web - - title: Plugins output: web folderitems: diff --git a/docs/architecture-metadata.md b/docs/architecture-metadata.md new file mode 100644 index 000000000..089127343 --- /dev/null +++ b/docs/architecture-metadata.md @@ -0,0 +1,92 @@ +--- +title: Metadata +keywords: architecture +sidebar: talk_sidebar +permalink: architecture-metadata.html +summary: +--- + +_Metadata_ allows you to add fields to models that are not represented in the core schema. + +## Goals + +The metadata api is designed to satisfy two product goals: + +* Give developers flexibility in extending datatypes. +* Protect core fields that are essential to Talk's operation. + +## Design + +Metadata is represented by an [subdocument in our Schemas](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/models/comment.js#L74). This takes advantage of Mongo's flexibility allowing for any data to be stored therein. + +### Setting Metadata + +Talk provides [a service layer](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js) allowing developers to `set` and `unset` metadata on objects in a way similar to key-value stores. + +Let's say that I want to add a custom field called `potency` to a comment. + +``` +const MetadataService = require('services/metadata'); +const CommentModel = require('models/comment'); + +// Sets the property `potency` on the comment with `id=1`. +MetadataService.set(CommentModel, '1', 'potency', 42); +``` + +Note that the model passed here is the Model itself and not an individual comment object. This allows us to update the value on that document [in an atomic manner](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js#L60) for efficiency and to prevent race conditions. + +### Accessing Metadata + +The metadata api does not contain a `get` method. The metadata object is retrieved via database queries along with the rest of the data. + +## Metadata and the Graph + +One of the first principles of GraphQL is that the shape of the graph does not need to be the same as the shape of the data in the database. In fact, it probably shouldn't be. + +This enables us to treat metadata fields in any way that makes sense as we design our Graph. The fact that a value is stored in the metadata object is an implementation detail invisible to the front end. + +Take for example, the `reason` field in the `FlagAction` type. This stores the user provided reason why they flagged a comment. As far as the front end knows, it's [just another field](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/graph/typeDefs.graphql#L453) alongside the core fields: + +``` +# graph/typeDefs.graphql +type FlagAction implements Action { + + ... + + # The reason for which the Flag Action was created. + reason: String + + ... +} +``` + +If, however, we [look at the resolver](https://github.com/coralproject/talk/blob/a47e2378e96f34f25447782f3e7ce59fa48ec791/graph/resolvers/dont_agree_action.js) for that field, we see that `reason` is [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) from the metadata object and returned. + +``` +// graph/resolvers/dont_agree_action.js +const DontAgreeAction = { + + // Stored in the metadata, extract and return. + reason({metadata: {reason}}) { + return reason; + } +}; + +module.exports = DontAgreeAction; +``` + +This is an extremely powerful pattern as it allows us absolute freedom in designing our graph and complete isolation of the added fields in the database. + +## Some things to keep in mind + +### Namespace your metadata fields + +Since metadata can be added by the core and multiple plugins, collisions may occur. As you create your plugins, please be careful to pick unique names for metadata fields. We recommend namespacing all your fields in a subdocument named after your plugin. + +``` +[model].metadata.[your_plugin_name].[the_field] +``` + +### Querying by metadata fields + +We currently do not have a clean way to index metadata fields. As a result queries that match against metadata fields will not scale. If you have a need to match, sort, etc... by a metadata field, [please let us know](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md#writing-code). diff --git a/docs/architecture.md b/docs/architecture.md index 180e172ac..d914bcf03 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -17,7 +17,7 @@ Talk consists of four distinct layers of code: ### Plugins -Talk plugins deliver the features and functionality that can be changed or removed. Much of the default functionality is delivered by plugins allowing developers to change behavior along product lines that we've found to be important. +Talk plugins deliver the features and functionality that can be changed or removed. Much of the default functionality is delivered by core plugins allowing developers to have control over any non-essential functionality. ### Plugin API diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js index 6d0ed920c..f23b39492 100644 --- a/plugin-api/beta/client/hocs/withTags.js +++ b/plugin-api/beta/client/hocs/withTags.js @@ -115,7 +115,7 @@ export default (tag) => (WrappedComponent) => { class WithTags extends React.Component { - postTag() { + postTag = () => { const {comment, asset} = this.props; this.props.addTag({ @@ -125,7 +125,7 @@ export default (tag) => (WrappedComponent) => { }); } - deleteTag() { + deleteTag = () => { const {comment, asset} = this.props; this.props.removeTag({ diff --git a/plugins/coral-plugin-like/client/styles.css b/plugins/coral-plugin-like/client/styles.css index 9ce0d5271..859581bd4 100644 --- a/plugins/coral-plugin-like/client/styles.css +++ b/plugins/coral-plugin-like/client/styles.css @@ -25,7 +25,9 @@ } .icon { - padding: 0 2px; + font-size: 12px; + padding: 0 2px 0 5px; + vertical-align: middle; } @media (max-width: 425px) { diff --git a/plugins/coral-plugin-love/client/styles.css b/plugins/coral-plugin-love/client/styles.css index d7753a0e9..9d1bec487 100644 --- a/plugins/coral-plugin-love/client/styles.css +++ b/plugins/coral-plugin-love/client/styles.css @@ -25,7 +25,9 @@ } .icon { - padding: 0 2px; + font-size: 12px; + padding: 0 2px 0 5px; + vertical-align: middle; } @media (max-width: 425px) { diff --git a/plugins/coral-plugin-respect/client/styles.css b/plugins/coral-plugin-respect/client/styles.css index 3ab0fbd29..362e02b8f 100644 --- a/plugins/coral-plugin-respect/client/styles.css +++ b/plugins/coral-plugin-respect/client/styles.css @@ -26,7 +26,8 @@ } .icon { - padding: 0 2px; + font-size: 12px; + padding: 0 3px; } @media (max-width: 425px) { diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css index 9c302d07e..81d373b95 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css @@ -24,3 +24,8 @@ list-style: none; white-space: nowrap; } + +.icon { + font-size: 14px; + vertical-align: middle; +} diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js index b64123fdb..87680b370 100644 --- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js +++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js @@ -24,7 +24,7 @@ const ViewingOptions = (props) => {
    { diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js deleted file mode 100644 index cd8c360dd..000000000 --- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import styles from './styles.css'; -import FeaturedComment from './FeaturedComment'; - -const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; - -class FeaturedComments extends React.Component { - render() { - - const {view : comments} = this.props; - - const featuredComments = comments.reduce((acc, curr) => { - if (isFeatured(curr.tags)) { - acc.push(curr); - } - - return acc; - }, []); - - return ( -
    - { - featuredComments.map((comment, i) => - - ) - } -
    - ); - } -} - -export default FeaturedComments; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js index af11368b9..0b8c4b1d9 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js @@ -2,8 +2,8 @@ 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}}) => ( +export default ({active, asset: {featuredCommentCount}}) => ( - Featured {recentComments.length} + Featured {featuredCommentCount} ); diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js index 107c806b4..a6cb53e09 100644 --- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js @@ -1,16 +1,8 @@ import React from 'react'; +import FeaturedComment from './FeaturedComment'; -// TODO: This is just example code, and needs to replaced by an actual implementation. -export default ({asset: {recentComments}}) => ( +export default ({asset: {featuredComments}}) => (
    - {recentComments.map((comment) => ( -
    -
    {comment.user.username}
    -
    - {comment.body} -
    -
    -
    - ))} + {featuredComments.nodes.map((comment) => )}
    ); diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index 9a2943163..502807623 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -1,4 +1,18 @@ +.tagIcon { + font-size: 12px; + vertical-align: middle; +} + +.icon { + font-size: 12px; + vertical-align: middle; +} + + + + .button { + composes: buttonReset from "coral-framework/styles/reset.css"; color: #2a2a2a; margin: 5px 10px 5px 0px; background: none; diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js index 0bcb49e13..7da3cc7a9 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js +++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js @@ -2,14 +2,11 @@ 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 - } + featuredCommentCount: commentCount(tags: ["FEATURED"]) }`, }), ); diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js index 19c4d855d..313b5bbec 100644 --- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js +++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js @@ -2,19 +2,20 @@ 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 + featuredComments: comments(tags: ["FEATURED"]) { + nodes { + id + body + created_at + user { + id + } + } } - } }`, }), ); diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 9ca3cc1eb..642cc6d31 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,15 +1,15 @@ -import translations from './translations.json'; -import FeaturedTag from './components/FeaturedTag'; -import FeaturedButton from './components/FeaturedButton'; import Tab from './containers/Tab'; import TabPane from './containers/TabPane'; +import FeaturedTag from './components/FeaturedTag'; +import FeaturedButton from './components/FeaturedButton'; +import translations from './translations.json'; export default { translations, slots: { - commentInfoBar: [FeaturedTag], - commentReactions: [FeaturedButton], streamTabs: [Tab], - streamTabPanes: [TabPane] + streamTabPanes: [TabPane], + commentInfoBar: [FeaturedTag], + commentReactions: [FeaturedButton] } }; diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js index 55b98e5d8..cca8718b5 100644 --- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js +++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js @@ -72,7 +72,7 @@ export default class PermalinkButton extends React.Component { onClick={this.toggle} className={cn(`${name}-button`, styles.button)}> {t('permalink')} - +