-
-
Notifications
You must be signed in to change notification settings - Fork 999
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
web: Make viewing the in-page documentation optional
After talking with @GirlBossRush, I realized that my architecture would be simplified by separating the style controller from the renderer. Lit uses Controllers just for that purpose, so: 1. A renderer that either puts down the button or puts down the documentation 2. A controller that monitors the button for its state and, when that state changes, updates the host's CSS to fit within the page correctly when the button is rotated. 3. Some helper styles the container needs to help the button display correctly. Run the thing and click on the button. This changes the look and feel of the application to a small degree. Screenshots may need to be updated. None. \# What \# Why \# How \# Designs \# Test Steps \# Other Notes
- Loading branch information
1 parent
2ddb7e1
commit 977e73b
Showing
6 changed files
with
127 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| The SidebarHelp feature uses some fairly fiddly CSS to rotate the "Documentation" button in a way | ||
| that doesn't take up too much screen real-estate, because the rotation is purely visual; the layout | ||
| flow is still driven by the size of the button as if it were horizontal. Using the SidebarHelp means | ||
| enabling a special controller to adjust the width of the container to the _height_ of the button | ||
| when the button is rotated into place. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| ak-sidebar-help-toggle { | ||
| display: none; | ||
| } | ||
|
|
||
| @media screen and (min-width: 768px) { | ||
| ak-sidebar-help-toggle { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| ak-sidebar-help-toggle.pf-m-width-default { | ||
| background-color: inherit; | ||
| max-width: 3rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { bound } from "@goauthentik/elements/decorators/bound"; | ||
|
|
||
| import { LitElement, ReactiveController, ReactiveControllerHost } from "lit"; | ||
|
|
||
| import { SidebarHelpToggleEvent } from "./events"; | ||
|
|
||
| type ReactiveLitElement = LitElement & ReactiveControllerHost; | ||
|
|
||
| const DEFAULT_STYLE = "pf-m-width-default"; | ||
|
|
||
| /** | ||
| * A "Display documentation for this page" helper. Attach this controller to any element that | ||
| * contains one or more SidebarHelp entries. It adjusts the width of the sidebar controller when | ||
| * hidden to that of the button's *height*, since the button has been rotated 90° around a | ||
| * corner-oriented axis. | ||
| * | ||
| * The events consumed by this component are not for general use. | ||
| */ | ||
|
|
||
| export class SidebarHelpController implements ReactiveController { | ||
| host: ReactiveLitElement; | ||
|
|
||
| constructor(host: ReactiveLitElement) { | ||
| (this.host = host).addController(this); | ||
| } | ||
|
|
||
| @bound | ||
| toggleHelpToggle(ev: SidebarHelpToggleEvent) { | ||
| const { source } = ev; | ||
| if (!source.showing) { | ||
| source.classList.remove(source.activeStyle); | ||
| source.classList.add(DEFAULT_STYLE); | ||
| const { width } = source.button.getBoundingClientRect(); | ||
| source.style.setProperty("width", `${width}px`); | ||
| return; | ||
| } | ||
| requestAnimationFrame(() => { | ||
| source.style.removeProperty("width"); | ||
| source.classList.remove(DEFAULT_STYLE); | ||
| source.classList.add(source.activeStyle); | ||
| }); | ||
| } | ||
|
|
||
| hostConnected() { | ||
| this.host.addEventListener(SidebarHelpToggleEvent.eventName, this.toggleHelpToggle); | ||
| } | ||
|
|
||
| hostDisconnected() { | ||
| this.host.removeEventListener(SidebarHelpToggleEvent.eventName, this.toggleHelpToggle); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import type { SidebarHelp } from "./SidebarHelp.js"; | ||
|
|
||
| export class SidebarHelpToggleEvent extends Event { | ||
| static readonly eventName = "ak-sidebar-help-toggle-request"; | ||
| source: SidebarHelp; | ||
| constructor(source: SidebarHelp) { | ||
| super(SidebarHelpToggleEvent.eventName, { bubbles: true, composed: true }); | ||
| this.source = source; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface GlobalEventHandlersEventMap { | ||
| [SidebarHelpToggleEvent.eventName]: SidebarHelpToggleEvent; | ||
| } | ||
| } |