Fix more styles

ltouroumov · Nov 19, 2024 · 9943671 · 9943671
1 parent cad7951
commit 9943671
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 27 deletions.
diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue
@@ -240,10 +240,11 @@ const decrement = () => {
     }
   }
 
-  &.notSelectable {
-    border: none;
-    border-radius: 0;
-  }
+  // Why was this here?
+  // &.notSelectable {
+  //   border: none;
+  //   border-radius: 0;
+  // }
 
   .obj-image-wrapper {
     display: flex;

diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue
@@ -6,13 +6,13 @@
       :row-id="row.id"
     />
     <div class="project-row" :class="{ hidden: !isVisible }">
-      <div v-if="row.image || row.title || row.titleText" class="row-header">
-        <img
-          v-if="row.image"
-          class="row-image"
-          :src="row.image"
-          :alt="row.title"
-        />
+      <img
+        v-if="row.image"
+        class="row-image"
+        :src="row.image"
+        :alt="row.title"
+      />
+      <div v-if="row.title || row.titleText" class="row-header">
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="row.title"

diff --git a/components/viewer/style/StyleRow.vue b/components/viewer/style/StyleRow.vue
@@ -15,7 +15,7 @@ const { styles, rowId } = defineProps<{ styles: RowStyles; rowId: string }>();
 
 const generators = [
   new RowStylesGen({ container: `#row-${rowId}` }),
-  new ObjStylesGen(),
+  new ObjStylesGen({ container: `#row-${rowId}` }),
 ];
 const stylesheet = computed(() => {
   return createStyles(styles, generators);

diff --git a/components/viewer/style/engine.ts b/components/viewer/style/engine.ts
@@ -79,19 +79,19 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
   gen(styling: RowStyles): string {
     // Ugly Hack but the original format is cursed
     const computed = StyleUtils.applyTransforms(styling, {
-      objectBorderRadiusUnit: (styling) =>
-        styling.objectBorderRadiusIsPixels ? 'px' : '%',
-      objectBorderRadiusTopLeft: StyleUtils.parseBorderRadius(
-        'objectBorderRadiusTopLeft',
+      rowBorderRadiusUnit: (styling) =>
+        styling.rowBorderRadiusIsPixels ? 'px' : '%',
+      rowBorderRadiusTopLeft: StyleUtils.parseBorderRadius(
+        'rowBorderRadiusTopLeft',
       ),
-      objectBorderRadiusTopRight: StyleUtils.parseBorderRadius(
-        'objectBorderRadiusTopRight',
+      rowBorderRadiusTopRight: StyleUtils.parseBorderRadius(
+        'rowBorderRadiusTopRight',
       ),
-      objectBorderRadiusBottomLeft: StyleUtils.parseBorderRadius(
-        'objectBorderRadiusBottomLeft',
+      rowBorderRadiusBottomLeft: StyleUtils.parseBorderRadius(
+        'rowBorderRadiusBottomLeft',
       ),
-      objectBorderRadiusBottomRight: StyleUtils.parseBorderRadius(
-        'objectBorderRadiusBottomRight',
+      rowBorderRadiusBottomRight: StyleUtils.parseBorderRadius(
+        'rowBorderRadiusBottomRight',
       ),
     });
 
@@ -143,10 +143,10 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
         {{#if rowBorderIsOn}}
         border: {{rowBorderWidth}}px {{rowBorderStyle}} {{rowBorderColor}};
         
-        border-top-left-radius: {{objectBorderRadiusTopLeft}}{{objectBorderRadiusUnit}};
-        border-top-right-radius: {{objectBorderRadiusTopRight}}{{objectBorderRadiusUnit}};
-        border-bottom-left-radius: {{objectBorderRadiusBottomLeft}}{{objectBorderRadiusUnit}};
-        border-bottom-right-radius: {{objectBorderRadiusBottomRight}}{{objectBorderRadiusUnit}};
+        border-top-left-radius: {{rowBorderRadiusTopLeft}}{{rowBorderRadiusUnit}};
+        border-top-right-radius: {{rowBorderRadiusTopRight}}{{rowBorderRadiusUnit}};
+        border-bottom-left-radius: {{rowBorderRadiusBottomLeft}}{{rowBorderRadiusUnit}};
+        border-bottom-right-radius: {{rowBorderRadiusBottomRight}}{{rowBorderRadiusUnit}};
         {{else}}
         border: none;
         {{/if}}
@@ -160,7 +160,6 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
       {{#if rowOverFlowIsOn}}
       overflow: hidden;
       {{/if}}
-
     }
   `;
 }

diff --git a/composables/project.ts b/composables/project.ts
@@ -93,6 +93,11 @@ export type RowStyles = ObjStyles &
     rowBorderStyle: string;
     rowBorderWidth: number;
     rowOverFlowIsOn: boolean;
+    rowBorderRadiusTopLeft: string | number;
+    rowBorderRadiusTopRight: string | number;
+    rowBorderRadiusBottomRight: string | number;
+    rowBorderRadiusBottomLeft: string | number;
+    rowBorderRadiusIsPixels: boolean;
 
     rowImageMarginTop: number;
     rowImageMarginBottom: number;