habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: remove common_styles

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-17 17:11:39 +01:00
parent 2698d9d23a
commit 43bf9e6c21
59 changed files with 500 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/elements/EmptyState.ts
View File

@ -1,7 +1,9 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import { SpinnerSize } from "./Spinner";
@customElement("ak-empty-state")
export class EmptyState extends LitElement {
@ -9,17 +11,24 @@ export class EmptyState extends LitElement {
@property({type: String})
icon = "";
@property({type: Boolean})
loading = false;
@property()
header?: string;
static get styles(): CSSResult[] {
return [PFBase, FA, PFEmptyState];
return [PFBase, PFEmptyState, PFTitle];
}
render(): TemplateResult {
return html`<div class="pf-c-empty-state">
<div class="pf-c-empty-state__content">
<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>
${this.loading ?
html`<div class="pf-c-empty-state__icon">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div>`:
html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
<h1 class="pf-c-title pf-m-lg">
${this.header}
</h1>

9
web/src/elements/Tabs.ts
View File

@ -1,10 +1,7 @@
import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
// @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../authentik.css";
import { CURRENT_CLASS } from "../constants";
import { gettext } from "django";
@ -18,7 +15,7 @@ export class Tabs extends LitElement {
vertical = false;
static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle, AKGlobal, css`
return [PFGlobal, PFTabs, AKGlobal, css`
::slotted(*) {
height: 100%;
flex-grow: 2;

18
web/src/elements/buttons/ModalButton.ts
View File

@ -1,11 +1,21 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import { convertToSlug } from "../../utils";
import { SpinnerButton } from "./SpinnerButton";
import { PRIMARY_CLASS } from "../../constants";
import { showMessage } from "../messages/MessageContainer";
import { COMMON_STYLES } from "../../common/styles";
@customElement("ak-modal-button")
export class ModalButton extends LitElement {
@ -19,7 +29,7 @@ export class ModalButton extends LitElement {
modal = "<slot name='modal'></slot>";
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent].concat(
css`
:host {
text-align: left;
@ -30,6 +40,10 @@ export class ModalButton extends LitElement {
.pf-c-modal-box > .pf-c-button + * {
margin-right: 0;
}
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
`
);
}

2
web/src/elements/buttons/SpinnerButton.ts
View File

@ -1,6 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore

2
web/src/elements/buttons/TokenCopyButton.ts
View File

@ -1,6 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
import { CoreApi } from "authentik-api";

9
web/src/elements/cards/AggregateCard.ts
View File

@ -1,7 +1,9 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
@customElement("ak-aggregate-card")
export class AggregateCard extends LitElement {
@ -15,7 +17,7 @@ export class AggregateCard extends LitElement {
headerLink?: string;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat([css`
return [PFBase, PFCard, PFFlex].concat([css`
.pf-c-card.pf-c-card-aggregate {
height: 100%;
}
@ -24,6 +26,9 @@ export class AggregateCard extends LitElement {
text-align: center;
color: var(--pf-global--Color--100);
}
.subtext {
font-size: var(--pf-global--FontSize--sm);
}
`]);
}

3
web/src/elements/messages/Message.ts
View File

@ -4,7 +4,6 @@ import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-gro
import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
export interface APIMessage {
level_tag: string;
@ -32,7 +31,7 @@ export class Message extends LitElement {
onRemove?: (m: APIMessage) => void;
static get styles(): CSSResult[] {
return [PFBase, FA, PFButton, PFAlert, PFAlertGroup];
return [PFBase, PFButton, PFAlert, PFAlertGroup];
}
firstUpdated(): void {

6
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -3,7 +3,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
import { EventsApi, Notification } from "authentik-api";
import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@customElement("ak-notification-drawer")
export class NotificationDrawer extends LitElement {
@ -15,7 +17,7 @@ export class NotificationDrawer extends LitElement {
unread = 0;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
return [PFBase, PFNotificationDrawer, PFDropdown].concat(
css`
.pf-c-notification-drawer__header {
height: 114px;

5
web/src/elements/notifications/NotificationTrigger.ts
View File

@ -1,11 +1,12 @@
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@customElement("ak-notification-trigger")
export class NotificationRule extends LitElement {
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFBase, PFDropdown];
}
constructor() {

6
web/src/elements/router/Router404.ts
View File

@ -1,6 +1,8 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@customElement("ak-router-404")
export class Router404 extends LitElement {
@ -9,7 +11,7 @@ export class Router404 extends LitElement {
url = "";
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFBase, PFEmptyState, PFTitle];
}
render(): TemplateResult {

15
web/src/elements/router/RouterOutlet.ts
View File

@ -1,9 +1,4 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
// @ts-ignore
import CodeMirrorTheme from "codemirror/theme/monokai.css";
import { COMMON_STYLES } from "../../common/styles";
import { Route } from "./Route";
import { ROUTES } from "../../routes";
import { RouteMatch } from "./RouteMatch";
@ -21,8 +16,6 @@ export class RouterOutlet extends LitElement {
static get styles(): CSSResult[] {
return [
CodeMirrorStyle,
CodeMirrorTheme,
css`
:host {
height: 100vh;
@ -33,7 +26,7 @@ export class RouterOutlet extends LitElement {
flex-direction: column;
}
`,
].concat(...COMMON_STYLES);
];
}
constructor() {
@ -68,9 +61,9 @@ export class RouterOutlet extends LitElement {
console.debug(`authentik/router: route "${activeUrl}" not defined`);
const route = new Route(
RegExp(""),
html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}>
<div slot="body"></div>
</ak-site-shell>`
html`<div class="pf-c-page__main">
<ak-router-404 url=${activeUrl}></ak-router-404>
</div>`
);
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};

16
web/src/elements/sidebar/Sidebar.ts
View File

@ -1,11 +1,7 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import AKGlobal from "../../authentik.css";
import { until } from "lit-html/directives/until";
@ -99,9 +95,9 @@ export class Sidebar extends LitElement {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
NavStyle,
PFBase,
PFPage,
PFNav,
AKGlobal,
css`
.pf-c-nav__link.pf-m-current::after,

10
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -1,8 +1,6 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
import { configureSentry } from "../../api/Config";
import { Config } from "authentik-api";
import { ifDefined } from "lit-html/directives/if-defined";
@ -23,8 +21,8 @@ export class SidebarBrand extends LitElement {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
PFGlobal,
PFPage,
css`
:host {
display: flex;

6
web/src/elements/sidebar/SidebarHamburger.ts
View File

@ -1,11 +1,13 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
@customElement("ak-sidebar-hamburger")
export class SidebarHamburger extends LitElement {
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(
return [PFBase, PFButton].concat(
css`
:host {
position: absolute;

15
web/src/elements/sidebar/SidebarUser.ts
View File

@ -1,12 +1,9 @@
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/all.css";
// @ts-ignore
import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import { me } from "../../api/Users";
import { until } from "lit-html/directives/until";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../notifications/NotificationTrigger";
import { ifDefined } from "lit-html/directives/if-defined";
@ -16,9 +13,9 @@ export class SidebarUser extends LitElement {
static get styles(): CSSResult[] {
return [
fa,
NavStyle,
AvatarStyle,
PFBase,
PFNav,
PFAvatar,
css`
:host {
display: flex;

26
web/src/elements/table/Table.ts
View File

@ -1,12 +1,18 @@
import { gettext } from "django";
import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTable from "@patternfly/patternfly/components/Table/table.css";
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
import AKGlobal from "../../authentik.css";
import "./TablePagination";
import "../EmptyState";
import "../Spinner";
import { SpinnerSize } from "../Spinner";
export class TableColumn {
@ -109,7 +115,7 @@ export abstract class Table<T> extends LitElement {
expandedRows: boolean[] = [];
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFBase, PFTable, PFBullseye, PFButton, PFToolbar, PFDropdown, PFPagination, AKGlobal];
}
constructor() {
@ -138,14 +144,10 @@ export abstract class Table<T> extends LitElement {
return html`<tr role="row">
<td role="cell" colspan="25">
<div class="pf-l-bullseye">
<div class="pf-c-empty-state pf-m-sm">
<div class="pf-c-empty-state__content">
<div class="pf-c-empty-state__icon">
<ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
</div>
<h2 class="pf-c-title pf-m-lg">${gettext("Loading")}</h2>
</div>
</div>
<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>
</div>
</td>
</tr>`;

7
web/src/elements/table/TablePage.ts
View File

@ -1,8 +1,11 @@
import { gettext } from "django";
import { CSSResult } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { ifDefined } from "lit-html/directives/if-defined";
import { Table } from "./Table";
import "./TableSearch";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
export abstract class TablePage<T> extends Table<T> {
abstract pageTitle(): string;
@ -10,6 +13,10 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageIcon(): string;
abstract searchEnabled(): boolean;
static get styles(): CSSResult[] {
return super.styles.concat(PFPage, PFContent);
}
renderSearch(): TemplateResult {
if (!this.searchEnabled()) {
return super.renderSearch();

7
web/src/elements/table/TablePagination.ts
View File

@ -1,7 +1,10 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import { AKPagination } from "../../api/Client";
import { gettext } from "django";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
@customElement("ak-table-pagination")
export class TablePagination extends LitElement {
@ -13,7 +16,7 @@ export class TablePagination extends LitElement {
pageChangeHandler: (page: number) => void = (page: number) => {}
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFBase, PFButton, PFPagination];
}
render(): TemplateResult {

9
web/src/elements/table/TableSearch.ts
View File

@ -1,6 +1,11 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
import { COMMON_STYLES } from "../../common/styles";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
@customElement("ak-table-search")
export class TableSearch extends LitElement {
@ -12,7 +17,7 @@ export class TableSearch extends LitElement {
onSearch?: (value: string) => void;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl];
}
render(): TemplateResult {

23
web/src/elements/utils/LoadingState.ts
View File

@ -1,23 +0,0 @@
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import { SpinnerSize } from "../Spinner";
@customElement("ak-loading-state")
export class LoadingState extends LitElement {
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
render(): TemplateResult {
return html`<div class="pf-c-empty-state pf-m-full-height">
<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
</div>
</div>
</div>
</div>`;
}
}