Cumulative badge calcs for #81 #6 #152

src/scenes/mailboxes/src/Components/Service/DefaultServiceBadge.js

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import shallowCompare from 'react-addons-shallow-compare'
+import { mailboxStore } from 'stores/mailbox'
+import ServiceBadge from './ServiceBadge'
+
+export default class DefaultServiceBadge extends React.Component {
+  /* **************************************************************************/
+  // Class
+  /* **************************************************************************/
+
+  static propTypes = {
+    isAuthInvalid: PropTypes.bool.isRequired,
+    mailboxId: PropTypes.string.isRequired,
+    displayMailboxOverview: PropTypes.bool.isRequired,
+    badgeStyle: PropTypes.object,
+    iconStyle: PropTypes.object
+  }
+
+  /* **************************************************************************/
+  // Component Lifecycle
+  /* **************************************************************************/
+
+  componentDidMount () {
+    mailboxStore.listen(this.mailboxUpdated)
+  }
+
+  componentWillUnmount () {
+    mailboxStore.unlisten(this.mailboxUpdated)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.mailboxId !== this.props.mailboxId) {
+      this.setState(this.generateState(nextProps, undefined))
+    }
+  }
+
+  /* **************************************************************************/
+  // Data lifecycle
+  /* **************************************************************************/
+
+  /**
+  * Generates the state
+  * @param props: the props to use
+  * @param mailboxState=autoget: the mailbox state
+  * @return the state object
+  */
+  generateState (props, mailboxState = mailboxStore.getState()) {
+    const mailbox = mailboxState.getMailbox(props.mailboxId)
+    return {
+      mailbox: mailbox,
+      service: mailbox ? mailbox.defaultService : undefined,
+      mailboxUnreadCount: mailboxState.mailboxUnreadCountForUser(props.mailboxId),
+      mailboxHasUnreadActivity: mailboxState.mailboxHasUnreadActivityForUser(props.mailboxId)
+    }
+  }
+
+  state = this.generateState(this.props, undefined)
+
+  mailboxUpdated = (mailboxState) => {
+    this.setState(this.generateState(this.props, mailboxState))
+  }
+
+  /* **************************************************************************/
+  // Rendering
+  /* **************************************************************************/
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState)
+  }
+
+  render () {
+    const {
+      mailboxId,
+      displayMailboxOverview,
+      ...passProps
+    } = this.props
+    const {
+      mailbox,
+      service,
+      mailboxUnreadCount,
+      mailboxHasUnreadActivity
+    } = this.state
+
+    if (displayMailboxOverview && mailbox.hasAdditionalServices) {
+      return (
+        <ServiceBadge
+          {...passProps}
+          supportsUnreadCount={mailbox.showCumulativeSidebarUnreadBadge}
+          showUnreadBadge={mailbox.showCumulativeSidebarUnreadBadge}
+          unreadCount={mailboxUnreadCount}
+          supportsUnreadActivity={mailbox.showCumulativeSidebarUnreadBadge}
+          showUnreadActivityBadge={mailbox.showCumulativeSidebarUnreadBadge}
+          hasUnreadActivity={mailboxHasUnreadActivity}
+          color={mailbox.cumulativeSidebarUnreadBadgeColor} />
+      )
+    } else {
+      return (
+        <ServiceBadge
+          {...passProps}
+          supportsUnreadCount={service.supportsUnreadCount}
+          showUnreadBadge={service.showUnreadBadge}
+          unreadCount={service.unreadCount}
+          supportsUnreadActivity={service.supportsUnreadActivity}
+          showUnreadActivityBadge={service.showUnreadActivityBadge}
+          hasUnreadActivity={service.hasUnreadActivity}
+          color={service.unreadBadgeColor} />
+      )
+    }
+  }
+}

src/scenes/mailboxes/src/Components/Service/index.js

@@ -1,7 +1,9 @@
 import ServiceBadge from './ServiceBadge'
 import ServiceTooltip from './ServiceTooltip'
+import DefaultServiceBadge from './DefaultServiceBadge'
 
 export {
   ServiceBadge,
-  ServiceTooltip
+  ServiceTooltip,
+  DefaultServiceBadge
 }

src/scenes/mailboxes/src/Components/Tray/Tray.js

