From f98be640ce5ae41b4246fb227137dbc1e1755e94 Mon Sep 17 00:00:00 2001 From: Amir Date: Wed, 12 Feb 2025 14:54:41 +0100 Subject: [PATCH 1/2] Added support for sash delay and duration customization --- packages/dockview-core/src/splitview/splitview.scss | 8 +++++--- packages/dockview-core/src/theme.scss | 3 +++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss index adf09b368..83aacddaa 100644 --- a/packages/dockview-core/src/splitview/splitview.scss +++ b/packages/dockview-core/src/splitview/splitview.scss @@ -118,14 +118,16 @@ touch-action: none; &:not(.disabled):active { - transition: background-color 0.1s ease-in-out; + transition: background-color + var(--dv-sash-transition-duration, 0.1s) ease-in-out; background-color: var(--dv-active-sash-color, transparent); } &:not(.disabled):hover { background-color: var(--dv-active-sash-color, transparent); - transition: background-color 0.1s ease-in-out; - transition-delay: 0.5s; + transition: background-color + var(--dv-sash-transition-duration, 0.1s) ease-in-out; + transition-delay: var(--dv-sash-transition-delay, 0s); } } } diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index 5eb3f7442..7b0e7a841 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -8,6 +8,9 @@ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31); --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5); --dv-overlay-z-index: 999; + + --dv-sash-transition-duration: 0.1s; + --dv-sash-transition-delay: 0.5s; } @mixin dockview-theme-dark-mixin { From 837fabac86bc840ffe5b78ea53123824a68f8ea3 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 12 Feb 2025 21:21:16 +0000 Subject: [PATCH 2/2] feat: active sash animation css properties --- .../dockview-core/src/splitview/splitview.scss | 17 ++++++++--------- packages/dockview-core/src/theme.scss | 5 ++--- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss index 83aacddaa..562511dd6 100644 --- a/packages/dockview-core/src/splitview/splitview.scss +++ b/packages/dockview-core/src/splitview/splitview.scss @@ -117,17 +117,16 @@ -ms-user-select: none; // IE 10 and IE 11 touch-action: none; - &:not(.disabled):active { - transition: background-color - var(--dv-sash-transition-duration, 0.1s) ease-in-out; - background-color: var(--dv-active-sash-color, transparent); - } - + &:not(.disabled):active, &:not(.disabled):hover { background-color: var(--dv-active-sash-color, transparent); - transition: background-color - var(--dv-sash-transition-duration, 0.1s) ease-in-out; - transition-delay: var(--dv-sash-transition-delay, 0s); + transition-property: background-color; + transition-timing-function: ease-in-out; + transition-duration: var( + --dv-active-sash-transition-duration, + 0.1s + ); + transition-delay: var(--dv-active-sash-transition-delay, 0.5s); } } } diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index 7b0e7a841..59909bd0a 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -8,9 +8,8 @@ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31); --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5); --dv-overlay-z-index: 999; - - --dv-sash-transition-duration: 0.1s; - --dv-sash-transition-delay: 0.5s; + --dv-active-sash-transition-duration: 0.1s; + --dv-active-sash-transition-delay: 0.5s; } @mixin dockview-theme-dark-mixin {