Skip to content

Commit

Permalink
Refactor: changing resizer line to fatter when it hoverd (#5458)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@kkdy21
kkdy21 authored Jan 8, 2025
1 parent a87001e commit 4eeead2
Showing 1 changed file with 102 additions and 80 deletions.
182 changes: 102 additions & 80 deletions packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 )`,
Expand Down Expand Up @@ -167,7 +171,6 @@ documentEventMount('resize', detectWindowResizing);
onBeforeMount(() => {
detectWindowResizing();
});
</script>

<template>
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -250,80 +262,90 @@ onBeforeMount(() => {
flex-direction: column;
justify-content: stretch;
/* flex-grow: 1; */
overflow-x: hidden;
overflow-y: auto;
&.transition {
transition: width 0.2s;
}
}
> .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;
}
}
}
}
Expand Down

0 comments on commit 4eeead2

Please sign in to comment.