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