ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use statusColor variable in template()

Browse source
This commit is contained in:
ayo 2026-05-08 21:56:36 +02:00
parent 0c82e21a28
commit 948c9b027e
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -37,7 +37,7 @@
All systems operational
</status-indicator>
<br />
<status-indicator status="negative">
<status-indicator status="negative" pulse>
Something's wrong
</status-indicator>
<br />

10
src/status-indicator.ts
View file

@ -28,6 +28,8 @@ class StatusIndicator extends WebComponent {
}
get template(): any {
const statusColor = this.#indicatorColor[this.props.status]
return html`
<div class="status-indicator-icon" style=${{
display: 'inline-block',
@ -35,7 +37,7 @@ class StatusIndicator extends WebComponent {
cursor: 'pointer',
width: '10px',
height: '10px',
backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`,
backgroundColor: `rgb(${statusColor})`,
marginRight: '0.05rem',
...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
}}> </div>
@ -47,9 +49,9 @@ class StatusIndicator extends WebComponent {
this.props.pulse ? html`
<style>
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0.5);}
70% { box-shadow: 0 0 0 10px rgba(${this.#indicatorColor[this.props.status]}, 0); }
100% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0); }
0% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0.5);}
70% { box-shadow: 0 0 0 10px rgba(${statusColor}, 0); }
100% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0); }
}
</style>`
: