From 4eeead208404edf45e319acac677c23a29df6a03 Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Wed, 8 Jan 2025 17:18:58 +0900
Subject: [PATCH] Refactor: changing resizer line to fatter when it hoverd
 (#5458)

* refactor: changing resizer line to fatter when it hoverd

Signed-off-by: daeyeon ko <rowan@megazone.com>

* refactor: modify the rendering position of the controller of the PVerticalLayout

Signed-off-by: daeyeon ko <rowan@megazone.com>

* chore: chore

Signed-off-by: daeyeon ko <rowan@megazone.com>

* style: style

Signed-off-by: daeyeon ko <rowan@megazone.com>

---------

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../vertical-layout/PVerticalLayout.vue       | 182 ++++++++++--------
 1 file changed, 102 insertions(+), 80 deletions(-)

diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index b1aec14be0..c831844c26 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -60,7 +60,11 @@ const state = reactive({
     })),
     resizerStyle: computed(() => ({
         left: `${state.width}px`,
-        'border-left-width': state.hide ? 0 : '1px',
+        width: 'fit-content',
+    })),
+    resizerLineStyle: computed(() => ({
+    // eslint-disable-next-line no-nested-ternary
+        width: state.hide ? 0 : state.isHover ? '2px' : '1px',
     })),
     mainStyle: computed(() => ({
         width: state.isMobileSize ? '100%' : `calc( 100% - ${state.width}px )`,
@@ -167,7 +171,6 @@ documentEventMount('resize', detectWindowResizing);
 onBeforeMount(() => {
     detectWindowResizing();
 });
-
 </script>
 
 <template>
@@ -188,7 +191,7 @@ onBeforeMount(() => {
                 />
             </div>
         </div>
-        <div class="resizer-container line"
+        <div class="resizer-container"
              :class="{transition: state.transition, hover: state.isHover}"
              :style="state.resizerStyle"
              @mousedown="startResizing"
@@ -197,28 +200,37 @@ onBeforeMount(() => {
              @mouseenter="state.isHover = true"
              @mouseleave="state.isHover = false"
         >
-            <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
-                       position="right"
-                       :class="{hide: state.hide}"
-                       class="resizer"
-                       @click="handleSidebarToggle"
+            <div class="resizer-content"
+                 :class="{hover: state.isHover}"
             >
-                <span class="resizer-button">
-                    <slot name="resizer-button">
-                        <p-i width="1.5rem"
-                             height="1.5rem"
-                             :name="state.hide ? 'ic_chevron-right' : 'ic_chevron-left'"
-                             color="inherit"
-                        />
-                    </slot>
-                </span>
-            </p-tooltip>
-            <div
-                v-if="enableDoubleClickResize"
-                class="controller"
-                :class="{hover: state.isHover && !state.hide}"
-                @dblclick="handleControllerDoubleClick"
-            />
+                <div class="line"
+                     :class="{hover: state.isHover}"
+                     :style="state.resizerLineStyle"
+                >
+                    <div
+                        v-if="enableDoubleClickResize"
+                        class="controller"
+                        :class="{hover: state.isHover && !state.hide}"
+                        @dblclick="handleControllerDoubleClick"
+                    />
+                </div>
+                <p-tooltip :contents="state.hide ? $t('COMPONENT.VERTICAL_LAYOUT.EXPAND') : $t('COMPONENT.VERTICAL_LAYOUT.COLLAPSE')"
+                           position="right"
+                           :class="{hide: state.hide}"
+                           class="resizer"
+                           @click="handleSidebarToggle"
+                >
+                    <span class="resizer-button">
+                        <slot name="resizer-button">
+                            <p-i width="1.5rem"
+                                 height="1.5rem"
+                                 :name="state.hide ? 'ic_chevron-right' : 'ic_chevron-left'"
+                                 color="inherit"
+                            />
+                        </slot>
+                    </span>
+                </p-tooltip>
+            </div>
         </div>
         <div
             class="main"
@@ -250,7 +262,6 @@ onBeforeMount(() => {
         flex-direction: column;
         justify-content: stretch;
 
-        /* flex-grow: 1; */
         overflow-x: hidden;
         overflow-y: auto;
         &.transition {
@@ -258,72 +269,83 @@ onBeforeMount(() => {
         }
     }
     > .resizer-container {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
         position: absolute;
         top: 0;
         height: 100%;
         width: 0;
         z-index: 1;
-        &.transition {
-            transition: left 0.2s;
-        }
-        &.line {
-            @apply border-gray-200;
-            background-color: transparent;
-            &.hover {
-                @apply border-blue-500;
-                cursor: ew-resize;
+        border: none;
+        .resizer-content {
+            position: relative;
+            height: 100%;
+            width: fit-content;
+            display: flex;
+            justify-content: center;
+            .transition {
+                transition: left 0.2s;
             }
-        }
-        .resizer {
-            @apply absolute flex items-center justify-center bg-white border border-gray-300 rounded-full text-gray-600 cursor-pointer;
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-top: 1.25rem;
-            font-size: 1.5rem;
-            font-weight: 600;
-            z-index: 1;
-            cursor: col-resize;
-            &.hide {
-                @apply bg-white justify-end;
-                left: -1px;
-                width: 1.25rem;
-                margin-right: -0.25rem;
-                border-top-left-radius: 50%;
-                border-bottom-left-radius: 50%;
-                border-left: 0;
-                .resizer-button > svg {
-                    margin-right: -0.125rem;
-                }
+            .line {
+                @apply bg-gray-200;
+                position: absolute;
+                height: 100%;
                 &.hover {
-                    @apply text-secondary;
-                    width: 2.5rem;
+                    @apply bg-blue-600;
+                    cursor: ew-resize;
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+            }
+            .resizer {
+                @apply absolute flex items-center justify-center bg-white border border-gray-300 rounded-full text-gray-600 cursor-pointer;
+                width: 1.5rem;
+                height: 1.5rem;
+                margin-top: 1.25rem;
+                top: 0;
+                font-size: 1.5rem;
+                font-weight: 600;
+                z-index: 1;
+                cursor: col-resize;
+                &.hide {
+                    @apply bg-white justify-end;
+                    left: -1px;
+                    width: 1.25rem;
+                    margin-right: -0.25rem;
+                    border-top-left-radius: 50%;
+                    border-bottom-left-radius: 50%;
+                    border-left: 0;
                     .resizer-button > svg {
-                        margin-right: 0;
+                        margin-right: -0.125rem;
+                    }
+                    &:hover {
+                        @apply text-secondary;
+                        width: 2.5rem;
+                        .resizer-button > svg {
+                            margin-right: 0;
+                        }
                     }
                 }
+                &:hover {
+                    @apply bg-blue-200 cursor-pointer;
+                }
             }
-            &:hover {
-                @apply bg-blue-200 cursor-pointer;
-            }
-        }
-        .controller {
-            @apply absolute border border-gray-300 rounded-md bg-white;
-            width: 0.4rem;
-            height: 1.5rem;
-            top: calc(50% - 1.5rem / 2);
-            opacity: 0;
-
-            &.hover {
-                @apply border-blue-500;
-                opacity: 1;
-            }
-            &:hover {
-                @apply bg-blue-200;
-                opacity: 1;
-                cursor: col-resize;
+            .controller {
+                @apply absolute border border-gray-300 rounded-md bg-white;
+                width: 0.4rem;
+                height: 1.5rem;
+                top: calc(50% - 1.5rem / 2);
+                opacity: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                &.hover {
+                    @apply border-blue-600;
+                    opacity: 1;
+                }
+                &:hover {
+                    @apply bg-blue-200;
+                    opacity: 1;
+                    width: 0.6rem;
+                    cursor: col-resize;
+                }
             }
         }
     }