farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Transition Effects in App.css and DashboardSidebarSplitter

Browse Source 
- Updated transition timing functions in App.css for smoother animations, replacing 'ease-in-out' with a custom cubic-bezier curve.
- Increased the sidebar size transition duration in DashboardSidebarSplitter from 150ms to 300ms for improved user experience during resizing.
- Refactored transition properties for the dashboard splitter to ensure consistent animation behavior across components.
This commit is contained in:
Tom Butcher 2026-08-23 21:55:39 +01:00
parent 4ca7ecbb6a
commit 4f6b7e253b
2 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/stylesheets/App.css
View File

@ -505,7 +505,7 @@ body {
max-width: 100% !important; max-width: 100% !important;
flex: 0 0 100% !important; flex: 0 0 100% !important;
transition: transition:
all 0.3s, all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
background 0s; background 0s;
} }
@ -1108,11 +1108,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
.farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning .farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning
.ant-splitter-panel { .ant-splitter-panel {
transition: transition:
--dashboard-splitter-sidebar-size 0.3s ease-in-out, --dashboard-splitter-sidebar-size 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
flex-basis 0.3s ease-in-out, flex-basis 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
width 0.3s ease-in-out, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
min-width 0.3s ease-in-out, min-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
max-width 0.3s ease-in-out; max-width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
} }
@property --dashboard-splitter-sidebar-size { @property --dashboard-splitter-sidebar-size {

9
src/components/Dashboard/common/DashboardSidebarSplitter.jsx
View File

@ -18,7 +18,7 @@ const MAX_SIDEBAR_PX = 400
const COLLAPSED_WIDTH_PX = 80 const COLLAPSED_WIDTH_PX = 80
const ELECTRON_COLLAPSED_WIDTH_PX = 55 const ELECTRON_COLLAPSED_WIDTH_PX = 55
const EXPAND_DRAG_PX = 10 const EXPAND_DRAG_PX = 10
const SIZE_TRANSITION_MS = 150 const SIZE_TRANSITION_MS = 300
const COLLAPSE_STORAGE_KEY = 'DashboardSidebar_collapseState' const COLLAPSE_STORAGE_KEY = 'DashboardSidebar_collapseState'
const SIZE_STORAGE_KEY = 'DashboardSidebar_width' const SIZE_STORAGE_KEY = 'DashboardSidebar_width'
@ -264,12 +264,7 @@ const DashboardSidebarSplitter = ({ sidebar, children }) => {
setSidebarSize(size) setSidebarSize(size)
lastExpandedSizeRef.current = clampExpandedSize(size) lastExpandedSizeRef.current = clampExpandedSize(size)
}, },
[ [collapseSidebar, collapsedWidth, expandSidebar, lockResizeUntilPointerUp]
collapseSidebar,
collapsedWidth,
expandSidebar,
lockResizeUntilPointerUp
]
) )
const handleResizeEnd = useCallback( const handleResizeEnd = useCallback(