PATCH: feat: add backgroundColor prop to bimdata-model-preview

bimdata · Aug 3, 2022 · f39a8fb · f39a8fb
1 parent dd5473a
commit f39a8fb
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue b/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue
@@ -2,7 +2,11 @@
   <component
     :is="previewComponent"
     class="bimdata-model-preview"
-    :style="{ width: `${width}px`, height: `${height}px` }"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      backgroundColor,
+    }"
     v-bind="$props"
   />
 </template>
@@ -36,6 +40,10 @@ export default {
     defaultUrl: {
       type: String,
     },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-silver-light)",
+    },
   },
   computed: {
     previewComponent() {

diff --git a/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue b/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue
@@ -82,7 +82,6 @@ export default {
 .preview-2d {
   position: relative;
   height: 100%;
-  background-color: var(--color-silver-light);
   user-select: none;
   overflow: hidden;
 

diff --git a/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue b/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue
@@ -55,7 +55,6 @@ export default {
 
 <style scoped lang="scss">
 .preview-3d {
-  background-color: var(--color-silver-light);
   user-select: none;
 
   .viewport {

diff --git a/src/web/views/Components/ModelPreview/ModelPreview.vue b/src/web/views/Components/ModelPreview/ModelPreview.vue
@@ -7,9 +7,10 @@
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataModelPreview
+            :type="type"
             :width="width"
             :height="height"
-            :type="type"
+            :backgroundColor="bgColor"
             :previewUrl="imgUrl"
           />
         </template>
@@ -34,6 +35,12 @@
             placeholder="Preview height (in px)"
             v-model="height"
           />
+          <BIMDataInput
+            margin="24px 0"
+            type="text"
+            placeholder="Background color"
+            v-model="bgColor"
+          />
         </template>
 
         <template #import>
@@ -47,6 +54,7 @@
               :type="{{ type }}"
               :width="{{ width }}"
               :height="{{ height }}"
+              :backgroundColor="{{ bgColor }}"
               :previewUrl="{{ imgUrl }}"
             /&gt;
           </pre>
@@ -90,9 +98,10 @@ export default {
   data() {
     return {
       // Parameters
+      type: "3d",
       width: 300,
       height: 300,
-      type: "3d",
+      bgColor: "var(--color-silver-light)",
       // Data
       propsData,
     };

diff --git a/src/web/views/Components/ModelPreview/props-data.js b/src/web/views/Components/ModelPreview/props-data.js
@@ -30,5 +30,11 @@ export default [
     "String",
     "",
     "Image that will be displayed if no preview url is provided"
+  ],
+  [
+    "backgroundColor",
+    "String",
+    "",
+    "Preview 'background-color' CSS property"
   ]
 ];