From 2ddb7e1e97295a8e320f1e16e1d7b99598336a33 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Wed, 22 Jan 2025 15:18:57 -0800 Subject: [PATCH] Added comments around the unusual styling system. --- web/src/elements/SidebarHelpToggle.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/src/elements/SidebarHelpToggle.ts b/web/src/elements/SidebarHelpToggle.ts index a6118d558e..6b7bb0c320 100644 --- a/web/src/elements/SidebarHelpToggle.ts +++ b/web/src/elements/SidebarHelpToggle.ts @@ -56,6 +56,11 @@ export class ToggledSidebarHelp extends AKElement { } render() { + // The eslint-disable commands are necessary because we're sending signals up the stack that + // the component's dimensions are being set in a very specific and concrete way. This is + // probably not a good use; it violates the principle that a parent class ought to dictate + // the layout of its components. + if (!this.showing) { // eslint-disable-next-line wc/no-self-class this.classList.remove(this.activeStyle); @@ -94,6 +99,8 @@ export class ToggledSidebarHelp extends AKElement { } updated() { + // Setting this up after a `requestAnimationFrame` means the button's dimensions are + // well-calculated, and the space the button needs can be adjusted accordingly. requestAnimationFrame(() => { if (this.showing) { this.style.removeProperty("width");