Move scan mode pulsing border to the outer ha-card .

This commit is contained in:
Dermot Duffy
2022-07-23 19:25:03 -07:00
parent df0aec3f1f
commit 46376918e4
2 changed files with 18 additions and 17 deletions
+3 -3
View File
@@ -1756,8 +1756,7 @@ export class FrigateCard extends LitElement {
const cardStyle = { const cardStyle = {
'aspect-ratio': this._getAspectRatioStyle(), 'aspect-ratio': this._getAspectRatioStyle(),
}; };
const mainClasses = { const cardClasses = {
main: true,
triggered: triggered:
!!this._isTriggered() && this._getConfig().view.scan.show_trigger_status, !!this._isTriggered() && this._getConfig().view.scan.show_trigger_status,
}; };
@@ -1776,6 +1775,7 @@ export class FrigateCard extends LitElement {
hasHold: frigateCardHasAction(actions.hold_action), hasHold: frigateCardHasAction(actions.hold_action),
hasDoubleClick: frigateCardHasAction(actions.double_tap_action), hasDoubleClick: frigateCardHasAction(actions.double_tap_action),
})} })}
class="${classMap(cardClasses)}"
style="${styleMap(cardStyle)}" style="${styleMap(cardStyle)}"
@action=${(ev: CustomEvent) => this._actionHandler(ev, actions)} @action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
@ll-custom=${this._cardActionHandler.bind(this)} @ll-custom=${this._cardActionHandler.bind(this)}
@@ -1787,7 +1787,7 @@ export class FrigateCard extends LitElement {
${renderMenuAbove ? this._renderMenu() : ''} ${renderMenuAbove ? this._renderMenu() : ''}
<div <div
${ref(this._refMain)} ${ref(this._refMain)}
class="${classMap(mainClasses)}" class="main"
> >
${this._cameras === undefined && !this._message ${this._cameras === undefined && !this._message
? until( ? until(
+15 -14
View File
@@ -39,20 +39,6 @@ div.main {
// Hide scrollbar: IE and Edge // Hide scrollbar: IE and Edge
-ms-overflow-style: none; -ms-overflow-style: none;
} }
div.main.triggered {
@keyframes warning-pulse {
0% {
border: solid 1px rgba(0, 0, 0, 0);
}
50% {
border: solid 1px var(--warning-color);
}
100% {
border: solid 1px rgba(0, 0, 0, 0);
}
}
animation: warning-pulse 5s infinite;
}
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
div.main::-webkit-scrollbar { div.main::-webkit-scrollbar {
@@ -89,6 +75,21 @@ ha-card {
// within the radius. // within the radius.
border-radius: var(--ha-card-border-radius, 4px); border-radius: var(--ha-card-border-radius, 4px);
} }
ha-card.triggered {
@keyframes warning-pulse {
0% {
border: solid 2px rgba(0, 0, 0, 0);
}
50% {
border: solid 2px var(--warning-color);
}
100% {
border: solid 2px rgba(0, 0, 0, 0);
}
}
animation: warning-pulse 5s infinite;
}
frigate-card-live.hidden { frigate-card-live.hidden {
// Live view will be rendered but hidden for live preloading. // Live view will be rendered but hidden for live preloading.