feat: ✨ add conf for apply bg image or color

README.md

@@ -168,3 +168,13 @@ bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+###NB
+
+## Showroom BO preview (duplicated code)
+
+/!\ The display code of this project is duplicated in `showroom-bo`, in `resources/expo/`
+(used by the BO preview).
+
+If you change a **template**, a **style** or a **component** here, report **the same change in the BO**,
+otherwise the preview will no longer match the application.

app.vue

@@ -1,6 +1,8 @@
 <template>
   <div
     class="app-component"
+    :class="{ 'has-custom-background': Object.keys(backgroundStyle).length > 0 }"
+    :style="backgroundStyle"
     @mousemove="setTimeout"
     @mousedown="setTimeout"
     @mouseup="setTimeout"
@@ -46,6 +48,7 @@ export default defineComponent({
     activeRange: TypeRange|null;
     chickenRun: boolean;
     konami: KonamiCode|null;
+    backgroundStyle: Record<string, string>;
   } {
     return {
       timeout: undefined,
@@ -55,6 +58,7 @@ export default defineComponent({
       activeRange: null,
       chickenRun: false,
       konami: null,
+      backgroundStyle: {},
     };
   },
   computed: {
@@ -83,6 +87,7 @@ export default defineComponent({
     // * INIT STATES
     window.ipcRendererObject.getJsonData().then((dataJson) => {
       useAppStore().setupAppData(dataJson, this.$i18n.locale, String(this.$i18n.fallbackLocale));
+      this.backgroundStyle = this.buildBackgroundStyle(dataJson.settings);
       this.loading = false;
       this.setTimeout();
       dataJson.fonts.forEach(font => this.injectFontFace(font.font_name, font.font));
@@ -143,6 +148,21 @@ export default defineComponent({
         }, useAppStore().getSettings().home_timeout * 1000);
       });
     },
+    /** Fond de la borne : image en prio si elle existe, couleur sinon */
+    buildBackgroundStyle(settings: TypeSettings): Record<string, string> {
+      const style: Record<string, string> = {};
+      if (settings.background_color) {
+        style.backgroundColor = settings.background_color;
+      }
+      if (settings.background_image) {
+        style.backgroundImage = `url("/data/${settings.background_image}")`;
+        style.backgroundSize = "cover";
+        style.backgroundPosition = "center";
+        style.backgroundRepeat = "no-repeat";
+        style.backgroundAttachment = "fixed";
+      }
+      return style;
+    },
   }
 });
 </script>
@@ -162,4 +182,22 @@ export default defineComponent({
   opacity: 0;
   filter: blur(1rem);
 }
+.app-component.has-custom-background {
+  min-height: 100vh;
+
+  .text-bg-light {
+    background-color: transparent !important;
+  }
+  // remove border 
+  #product-list-component {
+    .btn.bg-body {
+      background-color: transparent !important;
+    }
+
+    .img-thumbnail {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+}
 </style>

index.d.ts

@@ -31,6 +31,10 @@ type SettingsModel = {
     logo: string;
     /** Couleur de l'application (hex color) */
     color: string;
+    /** Couleur de fond de toutes les pages de la borne (hex color, optionnelle) */
+    background_color?: string | null;
+    /** Image de fond de toutes les pages de la borne (optionnelle), chemin tel que présent dans le zip */
+    background_image?: string | null;
     /** Temps en secondes avant retour sur la page home lorsque inactif */
     home_timeout: number;
     created_at: string;

public/schemas/settings.schema.json

@@ -48,6 +48,20 @@
             "description": "Couleur de l'application",
             "$ref": "#/$defs/hexcolor"
         },
+        "background_color": {
+            "description": "Couleur de fond de toutes les pages de la borne",
+            "anyOf": [
+                { "$ref": "#/$defs/hexcolor" },
+                { "type": "null" }
+            ]
+        },
+        "background_image": {
+            "description": "Image de fond de toutes les pages de la borne",
+            "anyOf": [
+                { "type": "string" },
+                { "type": "null" }
+            ]
+        },
         "home_timeout": {
             "description": "Temps en secondes avant retour sur la page home lorsque inactif",
             "type": "integer",