web: fix minor styling issues

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-08-05 22:04:45 +02:00
parent fdd8e66b91
commit f28bfdaeb9
5 changed files with 10 additions and 5 deletions

View File

@ -268,6 +268,10 @@ body {
.pf-c-toggle-group__button:not(.pf-m-selected) { .pf-c-toggle-group__button:not(.pf-m-selected) {
background-color: var(--ak-dark-background-light) !important; background-color: var(--ak-dark-background-light) !important;
} }
.pf-c-toggle-group__button.pf-m-selected {
color: var(--ak-dark-foreground) !important;
background-color: var(--pf-global--primary-color--100) !important;
}
/* inputs help text */ /* inputs help text */
.pf-c-form__helper-text:not(.pf-m-error) { .pf-c-form__helper-text:not(.pf-m-error) {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);

View File

@ -5,6 +5,7 @@ import { MessageLevel } from "../messages/Message";
@customElement("ak-action-button") @customElement("ak-action-button")
export class ActionButton extends SpinnerButton { export class ActionButton extends SpinnerButton {
@property({ attribute: false }) @property({ attribute: false })
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
apiRequest: () => Promise<any> = () => { apiRequest: () => Promise<any> = () => {

View File

@ -16,6 +16,7 @@ import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../..
@customElement("ak-spinner-button") @customElement("ak-spinner-button")
export class SpinnerButton extends LitElement { export class SpinnerButton extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
isRunning = false; isRunning = false;
@ -79,7 +80,7 @@ export class SpinnerButton extends LitElement {
}} }}
> >
${this.isRunning ${this.isRunning
? html` <span class="pf-c-button__progress"> ? html`<span class="pf-c-button__progress">
<ak-spinner size=${PFSize.Medium}></ak-spinner> <ak-spinner size=${PFSize.Medium}></ak-spinner>
</span>` </span>`
: ""} : ""}

View File

@ -80,7 +80,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
html`${item.name}`, html`${item.name}`,
html`${item.severity}`, html`${item.severity}`,
html`${item.groupObj?.name || t`None (rule disabled)`}`, html`${item.groupObj?.name || t`None (rule disabled)`}`,
html` <ak-forms-modal> html`<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span> <span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Notification Rule`} </span> <span slot="header"> ${t`Update Notification Rule`} </span>
<ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form> <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
@ -112,8 +112,6 @@ export class RuleListPage extends TablePage<NotificationRule> {
</p> </p>
<ak-bound-policies-list .target=${item.pk}> </ak-bound-policies-list> <ak-bound-policies-list .target=${item.pk}> </ak-bound-policies-list>
</div> </div>
</td> </td>`;
<td></td>
<td></td>`;
} }
} }

View File

@ -87,6 +87,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
</button> </button>
</ak-forms-modal> </ak-forms-modal>
<ak-action-button <ak-action-button
class="pf-m-plain"
.apiRequest=${() => { .apiRequest=${() => {
return new EventsApi(DEFAULT_CONFIG).eventsTransportsTestCreate({ return new EventsApi(DEFAULT_CONFIG).eventsTransportsTestCreate({
uuid: item.pk || "", uuid: item.pk || "",