web: fix more height issues and sidebar not correctly activating

This commit is contained in:
Jens Langhammer 2021-03-01 10:32:25 +01:00
parent f2eaa9052e
commit 9c33f4858f
6 changed files with 31 additions and 11 deletions

View file

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
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";
@ -13,7 +13,11 @@ export class Tabs extends LitElement {
currentPage?: string;
static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle];
return [GlobalsStyle, TabsStyle, css`
::slotted(*) {
height: 100%;
}
`];
}
renderTab(page: Element): TemplateResult {

View file

@ -1,7 +1,7 @@
import { customElement } from "lit-element";
import { User } from "../api/Users";
import { SidebarItem } from "../elements/sidebar/Sidebar";
import { SLUG_REGEX } from "../elements/router/Route";
import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
import { Interface } from "./Interface";
export const SIDEBAR_ITEMS: SidebarItem[] = [
@ -13,7 +13,9 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
return User.me().then(u => u.is_superuser);
}),
new SidebarItem("Events").children(
new SidebarItem("Log", "/events/log"),
new SidebarItem("Log", "/events/log").activeWhen(
`^/events/log/(?<id>${UUID_REGEX})$`
),
new SidebarItem("Notification Rules", "/events/rules"),
new SidebarItem("Notification Transports", "/events/transports"),
).when((): Promise<boolean> => {
@ -26,7 +28,9 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
new SidebarItem("Sources", "/core/sources").activeWhen(
`^/core/sources/(?<slug>${SLUG_REGEX})$`,
),
new SidebarItem("Providers", "/core/providers"),
new SidebarItem("Providers", "/core/providers").activeWhen(
`^/core/providers/(?<id>${ID_REGEX})$`,
),
new SidebarItem("Outposts", "/outpost/outposts"),
new SidebarItem("Outpost Service Connections", "/outpost/service-connections"),
).when((): Promise<boolean> => {

View file

@ -32,6 +32,9 @@ export class ApplicationViewPage extends LitElement {
img.pf-icon {
max-height: 24px;
}
ak-tabs {
height: 100%;
}
`
);
}

View file

@ -27,6 +27,9 @@ export class FlowViewPage extends LitElement {
img.pf-icon {
max-height: 24px;
}
ak-tabs {
height: 100%;
}
`
);
}

View file

@ -1,4 +1,4 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Provider } from "../../api/Providers";
import { COMMON_STYLES } from "../../common/styles";
@ -22,7 +22,11 @@ export class ProviderViewPage extends LitElement {
provider?: Provider;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return COMMON_STYLES.concat(css`
* {
height: 100%;
}
`);
}
render(): TemplateResult {

View file

@ -1,4 +1,4 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/buttons/ModalButton";
@ -25,7 +25,11 @@ export class SourceViewPage extends LitElement {
source?: Source;
static get styles(): CSSResult[] {
return COMMON_STYLES;
return COMMON_STYLES.concat(css`
* {
height: 100%;
}
`);
}
render(): TemplateResult {
@ -45,8 +49,6 @@ export class SourceViewPage extends LitElement {
return html`<ak-source-ldap-view sourceSlug=${this.source.slug}></ak-source-ldap-view>`;
case "oauth":
return html`<ak-source-oauth-view sourceSlug=${this.source.slug}></ak-source-oauth-view>`;
// case "proxy":
// return html`<ak-provider-proxy-view providerID=${this.source.pk}></ak-provider-proxy-view>`;
default:
return html`<p>Invalid source type ${this.source.object_type}</p>`;
}