Improve notification settings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-06-16 16:15:38 +02:00
parent 1a4239798b
commit 9f5259453e
8 changed files with 86 additions and 45 deletions

View File

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

View File

@ -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(
"Like title or physical address update, start or end date change or event being confirmed or cancelled."
)
}}
{{ $t("Other notification options:") }}
</p>
</div>
<div class="field">

View File

@ -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",
"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.",
"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.",
"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.",
"No notifications": "No notifications",
"Direct": "Direct",
"Every hour": "Every hour",
"Every day": "Every day",
"Do not receive any mail": "Do not receive any mail",
"Receive one email per request": "Receive one email per request",
"Hourly email summary": "Hourly email summary",
"Daily email summary": "Daily email summary",
"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"
}

View File

@ -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",
"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é.",
"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.",
"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.",
"No notifications": "Pas de notifications",
"Direct": "Direct",
"Every hour": "À chaque heure",
"Every day": "Chaque jour",
"Do not receive any mail": "Ne pas recevoir d'e-mail",
"Receive one email per request": "Recevoir un e-mail par demande",
"Hourly email summary": "E-mail récapitulatif chaque heure",
"Daily email summary": "E-mail récapitulatif 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"
}

View File

@ -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;

View File

@ -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,
},
],

View File

@ -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;

View File

@ -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(
"Like title or physical address update, start or end date change or event being confirmed or cancelled."
)
}}
{{ $t("Other notification options:") }}
</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">
<em>{{
$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.DIRECT]: this.$t("Direct"),
[INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Every hour"),
[INotificationPendingParticipationEnum.ONE_DAY]: this.$t("Every day"),
[INotificationPendingParticipationEnum.NONE]: this.$t("Do not receive any mail"),
[INotificationPendingParticipationEnum.DIRECT]: this.$t("Receive one email per request"),
[INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Hourly email summary"),
[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>