Adds button to deactivate low contrast warnings

studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx

@@ -6,6 +6,8 @@ import {debounce} from '@deckdeckgo/utils';
 
 import i18n from '../../../../stores/i18n.store';
 
+import settingsStore from '../../../../stores/settings.store';
+
 import {ContrastUtils} from '../../../../utils/editor/contrast.utils';
 import {NodeUtils} from '../../../../utils/editor/node.utils';
 import {SlotUtils} from '../../../../utils/editor/slot.utils';
@@ -203,7 +205,7 @@ export class AppSlideWarning {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-slide-warning-info',
       componentProps: {
-        lowContrast: this.warningLowContrast,
+        lowContrast: settingsStore.state.contrastWarning && this.warningLowContrast,
         overflow: this.warningOverflow,
       },
       event: $event,
@@ -218,7 +220,7 @@ export class AppSlideWarning {
     return (
       <Host
         class={{
-          warning: this.warningLowContrast || this.warningOverflow,
+          warning: (settingsStore.state.contrastWarning && this.warningLowContrast) || this.warningOverflow,
         }}>
         <button class="ion-activatable" onClick={($event: UIEvent) => this.openInformation($event)}>
           <ion-ripple-effect></ion-ripple-effect>
@@ -230,13 +232,13 @@ export class AppSlideWarning {
   }
 
   private renderMsg() {
-    if (this.warningLowContrast && this.warningOverflow) {
+    if (settingsStore.state.contrastWarning && this.warningLowContrast && this.warningOverflow) {
       return (
         <ion-label>
           {i18n.state.warning.low_contrast} + {i18n.state.warning.overflow}
         </ion-label>
       );
-    } else if (this.warningLowContrast) {
+    } else if (settingsStore.state.contrastWarning && this.warningLowContrast) {
       return <ion-label>{i18n.state.warning.low_contrast}</ion-label>;
     } else if (this.warningOverflow) {
       return <ion-label>{i18n.state.warning.overflow}</ion-label>;

studio/src/app/definitions/i18.d.ts

@@ -99,6 +99,10 @@ interface I18nSettings {
   contribute_community: string;
   contact: string;
   add_a_template: string;
+  deactivate_contrast_warning: string;
+  contrast_warning: string;
+  contrast_warning_active: string;
+  contrast_warning_inactive: string;
 }
 
 interface I18nDashboard {

studio/src/app/pages/core/settings/app-customization/app-customization.tsx

@@ -17,6 +17,8 @@ export class AppCustomization {
 
   private editMode: EditMode = settingsStore.state.editMode;
 
+  private contrastWarning = settingsStore.state.contrastWarning;
+
   constructor() {
     this.themeService = ThemeService.getInstance();
   }
@@ -33,6 +35,10 @@ export class AppCustomization {
     i18n.state.lang = $event.detail.value;
   }
 
+  private toggleContrastWarning() {
+    settingsStore.state.contrastWarning = !settingsStore.state.contrastWarning;
+  }
+
   render() {
     return [
       <app-navigation></app-navigation>,
@@ -46,6 +52,8 @@ export class AppCustomization {
             {this.renderLang()}
 
             {this.renderEditMode()}
+
+            {this.renderContrastWarning()}
           </ion-list>
         </main>
       </ion-content>,
@@ -100,4 +108,23 @@ export class AppCustomization {
       </ion-item>
     );
   }
+
+  private renderContrastWarning() {
+    return (
+      <ion-item>
+        <ion-label>{i18n.state.settings.contrast_warning}</ion-label>
+
+        <ion-select
+          slot="end"
+          value={this.contrastWarning ? "on" : "off"}
+          onIonChange={() => this.toggleContrastWarning()}
+          interface="popover"
+          mode="md"
+          class="ion-padding-start ion-padding-end">
+          <ion-select-option value="on">{i18n.state.settings.contrast_warning_active}</ion-select-option>
+          <ion-select-option value="off">{i18n.state.settings.contrast_warning_inactive}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    );
+  }
 }

studio/src/app/popovers/editor/app-slide-warning-info/app-slide-warning-info.tsx

@@ -3,6 +3,8 @@ import {Component, Element, Fragment, h, Prop} from '@stencil/core';
 import i18n from '../../../stores/i18n.store';
 import {renderI18n} from '../../../utils/core/i18n.utils';
 
+import settingsStore from '../../../stores/settings.store';
+
 @Component({
   tag: 'app-slide-warning-info',
 })
@@ -70,6 +72,17 @@ export class AppSlideWarningInfo {
         </p>
 
         <p>{i18n.state.warning.note}</p>
+        <div class="ion-text-center">
+          <ion-button
+            size="small"
+            shape="round"
+            color="warning"
+            onClick={() => {
+              (settingsStore.state.contrastWarning = false), this.closePopover();
+            }}>
+            {i18n.state.settings.deactivate_contrast_warning}
+          </ion-button>
+        </div>
       </Fragment>
     );
   }

studio/src/app/services/settings/settings.service.ts

@@ -27,8 +27,10 @@ export class SettingsService {
       }
 
       const edit: EditMode | null = await get<EditMode>('deckdeckgo_settings_edit_mode');
+      const contrastWarning: boolean | null = await get<boolean>('deckdeckgo_settings_contrast_warning');
 
       settingsStore.state.editMode = edit ?? 'properties';
+      settingsStore.state.contrastWarning = contrastWarning ?? true;
     } catch (err) {
       console.warn(`Couldn't find settings for panels. Proceeding with default`);
     }

studio/src/app/stores/settings.store.ts

@@ -18,6 +18,7 @@ const {state, onChange} = createStore<Settings>({
     list: 'open',
   },
   editMode: 'properties',
+  contrastWarning: true,
 });
 
 onChange('panels', (panels: SettingsPanels) => {
@@ -32,4 +33,10 @@ onChange('editMode', (mode: EditMode) => {
   });
 });
 
+onChange('contrastWarning', (warningState) => {
+  set('deckdeckgo_settings_contrast_warning', warningState).catch((err) => {
+    console.error('Failed to update IDB with new edit mode', err);
+  });
+});
+
 export default {state, onChange};

studio/src/app/types/core/settings.ts

@@ -18,4 +18,5 @@ export interface SettingsPanels {
 export interface Settings {
   panels: SettingsPanels;
   editMode: EditMode;
+  contrastWarning: boolean;
 }

studio/src/assets/i18n/de.json

@@ -93,7 +93,11 @@
     "custom_logo": "Benutzerdefiniertes Logo",
     "contribute_community": "Möchtest du zur Community beitragen? {0} uns um eine Vorlage zu teilen.",
     "contact": "Kontakt",
-    "add_a_template": "Füge eine Vorlage hinzu"
+    "add_a_template": "Füge eine Vorlage hinzu",
+    "deactivate_contrast_warning": "Deaktiviere Kontrast-Warnungen",
+    "contrast_warning": "Kontrast-Warnung",
+    "contrast_warning_active": "Ein",
+    "contrast_warning_inactive": "Aus"
   },
   "dashboard": {
     "welcome": "Willkommen bei DeckDeckGo 👋",

studio/src/assets/i18n/en.json

@@ -93,7 +93,11 @@
     "custom_logo": "Custom logo",
     "contribute_community": "Do you want to contribute to the community? {0} us to share a template.",
     "contact": "Contact",
-    "add_a_template": "Add a template"
+    "add_a_template": "Add a template",
+    "deactivate_contrast_warning": "Deactivate low contrast warnings",
+    "contrast_warning": "Contrast warning",
+    "contrast_warning_active": "on",
+    "contrast_warning_inactive": "off"
   },
   "dashboard": {
     "welcome": "Welcome to DeckDeckGo 👋",

studio/src/assets/i18n/es.json

@@ -93,7 +93,11 @@
     "custom_logo": "Logotipo personalizado",
     "contribute_community": "¿Quieres contribuir a la comunidad? {0} para compartir una plantilla.",
     "contact": "Contactar",
-    "add_a_template": "Añadir una plantilla"
+    "add_a_template": "Añadir una plantilla",
+    "deactivate_contrast_warning": "Desactive la advertencia de contraste",
+    "contrast_warning": "Advertencia de contraste",
+    "contrast_warning_active": "encendido",
+    "contrast_warning_inactive": "apagado"
   },
   "dashboard": {
     "welcome": "Bienvenido a DeckDeckGo 👋",