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 All systems operational
</status-indicator> </status-indicator>
<br /> <br />
<status-indicator status="negative"> <status-indicator status="negative" pulse>
Something's wrong Something's wrong
</status-indicator> </status-indicator>
<br /> <br />

10
src/status-indicator.ts
View file

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