From 8d9436a10edb8df4a02cbd13db91bf26d88e0de6 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 12 Jul 2018 17:20:37 +0200 Subject: [PATCH 1/5] Compute the number of unread messages in reducer --- app/lib/components/ToolArea/ToolArea.jsx | 42 +++++++++++------------- app/lib/redux/reducers/toolarea.js | 19 +++++++++-- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index 312e90e..46b1d3d 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,11 @@ class ToolArea extends React.Component { setToolTab('chat'); }} - checked={toolarea.currentToolTab === 'chat'} + checked={currentToolTab === 'chat'} /> - +
@@ -47,7 +50,7 @@ class ToolArea extends React.Component { setToolTab('users'); }} - checked={toolarea.currentToolTab === 'users'} + checked={currentToolTab === 'users'} /> @@ -63,7 +66,7 @@ class ToolArea extends React.Component { setToolTab('settings'); }} - checked={toolarea.currentToolTab === 'settings'} + checked={currentToolTab === 'settings'} /> @@ -78,26 +81,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/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: From 9af194769b6ee106fe880d06b176fb0b3dee4c00 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 12 Jul 2018 17:39:53 +0200 Subject: [PATCH 2/5] Style the unread message as a badge --- app/lib/components/ToolArea/ToolArea.jsx | 6 +++++- app/stylus/components/ToolArea.styl | 14 +++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index 46b1d3d..0a5a2d7 100644 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ b/app/lib/components/ToolArea/ToolArea.jsx @@ -35,7 +35,11 @@ class ToolArea extends React.Component checked={currentToolTab === 'chat'} />
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index d106d0b..16fe8c5 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -63,7 +63,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 +72,18 @@ 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 { From 40f6eabdd9afa4b463877de09702c2a4adc87218 Mon Sep 17 00:00:00 2001 From: Torjus Date: Thu, 12 Jul 2018 17:50:47 +0200 Subject: [PATCH 3/5] Make the sidebar badge red if there are unread messages --- app/lib/components/ToolArea/ToolAreaButton.jsx | 12 ++++++++---- app/stylus/components/ToolArea.styl | 4 ++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx index b158ba4..f45c947 100644 --- a/app/lib/components/ToolArea/ToolAreaButton.jsx +++ b/app/lib/components/ToolArea/ToolAreaButton.jsx @@ -10,14 +10,16 @@ class ToolAreaButton extends React.Component { const { toolAreaOpen, - toggleToolArea + toggleToolArea, + unread } = this.props; return (
{ return { - toolAreaOpen : state.toolarea.toolAreaOpen + toolAreaOpen : state.toolarea.toolAreaOpen, + unread : state.toolarea.unread > 0 }; }; diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 16fe8c5..63f7327 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -32,6 +32,10 @@ width: 32px; } + &.unread { + background-color: #b12525; + } + &.on { background-color: rgba(#fff, 0.7); } From d88031e64dbae59e8391391be32f2c859c1cd6db Mon Sep 17 00:00:00 2001 From: Torjus Date: Fri, 13 Jul 2018 09:57:08 +0200 Subject: [PATCH 4/5] Add circular icon for unread messages --- .../components/ToolArea/ToolAreaButton.jsx | 11 +++++++--- app/stylus/components/ToolArea.styl | 20 ++++++++++++++----- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx index f45c947..fec5952 100644 --- a/app/lib/components/ToolArea/ToolAreaButton.jsx +++ b/app/lib/components/ToolArea/ToolAreaButton.jsx @@ -18,14 +18,19 @@ class ToolAreaButton extends React.Component
toggleToolArea()} /> + + {unread > 0 && ( + + {unread} + + )}
); } @@ -42,7 +47,7 @@ const mapStateToProps = (state) => { return { toolAreaOpen : state.toolarea.toolAreaOpen, - unread : state.toolarea.unread > 0 + unread : state.toolarea.unread }; }; diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 63f7327..8c482e1 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -32,10 +32,6 @@ width: 32px; } - &.unread { - background-color: #b12525; - } - &.on { background-color: rgba(#fff, 0.7); } @@ -53,6 +49,21 @@ } } } + + > .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; + } } [data-component='ToolArea'] { @@ -77,7 +88,6 @@ font-size: 1.3vmin; height: 3vmin; - > .badge { padding: 0.1vmin 1vmin; text-align: center; From f3eb899dc47439c2a71686ac3374567098ba5e07 Mon Sep 17 00:00:00 2001 From: Torjus Date: Fri, 13 Jul 2018 10:07:14 +0200 Subject: [PATCH 5/5] Make the badge more oblong shaped for larger numbers --- app/lib/components/ToolArea/ToolAreaButton.jsx | 2 +- app/stylus/components/ToolArea.styl | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/lib/components/ToolArea/ToolAreaButton.jsx b/app/lib/components/ToolArea/ToolAreaButton.jsx index fec5952..3133f9c 100644 --- a/app/lib/components/ToolArea/ToolAreaButton.jsx +++ b/app/lib/components/ToolArea/ToolAreaButton.jsx @@ -27,7 +27,7 @@ class ToolAreaButton extends React.Component /> {unread > 0 && ( - + = 10 })}> {unread} )} diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 8c482e1..a8de7c1 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -63,6 +63,10 @@ padding: 0.2rem 0.4rem; top: 0; right: 0; + + &.long { + border-radius: 25% / 50%; + } } }