fix(cms): 3d placeholder vue component (#924)

shopware · May 13, 2024 · f6b194e · f6b194e
1 parent 4beeb8b
commit f6b194e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/.changeset/young-files-laugh.md b/.changeset/young-files-laugh.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": patch
+---
+
+Moved the svg 3d media placeholder to the vue component
diff --git a/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue b/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue
@@ -195,10 +195,8 @@ function next() {
               @click="() => changeCover(i)"
             >
               <div v-if="isSpatial(image.media)" class="h-full relative">
-                <img
+                <CmsElementImageGallery3dPlaceholder
                   class="w-full h-full object-center"
-                  src="~/assets/3d.svg"
-                  alt="3d object"
                 />
                 <span
                   class="absolute bottom-0 text-sm bg-gray rounded px-1 text-white"

diff --git a/packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue b/packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue
@@ -0,0 +1,53 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="552"
+    height="383"
+    viewBox="0 0 552 383"
+  >
+    <defs>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        opacity=".65"
+        id="icons-default-placeholder"
+      >
+        <rect
+          width="333.061"
+          height="499.591"
+          x="84.659"
+          y="-82.663"
+          fill="#E9EBF2"
+          fill-rule="nonzero"
+          transform="rotate(-89.862 251.19 167.132)"
+        ></rect>
+        <g transform="translate(51 49)">
+          <rect
+            width="333.06"
+            height="499.59"
+            x="83.983"
+            y="-83.234"
+            fill="#DADDE5"
+            fill-rule="nonzero"
+            transform="rotate(-90 250.513 166.561)"
+          ></rect>
+          <polygon
+            fill="#E9EBF2"
+            points="137.18 333.1 500.31 333.1 500.31 302.36 322.15 110.42"
+          ></polygon>
+          <circle cx="113.04" cy="65.68" r="35.9" fill="#F5F7FC"></circle>
+          <polygon
+            fill="#F5F7FC"
+            points="219.88 157.3 73.85 333.1 383.05 333.1"
+          ></polygon>
+        </g>
+      </g>
+    </defs>
+    <use
+      xlink:href="#icons-default-placeholder"
+      fill="#758CA3"
+      fill-rule="evenodd"
+    ></use>
+  </svg>
+</template>