Skip to content
Permalink
Browse files

feat(App): Add option to show/hide notification badges for muted serv…

…ices (@maximiliancsuk)
  • Loading branch information
adlk committed Dec 1, 2017
1 parent 3045b47 commit 893a9f6d9a1bcdbbfe925e718b2c907dcceaa64e
@@ -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>
@@ -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>
);
}
@@ -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>
);
@@ -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>
@@ -11,6 +11,7 @@ export const DEFAULT_APP_SETTINGS = {
enableSystemTray: true,
minimizeToSystemTray: false,
showDisabledServices: true,
showMessageBadgeWhenMuted: true,
enableSpellchecking: true,
// spellcheckingLanguage: 'auto',
locale: 'en-US',
@@ -87,6 +87,8 @@ export default class AppLayoutContainer extends Component {
deleteService={deleteService}
updateService={updateService}
toggleMuteApp={toggleMuteApp}
showMessageBadgeWhenMutedSetting={settings.all.showMessageBadgeWhenMuted}
showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
/>
);

@@ -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,
@@ -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:",
@@ -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;
@@ -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
@@ -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() {
@@ -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;
@@ -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;
}

0 comments on commit 893a9f6

Please sign in to comment.
You can’t perform that action at this time.