Skeleton for dynamic styles

components/utils/DynamicStyles.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { stylesheet } = defineProps<{ stylesheet: string }>();
+</script>
+
+<template>
+  <component :is="'style'" v-html="stylesheet" />
+</template>

components/viewer/StyleObj.vue

@@ -0,0 +1,25 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { RowStyles } from '~/composables/project';
+
+const { styles, objId } = defineProps<{ styles: RowStyles; objId: string }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+
+  // TODO: Wire the right props here
+  if (styles.rowBgColorIsOn) {
+    parts.push(`&.project-obj { background-color: ${styles.rowBgColor}; }`);
+  }
+
+  if (parts.length > 0) {
+    return `#obj-${objId} { ${parts.join('\n')} }`;
+  } else {
+    return '';
+  }
+});
+</script>

components/viewer/StyleProject.vue

@@ -0,0 +1,16 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { ProjectStyles } from '~/composables/project';
+
+const { styles } = defineProps<{ styles: ProjectStyles }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+  parts.push(`.project { background-color: ${styles.backgroundColor}; }`);
+  return parts.join('\n');
+});
+</script>

components/viewer/StyleRow.vue

@@ -0,0 +1,23 @@
+<template>
+  <DynamicStyles :stylesheet="stylesheet" />
+</template>
+
+<script setup lang="ts">
+import DynamicStyles from '~/components/utils/DynamicStyles.vue';
+import { RowStyles } from '~/composables/project';
+
+const { styles, rowId } = defineProps<{ styles: RowStyles; rowId: string }>();
+
+const stylesheet = computed(() => {
+  const parts = [];
+  if (styles.rowBgColorIsOn) {
+    parts.push(`.project-row { background-color: ${styles.rowBgColor}; }`);
+  }
+
+  if (parts.length > 0) {
+    return `#row-${rowId} { ${parts.join('\n')} }`;
+  } else {
+    return '';
+  }
+});
+</script>

components/viewer/ViewProjectRow.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="project-row-wrapper">
+  <div :id="`row-${row.id}`" class="project-row-wrapper">
+    <StyleRow
+      v-if="row.isPrivateStyling"
+      :styles="row.styling"
+      :row-id="row.id"
+    />
     <div :class="{ 'project-row': true, hidden: !isVisible }">
       <div class="row-meta">
         <div class="row-title">{{ row.title }}</div>
@@ -28,6 +33,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import StyleRow from '~/components/viewer/StyleRow.vue';
 import { buildConditions } from '~/composables/conditions';
 import { ProjectRow } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';

composables/project.ts

@@ -1,3 +1,32 @@
+export type AddonStyles = {
+  addonTitle: string;
+  addonText: string;
+};
+
+export type ObjStyles = {
+  objectTitle: string;
+  objectText: string;
+};
+
+export type RowStyles = ObjStyles &
+  AddonStyles & {
+    rowTitle: string;
+    rowText: string;
+    rowTitleColor: string;
+    rowTextColor: string;
+    rowBgColor: string;
+    rowBgColorIsOn: boolean;
+  };
+
+export type BarStyles = {
+  barTextFont: string;
+};
+
+export type ProjectStyles = RowStyles &
+  BarStyles & {
+    backgroundColor: string;
+  };
+
 export type ConditionTerm = {
   reqId: string;
   reqId1: string;
@@ -50,6 +79,9 @@ export type ProjectObj = HasId &
     isNotSelectable: boolean;
     numMultipleTimesMinus: string;
     numMultipleTimesPluss: string;
+
+    isPrivateStyling: boolean;
+    styling: ObjStyles;
   };
 
 export type ProjectRow = HasId &
@@ -66,6 +98,9 @@ export type ProjectRow = HasId &
     isInfoRow: boolean;
 
     objects: ProjectObj[];
+
+    isPrivateStyling: boolean;
+    styling: RowStyles;
   };
 
 export type PointType = {
@@ -81,6 +116,7 @@ export type Project = {
   rows: ProjectRow[];
   backpack: ProjectRow[];
   pointTypes: PointType[];
+  styling: ProjectStyles;
 };
 
 export type ProjectFile = {

pages/index.vue

@@ -10,6 +10,7 @@
         />
       </div>
     </div>
+    <StyleProject :styles="project.data.styling" />
     <ViewBackpack />
     <ViewSearch />
   </div>
@@ -47,6 +48,7 @@
 import { ref } from '#imports';
 import ViewBackpack from '~/components/viewer/modal/ViewBackpack.vue';
 import ViewSearch from '~/components/viewer/modal/ViewSearch.vue';
+import StyleProject from '~/components/viewer/StyleProject.vue';
 import ViewMenuBar from '~/components/viewer/ViewMenuBar.vue';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 
@@ -69,9 +71,6 @@ const loadRemoteFile = async ({ target }: MouseEvent) => {
 
 <style lang="scss">
 .project {
-  background: black;
-  color: white;
-
   font-family: sans-serif;
   padding: 0 1em;
 }