From 95cd79270cc4b6772a962d3bc221cda3ca0e04a5 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 26 Jun 2022 12:54:39 -0700 Subject: [PATCH] Be more consistent in choice of background colors --- src/card.ts | 21 +++++++++++++++++++-- src/scss/card.scss | 32 ++++++++++++++++++++++---------- src/scss/elements.scss | 2 +- src/scss/gallery.scss | 4 +++- src/scss/live-webrtc.scss | 2 +- src/scss/message.scss | 2 +- 6 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/card.ts b/src/card.ts index 65066f9f..db5c5a40 100644 --- a/src/card.ts +++ b/src/card.ts @@ -172,6 +172,7 @@ export class FrigateCard extends LitElement { protected _conditionState?: ConditionState; protected _refMenu: Ref = createRef(); + protected _refMain: Ref = createRef(); protected _refElements: Ref = createRef(); protected _refImage: Ref = createRef(); protected _refLive: Ref = createRef(); @@ -927,7 +928,7 @@ export class FrigateCard extends LitElement { this._message = null; } - if (args?.view === undefined) { + if (!args?.view) { // Load the default view. let camera; if (this._cameras?.size) { @@ -948,6 +949,7 @@ export class FrigateCard extends LitElement { camera: camera, }); this._generateConditionState(); + this._resetMainScroll(); // Restart the update timer, so the default view is refreshed at a fixed // interval from now (if so configured). @@ -956,6 +958,7 @@ export class FrigateCard extends LitElement { } else { this._view = args.view; this._generateConditionState(); + this._resetMainScroll(); } } @@ -1580,10 +1583,21 @@ export class FrigateCard extends LitElement { this._message = message; if (!skipUpdate) { this.requestUpdate(); + this._resetMainScroll(); } } } + /** + * Reset the scroll of the main pane to the top (example usecase: scrolling + * half way down the gallery, then viewing diagnostics should result in + * diagnostics starting at the top). + */ + protected _resetMainScroll(): void { + // Reset the scroll on the main div to the top. + this._refMain.value?.scroll({top: 0}); + } + /** * Handle a message event to render to the user. * @param e The message event. @@ -1768,7 +1782,10 @@ export class FrigateCard extends LitElement { @frigate-card:render=${() => this.requestUpdate()} > ${renderMenuAbove ? this._renderMenu() : ''} -
+
${this._cameras === undefined && !this._message ? until( (async () => { diff --git a/src/scss/card.scss b/src/scss/card.scss index b0a53200..ae32d3ab 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -16,7 +16,6 @@ div.main { height: 100%; margin: auto; display: flex; - align-items: center; justify-content: center; // Need to apply the border radius on the container level, as the ha-card has @@ -80,7 +79,11 @@ ha-card { height: 100%; position: static; color: var(--secondary-text-color, white); - background-color: var(--secondary-background-color, black); + + // The primary border-radius used is the div.main, since this one has overflow + // explicitly visible this is only useful for keeping the background-color + // within the radius. + border-radius: var(--ha-card-border-radius, 4px); } frigate-card-live.hidden { @@ -88,17 +91,18 @@ frigate-card-live.hidden { display: none; } +/************ + * Fullscreen + *************/ + // Browsers will reject invalid whole CSS selectors if one selector is bad, so // need to use mixin here instead of just comma-separated selectors. // - Related: https://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on @mixin fullscreen-ha-card { - // Make the background black, to give it the expected fullscreen feel. - background-color: black; - // Hide corners on Safari fullscreen. border-radius: 0px; - // Theme styles may set these which is not helpful in fullscreen mode, reset + // Theme styles may set these which are not helpful in fullscreen mode, reset // them. box-shadow: none; margin: 0; @@ -112,9 +116,17 @@ frigate-card-live.hidden { :host(:-webkit-full-screen) #ha-card { @include fullscreen-ha-card; } -:host(:-moz-full-screen) #ha-card { - @include fullscreen-ha-card; + +@mixin fullscreen-no-rounded-corners { + // Hide corners on Safari fullscreen. + border-radius: 0px; } -:host(:-ms-fullscreen) #ha-card { - @include fullscreen-ha-card; + +:host(:fullscreen) div.main, +:host(:fullscreen) frigate-card-menu { + @include fullscreen-no-rounded-corners; +} +:host(:-webkit-full-screen) div.main, +:host(:-webkit-full-screen) frigate-card-menu { + @include fullscreen-no-rounded-corners; } diff --git a/src/scss/elements.scss b/src/scss/elements.scss index ff0d3dcf..ef1cf79e 100644 --- a/src/scss/elements.scss +++ b/src/scss/elements.scss @@ -17,6 +17,6 @@ // (e.g. custom picture element that does not exist). hui-error-card.element { inset: 0px; - background-color: var(--secondary-background-color, black); + background-color: var(--card-background-color, black); transform: unset; } \ No newline at end of file diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index e580c7b0..f96b5183 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -29,10 +29,12 @@ align-items: center; box-sizing: border-box; text-align: center; - opacity: 0.7; color: var(--primary-text-color, white); border: 2px ridge var(--primary-text-color, black); border-radius: var(--ha-card-border-radius, 4px); + + // Folder background color should match the thumbnail element background + // color. background-color: var(--primary-background-color, black); padding: 10px; line-height: 1; diff --git a/src/scss/live-webrtc.scss b/src/scss/live-webrtc.scss index dd4fe0ef..9a0a1548 100644 --- a/src/scss/live-webrtc.scss +++ b/src/scss/live-webrtc.scss @@ -7,7 +7,7 @@ /* Don't drop shadow or have radius for nested webrtc card */ #webrtc ha-card { border-radius: 0px; - background-color: black; + background-color: unset; // To get the WebRTC player to line up correctly with some themes. margin: 0px; diff --git a/src/scss/message.scss b/src/scss/message.scss index 550d7c9c..c345049f 100644 --- a/src/scss/message.scss +++ b/src/scss/message.scss @@ -1,5 +1,5 @@ :host { - height: 100%; + min-height: 100%; width: 100%; display: block;