From a9ce24a01ab2aab32eee47605b5f2318c71c79b6 Mon Sep 17 00:00:00 2001
From: Chris Lord <chris.lord@collabora.com>
Date: Wed, 29 Jan 2025 10:52:27 +0000
Subject: [PATCH] Replace jQuery show animation with CSS animation in sidebar
The sidebar-showing animation was relying on jQuery, which just animates
the width/height properties (absolutely killer for performance). Replace
this with a CSS animation. Note, the animation isn't identical;
previously the document size would animate, but this now just snaps to
the destination size. Animating document size changes is unlikely to be
viable any time soon, but we may want to consider some kind of 2-part
move + resize animation.
Signed-off-by: Chris Lord <chris.lord@collabora.com>
Change-Id: I68eb16e9eff9a3a9601f3f903f9edb25b97a56cd
---
browser/css/cool.css | 15 +++++++++++++++
browser/src/control/Control.Sidebar.ts | 7 +++----
2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/browser/css/cool.css b/browser/css/cool.css
index 409169700ac44..013d68a50e863 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -329,6 +329,21 @@ body {
overflow: hidden;
z-index: 990;
}
+
+#sidebar-dock-wrapper.visible {
+ display: block;
+ animation: 200ms ease-out appear-from-right;
+}
+
+@keyframes appear-from-right {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
#sidebar-panel {
padding: 0px;
margin: 0px;
diff --git a/browser/src/control/Control.Sidebar.ts b/browser/src/control/Control.Sidebar.ts
index f1f56905b629a..ab8550cb43f26 100644
--- a/browser/src/control/Control.Sidebar.ts
+++ b/browser/src/control/Control.Sidebar.ts
@@ -63,11 +63,11 @@ class Sidebar {
}
isVisible(): boolean {
- return $('#sidebar-dock-wrapper').is(':visible');
+ return $('#sidebar-dock-wrapper').hasClass('visible');
}
closeSidebar() {
- $('#sidebar-dock-wrapper').hide();
+ $('#sidebar-dock-wrapper').removeClass('visible');
this.map._onResize();
if (!this.map.editorHasFocus()) {
@@ -236,8 +236,7 @@ class Sidebar {
}
this.builder.build(this.container, [sidebarData]);
- if (!this.isVisible())
- $('#sidebar-dock-wrapper').show(this.options.animSpeed);
+ if (!this.isVisible()) $('#sidebar-dock-wrapper').addClass('visible');
this.map.uiManager.setDocTypePref('ShowSidebar', true);
} else {