feat(App): Add option to show/hide notification badges for muted services (@maximiliancsuk)

Author: adlk

Diff for: src/components/services/tabs/TabBarSortableList.js

@@ -17,6 +17,8 @@ class TabBarSortableList extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   render() {
@@ -30,6 +32,8 @@ class TabBarSortableList extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -50,6 +54,8 @@ class TabBarSortableList extends Component {
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
             openSettings={openSettings}
+            showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+            showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
           />
         ))}
         {/* <li>

Diff for: src/components/services/tabs/TabItem.js

@@ -63,6 +63,8 @@ class TabItem extends Component {
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -81,6 +83,8 @@ class TabItem extends Component {
       disableService,
       enableService,
       openSettings,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.context;
 
@@ -121,6 +125,26 @@ class TabItem extends Component {
     }];
     const menu = Menu.buildFromTemplate(menuTemplate);
 
+    let notificationBadge = null;
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted) {
+      notificationBadge = (
+        <span>
+          {service.unreadDirectMessageCount > 0 && (
+            <span className="tab-item__message-count">
+              {service.unreadDirectMessageCount}
+            </span>
+          )}
+          {service.unreadIndirectMessageCount > 0
+            && service.unreadDirectMessageCount === 0
+            && service.isIndirectMessageBadgeEnabled && (
+              <span className="tab-item__message-count is-indirect">
+                •
+              </span>
+            )}
+        </span>
+      );
+    }
+
     return (
       <li
         className={classnames({
@@ -138,18 +162,7 @@ class TabItem extends Component {
           className="tab-item__icon"
           alt=""
         />
-        {service.unreadDirectMessageCount > 0 && (
-          <span className="tab-item__message-count">
-            {service.unreadDirectMessageCount}
-          </span>
-        )}
-        {service.unreadIndirectMessageCount > 0
-          && service.unreadDirectMessageCount === 0
-          && service.isIndirectMessageBadgeEnabled && (
-            <span className="tab-item__message-count is-indirect">
-            •
-            </span>
-          )}
+        {notificationBadge}
       </li>
     );
   }

Diff for: src/components/services/tabs/Tabbar.js

@@ -18,6 +18,8 @@ export default class TabBar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
+    showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
 
   onSortEnd = ({ oldIndex, newIndex }) => {
@@ -64,6 +66,8 @@ export default class TabBar extends Component {
       toggleNotifications,
       toggleAudio,
       deleteService,
+      showMessageBadgeWhenMutedSetting,
+      showMessageBadgesEvenWhenMuted,
     } = this.props;
 
     return (
@@ -85,6 +89,8 @@ export default class TabBar extends Component {
           axis="y"
           lockAxis="y"
           helperClass="is-reordering"
+          showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+          showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
         />
       </div>
     );

Diff for: src/components/settings/settings/EditSettingsForm.js

@@ -142,6 +142,7 @@ export default class EditSettingsForm extends Component {
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
+            <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>

Diff for: src/config.js

@@ -11,6 +11,7 @@ export const DEFAULT_APP_SETTINGS = {
   enableSystemTray: true,
   minimizeToSystemTray: false,
   showDisabledServices: true,
+  showMessageBadgeWhenMuted: true,
   enableSpellchecking: true,
   // spellcheckingLanguage: 'auto',
   locale: 'en-US',

Diff for: src/containers/layout/AppLayoutContainer.js

@@ -87,6 +87,8 @@ export default class AppLayoutContainer extends Component {
         deleteService={deleteService}
         updateService={updateService}
         toggleMuteApp={toggleMuteApp}
+        showMessageBadgeWhenMutedSetting={settings.all.showMessageBadgeWhenMuted}
+        showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
       />
     );
 

Diff for: src/containers/settings/EditSettingsScreen.js

@@ -43,6 +43,10 @@ const messages = defineMessages({
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: '!!!Display disabled services tabs',
   },
+  showMessageBadgeWhenMuted: {
+    id: 'settings.app.form.showMessagesBadgesWhenMuted',
+    defaultMessage: '!!!Show unread message badge when notifications are disabled',
+  },
   enableSpellchecking: {
     id: 'settings.app.form.enableSpellchecking',
     defaultMessage: '!!!Enable spell checking',
@@ -85,6 +89,7 @@ export default class EditSettingsScreen extends Component {
         enableSystemTray: settingsData.enableSystemTray,
         minimizeToSystemTray: settingsData.minimizeToSystemTray,
         showDisabledServices: settingsData.showDisabledServices,
+        showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         enableSpellchecking: settingsData.enableSpellchecking,
         // spellcheckingLanguage: settingsData.spellcheckingLanguage,
         locale: settingsData.locale,
@@ -154,6 +159,11 @@ export default class EditSettingsScreen extends Component {
           value: settings.all.showDisabledServices,
           default: DEFAULT_APP_SETTINGS.showDisabledServices,
         },
+        showMessageBadgeWhenMuted: {
+          label: intl.formatMessage(messages.showMessageBadgeWhenMuted),
+          value: settings.all.showMessageBadgeWhenMuted,
+          default: DEFAULT_APP_SETTINGS.showMessageBadgeWhenMuted,
+        },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
           value: settings.all.enableSpellchecking,

Diff for: src/i18n/locales/en-US.json

@@ -148,6 +148,7 @@
   "settings.app.form.language": "Language",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
+  "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
   "settings.app.form.beta": "Include beta versions",
   "settings.app.translationHelp": "Help us to translate Franz into your language.",
   "settings.app.currentVersion": "Current version:",

Diff for: src/models/Settings.js

@@ -8,6 +8,7 @@ export default class Settings {
   @observable enableSystemTray = DEFAULT_APP_SETTINGS.enableSystemTray;
   @observable minimizeToSystemTray = DEFAULT_APP_SETTINGS.minimizeToSystemTray;
   @observable showDisabledServices = DEFAULT_APP_SETTINGS.showDisabledServices;
+  @observable showMessageBadgeWhenMuted = DEFAULT_APP_SETTINGS.showMessageBadgeWhenMuted;
   @observable enableSpellchecking = DEFAULT_APP_SETTINGS.enableSpellchecking;
   @observable locale = DEFAULT_APP_SETTINGS.locale;
   @observable beta = DEFAULT_APP_SETTINGS.beta;

Diff for: src/stores/AppStore.js

@@ -67,6 +67,7 @@ export default class AppStore extends Store {
       this._setLocale.bind(this),
       this._handleMiner.bind(this),
       this._handleMinerThrottle.bind(this),
+      this._muteAppHandler.bind(this),
     ]);
   }
 
@@ -300,6 +301,14 @@ export default class AppStore extends Store {
     }
   }
 
+  _muteAppHandler() {
+    const showMessageBadgesEvenWhenMuted = this.stores.ui.showMessageBadgesEvenWhenMuted;
+
+    if (!showMessageBadgesEvenWhenMuted) {
+      this.actions.app.setBadge({ unreadDirectMessageCount: 0, unreadIndirectMessageCount: 0 });
+    }
+  }
+
   // Helpers
   async _appStartsCounter() {
     // we need to wait until the settings request is resolved

Diff for: src/stores/ServicesStore.js

@@ -488,19 +488,28 @@ export default class ServicesStore extends Store {
   }
 
   _getUnreadMessageCountReaction() {
+    const showMessageBadgeWhenMuted = this.stores.settings.all.showMessageBadgeWhenMuted;
+    const showMessageBadgesEvenWhenMuted = this.stores.ui.showMessageBadgesEvenWhenMuted;
+
+    // TODO: unfinished monkey business
+
     const unreadDirectMessageCount = this.enabled
+      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted)
       .map(s => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     const unreadIndirectMessageCount = this.enabled
-      .filter(s => s.isIndirectMessageBadgeEnabled)
+      // .filter(s => s.isIndirectMessageBadgeEnabled && (s.isNotificationEnabled && showMessageBadgeWhenMuted))
       .map(s => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
-    this.actions.app.setBadge({
-      unreadDirectMessageCount,
-      unreadIndirectMessageCount,
-    });
+    // We can't just block this earlier, otherwise the mobx reaction won't be aware of the vars to watch in some cases
+    if (showMessageBadgesEvenWhenMuted) {
+      this.actions.app.setBadge({
+        unreadDirectMessageCount,
+        unreadIndirectMessageCount,
+      });
+    }
   }
 
   _logoutReaction() {

Diff for: src/stores/UIStore.js

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, computed } from 'mobx';
 
 import Store from './lib/Store';
 
@@ -14,6 +14,12 @@ export default class UIStore extends Store {
     this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
   }
 
+  @computed get showMessageBadgesEvenWhenMuted() {
+    const settings = this.stores.settings.all;
+
+    return (settings.isAppMuted && settings.showMessageBadgeWhenMuted) || !settings.isAppMuted;
+  }
+
   // Actions
   @action _openSettings({ path = '/settings' }) {
     const settingsPath = path !== '/settings' ? `/settings/${path}` : path;

Diff for: src/styles/tabs.scss

@@ -78,6 +78,26 @@
     }
   }
 
+  .tab-item__info-badge {
+    width: 17px;
+    height: 17px;
+    background: $theme-gray-light;
+    color: $theme-gray-lighter;
+    border-radius: 20px;
+    padding: 0px 5px;
+    font-size: 11px;
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.is-indirect {
+      padding-top: 0px;
+    }
+  }
+
   &.is-reordering {
     z-index: 99999;
   }