Merge pull request #870 from dermotduffy/timeline-vertical-space

Expand the timeline to 100% height in panel mode

src/card.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
   unsafeCSS,
 } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -75,6 +75,7 @@ import {
   getEntityTitle,
   getHassDifferences,
   homeAssistantSignPath,
+  isCardInPanel,
   isHassDifferent,
   isTriggeredState,
   sideLoadHomeAssistantElements,
@@ -168,6 +169,10 @@ export class FrigateCard extends LitElement {
   @state()
   protected _view?: View;
 
+  // Whether or not the card is in panel mode on the dashboard.
+  @property({ attribute: 'panel', type: Boolean, reflect: true })
+  protected _panel = false;
+
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
@@ -1804,6 +1809,7 @@ export class FrigateCard extends LitElement {
       screenfull.on('change', this._fullscreenHandler.bind(this));
     }
     this.addEventListener('mousemove', this._boundMouseHandler);
+    this._panel = isCardInPanel(this);
   }
 
   /**

src/scss/card.scss

@@ -16,6 +16,11 @@
 :host([dark]) {
   filter: brightness(75%);
 }
+:host([panel]) {
+  // Card always extends to the full allowed height in panel mode (in non-panel
+  // mode this would cause the card to expand to the height of a column).
+  height: 100%;
+}
 
 div.main {
   position: relative;

src/scss/thumbnail-feature-event.scss

@@ -12,6 +12,10 @@ ha-icon {
   // Safari will occasionally not load thumbnails correctly with display block.
   display: inline-block;
 
+  // Ensure no whitespace around img with inline-block display.
+  vertical-align: top;
+  margin: 0;
+
   border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
 
   max-width: var(--frigate-card-thumbnail-size);

src/scss/timeline-core.scss

@@ -12,6 +12,11 @@
   position: relative;
 }
 
+:host(:not([mini])) {
+  // Timeline covers 100% of the parent unless it's in mini-mode.
+  height: 100%;
+}
+
 frigate-card-thumbnail {
   height: var(--frigate-card-thumbnail-size);
   width: var(--frigate-card-thumbnail-size);

src/utils/ha/index.ts

@@ -336,3 +336,15 @@ export const getEntitiesFromHASS = (hass: HomeAssistant, domain?: string): strin
   entities.sort();
   return entities;
 };
+
+/**
+ * Determine if a card is in panel mode.
+ */
+export const isCardInPanel = (card: HTMLElement): boolean => {
+  const parent = card.getRootNode();
+  return !!(
+    parent &&
+    parent instanceof ShadowRoot &&
+    parent.host.tagName === 'HUI-PANEL-VIEW'
+  );
+};