tmp: settings for header styling

OpenVAA · Oct 20, 2024 · 16abbfe · 16abbfe
1 parent 84cb7a9
commit 16abbfe
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 49 deletions.
diff --git a/backend/vaa-strapi/src/api/app-setting/content-types/app-setting/schema.json b/backend/vaa-strapi/src/api/app-setting/content-types/app-setting/schema.json
@@ -66,6 +66,11 @@
       "repeatable": false,
       "component": "settings.entities",
       "required": true
+    },
+    "headerStyle": {
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style"
     }
   }
 }
diff --git a/backend/vaa-strapi/src/components/settings/header-style-dark.json b/backend/vaa-strapi/src/components/settings/header-style-dark.json
@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_settings_header_style_darks",
+  "info": {
+    "displayName": "Header Style - Dark"
+  },
+  "options": {},
+  "attributes": {
+    "bgColor": {
+      "type": "string"
+    },
+    "overImgBgColor": {
+      "type": "string"
+    }
+  }
+}
diff --git a/backend/vaa-strapi/src/components/settings/header-style-light.json b/backend/vaa-strapi/src/components/settings/header-style-light.json
@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_settings_header_style_lights",
+  "info": {
+    "displayName": "Header Style - Light"
+  },
+  "options": {},
+  "attributes": {
+    "bgColor": {
+      "type": "string"
+    },
+    "overImgBgColor": {
+      "type": "string"
+    }
+  }
+}
diff --git a/backend/vaa-strapi/src/components/settings/header-style.json b/backend/vaa-strapi/src/components/settings/header-style.json
@@ -0,0 +1,27 @@
+{
+  "collectionName": "components_settings_header_styles",
+  "info": {
+    "displayName": "Header Style"
+  },
+  "options": {},
+  "attributes": {
+    "dark": {
+      "displayName": "Header Style - Dark",
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style-dark"
+    },
+    "light": {
+      "displayName": "Header Style - Light",
+      "type": "component",
+      "repeatable": false,
+      "component": "settings.header-style-light"
+    },
+    "imgSize": {
+      "type": "string"
+    },
+    "imgPosition": {
+      "type": "string"
+    }
+  }
+}
diff --git a/backend/vaa-strapi/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/vaa-strapi/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2024-10-08T10:22:54.399Z"
+    "x-generation-date": "2024-10-20T07:50:50.713Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -3948,6 +3948,9 @@
           "entities": {
             "$ref": "#/components/schemas/SettingsEntitiesComponent"
           },
+          "headerStyle": {
+            "$ref": "#/components/schemas/SettingsHeaderStyleComponent"
+          },
           "createdAt": {
             "type": "string",
             "format": "date-time"
@@ -4497,6 +4500,48 @@
           }
         }
       },
