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

web: rework and expand tooltips (#6435)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/elements/utils/TimeDeltaHelp.ts
View File

@ -1,5 +1,5 @@
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Tooltip";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
@ -19,26 +19,27 @@ export class TimeDeltaHelp extends AKElement {
}
render(): TemplateResult {
return html` <ak-tooltip>
<p class="pf-c-form__helper-text" slot="trigger">
return html`<div class="pf-c-form__helper-text">
<span>
${this.negative
? msg("(Format: hours=-1;minutes=-2;seconds=-3).")
: msg("(Format: hours=1;minutes=2;seconds=3).")}
</span>
<pf-tooltip position="top">
<i class="pf-icon fa fa-question-circle" aria-hidden="true"></i>
</p>
<div slot="tooltip">
${msg("The following keywords are supported:")}
<ul class="pf-c-list">
<li><pre>microseconds</pre></li>
<li><pre>milliseconds</pre></li>
<li><pre>seconds</pre></li>
<li><pre>minutes</pre></li>
<li><pre>hours</pre></li>
<li><pre>days</pre></li>
<li><pre>weeks</pre></li>
</ul>
</div>
</ak-tooltip>`;
<div slot="content">
${msg("The following keywords are supported:")}
<ul class="pf-c-list">
<li><pre>microseconds</pre></li>
<li><pre>milliseconds</pre></li>
<li><pre>seconds</pre></li>
<li><pre>minutes</pre></li>
<li><pre>hours</pre></li>
<li><pre>days</pre></li>
<li><pre>weeks</pre></li>
</ul>
</div>
</pf-tooltip>
</div>`;
}
}