119602: Add automatic notification hiding toggle

Author: AAwouters

src/app/accessibility/accessibility-settings.service.ts

@@ -33,6 +33,7 @@ export enum AccessibilitySetting {
 export type AccessibilitySettings = { [key in AccessibilitySetting]?: string };
 
 export interface AccessibilitySettingsFormValues {
+  disableNotificationTimeOut: boolean,
   notificationTimeOut: string,
   liveRegionTimeOut: string,
 }
@@ -231,7 +232,8 @@ export class AccessibilitySettingsService {
    */
   convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): AccessibilitySettings {
     return {
-      'notificationTimeOut': secondsToMilliseconds(settings.notificationTimeOut),
+      'notificationTimeOut': settings.disableNotificationTimeOut ? '0'
+        : secondsToMilliseconds(settings.notificationTimeOut),
       'liveRegionTimeOut': secondsToMilliseconds(settings.liveRegionTimeOut),
     };
   }
@@ -241,6 +243,7 @@ export class AccessibilitySettingsService {
    */
   convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
     return {
+      disableNotificationTimeOut: parseFloat(settings.notificationTimeOut) === 0,
       notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
       liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
     };

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -2,6 +2,23 @@
   <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
 
   <form>
+    <div class="form-group row">
+      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-10">
+        <ui-switch [id]="'disableNotificationTimeOutInput'"
+                   [(ngModel)]="formValues.disableNotificationTimeOut"
+                   [ngModelOptions]="{ standalone: true }"
+        ></ui-switch>
+
+        <small [id]="'disableNotificationTimeOutHint'" class="form-text text-muted">
+          {{ 'info.accessibility-settings.disableNotificationTimeOut.hint' | translate }}
+        </small>
+      </div>
+    </div>
+
     <div class="form-group row">
       <label [for]="'notificationTimeOutInput'" class="col-sm-2 col-form-label">
         {{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
@@ -10,6 +27,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
       <div class="col-sm-10">
         <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
                [placeholder]="getPlaceholder(AccessibilitySetting.NotificationTimeOut)"
+               [readOnly]="formValues.disableNotificationTimeOut"
                [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
                [attr.aria-describedby]="'notificationTimeOutHint'">
 

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -44,9 +44,8 @@ export class AccessibilitySettingsComponent implements OnInit {
     const convertedValues = this.settingsService.convertFormValuesToStoredValues(formValues);
     this.settingsService.setSettings(convertedValues).pipe(take(1)).subscribe(location => {
       this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.save-notification.' + location));
+      this.updateFormValues();
     });
-
-    this.updateFormValues();
   }
 
   /**

src/app/info/info.module.ts

@@ -14,6 +14,7 @@ import { ThemedFeedbackFormComponent } from './feedback/feedback-form/themed-fee
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
 import { FeedbackGuard } from '../core/feedback/feedback.guard';
 import { AccessibilitySettingsComponent } from './accessibility-settings/accessibility-settings.component';
+import { UiSwitchModule } from 'ngx-ui-switch';
 
 
 const DECLARATIONS = [
@@ -35,6 +36,7 @@ const DECLARATIONS = [
     CommonModule,
     SharedModule,
     InfoRoutingModule,
+    UiSwitchModule,
   ],
   declarations: [
     ...DECLARATIONS

src/assets/i18n/en.json5

@@ -1844,13 +1844,17 @@
 
   "info.accessibility-settings.breadcrumbs": "Accessibility settings",
 
+  "info.accessibility-settings.disableNotificationTimeOut.label": "Disable automatic notification hiding",
+
+  "info.accessibility-settings.disableNotificationTimeOut.hint": "When this toggle is activated, notifications will remain until manually closed.",
+
   "info.accessibility-settings.liveRegionTimeOut.label": "Live region time-out",
 
   "info.accessibility-settings.liveRegionTimeOut.hint": "The duration in seconds after which a message in the live region disappears.",
 
   "info.accessibility-settings.notificationTimeOut.label": "Notification time-out",
 
-  "info.accessibility-settings.notificationTimeOut.hint": "The duration in seconds after which a notification disappears. Set to 0 for notifications to remain indefinitely.",
+  "info.accessibility-settings.notificationTimeOut.hint": "The duration in seconds after which a notification disappears.",
 
   "info.accessibility-settings.save-notification.cookie": "Successfully saved settings locally.",