Fix row border styles

ltouroumov · Nov 19, 2024 · d1208f3 · d1208f3
1 parent 60b9a94
commit d1208f3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue
@@ -6,15 +6,15 @@
       :row-id="row.id"
     />
     <div class="project-row" :class="{ hidden: !isVisible }">
-      <img
-        v-if="row.image"
-        class="row-image"
-        :src="row.image"
-        :alt="row.title"
-      />
-      <div class="row-body">
-        <div class="row-title">{{ row.title }}</div>
+      <div class="row-header">
+        <img
+          v-if="row.image"
+          class="row-image"
+          :src="row.image"
+          :alt="row.title"
+        />
         <!-- eslint-disable vue/no-v-html -->
+        <div class="row-title" v-html="formatText(row.title)" />
         <div
           v-if="row.titleText"
           class="row-text"

diff --git a/components/viewer/style/engine.ts b/components/viewer/style/engine.ts
@@ -77,7 +77,25 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
   }
 
   gen(styling: RowStyles): string {
-    const styles = this._template(styling);
+    // Ugly Hack but the original format is cursed
+    const computed = StyleUtils.applyTransforms(styling, {
+      objectBorderRadiusUnit: (styling) =>
+        styling.objectBorderRadiusIsPixels ? 'px' : '%',
+      objectBorderRadiusTopLeft: StyleUtils.parseBorderRadius(
+        'objectBorderRadiusTopLeft',
+      ),
+      objectBorderRadiusTopRight: StyleUtils.parseBorderRadius(
+        'objectBorderRadiusTopRight',
+      ),
+      objectBorderRadiusBottomLeft: StyleUtils.parseBorderRadius(
+        'objectBorderRadiusBottomLeft',
+      ),
+      objectBorderRadiusBottomRight: StyleUtils.parseBorderRadius(
+        'objectBorderRadiusBottomRight',
+      ),
+    });
+
+    const styles = this._template(computed);
     if (this._options.container) {
       return `${this._options.container} { ${styles} }`;
     } else {
@@ -117,9 +135,20 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
         border: {{rowImgBorderWidth}}px {{rowImgBorderStyle}} {{rowImgBorderColor}};
         {{/if}}
       }
-      .row-body {
+      .row-header {
         margin-left: {{rowMargin}}%;
         margin-right: {{rowMargin}}%;
+        
+        {{#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}};
+        {{else}}
+        border: none;
+        {{/if}}
       }
 
       margin-top: {{rowBodyMarginTop}}px;
@@ -131,9 +160,6 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
       overflow: hidden;
       {{/if}}
 
-      {{#if rowBorderIsOn}}
-      border: {{rowBorderWidth}}px {{rowBorderStyle}} {{rowBorderColor}};
-      {{/if}}
     }
   `;
 }