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"; import { ifDefined } from "lit-html/directives/if-defined";
// @ts-ignore // @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css"; import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
@ -13,7 +13,11 @@ export class Tabs extends LitElement {
currentPage?: string; currentPage?: string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle]; return [GlobalsStyle, TabsStyle, css`
::slotted(*) {
height: 100%;
}
`];
} }
renderTab(page: Element): TemplateResult { renderTab(page: Element): TemplateResult {

View file

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

View file

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

View file

@ -27,6 +27,9 @@ export class FlowViewPage extends LitElement {
img.pf-icon { img.pf-icon {
max-height: 24px; 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 { Provider } from "../../api/Providers";
import { COMMON_STYLES } from "../../common/styles"; import { COMMON_STYLES } from "../../common/styles";
@ -22,7 +22,11 @@ export class ProviderViewPage extends LitElement {
provider?: Provider; provider?: Provider;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return COMMON_STYLES.concat(css`
* {
height: 100%;
}
`);
} }
render(): TemplateResult { 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 { COMMON_STYLES } from "../../common/styles";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
@ -25,7 +25,11 @@ export class SourceViewPage extends LitElement {
source?: Source; source?: Source;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return COMMON_STYLES.concat(css`
* {
height: 100%;
}
`);
} }
render(): TemplateResult { 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>`; return html`<ak-source-ldap-view sourceSlug=${this.source.slug}></ak-source-ldap-view>`;
case "oauth": case "oauth":
return html`<ak-source-oauth-view sourceSlug=${this.source.slug}></ak-source-oauth-view>`; 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: default:
return html`<p>Invalid source type ${this.source.object_type}</p>`; return html`<p>Invalid source type ${this.source.object_type}</p>`;
} }