Improve notification settings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/NavBar.vue

@@ -222,6 +222,7 @@ nav {
   .navbar-item {
     a.button.is-success {
       background: #1e7d97;
+      font-weight: bold;
     }
 
     svg {

js/src/components/Settings/NotificationsOnboarding.vue

@@ -6,14 +6,12 @@
       </div>
       <div class="field">
         <strong>{{
-          $t("We'll always send you emails to notify about important event updates")
+          $t(
+            "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc."
+          )
         }}</strong>
         <p>
-          {{
+          {{ $t("Other notification options:") }}
-            $t(
-              "Like title or physical address update, start or end date change or event being confirmed or cancelled."
-            )
-          }}
         </p>
       </div>
       <div class="field">

js/src/i18n/en_US.json

@@ -248,7 +248,7 @@
   "No results for \"{queryText}\"": "No results for \"{queryText}\"",
   "No user account with this email was found. Maybe you made a typo?": "No user account with this email was found. Maybe you made a typo?",
   "Notes": "Notes",
-  "Notifications": "Notifications",
+  "Email notifications": "Email notifications",
   "Number of places": "Number of places",
   "OK": "OK",
   "Old password": "Old password",
@@ -571,15 +571,14 @@
   "Other": "Other",
   "No moderation logs yet": "No moderation logs yet",
   "Participation notifications": "Participation notifications",
-  "We'll always send you emails to notify about important event updates": "We'll always send you emails to notify about important event updates",
+  "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc.": "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc.",
-  "Like title or physical address update, start or end date change or event being confirmed or cancelled.": "Like title or physical address update, start or end date change or event being confirmed or cancelled.",
+  "Other notification options:": "Other notification options:",
   "Organizer notifications": "Organizer notifications",
   "Notifications for manually approved participations to an event": "Notifications for manually approved participations to an event",
-  "We'll send you an email when there new participations requests.": "We'll send you an email when there new participations requests.",
+  "Do not receive any mail": "Do not receive any mail",
-  "No notifications": "No notifications",
+  "Receive one email per request": "Receive one email per request",
-  "Direct": "Direct",
+  "Hourly email summary": "Hourly email summary",
-  "Every hour": "Every hour",
+  "Daily email summary": "Daily email summary",
-  "Every day": "Every day",
   "report #{report_number}": "report #{report_number}",
   "{moderator} closed {report}": "{moderator} closed {report}",
   "a non-existent report": "a non-existent report",
@@ -644,5 +643,6 @@
   "Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}.": "Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}.",
   "more than 1360 contributors": "more than 1360 contributors",
   "{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}",
-  "{moderator} has deleted user {user}": "{moderator} has deleted user {user}"
+  "{moderator} has deleted user {user}": "{moderator} has deleted user {user}",
+  "Change timezone": "Change timezone"
 }

js/src/i18n/fr_FR.json

@@ -311,7 +311,7 @@
   "Notes": "Notes",
   "Notification before the event": "Notification avant l'événement",
   "Notification on the day of the event": "Notification le jour de l'événement",
-  "Notifications": "Notifications",
+  "Email notifications": "Notifications par email",
   "Number of places": "Nombre de places",
   "OK": "OK",
   "Old password": "Ancien mot de passe",
@@ -593,15 +593,14 @@
   "{title} ({count} todos)": "{title} ({count} todos)",
   "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
   "Participation notifications": "Notifications de participation",
-  "We'll always send you emails to notify about important event updates": "Nous vous enverrons toujours des emails pour vous notifier à propos des mises à jour importantes des événements",
+  "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc.": "Mobilizon vous enverra un email quand les événements auxquels vous participez connaissent des événements importants : date et heure, adresse, confirmation ou annulation, etc.",
-  "Like title or physical address update, start or end date change or event being confirmed or cancelled.": "Comme la mise à jour du titre ou de l'addresse de l'événement, un changement de date de début ou de fin, ou bien l'événement devenant confirmé ou bien annulé.",
+  "Other notification options:": "Autres options de notification :",
   "Organizer notifications": "Notifications pour organisateur·ice",
   "Notifications for manually approved participations to an event": "Notifications pour l'approbation manuelle des participations à un événement",
-  "We'll send you an email when there new participations requests.": "Nous vous enverrons un email lorsqu'il y aura de nouvelles demandes de participation.",
+  "Do not receive any mail": "Ne pas recevoir d'e-mail",
-  "No notifications": "Pas de notifications",
+  "Receive one email per request": "Recevoir un e-mail par demande",
-  "Direct": "Direct",
+  "Hourly email summary": "E-mail récapitulatif chaque heure",
-  "Every hour": "À chaque heure",
+  "Daily email summary": "E-mail récapitulatif chaque jour",
-  "Every day": "Chaque jour",
   "report #{report_number}": "le signalement #{report_number}",
   "{moderator} closed {report}": "{moderator} a fermé {report}",
   "a non-existent report": "un signalement non-existant",
@@ -667,5 +666,6 @@
   "Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}.": "Propulsé par {mobilizon}. © 2018 - {date} Les contributeur·ices Mobilizon - Fait avec le soutien financier de {contributors}.",
   "more than 1360 contributors": "plus de 1360 contributeur·ices",
   "{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}",
-  "{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}"
+  "{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}",
+  "Change timezone": "Changer de fuseau horaire"
 }

js/src/variables.scss

@@ -81,3 +81,8 @@ $subtitle-sup-size: 15px;
   padding: 3px 8px;
   margin: 15px auto 30px;
 }