+      "SettingsHeaderStyleComponent": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "number"
+          },
+          "dark": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "number"
+              },
+              "bgColor": {
+                "type": "string"
+              },
+              "overImgBgColor": {
+                "type": "string"
+              }
+            }
+          },
+          "light": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "number"
+              },
+              "bgColor": {
+                "type": "string"
+              },
+              "overImgBgColor": {
+                "type": "string"
+              }
+            }
+          },
+          "imgSize": {
+            "type": "string"
+          },
+          "imgPosition": {
+            "type": "string"
+          }
+        }
+      },
       "CandidateRequest": {
         "type": "object",
         "required": [

diff --git a/frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts b/frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.ts
@@ -85,16 +85,18 @@ function getData<T extends object>(
  */
 function getAppSettings(): Promise<Partial<AppSettings> | undefined> {
   const params = new URLSearchParams({
-    'populate[header]': 'true',
-    'populate[matching]': 'true',
-    'populate[survey]': 'true',
     'populate[entities][populate][hideIfMissingAnswers]': 'true',
     'populate[entityDetails][populate][contents]': 'true',
-    'populate[entityDetails][populate][showMissingElectionSymbol]': 'true',
     'populate[entityDetails][populate][showMissingAnswers]': 'true',
+    'populate[entityDetails][populate][showMissingElectionSymbol]': 'true',
+    'populate[header]': 'true',
+    'populate[headerStyle][populate][dark]': 'true',
+    'populate[headerStyle][populate][light]': 'true',
+    'populate[matching]': 'true',
     'populate[questions][populate][categoryIntros]': 'true',
     'populate[questions][populate][questionsIntro]': 'true',
-    'populate[results][populate][cardContents]': 'true'
+    'populate[results][populate][cardContents]': 'true',
+    'populate[survey]': 'true'
   });
   return getData<StrapiAppSettingsData[]>('api/app-settings', params)
     .then((result) => {

diff --git a/frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.type.ts b/frontend/src/lib/api/dataProvider/strapi/strapiDataProvider.type.ts
@@ -86,18 +86,18 @@ export interface StrapiAppSettingsData {
     header?: {
       showFeedback: boolean;
       showHelp: boolean;
-      topBar: {
-        dark: {
-          bgColor?: string;
-          overImgBgColor?: string;
-        };
-        light: {
-          bgColor?: string;
-          overImgBgColor?: string;
-        };
-        imgSize?: string;
-        imagePosition?: string;
+    };
+    headerStyle?: {
+      dark: {
+        bgColor?: string;
+        overImgBgColor?: string;
+      };
+      light: {
+        bgColor?: string;
+        overImgBgColor?: string;
       };
+      imgSize?: string;
+      imgPosition?: string;
     };
     matching?: {
       minimumAnswers: number;

diff --git a/frontend/src/routes/[[lang=locale]]/(voters)/Header.svelte b/frontend/src/routes/[[lang=locale]]/(voters)/Header.svelte
@@ -28,14 +28,13 @@
 
   const topBar = getTopBarContext();
 
-  const topBarAppSettings = $settings.header.topBar;
-  const topBarNoImgBgColor = $darkMode
-    ? topBarAppSettings.dark.bgColor
-    : topBarAppSettings.light.bgColor;
-  const topBarOverImgBgColor = $darkMode
-    ? topBarAppSettings.dark.overImgBgColor
-    : topBarAppSettings.light.overImgBgColor;
-  const topBarBgColor = $topBar.imageSrc ? topBarOverImgBgColor : topBarNoImgBgColor;
+  const topBarAppSettings = $settings.headerStyle;
+
+  let bgColor: string | undefined;
+  $: {
+    const mode = $darkMode ? topBarAppSettings.dark : topBarAppSettings.light;
+    bgColor = $topBar.imageSrc ? mode.overImgBgColor : mode.bgColor;
+  }
 
   const progress = getTopBarProgressContext();
   const currentProgress = progress.current;
@@ -49,7 +48,7 @@
   class:top-bar={!$topBar.imageSrc}
   style:--image={$topBar.imageSrc && `url(${$topBar.imageSrc})`}
   style:--background-size={$topBar.imageSrc && topBarAppSettings.imgSize}
-  style:--background-position={$topBar.imageSrc && topBarAppSettings.imagePosition}>
+  style:--background-position={$topBar.imageSrc && topBarAppSettings.imgPosition}>
   {#if !$topBar.hideProgressBar}
     <progress
       class="progress progress-primary absolute left-0 top-0 h-2"
@@ -59,7 +58,7 @@
   {/if}
   <div
     class="inner-actions-bar flex w-full items-center justify-between pr-6"
-    style:--background-color={topBarBgColor}>
+    style:--background-color={bgColor}>
     <button
       on:click={openDrawer}
       bind:this={drawerOpenElement}

diff --git a/shared/src/settings/dynamicSettings.ts b/shared/src/settings/dynamicSettings.ts
@@ -18,16 +18,16 @@ export const dynamicSettings: DynamicSettings = {
   header: {
     showFeedback: true,
     showHelp: true,
-    topBar: {
-      dark: {
-        overImgBgColor: "transparent"
-      },
-      light: {
-        overImgBgColor: "transparent",
-      },
-      imgSize: "cover",
-      imagePosition: "center"
-    }
+  },
+  headerStyle: {
+    dark: {
+      overImgBgColor: "transparent"
+    },
+    light: {
+      overImgBgColor: "transparent",
+    },
+    imgSize: "cover",
+    imgPosition: "center"
   },
   entities: {
     hideIfMissingAnswers: {

diff --git a/shared/src/settings/settings.type.ts b/shared/src/settings/settings.type.ts
@@ -190,19 +190,19 @@ export type DynamicSettings = {
      * Whether to show the help icon by default in the header.
      */
     showHelp: boolean;
-    topBar: {
-      dark: {
-        bgColor?: string;
-        overImgBgColor?: string;
-      },
-      light: {
-        bgColor?: string;
-        overImgBgColor?: string;
-      }
-      imgSize?: string;
-      imagePosition?: string;
-    }
   };
+  headerStyle: {
+    dark: {
+      bgColor?: string;
+      overImgBgColor?: string;
+    },
+    light: {
+      bgColor?: string;
+      overImgBgColor?: string;
+    }
+    imgSize?: string;
+    imgPosition?: string;
+  }
   /**
    * Settings controlling which entities are shown in the app.
    */