Merge branch 'master' into renaming-talk

plugins/coral-plugin-viewing-options/client/translations.yml

@@ -0,0 +1,4 @@
+en:
+  viewing_options: "Viewing Options"
+es:
+  viewing_options: "Opciones de visualización"

plugins/talk-plugin-featured-comments/client/components/Tag.css

@@ -24,6 +24,15 @@
   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;

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -15,13 +15,15 @@ export default class Tag extends React.Component {
 
   }
 
-  showTooltip = () => {
+  showTooltip = e => {
+    e.preventDefault();
     this.setState({
       tooltip: true
     });
   }
 
-  hideTooltip = () => {
+  hideTooltip = (e) => {
+    e.preventDefault();
     this.setState({
       tooltip: false
     });
@@ -30,10 +32,13 @@ export default class Tag extends React.Component {
   render() {
     const {tooltip} = this.state;
     return(
-      <div onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} >
+      <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.on]: tooltip})}>
+              <span 
+                className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
                 {t('talk-plugin-featured-comments.featured')}
               </span>
             ) : null

plugins/talk-plugin-featured-comments/client/constants.js

@@ -1,2 +1,4 @@
-export const SHOW_TOOLTIP = 'SHOW_TOOLTIP';
-export const HIDE_TOOLTIP = 'HIDE_TOOLTIP';
+const prefix = 'TALK_FEATURED_COMMENTS';
+
+export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`;
+export const HIDE_TOOLTIP = `${prefix}_HIDE_TOOLTIP`;

plugins/talk-plugin-viewing-options/client/actions.js

@@ -1,9 +1,9 @@
-import {VIEWING_OPTIONS_OPEN, VIEWING_OPTIONS_CLOSE} from './constants';
+import {OPEN_MENU, CLOSE_MENU} from './constants';
 
-export const openViewingOptions = () => ({
-  type: VIEWING_OPTIONS_OPEN
+export const openMenu = () => ({
+  type: OPEN_MENU,
 });
 
-export const closeViewingOptions = () => ({
-  type: VIEWING_OPTIONS_CLOSE
+export const closeMenu = () => ({
+  type: CLOSE_MENU,
 });

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css

@@ -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;
+  }
+}
+
+
+

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js

@@ -1,21 +1,22 @@
 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 = () => {
     if (!props.open) {
-      props.openViewingOptions();
+      props.openMenu();
     } else {
-      props.closeViewingOptions();
+      props.closeMenu();
     }
   };
 
   const handleClickOutside = () => {
     if (props.open) {
-      props.closeViewingOptions();
+      props.closeMenu();
     }
   };
 
@@ -23,7 +24,9 @@ const ViewingOptions = (props) => {
     <ClickOutside onClickOutside={handleClickOutside}>
       <div className={cn([styles.root, 'talk-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>

plugins/talk-plugin-viewing-options/client/constants.js

@@ -1,2 +1,5 @@
-export const VIEWING_OPTIONS_OPEN = 'VIEWING_OPTIONS_OPEN';
-export const VIEWING_OPTIONS_CLOSE = 'VIEWING_OPTIONS_CLOSE';
+const prefix = 'TALK_VIEWING_OPTIONS';
+
+export const OPEN_MENU = `${prefix}_OPEN_MENU`;
+export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
+

plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js

@@ -1,13 +1,13 @@
 import {connect} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
 import ViewingOptions from '../components/ViewingOptions';
-import {openViewingOptions, closeViewingOptions} from '../actions';
+import {openMenu, closeMenu} from '../actions';
 
 const mapStateToProps = ({talkPluginViewingOptions: state}) => ({
   open: state.open
 });
 
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+  bindActionCreators({openMenu, closeMenu}, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);

plugins/talk-plugin-viewing-options/client/index.js

@@ -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
 };

plugins/talk-plugin-viewing-options/client/reducer.js

@@ -1,17 +1,17 @@
-import {VIEWING_OPTIONS_OPEN, VIEWING_OPTIONS_CLOSE} from './constants';
+import {OPEN_MENU, CLOSE_MENU} from './constants';
 
 const initialState = {
   open: false
 };
 
-export default function offTopic (state = initialState, action) {
+export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case VIEWING_OPTIONS_OPEN:
+  case OPEN_MENU:
     return {
       ...state,
       open: true
     };
-  case VIEWING_OPTIONS_CLOSE:
+  case CLOSE_MENU:
     return {
       ...state,
       open: false