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

Fix opacity on the thumbnail carousel.

Browse Source
This commit is contained in:
Dermot Duffy
2022-07-09 23:24:24 -07:00
parent dedecc24c6
commit f668411776
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail-carousel.ts
+12 -12
View File
@@ -56,6 +56,12 @@ export class FrigateCardThumbnailCarousel extends LitElement {
// dynamic sizing fails (and users can scroll past the end of the carousel). // dynamic sizing fails (and users can scroll past the end of the carousel).
protected _resizeObserver: ResizeObserver; protected _resizeObserver: ResizeObserver;
@property({ attribute: false })
public config?: ThumbnailsControlConfig;
@state()
protected _selected: number | null = null;
constructor() { constructor() {
super(); super();
this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this)); this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
@@ -64,18 +70,12 @@ export class FrigateCardThumbnailCarousel extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
set selected(selected: number | null) { set selected(selected: number | null) {
this._selected = selected; this._selected = selected;
if (selected !== null) { this.style.setProperty(
// If there is a selection, 'dim' all the other slides. '--frigate-card-carousel-thumbnail-opacity',
this.style.setProperty('--frigate-card-carousel-thumbnail-opacity', '0.4'); selected === null ? '1.0' : '0.4',
} );
} }
@property({ attribute: false })
public config?: ThumbnailsControlConfig;
@state()
protected _selected?: number | null;
/** /**
* Handle gallery resize. * Handle gallery resize.
*/ */
@@ -84,7 +84,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
// Reinit will cause the scroll position to reset, so re-scroll to the // Reinit will cause the scroll position to reset, so re-scroll to the
// correct location. // correct location.
if (this._selected !== undefined && this._selected !== null) { if (this._selected !== null) {
this._refCarousel.value?.carouselScrollTo(this._selected); this._refCarousel.value?.carouselScrollTo(this._selected);
} }
} }
@@ -178,7 +178,7 @@ export class FrigateCardThumbnailCarousel extends LitElement {
if (changedProperties.has('_selected')) { if (changedProperties.has('_selected')) {
this.updateComplete.then(() => { this.updateComplete.then(() => {
if (this._selected !== undefined && this._selected !== null) { if (this._selected !== null) {
this._refCarousel.value?.carouselScrollTo(this._selected); this._refCarousel.value?.carouselScrollTo(this._selected);
} }
}); });