diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index 312e90e..0a5a2d7 100644 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ b/app/lib/components/ToolArea/ToolArea.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import * as stateActions from '../../redux/stateActions'; +import * as toolTabActions from '../../redux/stateActions'; import ParticipantList from '../ParticipantList/ParticipantList'; import Chat from '../Chat/Chat'; import Settings from '../Settings'; @@ -16,7 +16,8 @@ class ToolArea extends React.Component render() { const { - toolarea, + currentToolTab, + unread, setToolTab } = this.props; @@ -31,9 +32,15 @@ class ToolArea extends React.Component { setToolTab('chat'); }} - checked={toolarea.currentToolTab === 'chat'} + checked={currentToolTab === 'chat'} /> - +
@@ -47,7 +54,7 @@ class ToolArea extends React.Component { setToolTab('users'); }} - checked={toolarea.currentToolTab === 'users'} + checked={currentToolTab === 'users'} /> @@ -63,7 +70,7 @@ class ToolArea extends React.Component { setToolTab('settings'); }} - checked={toolarea.currentToolTab === 'settings'} + checked={currentToolTab === 'settings'} /> @@ -78,26 +85,19 @@ class ToolArea extends React.Component ToolArea.propTypes = { - advancedMode : PropTypes.bool, - toolarea : PropTypes.object.isRequired, - setToolTab : PropTypes.func.isRequired + advancedMode : PropTypes.bool, + currentToolTab : PropTypes.string.isRequired, + setToolTab : PropTypes.func.isRequired, + unread : PropTypes.number.isRequired }; -const mapStateToProps = (state) => -{ - return { - toolarea : state.toolarea - }; -}; +const mapStateToProps = (state) => ({ + currentToolTab : state.toolarea.currentToolTab, + unread : state.toolarea.unread +}); -const mapDispatchToProps = (dispatch) => -{ - return { - setToolTab : (toolTab) => - { - dispatch(stateActions.setToolTab(toolTab)); - } - }; +const mapDispatchToProps = { + setToolTab : toolTabActions.setToolTab }; const ToolAreaContainer = connect( diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx index b158ba4..3133f9c 100644 --- a/app/lib/components/ToolArea/ToolAreaButton.jsx +++ b/app/lib/components/ToolArea/ToolAreaButton.jsx @@ -10,7 +10,8 @@ class ToolAreaButton extends React.Component { const { toolAreaOpen, - toggleToolArea + toggleToolArea, + unread } = this.props; return ( @@ -24,6 +25,12 @@ class ToolAreaButton extends React.Component data-for='globaltip' onClick={() => toggleToolArea()} /> + + {unread > 0 && ( + = 10 })}> + {unread} + + )}
); } @@ -32,13 +39,15 @@ class ToolAreaButton extends React.Component ToolAreaButton.propTypes = { toolAreaOpen : PropTypes.bool.isRequired, - toggleToolArea : PropTypes.func.isRequired + toggleToolArea : PropTypes.func.isRequired, + unread : PropTypes.bool.isRequired }; const mapStateToProps = (state) => { return { - toolAreaOpen : state.toolarea.toolAreaOpen + toolAreaOpen : state.toolarea.toolAreaOpen, + unread : state.toolarea.unread }; }; diff --git a/app/lib/redux/reducers/toolarea.js b/app/lib/redux/reducers/toolarea.js index 352a51e..04654cb 100644 --- a/app/lib/redux/reducers/toolarea.js +++ b/app/lib/redux/reducers/toolarea.js @@ -1,7 +1,8 @@ const initialState = { toolAreaOpen : false, - currentToolTab : 'chat' // chat, settings, users + currentToolTab : 'chat', // chat, settings, users + unread : 0 }; const toolarea = (state = initialState, action) => @@ -11,15 +12,27 @@ const toolarea = (state = initialState, action) => case 'TOGGLE_TOOL_AREA': { const toolAreaOpen = !state.toolAreaOpen; + const unread = toolAreaOpen && state.currentToolTab === 'chat' ? 0 : state.unread; - return { ...state, toolAreaOpen }; + return { ...state, toolAreaOpen, unread }; } case 'SET_TOOL_TAB': { const { toolTab } = action.payload; + const unread = toolTab === 'chat' ? 0 : state.unread; - return { ...state, currentToolTab: toolTab }; + return { ...state, currentToolTab: toolTab, unread }; + } + + case 'ADD_NEW_RESPONSE_MESSAGE': + { + if (state.toolAreaOpen && state.currentToolTab === 'chat') + { + return state; + } + + return { ...state, unread: state.unread + 1 }; } default: diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index d106d0b..a8de7c1 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -49,6 +49,25 @@ } } } + + > .badge { + border-radius: 50%; + font-size: 1rem; + background: #b12525; + color: #fff; + text-align: center; + margin-top: -8px; + line-height: 1rem; + margin-right: -8px; + position: absolute; + padding: 0.2rem 0.4rem; + top: 0; + right: 0; + + &.long { + border-radius: 25% / 50%; + } + } } [data-component='ToolArea'] { @@ -63,7 +82,7 @@ > label { order: 1; display: block; - padding: 1vmin 0 1vmin 0; + padding: 1vmin 0 0.8vmin 0; cursor: pointer; background: rgba(#000, 0.3); font-weight: bold; @@ -72,6 +91,17 @@ width: 33.33%; font-size: 1.3vmin; height: 3vmin; + + > .badge { + padding: 0.1vmin 1vmin; + text-align: center; + font-weight: 300; + font-size: 1.2vmin; + color: #fff; + background-color: #b12525; + border-radius: 2px; + margin-left: 1vmin; + } } > .tab {