Add circular icon for unread messages

2018-07-13 09:57:08 +02:00
parent 40f6eabdd9
commit d88031e64d
2 changed files with 23 additions and 8 deletions
@@ -18,14 +18,19 @@ class ToolAreaButton extends React.Component
 			<div data-component='ToolAreaButton'>
 				<div
 					className={classnames('button', 'toolarea-button', {
-						on : toolAreaOpen,
-						unread
+						on : toolAreaOpen
 					})}
 					data-tip='Toggle tool area'
 					data-type='dark'
 					data-for='globaltip'
 					onClick={() => toggleToolArea()}
 				/>
+
+				{unread > 0 && (
+					<span className='badge'>
+						{unread}
+					</span>
+				)}
 			</div>
 		);
 	}
@@ -42,7 +47,7 @@ const mapStateToProps = (state) =>
 {
 	return {
 		toolAreaOpen : state.toolarea.toolAreaOpen,
-		unread       : state.toolarea.unread > 0
+		unread       : state.toolarea.unread
 	};
 };