web: rework and expand tooltips (#6435)

* web: replace custom tooltip with pfe-tooltip

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add tooltips to all edit buttons

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add tooltips to remaining table actions

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add a bunch more tooltips

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update locale

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-07-31 19:35:09 +02:00
committed by GitHub
parent 561e6956fe
commit 8079952d47
46 changed files with 734 additions and 147 deletions

View File

@ -10,6 +10,7 @@ import "@goauthentik/elements/forms/ModalForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { TableColumn } from "@goauthentik/elements/table/Table";
import { TablePage } from "@goauthentik/elements/table/TablePage";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
@ -140,14 +141,17 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
html`<ak-label color=${item.enabled ? PFColor.Green : PFColor.Red}>
${item.enabled ? msg("Yes") : msg("No")}
</ak-label>`,
html` <ak-forms-modal>
html`<ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Blueprint")} </span>
<ak-blueprint-form slot="form" .instancePk=${item.pk}> </ak-blueprint-form>
<button slot="trigger" class="pf-c-button pf-m-plain">
<i class="fas fa-edit"></i>
</button> </ak-forms-modal
><ak-action-button
<pf-tooltip position="top" content=${msg("Edit")}>
<i class="fas fa-edit"></i>
</pf-tooltip>
</button>
</ak-forms-modal>
<ak-action-button
class="pf-m-plain"
.apiRequest=${() => {
return new ManagedApi(DEFAULT_CONFIG)
@ -164,7 +168,9 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
});
}}
>
<i class="fas fa-play" aria-hidden="true"></i>
<pf-tooltip position="top" content=${msg("Apply")}>
<i class="fas fa-play" aria-hidden="true"></i>
</pf-tooltip>
</ak-action-button>`,
];
}