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 <[email protected]> Change-Id: I68eb16e9eff9a3a9601f3f903f9edb25b97a56cd
CollaboraOnline · Jan 29, 2025 · 2909a2e · 2909a2e
1 parent 5b86a3d
commit 2909a2e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 35 deletions.
diff --git 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
@@ -66,8 +66,14 @@ class Sidebar {
 		return $('#sidebar-dock-wrapper').is(':visible');
 	}
 
+	openSidebar() {
+		if (!this.isVisible()) $('#sidebar-dock-wrapper').addClass('visible');
+
+		this.map.uiManager.setDocTypePref('ShowSidebar', true);
+	}
+
 	closeSidebar() {
-		$('#sidebar-dock-wrapper').hide();
+		$('#sidebar-dock-wrapper').removeClass('visible');
 		this.map._onResize();
 
 		if (!this.map.editorHasFocus()) {
@@ -187,10 +193,11 @@ class Sidebar {
 		if (
 			sidebarData.action === 'close' ||
 			window.app.file.disableSidebar ||
-			this.map.isReadOnlyMode()
+			this.map.isReadOnlyMode() ||
+			!(sidebarData.children && sidebarData.children.length)
 		) {
 			this.closeSidebar();
-		} else if (sidebarData.children) {
+		} else {
 			for (var i = sidebarData.children.length - 1; i >= 0; i--) {
 				if (
 					sidebarData.children[i].type !== 'deck' ||
@@ -208,41 +215,30 @@ class Sidebar {
 				}
 			}
 
-			if (sidebarData.children.length) {
-				this.onResize();
-
-				if (
-					sidebarData.children &&
-					sidebarData.children[0] &&
-					sidebarData.children[0].id
-				) {
-					this.unsetSelectedSidebar();
-					var currentDeck = sidebarData.children[0].id;
-					this.map.uiManager.setDocTypePref(currentDeck, true);
-					if (this.targetDeckCommand) {
-						var stateHandler = this.map['stateChangeHandler'];
-						var isCurrent = stateHandler
-							? stateHandler.getItemValue(this.targetDeckCommand)
-							: false;
-						// just to be sure chack with other method
-						if (isCurrent === 'false' || !isCurrent)
-							isCurrent =
-								this.targetDeckCommand === this.commandForDeck(currentDeck);
-						if (this.targetDeckCommand && (isCurrent === 'false' || !isCurrent))
-							this.changeDeck(this.targetDeckCommand);
-					} else {
+			this.onResize();
+
+			if (sidebarData.children[0].id) {
+				this.unsetSelectedSidebar();
+				var currentDeck = sidebarData.children[0].id;
+				this.map.uiManager.setDocTypePref(currentDeck, true);
+				if (this.targetDeckCommand) {
+					var stateHandler = this.map['stateChangeHandler'];
+					var isCurrent = stateHandler
+						? stateHandler.getItemValue(this.targetDeckCommand)
+						: false;
+					// just to be sure check with other method
+					if (isCurrent === 'false' || !isCurrent)
+						isCurrent =
+							this.targetDeckCommand === this.commandForDeck(currentDeck);
+					if (this.targetDeckCommand && (isCurrent === 'false' || !isCurrent))
 						this.changeDeck(this.targetDeckCommand);
-					}
+				} else {
+					this.changeDeck(this.targetDeckCommand);
 				}
-
-				this.builder.build(this.container, [sidebarData]);
-				if (!this.isVisible())
-					$('#sidebar-dock-wrapper').show(this.options.animSpeed);
-
-				this.map.uiManager.setDocTypePref('ShowSidebar', true);
-			} else {
-				this.closeSidebar();
 			}
+
+			this.builder.build(this.container, [sidebarData]);
+			this.openSidebar();
 		}
 	}