diff --git a/client/coral-framework/styles/reset.css b/client/coral-framework/styles/reset.css
index 14ae4e723..8cfd14c41 100644
--- a/client/coral-framework/styles/reset.css
+++ b/client/coral-framework/styles/reset.css
@@ -7,7 +7,6 @@
touch-action: manipulation;
padding: 0;
- position: relative;
overflow: hidden;
/* Unify anchor and button. */
@@ -18,7 +17,7 @@
text-decoration: none;
align-items: flex-start;
vertical-align: middle;
- whiteSpace: nowrap;
+ white-space: nowrap;
background: transparent;
font-size: inherit;
diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
new file mode 100644
index 000000000..653b8f565
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -0,0 +1,9 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+export const showTooltip = () => ({
+ type: SHOW_TOOLTIP
+});
+
+export const hideTooltip = () => ({
+ type: HIDE_TOOLTIP
+});
diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css
index 11e35d40b..daaa329c9 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Button.css
+++ b/plugins/talk-plugin-featured-comments/client/components/Button.css
@@ -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 {
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
new file mode 100644
index 000000000..4fe40905b
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
@@ -0,0 +1,10 @@
+.infoIcon {
+ color: #616161;
+ vertical-align: middle;
+ font-size: 16px;
+ margin-left: 5px;
+}
+
+ .infoIcon.on {
+ color: #1d5294;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
new file mode 100644
index 000000000..47560fd74
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -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}) => (
+
+);
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index c780887c6..6ac5682d0 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -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}}) => (
-
- {t('talk-plugin-featured-comments.featured')} {featuredCommentsCount}
-
-);
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => {
+ return (
+
+ {t('talk-plugin-featured-comments.featured')}
+ {featuredCommentsCount}
+
+ {tooltip && }
+
+ );
+};
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.css b/plugins/talk-plugin-featured-comments/client/components/Tooltip.css
new file mode 100644
index 000000000..98eb50b46
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.css
@@ -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;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
new file mode 100644
index 000000000..c57336d05
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Tooltip.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default () => (
+
+
+
+ {t('talk-plugin-featured-comments.featured_comments')}:
+
+
+ {t('talk-plugin-featured-comments.tooltip_description')}
+
+
+);
diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js
new file mode 100644
index 000000000..7aad99014
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/constants.js
@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'SHOW_TOOLTIP';
+export const HIDE_TOOLTIP = 'HIDE_TOOLTIP';
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
index 5d92387d6..f28a63566 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
@@ -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 {
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index d804e2b55..8e4d18058 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -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],
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
new file mode 100644
index 000000000..2fd9b82e0
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/reducer.js
@@ -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;
+ }
+}
diff --git a/plugins/talk-plugin-featured-comments/client/translations.yml b/plugins/talk-plugin-featured-comments/client/translations.yml
index 7f6db9370..50e51d586 100644
--- a/plugins/talk-plugin-featured-comments/client/translations.yml
+++ b/plugins/talk-plugin-featured-comments/client/translations.yml
@@ -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
\ No newline at end of file