Merge branch 'master' into feature/talk-plugin-toxic-comments

2026-08-17 11:27:52 +08:00 · 2017-07-26 11:39:31 -04:00
parent c67f92eb44 f22350c92e
commit 494d52ca36
79 changed files with 1249 additions and 745 deletions
@@ -5,6 +5,10 @@
  composes: buttonReset from "coral-framework/styles/reset.css";
 }

+.button:hover {
+  cursor: pointer;
+}
+
 .list {
  background: white;
  position: absolute;
@@ -29,3 +33,27 @@
  font-size: 14px;
  vertical-align: middle;
 }
+
+
+@custom-media --small-viewport (max-width: 425px);
+
+.filterText {
+  display: inline-block;
+}
+
+.filterIcon {
+  vertical-align: middle;
+  display: none;
+}
+
+@media (--small-viewport) {
+  .filterText {
+    display: none;
+  }
+  .filterIcon {
+    display: inline-block;
+  }
+}
+
+
+
@@ -1,8 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
+import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
+import {Slot, ClickOutside} from 'plugin-api/beta/client/components';

 const ViewingOptions = (props) => {
  const toggleOpen = () => {
@@ -23,7 +24,9 @@ const ViewingOptions = (props) => {
    <ClickOutside onClickOutside={handleClickOutside}>
      <div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
        <div>
-          <button className={styles.button} onClick={toggleOpen}>Viewing Options
+          <button className={styles.button} onClick={toggleOpen}>
+            <Icon className={styles.filterIcon} name="filter_list" />
+            <span className={styles.filterText}>{t('viewing_options')}</span> 
            {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
          </button>
        </div>
@@ -1,9 +1,11 @@
 import ViewingOptions from './containers/ViewingOptions';
 import reducer from './reducer';
+import translations from './translations.yml';

 export default {
  reducer,
  slots: {
    streamFilter: [ViewingOptions]
-  }
+  },
+  translations
 };
@@ -0,0 +1,4 @@
+en:
+  viewing_options: "Viewing Options"
+es:
+  viewing_options: "Opciones de visualización"
@@ -0,0 +1,9 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+export const showTooltip = () => ({
+  type: SHOW_TOOLTIP
+});
+
+export const hideTooltip = () => ({
+  type: HIDE_TOOLTIP
+});
@@ -3,12 +3,8 @@
  /* TODO: figure out the best location to include the `reset.css` */
  composes: buttonReset from "coral-framework/styles/reset.css";

-  color: #2a2a2a;
-  margin-right: 10px;
-}
-
-.button {
  color: #767676;
+  margin-right: 10px;
 }

 .button.featured {
@@ -0,0 +1,10 @@
+.infoIcon {
+  color: #616161;
+  vertical-align: middle;
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+ .infoIcon.on {
+  color: #1d5294;
+} 
@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './InfoIcon.css';
+import cn from 'classnames';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default ({tooltip}) => (
+  <Icon 
+    name="info_outline"
+    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
+  />
+);
@@ -1,9 +1,18 @@
 import React from 'react';
 import {TabCount} from 'plugin-api/beta/client/components/ui';
+import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
+import Tooltip from './Tooltip';

-export default ({active, asset: {featuredCommentsCount}}) => (
-  <span>
-    {t('talk-plugin-featured-comments.featured')} <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-  </span>
-);
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+  return (
+    <span 
+      onMouseEnter={props.showTooltip}
+      onMouseLeave={props.hideTooltip} >
+      {t('talk-plugin-featured-comments.featured')}
+      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <InfoIcon tooltip={tooltip} /> 
+      {tooltip && <Tooltip />} 
+    </span>
+  );
+};
@@ -17,4 +17,35 @@
  margin: 0px 5px;
  padding: 5px 5px;
  border-radius: 2px;
+}
+
+.tag.on {
+  background-color: #1862a7;
+  cursor: pointer;
+}
+
+.noSelect {
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.tooltip {
+  top: 36px;
+  left: auto;
+  right: 10px;
+}
+
+.tooltip::before{
+  left: auto;
+  right: 16px;
+}
+
+.tooltip::after{
+  left: auto;
+  right: 16px;
+  top: -20px;
 }
@@ -1,16 +1,50 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './Tag.css';
+import Tooltip from './Tooltip';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';

-export default (props) => (
-  <span>
-    {
-      isTagged(props.comment.tags, 'FEATURED') && props.depth === 0 ? (
-        <span className={styles.tag}>
-          {t('talk-plugin-featured-comments.featured')}
-        </span>
-      ) : null
-    }
-  </span>
-);
+export default class Tag extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      tooltip: false
+    };
+
+  }
+
+  showTooltip = e => {
+    e.preventDefault();
+    this.setState({
+      tooltip: true
+    });
+  }
+
+  hideTooltip = (e) => {
+    e.preventDefault();
+    this.setState({
+      tooltip: false
+    });
+  }
+
+  render() {
+    const {tooltip} = this.state;
+    return(
+      <div className={styles.noSelect} onMouseEnter={this.showTooltip}
+          onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
+          onTouchEnd={this.hideTooltip}>
+          {
+            isTagged(this.props.comment.tags, 'FEATURED') ? (
+              <span 
+                className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
+                {t('talk-plugin-featured-comments.featured')}
+              </span>
+            ) : null
+          }
+        {tooltip && <Tooltip className={styles.tooltip} />}
+      </div>
+    );
+  }
+}
@@ -0,0 +1,64 @@
+.tooltip {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 26px;
+  left: 50px;
+  width: 200px;
+  text-align: left;
+  color: #616161;
+}
+
+.tooltip::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 46px;
+  top: -21px;
+  transform: rotate(180deg);
+}
+
+.tooltip::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 46px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.headline {
+  color: #484747;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-size: 1.02em;
+  margin-left: 6px;
+  letter-spacing: 0.2px;
+  vertical-align: middle;
+  margin-bottom: 2px;
+  line-height: 22px;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}
+
+.description {
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+  padding-left: 25px;
+  font-weight: 400;
+  font-size: 1em;
+}
@@ -0,0 +1,17 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Tooltip.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default ({className = ''}) => (
+  <div className={cn(styles.tooltip, className)}>
+    <Icon name="info_outline" className={styles.icon} />
+    <h3 className={styles.headline}>
+      {t('talk-plugin-featured-comments.featured_comments')}:
+    </h3>
+    <p className={styles.description}>
+      {t('talk-plugin-featured-comments.tooltip_description')}
+    </p>
+  </div>
+);
@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'SHOW_TOOLTIP';
+export const HIDE_TOOLTIP = 'HIDE_TOOLTIP';
@@ -31,6 +31,7 @@ export default withFragments({
          name
        }
      }
