Added comments around the unusual styling system.
This commit is contained in:
@ -56,6 +56,11 @@ export class ToggledSidebarHelp extends AKElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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) {
|
if (!this.showing) {
|
||||||
// eslint-disable-next-line wc/no-self-class
|
// eslint-disable-next-line wc/no-self-class
|
||||||
this.classList.remove(this.activeStyle);
|
this.classList.remove(this.activeStyle);
|
||||||
@ -94,6 +99,8 @@ export class ToggledSidebarHelp extends AKElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updated() {
|
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(() => {
|
requestAnimationFrame(() => {
|
||||||
if (this.showing) {
|
if (this.showing) {
|
||||||
this.style.removeProperty("width");
|
this.style.removeProperty("width");
|
||||||
|
|||||||
Reference in New Issue
Block a user