From 774782a77801e00573ed41074a79689081c44a00 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 10 Apr 2024 09:16:00 +0300
Subject: [PATCH] Refactored Image

---
 components/lib/image/Image.vue                |  2 +-
 components/lib/image/style/ImageStyle.js      | 16 +++++++-------
 .../lib/themes/primeone/base/image/index.js   | 21 ++++++++++++-------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index dbce7f2d5..00545a2f5 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -41,7 +41,7 @@
                         </slot>
                     </button>
                 </div>
-                <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
+                <transition name="p-image-original" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
                     <div v-if="previewVisible" v-bind="ptm('previewContainer')">
                         <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick" :previewCallback="onPreviewImageClick">
                             <img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js
index 746577174..9058356f4 100644
--- a/components/lib/image/style/ImageStyle.js
+++ b/components/lib/image/style/ImageStyle.js
@@ -4,30 +4,30 @@ const classes = {
     root: ({ props }) => [
         'p-image p-component',
         {
-            'p-image-preview-container': props.preview
+            'p-image-preview': props.preview
         }
     ],
     image: ({ props }) => props.image,
-    button: 'p-image-preview-indicator',
+    button: 'p-image-preview-mask',
     icon: 'p-image-preview-icon',
     mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
     toolbar: 'p-image-toolbar',
-    rotateRightButton: 'p-image-action p-link',
-    rotateLeftButton: 'p-image-action p-link',
+    rotateRightButton: 'p-image-action p-image-rotate-right-button',
+    rotateLeftButton: 'p-image-action p-image-rotate-left-button',
     zoomOutButton: ({ instance }) => [
-        'p-image-action p-link',
+        'p-image-action p-image-zoom-out-button',
         {
             'p-disabled': instance.isZoomOutDisabled
         }
     ],
     zoomInButton: ({ instance }) => [
-        'p-image-action p-link',
+        'p-image-action p-image-zoom-in-button',
         {
             'p-disabled': instance.isZoomInDisabled
         }
     ],
-    closeButton: 'p-image-action p-link',
-    preview: 'p-image-preview'
+    closeButton: 'p-image-action p-image-close-button',
+    preview: 'p-image-original'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/image/index.js b/components/lib/themes/primeone/base/image/index.js
index 9c694af1c..28d09116e 100644
--- a/components/lib/themes/primeone/base/image/index.js
+++ b/components/lib/themes/primeone/base/image/index.js
@@ -7,13 +7,13 @@ export default {
     --p-mask-background: ${dt('image.mask.background')};
 }
 
-.p-image-preview-container {
+.p-image-preview {
     position: relative;
     display: inline-flex;
     line-height: 0;
 }
 
-.p-image-preview-indicator {
+.p-image-preview-mask {
     position: absolute;
     left: 0;
     top: 0;
@@ -32,7 +32,7 @@ export default {
     transition: background-color ${dt('transition.duration')};
 }
 
-.p-image-preview-container:hover > .p-image-preview-indicator {
+.p-image-preview:hover > .p-image-preview-mask {
     opacity: 1;
     cursor: pointer;
     background: ${dt('image.preview.indicator.background')};
@@ -60,6 +60,11 @@ export default {
     color: ${dt('image.action.color')};
     background: transparent;
     width: 3rem;
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+    cursor: pointer;
+    user-select: none;
     height: 3rem;
     border-radius: 50%;
     outline-color: transparent;
@@ -86,22 +91,22 @@ export default {
     pointer-events: auto;
 }
 
-.p-image-preview {
+.p-image-original {
     transition: transform 0.15s;
     max-width: 100vw;
     max-height: 100vh;
 }
 
-.p-image-preview-enter-active {
+.p-image-original-enter-active {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.p-image-preview-leave-active {
+.p-image-original-leave-active {
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.p-image-preview-enter-from,
-.p-image-preview-leave-to {
+.p-image-original-enter-from,
+.p-image-original-leave-to {
     opacity: 0;
     transform: scale(0.7);
 }