diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 2daf55676..489027d57 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/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}
/>
))}
{/*
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index a7136c43f..8403d9462 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/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 = (
+
+ {service.unreadDirectMessageCount > 0 && (
+
+ {service.unreadDirectMessageCount}
+
+ )}
+ {service.unreadIndirectMessageCount > 0
+ && service.unreadDirectMessageCount === 0
+ && service.isIndirectMessageBadgeEnabled && (
+
+ •
+
+ )}
+
+ );
+ }
+
return (
- {service.unreadDirectMessageCount > 0 && (
-
- {service.unreadDirectMessageCount}
-
- )}
- {service.unreadIndirectMessageCount > 0
- && service.unreadDirectMessageCount === 0
- && service.isIndirectMessageBadgeEnabled && (
-
- •
-
- )}
+ {notificationBadge}
);
}
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 9da1090b7..ceb88c51c 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/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}
/>
);
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ce9b7ab2..878e46d6d 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -142,6 +142,7 @@ export default class EditSettingsForm extends Component {
{/* Appearance */}
{intl.formatMessage(messages.headlineAppearance)}
+
{/* Language */}
{intl.formatMessage(messages.headlineLanguage)}
diff --git a/src/config.js b/src/config.js
index b3e00c92c..e6d8958e6 100644
--- a/src/config.js
+++ b/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 --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index da0896844..e4a9d60c3 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/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 --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 62e255dab..45ded9e5c 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/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 --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 37034d4e1..380871668 100644
--- a/src/i18n/locales/en-US.json
+++ b/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 --git a/src/models/Settings.js b/src/models/Settings.js
index 3b352f9aa..35bfe0d05 100644
--- a/src/models/Settings.js
+++ b/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 --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 0cfe08a28..6125a7cff 100644
--- a/src/stores/AppStore.js
+++ b/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 --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 22c376c06..e79677400 100644
--- a/src/stores/ServicesStore.js
+++ b/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 --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index cb45b88b5..5e9cc9ba7 100644
--- a/src/stores/UIStore.js
+++ b/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 --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 3ffc53558..ac48aabd6 100644
--- a/src/styles/tabs.scss
+++ b/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;
}