21e5441f92
* web: patternfly hints as ak-web-component Patternfly 5's "Hints" React Component, but ported to web components. The discovery that CSS Custom Properties are still available in child components, even if they're within independent ShadowDOMs, made this fairly easy to port from Handlebars to Lit-HTML. Moving the definitions into `:host` and the applications into the root DIV of the component made duplicating the Patternfly 5 structure straightforward. Despite the [Patternfly Elements]documentation](https://patternflyelements.org/docs/develop/create/), there's a lot to Patternfly Elements that isn't well documented, such as their slot controller, which near as I can tell just makes it easy to determine if a slot with the given name is actually being used by the client code, but it's hard to tell why, other than that it provides an easy way to determine if some CSS should be included. * Pre-commit fixes. * web: fix some issues with styling found while testing. * web: separated the "with Title" and "without Title" stories. * Added footer story, fixed some CSS. * web: hint controller Add the `ShowHintController`. This ReactiveController takes a token in its constructor, and looks in LocalStorage for that token and an associated value. If that value is not `undefined`, it sets the field `this.host.showHint` to the value found. It also provides a `render()` method that provides an `ak-hint-footer` with a checkbox and the "Don't show this message again," and responds to clicks on the checkbox by setting the `this.hint.showHint` and LocalStorage values to "false". An example web component using it has been supplied. * web: support dark mode for hints. This was nifty. Still not entirely sure about the `theme="dark"` rippling through the product, but in this case it works quite well. All it took was defining the alternative dark mode values in a CSS entry, `:host([theme="dark"]) { ... }` and exploiting Patternfly's already intensely atomized CSS Custom Properties properly. * web: revise colors to use more of the Authentik dark-mode style. * Update web/src/components/ak-hint/ak-hint.ts Signed-off-by: Jens L. <jens@beryju.org> * remove any Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens L. <jens@beryju.org> Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Jens L <jens@goauthentik.io>
27 lines
1.2 KiB
TypeScript
27 lines
1.2 KiB
TypeScript
export const SECONDARY_CLASS = "pf-m-secondary";
|
|
export const SUCCESS_CLASS = "pf-m-success";
|
|
export const ERROR_CLASS = "pf-m-danger";
|
|
export const PROGRESS_CLASS = "pf-m-in-progress";
|
|
export const CURRENT_CLASS = "pf-m-current";
|
|
export const VERSION = "2023.8.3";
|
|
export const TITLE_DEFAULT = "authentik";
|
|
export const ROUTE_SEPARATOR = ";";
|
|
|
|
export const EVENT_REFRESH = "ak-refresh";
|
|
export const EVENT_NOTIFICATION_DRAWER_TOGGLE = "ak-notification-toggle";
|
|
export const EVENT_API_DRAWER_TOGGLE = "ak-api-drawer-toggle";
|
|
export const EVENT_FLOW_INSPECTOR_TOGGLE = "ak-flow-inspector-toggle";
|
|
export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle";
|
|
export const EVENT_WS_MESSAGE = "ak-ws-message";
|
|
export const EVENT_FLOW_ADVANCE = "ak-flow-advance";
|
|
export const EVENT_LOCALE_CHANGE = "ak-locale-change";
|
|
export const EVENT_LOCALE_REQUEST = "ak-locale-request";
|
|
export const EVENT_REQUEST_POST = "ak-request-post";
|
|
export const EVENT_MESSAGE = "ak-message";
|
|
export const EVENT_THEME_CHANGE = "ak-theme-change";
|
|
|
|
export const WS_MSG_TYPE_MESSAGE = "message";
|
|
export const WS_MSG_TYPE_REFRESH = "refresh";
|
|
|
|
export const LOCALSTORAGE_AUTHENTIK_KEY = "authentik-local-settings";
|