+
+$accent: #1e7d97;
+
+$breadcrumb-item-color: $accent;
+$checkbox-background-color: #fff;

js/src/views/Settings.vue

@@ -66,7 +66,7 @@ export default class Settings extends Vue {
             to: { name: RouteName.PREFERENCES } as Route,
           },
           {
-            title: this.$t("Notifications") as string,
+            title: this.$t("Email notifications") as string,
             to: { name: RouteName.NOTIFICATIONS } as Route,
           },
         ],

js/src/views/Settings/AccountSettings.vue

@@ -283,7 +283,8 @@ export default class AccountSettings extends Vue {
 @import "@/variables.scss";
 
 .setting-title {
-  margin-top: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
 
   h2 {
     display: inline;

js/src/views/Settings/Notifications.vue

@@ -6,14 +6,12 @@
       </div>
       <div class="field">
         <strong>{{
-          $t("We'll always send you emails to notify about important event updates")
+          $t(
+            "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc."
+          )
         }}</strong>
         <p>
-          {{
+          {{ $t("Other notification options:") }}
-            $t(
-              "Like title or physical address update, start or end date change or event being confirmed or cancelled."
-            )
-          }}
         </p>
       </div>
       <div class="field">
@@ -24,11 +22,16 @@
               $t("We'll use your timezone settings to send a recap of the morning of the event.")
             }}
           </p>
-          <span v-if="loggedUser.settings && loggedUser.settings.timezone">{{
+          <div v-if="loggedUser.settings && loggedUser.settings.timezone">
-            $t("Your timezone is currently set to {timezone}.", {
+            <em>{{
-              timezone: loggedUser.settings.timezone,
+              $t("Your timezone is currently set to {timezone}.", {
-            })
+                timezone: loggedUser.settings.timezone,
-          }}</span>
+              })
+            }}</em>
+            <router-link class="change-timezone" :to="{ name: RouteName.PREFERENCES }">{{
+              $t("Change timezone")
+            }}</router-link>
+          </div>
           <span v-else>{{ $t("You can pick your timezone into your preferences.") }}</span>
         </b-checkbox>
       </div>
@@ -60,7 +63,7 @@
       <div class="setting-title">
         <h2>{{ $t("Organizer notifications") }}</h2>
       </div>
-      <div class="field">
+      <div class="field is-primary">
         <strong>{{ $t("Notifications for manually approved participations to an event") }}</strong>
         <b-select
           v-model="notificationPendingParticipation"
@@ -73,9 +76,6 @@
             >{{ value }}</option
           >
         </b-select>
-        <p>
-          {{ $t("We'll send you an email when there new participations requests.") }}
-        </p>
       </div>
     </section>
   </div>
@@ -87,6 +87,7 @@ import {
   ICurrentUser,
   INotificationPendingParticipationEnum,
 } from "../../types/current-user.model";
+import RouteName from "../../router/name";
 
 @Component({
   apollo: {
@@ -106,12 +107,14 @@ export default class Notifications extends Vue {
 
   notificationPendingParticipationValues: object = {};
 
+  RouteName = RouteName;
+
   mounted() {
     this.notificationPendingParticipationValues = {
-      [INotificationPendingParticipationEnum.NONE]: this.$t("No notifications"),
+      [INotificationPendingParticipationEnum.NONE]: this.$t("Do not receive any mail"),
-      [INotificationPendingParticipationEnum.DIRECT]: this.$t("Direct"),
+      [INotificationPendingParticipationEnum.DIRECT]: this.$t("Receive one email per request"),
-      [INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Every hour"),
+      [INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Hourly email summary"),
-      [INotificationPendingParticipationEnum.ONE_DAY]: this.$t("Every day"),
+      [INotificationPendingParticipationEnum.ONE_DAY]: this.$t("Daily email summary"),
     };
   }
 
@@ -133,3 +136,36 @@ export default class Notifications extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import "../../variables.scss";
+
+.field {
+  .b-checkbox.checkbox {
+    align-items: normal;
+
+    /deep/ & input:checked + .check {
+      background-color: $accent;
+      border-color: $accent;
+    }
+  }
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  a.change-timezone {
+    color: $accent;
+    text-decoration: underline;
+    text-decoration-color: #fea72b;
+    text-decoration-thickness: 2px;
+    margin-left: 5px;
+  }
+  // /deep/ .select select {
+  //   &:active,
+  //   &:focus {
+  //     border-color: $primary;
+  //     box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+  //   }
+  // }
+}
+</style>