feat(Service): Add option to completely disable message badges

meetfranz · Dec 14, 2017 · cea7a5cde78189d43fdd4d43d6a5cb12cd29e1c5 · cea7a5c
1 parent 246132a
commit cea7a5cde78189d43fdd4d43d6a5cb12cd29e1c5
Unified Split

Showing with 69 additions and 20 deletions.

+38 −14 src/components/settings/services/EditServiceForm.js

+9 −0 src/containers/settings/EditServiceScreen.js

+4 −0 src/i18n/locales/en-US.json

+1 −0 src/models/Service.js

+17 −6 src/styles/settings.scss
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
@@ -67,6 +67,18 @@ const messages = defineMessages({
    id: 'settings.service.form.isMutedInfo',
    defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
  },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message dadges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
 });

 @observer
@@ -231,20 +243,32 @@ export default class EditServiceForm extends Component {
              </Tabs>
            )}
            <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__help">
-                    {intl.formatMessage(messages.indirectMessageInfo)}
-                  </p>
-                </div>
-              )}
-              <Toggle field={form.$('isMuted')} />
-              <p className="settings__help">
-                {intl.formatMessage(messages.isMutedInfo)}
-              </p>
-              <Toggle field={form.$('isEnabled')} />
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                <Toggle field={form.$('isNotificationEnabled')} />
+                <Toggle field={form.$('isMuted')} />
+                <p className="settings__help">
+                  {intl.formatMessage(messages.isMutedInfo)}
+                </p>
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                <Toggle field={form.$('isBadgeEnabled')} />
+                {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                  <div>
+                    <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                    <p className="settings__help">
+                      {intl.formatMessage(messages.indirectMessageInfo)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                <Toggle field={form.$('isEnabled')} />
+              </div>
            </div>
            {recipe.message && (
              <p className="settings__message">
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
@@ -26,6 +26,10 @@ const messages = defineMessages({
    id: 'settings.service.form.enableNotification',
    defaultMessage: '!!!Enable Notifications',
  },
+  enableBadge: {
+    id: 'settings.service.form.enableBadge',
+    defaultMessage: '!!!Show unread message badges',
+  },
  enableAudio: {
    id: 'settings.service.form.enableAudio',
    defaultMessage: '!!!Enable audio',
@@ -88,6 +92,11 @@ export default class EditServiceScreen extends Component {
          value: service.isNotificationEnabled,
          default: true,
        },
+        isBadgeEnabled: {
+          label: intl.formatMessage(messages.enableBadge),
+          value: service.isBadgeEnabled,
+          default: true,
+        },
        isMuted: {
          label: intl.formatMessage(messages.enableAudio),
          value: !service.isMuted,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -117,11 +117,15 @@
  "settings.service.form.name": "Name",
  "settings.service.form.enableService": "Enable service",
  "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.enableBadge": "Show unread message badges",
  "settings.service.form.team": "Team",
  "settings.service.form.customUrl": "Custom server",
  "settings.service.form.indirectMessages": "Show message badge for all new messages",
  "settings.service.form.enableAudio": "Enable audio",
  "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
+  "settings.service.form.headlineNotifications": "Notifications",
+  "settings.service.form.headlineBadges": "Unread message badges",
+  "settings.service.form.headlineGeneral": "General",
  "settings.service.error.headline": "Error",
  "settings.service.error.goBack": "Back to services",
  "settings.service.error.message": "Could not load service recipe.",
diff --git a/src/models/Service.js b/src/models/Service.js
@@ -22,6 +22,7 @@ export default class Service {
  @observable team = '';
  @observable customUrl = '';
  @observable isNotificationEnabled = true;
+  @observable isBadgeEnabled = true;
  @observable isIndirectMessageBadgeEnabled = true;
  @observable customIconUrl = '';
  @observable hasCrashed = false;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
@@ -151,8 +151,23 @@
    }
  }

-  .settings__options {
-    margin-top: 30px;
+  &__options {
+    margin-top: 20px;
+  }
+
+  &__settings-group {
+    margin-top: 10px;
+
+    h3 {
+      font-weight: bold;
+      margin: 25px 0 15px;
+      color: $theme-gray-light;
+      letter-spacing: -0.1px;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
  }

  .settings__message {
@@ -173,10 +188,6 @@
    margin: -10px 0 20px 55px;;
    font-size: 12px;
    color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
  }

  .settings__controls {