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

Render elements on top of the carousel.

Browse Source
This commit is contained in:
Dermot Duffy
2022-01-20 19:14:48 -08:00
parent 9998a5c51b
commit 771387963f
2 changed files with 39 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/card.ts
+39 -45
View File
@@ -1096,11 +1096,6 @@ export class FrigateCard extends LitElement {
absolute: padding != null,
};
const pictureElementsClasses = {
'picture-elements': true,
gallery: !!this._view?.isGalleryView(),
};
const actions = this._getMergedActions();
return html` <ha-card
@@ -1119,46 +1114,45 @@ export class FrigateCard extends LitElement {
${this._getConfig().menu.mode == 'above' ? this._renderMenu() : ''}
<div class="container outer" style="${styleMap(outerStyle)}">
<div class="${classMap(contentClasses)}">
<div class="${classMap(pictureElementsClasses)}">
${this._getConfig().elements
? // Always show elements to allow for custom menu items (etc.) to
// be present even if a particular view has an error.
html` <frigate-card-elements
.hass=${this._hass}
.elements=${this._getConfig().elements}
.conditionState=${this._conditionState}
@frigate-card:menu-add=${(e) => {
this._addDynamicMenuButton(e.detail);
}}
@frigate-card:menu-remove=${(e) => {
this._removeDynamicMenuButton(e.detail);
}}
@frigate-card:condition-state-request=${(ev) => {
conditionStateRequestHandler(ev, this._conditionState);
}}
>
</frigate-card-elements>`
: ``}
${this._cameras === undefined
? until(
(async () => {
await this._loadCameras();
// Don't reset messages as errors may have been generated
// during the camera load.
this._changeView({ resetMessage: false });
return this._render();
})(),
renderProgressIndicator(),
)
: // Always want to call render even if there's a message, to
// ensure live preload is always present (even if not displayed).
this._render()}
${
// Keep message rendering to last to show messages that may have
// been generated during the render.
this._message ? renderMessage(this._message) : ''
}
</div>
${this._cameras === undefined
? until(
(async () => {
await this._loadCameras();
// Don't reset messages as errors may have been generated
// during the camera load.
this._changeView({ resetMessage: false });
return this._render();
})(),
renderProgressIndicator(),
)
: // Always want to call render even if there's a message, to
// ensure live preload is always present (even if not displayed).
this._render()}
${this._getConfig().elements
? // Always show elements to allow for custom menu items (etc.) to
// be present even if a particular view has an error. Elements
// need to render after the main views so it can render 'on top'.
html` <frigate-card-elements
.hass=${this._hass}
.elements=${this._getConfig().elements}
.conditionState=${this._conditionState}
@frigate-card:menu-add=${(e) => {
this._addDynamicMenuButton(e.detail);
}}
@frigate-card:menu-remove=${(e) => {
this._removeDynamicMenuButton(e.detail);
}}
@frigate-card:condition-state-request=${(ev) => {
conditionStateRequestHandler(ev, this._conditionState);
}}
>
</frigate-card-elements>`
: ``}
${
// Keep message rendering to last to show messages that may have
// been generated during the render.
this._message ? renderMessage(this._message) : ''
}
</div>
</div>
${this._getConfig().menu.mode != 'above' ? this._renderMenu() : ''}
src/scss/card.scss
-12
View File
@@ -44,18 +44,6 @@
.outer:hover + .hover-menu, .hover-menu:hover {
opacity: 0.9;
}
/* A relative div to place absolute picture elements onto */
.picture-elements {
position: relative;
width: 100%;
height: 100%;
}
/* Enforce picture elements to only be the size of the card/fullscreen (and not
larger) when in gallery mode so that the picture elements do not scroll. */
.picture-elements.gallery {
height: 100%;
}
ha-card {
display: flex;