+
      user {
        id
        username
@@ -1,8 +1,19 @@
-import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import Tab from '../components/Tab';
+import {bindActionCreators} from 'redux';
+import {showTooltip, hideTooltip} from '../actions';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showTooltip,
+    hideTooltip,
+  }, dispatch);

 const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
  withFragments({
    asset: gql`
      fragment TalkFeaturedComments_Tab_asset on Asset {
@@ -47,7 +47,7 @@ class TabPaneContainer extends React.Component {
 }

 const LOAD_MORE_QUERY = gql`
-  query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
+  query TalkFeaturedComments_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
    comments(query: {limit: $limit, cursor: $cursor, tags: ["FEATURED"], asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
      nodes {
        ...${getDefinitionName(Comment.fragments.comment)}
@@ -1,14 +1,16 @@
 import Tab from './containers/Tab';
-import TabPane from './containers/TabPane';
 import Tag from './components/Tag';
 import Button from './components/Button';
+import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
+import reducer from './reducer';

 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {insertCommentsSorted} from 'plugin-api/beta/client/utils';

 export default {
+  reducer,
  translations,
  slots: {
    streamTabs: [Tab],
@@ -0,0 +1,22 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+const initialState = {
+  tooltip: false
+};
+
+export default function featured (state = initialState, action) {
+  switch (action.type) {
+  case SHOW_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: true
+    };
+  case HIDE_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: false
+    };
+  default :
+    return state;
+  }
+}
@@ -1,8 +1,12 @@
 en:
  talk-plugin-featured-comments:
    featured: Featured
+    featured_comments: Featured Comments
    go_to_conversation: Go to conversation
+    tooltip_description: Comments selected by our team as worth reading
 es:
  talk-plugin-featured-comments:
    featured: Remarcado
+    featured_comments: Comentarios Remarcados
    go_to_conversation: Ir al comentario
+    tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos