flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix positioning of icon and use ternary

Browse Source
This commit is contained in:
Nick Mowen
2022-03-20 17:34:11 -06:00
parent 16dc3d244a
commit ca837774bf
2 changed files with 28 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail-carousel.ts
+21 -43
View File
@@ -109,52 +109,30 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
return;
}
console.log("Checking for retain: " + mediaToRender?.frigate?.event?.retain_indefinitely)
if (mediaToRender.frigate?.event?.retain_indefinitely == true) {
return html`<div
class="embla__slide"
@click=${(ev) => {
if (this._carousel && this._carousel.clickAllowed()) {
dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
slideIndex: slideIndex,
target: parent,
childIndex: childIndex,
});
}
stopEventFromActivatingCardWideActions(ev);
}}
>
<img
aria-label="${mediaToRender.title}"
src="${mediaToRender.thumbnail}"
title="${mediaToRender.title}"
/>
return html`<div
class="embla__slide"
@click=${(ev) => {
if (this._carousel && this._carousel.clickAllowed()) {
dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
slideIndex: slideIndex,
target: parent,
childIndex: childIndex,
});
}
stopEventFromActivatingCardWideActions(ev);
}}
>
<img
aria-label="${mediaToRender.title}"
src="${mediaToRender.thumbnail}"
title="${mediaToRender.title}"
/>
${mediaToRender?.frigate?.event?.retain_indefinitely ? html`
<ha-icon
class="favorite"
icon="mdi:star"
/>
</div>`;
} else {
return html`<div
class="embla__slide"
@click=${(ev) => {
if (this._carousel && this._carousel.clickAllowed()) {
dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
slideIndex: slideIndex,
target: parent,
childIndex: childIndex,
});
}
stopEventFromActivatingCardWideActions(ev);
}}
>
<img
aria-label="${mediaToRender.title}"
src="${mediaToRender.thumbnail}"
title="${mediaToRender.title}"
/>
</div>`;
}
/>` : ``}
</div>`;
}
/**
src/scss/thumbnail-carousel.scss
+7 -4
View File
@@ -7,6 +7,8 @@
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
opacity: var(--frigate-card-carousel-thumbnail-opacity);
transition: opacity 0.6s ease, transform 0.2s linear;
position: relative;
display: inline-block;
}
.embla__slide.slide-selected {
opacity: 1.0;
@@ -28,9 +30,10 @@
}
.favorite {
position: absolute;
height: 30px;
width: 30px;
top: 8;
right: 8;
transform: translate(-50%, -50%);
height: 24px;
width: 24px;
top: 12%;
left: 90%;
color: yellow;
}