Merge pull request #9 from torjusti/feat/new-messages-counter

Add a counter for unread messages

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'}
 					/>
-					<label htmlFor='tab-chat'>Chat</label>
+					<label htmlFor='tab-chat'>
+						Chat
+						
+						{unread > 0 && (
+							<span className='badge'>{unread}</span>
+						)}
+					</label>
 
 					<div className='tab'>
 						<Chat />
@@ -47,7 +54,7 @@ class ToolArea extends React.Component
 						{
 							setToolTab('users');
 						}}
-						checked={toolarea.currentToolTab === 'users'}
+						checked={currentToolTab === 'users'}
 					/>
 					<label htmlFor='tab-users'>Users</label>
 
@@ -63,7 +70,7 @@ class ToolArea extends React.Component
 						{
 							setToolTab('settings');
 						}}
-						checked={toolarea.currentToolTab === 'settings'}
+						checked={currentToolTab === 'settings'}
 					/>
 					<label htmlFor='tab-settings'>Settings</label>
 
@@ -79,25 +86,18 @@ class ToolArea extends React.Component
 ToolArea.propTypes =
 {
 	advancedMode   : PropTypes.bool,
-	toolarea     : PropTypes.object.isRequired,
-	setToolTab   : PropTypes.func.isRequired
+	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(

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 && (
+					<span className={classnames('badge', { long: unread >= 10 })}>
+						{unread}
+					</span>
+				)}
 			</div>
 		);
 	}
@@ -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
 	};
 };
 

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:

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 {