@@ -106,7 +106,7 @@ export default class Tray extends React.Component {
   */
   generateMenuUnreadMessages (mailboxState = mailboxStore.getState()) {
     const mailboxMenuItems = mailboxState.allMailboxes().map((mailbox) => {
-      const trayMessages = mailbox.trayMessages
+      const trayMessages = mailboxState.mailboxTrayMessagesForUser(mailbox.id)
       const messageItemsSignature = trayMessages.map((message) => message.id).join(':')
       let messageItems = trayMessages.map((message) => {
         return {
@@ -132,10 +132,11 @@ export default class Tray extends React.Component {
         { type: 'separator' }
       )
 
+      const unreadCount = mailboxState.mailboxUnreadCountForUser(mailbox.id)
       return {
         signature: messageItemsSignature,
         label: [
-          mailbox.unreadCount ? `(${mailbox.unreadCount})` : undefined,
+          unreadCount ? `(${unreadCount})` : undefined,
           mailbox.displayName || 'Untitled'
         ].filter((item) => !!item).join(' '),
         submenu: messageItems.length === 2 ? [...messageItems,

src/scenes/mailboxes/src/Components/WindowTitle.js

@@ -32,7 +32,7 @@ export default class Provider extends React.Component {
   mailboxesChanged = (mailboxState) => {
     const activeMailbox = mailboxState.activeMailbox()
     this.setState({
-      unreadCount: mailboxState.totalUnreadCountForAppBadge(),
+      unreadCount: mailboxState.totalUnreadCountForAppBadgeForUser(),
       activeMailboxName: activeMailbox ? activeMailbox.displayName : undefined,
       activeGuestTitle: this._getGuestPageTitle(mailboxState, undefined)
     })
@@ -70,7 +70,7 @@ export default class Provider extends React.Component {
     return {
       showTitlebarCount: settingsState.ui.showTitlebarCount,
       showTitlebarAccount: settingsState.ui.showTitlebarAccount,
-      unreadCount: mailboxState.totalUnreadCountForAppBadge(),
+      unreadCount: mailboxState.totalUnreadCountForAppBadgeForUser(),
       activeGuestTitle: this._getGuestPageTitle(mailboxState, guestState),
       activeMailboxName: activeMailbox ? activeMailbox.displayName : undefined
     }

src/scenes/mailboxes/src/Scenes/AppScene/Sidelist/SidelistMailboxes/SidelistItemMailboxAvatar.js

@@ -5,7 +5,7 @@ import { MailboxAvatar } from 'Components/Mailbox'
 import { mailboxStore } from 'stores/mailbox'
 import { settingsStore } from 'stores/settings'
 import { userStore } from 'stores/user'
-import { ServiceBadge, ServiceTooltip } from 'Components/Service'
+import { DefaultServiceBadge, ServiceTooltip } from 'Components/Service'
 import * as Colors from 'material-ui/styles/colors'
 import uuid from 'uuid'
 import CoreMailbox from 'shared/Models/Accounts/CoreMailbox'
@@ -188,26 +188,24 @@ export default class SidelistItemMalboxAvatar extends React.Component {
 
     let borderColor
     let showSleeping
+    let displayMailboxOverview
     if (mailbox.serviceDisplayMode === CoreMailbox.SERVICE_DISPLAY_MODES.SIDEBAR) {
       borderColor = isDefaultServiceActive || isHovering ? mailbox.color : Color(mailbox.color).lighten(0.4).rgb().string()
       showSleeping = isDefaultServiceSleeping && mailbox.showSleepableServiceIndicator && globalShowSleepableServiceIndicator
+      displayMailboxOverview = mailbox.collapseSidebarServices && !isMailboxActive && mailbox.hasAdditionalServices
     } else {
       borderColor = isMailboxActive || isHovering ? mailbox.color : Color(mailbox.color).lighten(0.4).rgb().string()
       showSleeping = false
+      displayMailboxOverview = mailbox.hasAdditionalServices
     }
 
     return (
-      <ServiceBadge
+      <DefaultServiceBadge
         {...passProps}
         id={`ReactComponent-Sidelist-Item-Mailbox-Avatar-${this.instanceId}`}
         isAuthInvalid={mailbox.isAuthenticationInvalid || !mailbox.hasAuth}
-        supportsUnreadCount={service.supportsUnreadCount}
-        showUnreadBadge={service.showUnreadBadge}
-        unreadCount={service.unreadCount}
-        supportsUnreadActivity={service.supportsUnreadActivity}
-        showUnreadActivityBadge={service.showUnreadActivityBadge}
-        hasUnreadActivity={service.hasUnreadActivity}
-        color={service.unreadBadgeColor}
+        mailboxId={mailbox.id}
+        displayMailboxOverview={displayMailboxOverview}
         badgeStyle={styles.badge}
         style={styles.badgeContainer}
         iconStyle={styles.badgeFAIcon}
@@ -236,7 +234,7 @@ export default class SidelistItemMalboxAvatar extends React.Component {
           arrow='left'
           group={this.instanceId}
           parent={`#ReactComponent-Sidelist-Item-Mailbox-Avatar-${this.instanceId}`} />
-      </ServiceBadge>
+      </DefaultServiceBadge>
     )
   }
 }

src/scenes/mailboxes/src/Scenes/Provider.js

@@ -97,8 +97,8 @@ export default class Provider extends React.Component {
     const settingsState = settingsStore.getState()
     const mailboxState = mailboxStore.getState()
     return {
-      messagesUnreadCount: mailboxState.totalUnreadCountForAppBadge(),
-      hasUnreadActivity: mailboxState.hasUnreadActivityForAppBadge(),
+      messagesUnreadCount: mailboxState.totalUnreadCountForAppBadgeForUser(),
+      hasUnreadActivity: mailboxState.hasUnreadActivityForAppBadgeForUser(),
       uiSettings: settingsState.ui,
       traySettings: settingsState.tray,
       launchTraySettings: settingsState.launched.tray,
@@ -108,8 +108,8 @@ export default class Provider extends React.Component {
 
   mailboxesChanged = (mailboxState) => {
     this.setState({
-      messagesUnreadCount: mailboxState.totalUnreadCountForAppBadge(),
-      hasUnreadActivity: mailboxState.hasUnreadActivityForAppBadge()
+      messagesUnreadCount: mailboxState.totalUnreadCountForAppBadgeForUser(),
+      hasUnreadActivity: mailboxState.hasUnreadActivityForAppBadgeForUser()
     })
   }
 

src/scenes/mailboxes/src/Scenes/SettingsScene/Accounts/AccountAppearanceSettings.js

@@ -5,6 +5,7 @@ import { ColorPickerButton } from 'Components'
 import { mailboxActions, MailboxReducer } from 'stores/mailbox'
 import styles from '../CommonSettingStyles'
 import shallowCompare from 'react-addons-shallow-compare'
+import CoreMailbox from 'shared/Models/Accounts/CoreMailbox'
 
 export default class AccountAppearanceSettings extends React.Component {
   /* **************************************************************************/
@@ -59,6 +60,15 @@ export default class AccountAppearanceSettings extends React.Component {
   render () {
     const { mailbox, ...passProps } = this.props
 
+    const hasCumulativeBadge = (
+        mailbox.serviceDisplayMode === CoreMailbox.SERVICE_DISPLAY_MODES.TOOLBAR &&
+        mailbox.hasAdditionalServices
+      ) || (
+        mailbox.serviceDisplayMode === CoreMailbox.SERVICE_DISPLAY_MODES.SIDEBAR &&
+        mailbox.collapseSidebarServices &&
+        mailbox.hasAdditionalServices
+      )
+
     return (
       <Paper zDepth={1} style={styles.paper} {...passProps}>
         <h1 style={styles.subheading}>Appearance</h1>
@@ -93,6 +103,32 @@ export default class AccountAppearanceSettings extends React.Component {
           label='Show Account Colour around Icon'
           labelPosition='right'
           onToggle={(evt, toggled) => mailboxActions.reduce(mailbox.id, MailboxReducer.setShowAvatarColorRing, toggled)} />
+        {hasCumulativeBadge ? (
+          <div>
+            <hr style={styles.subsectionRule} />
+            <h1 style={styles.subsectionheading}>Sidebar Badge</h1>
+            <p style={styles.subheadingInfo}>
+              When you have multiple services you can show the total unread count for those
+              services in the sidebar, so at a glance you know what's new
+            </p>
+            <Toggle
+              toggled={mailbox.showCumulativeSidebarUnreadBadge}
+              label='Show total unread count from all services'
+              labelPosition='right'
+              onToggle={(evt, toggled) => {
+                mailboxActions.reduce(mailbox.id, MailboxReducer.setShowCumulativeSidebarUnreadBadge, toggled)
+              }} />
+            <div style={styles.button}>
+              <ColorPickerButton
+                label='Badge Colour'
+                icon={<FontIcon className='material-icons'>sms</FontIcon>}
+                value={mailbox.cumulativeSidebarUnreadBadgeColor}
+                onChange={(col) => {
+                  mailboxActions.reduce(mailbox.id, MailboxReducer.setCumulativeSidebarUnreadBadgeColor, col)
+                }} />
+            </div>
+          </div>
+        ) : undefined}
       </Paper>
     )
   }

src/scenes/mailboxes/src/stores/mailbox/MailboxReducer.js

@@ -78,6 +78,32 @@ class MailboxReducer {
     })
   }
 
+  /* **************************************************************************/
+  // Badge
+  /* **************************************************************************/
+
+  /**
+  * Sets if the cumulative sidebar badge should be shown
+  * @param mailbox: the mailbox to update
+  * @param show: true to show, false otherwise
+  */
+  static setShowCumulativeSidebarUnreadBadge (mailbox, show) {
+    return mailbox.changeData({
+      showCumulativeSidebarUnreadBadge: show
+    })
+  }
+
+  /**
+  * Sets the cumulative sidebar badge color
+  * @param mailbox: the mailbox to update
+  * @param col: the color to set
+  */
+  static setCumulativeSidebarUnreadBadgeColor (mailbox, col) {
+    return mailbox.changeData({
+      cumulativeSidebarUnreadBadgeColor: typeof (col) === 'object' ? col.rgbaStr : col
+    })
+  }
+
   /* **************************************************************************/
   // Lifecycle & Ordering
   /* **************************************************************************/