mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
Lovelace Cards: Update size calcs and add height fixes for horizontal stacks (#7177)
This commit is contained in:
parent
47f0d74812
commit
c1dba462e8
@ -78,14 +78,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
public async getCardSize(): Promise<number> {
|
public async getCardSize(): Promise<number> {
|
||||||
if (!this._config || !this.hass) {
|
if (!this._config || !this.hass) {
|
||||||
return 5;
|
return 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
const stateObj = this.hass.states[this._config.entity];
|
const stateObj = this.hass.states[this._config.entity];
|
||||||
|
|
||||||
return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
|
return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
|
||||||
? 3
|
? 4
|
||||||
: 8;
|
: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: AlarmPanelCardConfig): void {
|
public setConfig(config: AlarmPanelCardConfig): void {
|
||||||
@ -270,6 +270,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
|
|||||||
ha-card {
|
ha-card {
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
--alarm-color-disarmed: var(--label-badge-green);
|
--alarm-color-disarmed: var(--label-badge-green);
|
||||||
--alarm-color-pending: var(--label-badge-yellow);
|
--alarm-color-pending: var(--label-badge-yellow);
|
||||||
--alarm-color-triggered: var(--label-badge-red);
|
--alarm-color-triggered: var(--label-badge-red);
|
||||||
|
@ -80,7 +80,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return (
|
return (
|
||||||
(this._config?.show_icon ? 3 : 0) + (this._config?.show_name ? 1 : 0)
|
(this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -101,7 +101,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 4;
|
return this._config?.header ? 1 : 0 + 11;
|
||||||
}
|
}
|
||||||
|
|
||||||
public connectedCallback(): void {
|
public connectedCallback(): void {
|
||||||
@ -208,6 +208,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
|
|||||||
ha-card {
|
ha-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 8px 8px;
|
padding: 0 8px 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
@ -96,7 +96,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
|
|||||||
}
|
}
|
||||||
// +1 for the header
|
// +1 for the header
|
||||||
let size =
|
let size =
|
||||||
(this._config.title || this._showHeaderToggle ? 1 : 0) +
|
(this._config.title || this._showHeaderToggle ? 2 : 0) +
|
||||||
(this._config.entities.length || 1);
|
(this._config.entities.length || 1);
|
||||||
if (this._headerElement) {
|
if (this._headerElement) {
|
||||||
const headerSize = computeCardSize(this._headerElement);
|
const headerSize = computeCardSize(this._headerElement);
|
||||||
|
@ -4,26 +4,25 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
import { styleMap } from "lit-html/directives/style-map";
|
||||||
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
|
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
|
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
|
import "../../../components/ha-gauge";
|
||||||
import type { HomeAssistant } from "../../../types";
|
import type { HomeAssistant } from "../../../types";
|
||||||
import { findEntities } from "../common/find-entites";
|
import { findEntities } from "../common/find-entites";
|
||||||
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
||||||
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
||||||
import type { LovelaceCard, LovelaceCardEditor } from "../types";
|
import type { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||||
import type { GaugeCardConfig } from "./types";
|
import type { GaugeCardConfig } from "./types";
|
||||||
import "../../../components/ha-gauge";
|
|
||||||
import { styleMap } from "lit-html/directives/style-map";
|
|
||||||
|
|
||||||
export const severityMap = {
|
export const severityMap = {
|
||||||
red: "var(--label-badge-red)",
|
red: "var(--label-badge-red)",
|
||||||
@ -69,7 +68,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
|||||||
@internalProperty() private _config?: GaugeCardConfig;
|
@internalProperty() private _config?: GaugeCardConfig;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 2;
|
return 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: GaugeCardConfig): void {
|
public setConfig(config: GaugeCardConfig): void {
|
||||||
@ -195,10 +194,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-card {
|
ha-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -73,13 +73,14 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
|||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
const rowHeight =
|
const rowHeight =
|
||||||
(this._config!.show_icon ? 1 : 0) +
|
(this._config!.show_icon ? 1 : 0) +
|
||||||
(this._config!.show_name && this._config!.show_state ? 1 : 0) || 1;
|
(this._config!.show_name ? 1 : 0) +
|
||||||
|
(this._config!.show_state ? 1 : 0);
|
||||||
|
|
||||||
const numRows = Math.ceil(
|
const numRows = Math.ceil(
|
||||||
this._configEntities!.length / (this._config!.columns || 5)
|
this._configEntities!.length / (this._config!.columns || 5)
|
||||||
);
|
);
|
||||||
|
|
||||||
return (this._config!.title ? 1 : 0) + rowHeight * numRows;
|
return (this._config!.title ? 2 : 0) + rowHeight * numRows;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: GlanceCardConfig): void {
|
public setConfig(config: GlanceCardConfig): void {
|
||||||
@ -189,10 +190,16 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
|
ha-card {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.entities {
|
.entities {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 16px 4px;
|
padding: 0 16px 4px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-content: center;
|
||||||
}
|
}
|
||||||
.entities.no-header {
|
.entities.no-header {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
@ -3,25 +3,25 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { classMap } from "lit-html/directives/class-map";
|
import { classMap } from "lit-html/directives/class-map";
|
||||||
|
import { throttle } from "../../../common/util/throttle";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/state-history-charts";
|
import "../../../components/state-history-charts";
|
||||||
import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
|
import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
|
||||||
|
import { HistoryResult } from "../../../data/history";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import { findEntities } from "../common/find-entites";
|
import { findEntities } from "../common/find-entites";
|
||||||
|
import { hasConfigOrEntitiesChanged } from "../common/has-changed";
|
||||||
import { processConfigEntities } from "../common/process-config-entities";
|
import { processConfigEntities } from "../common/process-config-entities";
|
||||||
import { EntityConfig } from "../entity-rows/types";
|
import { EntityConfig } from "../entity-rows/types";
|
||||||
import { LovelaceCard } from "../types";
|
import { LovelaceCard } from "../types";
|
||||||
import { HistoryGraphCardConfig } from "./types";
|
import { HistoryGraphCardConfig } from "./types";
|
||||||
import { HistoryResult } from "../../../data/history";
|
|
||||||
import { hasConfigOrEntitiesChanged } from "../common/has-changed";
|
|
||||||
import { throttle } from "../../../common/util/throttle";
|
|
||||||
|
|
||||||
@customElement("hui-history-graph-card")
|
@customElement("hui-history-graph-card")
|
||||||
export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
|
export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
|
||||||
@ -67,7 +67,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
|
|||||||
private _throttleGetStateHistory?: () => void;
|
private _throttleGetStateHistory?: () => void;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 4;
|
return this._config?.title
|
||||||
|
? 2
|
||||||
|
: 0 + 2 * (this._configEntities?.length || 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: HistoryGraphCardConfig): void {
|
public setConfig(config: HistoryGraphCardConfig): void {
|
||||||
@ -185,6 +187,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
|
ha-card {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
.content {
|
.content {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
|
|||||||
css`
|
css`
|
||||||
#root {
|
#root {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
#root > * {
|
#root > * {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "../../../components/ha-icon-button";
|
|
||||||
import "@thomasloven/round-slider";
|
import "@thomasloven/round-slider";
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
@ -6,9 +5,9 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
svg,
|
svg,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
@ -18,8 +17,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
|||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import { HumidifierEntity } from "../../../data/humidifier";
|
import "../../../components/ha-icon-button";
|
||||||
import { UNAVAILABLE_STATES } from "../../../data/entity";
|
import { UNAVAILABLE_STATES } from "../../../data/entity";
|
||||||
|
import { HumidifierEntity } from "../../../data/humidifier";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import { findEntities } from "../common/find-entites";
|
import { findEntities } from "../common/find-entites";
|
||||||
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
||||||
@ -61,7 +61,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
|||||||
@internalProperty() private _setHum?: number;
|
@internalProperty() private _setHum?: number;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 5;
|
return 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: HumidifierCardConfig): void {
|
public setConfig(config: HumidifierCardConfig): void {
|
||||||
|
@ -40,7 +40,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
if (!this._config) {
|
if (!this._config) {
|
||||||
return 3;
|
return 5;
|
||||||
}
|
}
|
||||||
const aspectRatio = this._config.aspect_ratio
|
const aspectRatio = this._config.aspect_ratio
|
||||||
? Number(this._config.aspect_ratio.replace("%", ""))
|
? Number(this._config.aspect_ratio.replace("%", ""))
|
||||||
|
@ -68,7 +68,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
private _brightnessTimout?: number;
|
private _brightnessTimout?: number;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 4;
|
return 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: LightCardConfig): void {
|
public setConfig(config: LightCardConfig): void {
|
||||||
@ -267,10 +267,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-card {
|
ha-card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "../../../components/ha-icon-button";
|
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
Circle,
|
Circle,
|
||||||
@ -23,24 +22,25 @@ import {
|
|||||||
import { classMap } from "lit-html/directives/class-map";
|
import { classMap } from "lit-html/directives/class-map";
|
||||||
import {
|
import {
|
||||||
LeafletModuleType,
|
LeafletModuleType,
|
||||||
setupLeafletMap,
|
|
||||||
replaceTileLayer,
|
replaceTileLayer,
|
||||||
|
setupLeafletMap,
|
||||||
} from "../../../common/dom/setup-leaflet-map";
|
} from "../../../common/dom/setup-leaflet-map";
|
||||||
import { computeDomain } from "../../../common/entity/compute_domain";
|
import { computeDomain } from "../../../common/entity/compute_domain";
|
||||||
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
|
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
|
||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
import { debounce } from "../../../common/util/debounce";
|
import { debounce } from "../../../common/util/debounce";
|
||||||
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
|
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
|
||||||
|
import "../../../components/ha-card";
|
||||||
|
import "../../../components/ha-icon-button";
|
||||||
import { fetchRecent } from "../../../data/history";
|
import { fetchRecent } from "../../../data/history";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import "../../map/ha-entity-marker";
|
import "../../map/ha-entity-marker";
|
||||||
import { findEntities } from "../common/find-entites";
|
import { findEntities } from "../common/find-entites";
|
||||||
|
import { installResizeObserver } from "../common/install-resize-observer";
|
||||||
import { processConfigEntities } from "../common/process-config-entities";
|
import { processConfigEntities } from "../common/process-config-entities";
|
||||||
import { EntityConfig } from "../entity-rows/types";
|
import { EntityConfig } from "../entity-rows/types";
|
||||||
import { LovelaceCard } from "../types";
|
import { LovelaceCard } from "../types";
|
||||||
import "../../../components/ha-card";
|
|
||||||
import { MapCardConfig } from "./types";
|
import { MapCardConfig } from "./types";
|
||||||
import { installResizeObserver } from "../common/install-resize-observer";
|
|
||||||
|
|
||||||
@customElement("hui-map-card")
|
@customElement("hui-map-card")
|
||||||
class HuiMapCard extends LitElement implements LovelaceCard {
|
class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
@ -162,7 +162,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
if (!this._config?.aspect_ratio) {
|
if (!this._config?.aspect_ratio) {
|
||||||
return 5;
|
return 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ratio = parseAspectRatio(this._config.aspect_ratio);
|
const ratio = parseAspectRatio(this._config.aspect_ratio);
|
||||||
@ -660,17 +660,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
:host([ispanel]) ha-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([ispanel][editMode]) ha-card {
|
:host([ispanel][editMode]) ha-card {
|
||||||
height: calc(100% - 51px);
|
height: calc(100% - 51px);
|
||||||
}
|
}
|
||||||
|
|
||||||
ha-card {
|
ha-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
|
@ -4,9 +4,9 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
@ -15,8 +15,8 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
|
|||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-markdown";
|
import "../../../components/ha-markdown";
|
||||||
import {
|
import {
|
||||||
subscribeRenderTemplate,
|
|
||||||
RenderTemplateResult,
|
RenderTemplateResult,
|
||||||
|
subscribeRenderTemplate,
|
||||||
} from "../../../data/ws-templates";
|
} from "../../../data/ws-templates";
|
||||||
import type { HomeAssistant } from "../../../types";
|
import type { HomeAssistant } from "../../../types";
|
||||||
import type { LovelaceCard, LovelaceCardEditor } from "../types";
|
import type { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||||
@ -170,6 +170,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
|
ha-card {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
ha-markdown {
|
ha-markdown {
|
||||||
padding: 0 16px 16px;
|
padding: 0 16px 16px;
|
||||||
}
|
}
|
||||||
|
@ -761,6 +761,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
|||||||
return css`
|
return css`
|
||||||
ha-card {
|
ha-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
|
@ -43,7 +43,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
|
|||||||
@property() protected _config?: PictureCardConfig;
|
@property() protected _config?: PictureCardConfig;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 3;
|
return 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: PictureCardConfig): void {
|
public setConfig(config: PictureCardConfig): void {
|
||||||
@ -113,6 +113,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
|
|||||||
return css`
|
return css`
|
||||||
ha-card {
|
ha-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
ha-card.clickable {
|
ha-card.clickable {
|
||||||
|
@ -3,9 +3,9 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
@ -149,6 +149,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
ha-card {
|
ha-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -3,9 +3,9 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
@ -139,9 +139,9 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else if (this._config.show_name) {
|
} else if (this._config.show_name) {
|
||||||
footer = html` <div class="footer">${name}</div> `;
|
footer = html`<div class="footer">${name}</div>`;
|
||||||
} else if (this._config.show_state) {
|
} else if (this._config.show_state) {
|
||||||
footer = html` <div class="footer state">${state}</div> `;
|
footer = html`<div class="footer state">${state}</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
@ -182,6 +182,8 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
|
|||||||
min-height: 75px;
|
min-height: 75px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
hui-image.clickable {
|
hui-image.clickable {
|
||||||
|
@ -266,7 +266,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
|||||||
`}
|
`}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
${this._config!.show_state !== true && entityConf.show_state !== true
|
${this._config!.show_state !== true && entityConf.show_state !== true
|
||||||
? html` <div class="state"></div> `
|
? html`<div class="state"></div>`
|
||||||
: html`
|
: html`
|
||||||
<div class="state">
|
<div class="state">
|
||||||
${entityConf.attribute
|
${entityConf.attribute
|
||||||
@ -297,6 +297,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
|||||||
position: relative;
|
position: relative;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
hui-image.clickable {
|
hui-image.clickable {
|
||||||
|
@ -4,9 +4,9 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
@ -19,9 +19,9 @@ import { HomeAssistant } from "../../../types";
|
|||||||
import { actionHandler } from "../common/directives/action-handler-directive";
|
import { actionHandler } from "../common/directives/action-handler-directive";
|
||||||
import { findEntities } from "../common/find-entites";
|
import { findEntities } from "../common/find-entites";
|
||||||
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
||||||
|
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
||||||
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||||
import { PlantAttributeTarget, PlantStatusCardConfig } from "./types";
|
import { PlantAttributeTarget, PlantStatusCardConfig } from "./types";
|
||||||
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
|
||||||
|
|
||||||
const SENSORS = {
|
const SENSORS = {
|
||||||
moisture: "hass:water",
|
moisture: "hass:water",
|
||||||
@ -163,6 +163,10 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
|
ha-card {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
.banner {
|
.banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
import "@polymer/paper-checkbox/paper-checkbox";
|
import "@polymer/paper-checkbox/paper-checkbox";
|
||||||
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||||
|
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
@ -23,11 +24,10 @@ import {
|
|||||||
ShoppingListItem,
|
ShoppingListItem,
|
||||||
updateItem,
|
updateItem,
|
||||||
} from "../../../data/shopping-list";
|
} from "../../../data/shopping-list";
|
||||||
|
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||||
import { SensorCardConfig, ShoppingListCardConfig } from "./types";
|
import { SensorCardConfig, ShoppingListCardConfig } from "./types";
|
||||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
|
||||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
|
||||||
|
|
||||||
@customElement("hui-shopping-list-card")
|
@customElement("hui-shopping-list-card")
|
||||||
class HuiShoppingListCard extends SubscribeMixin(LitElement)
|
class HuiShoppingListCard extends SubscribeMixin(LitElement)
|
||||||
@ -52,7 +52,7 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
|
|||||||
@internalProperty() private _checkedItems?: ShoppingListItem[];
|
@internalProperty() private _checkedItems?: ShoppingListItem[];
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return (this._config ? (this._config.title ? 1 : 0) : 0) + 3;
|
return (this._config ? (this._config.title ? 2 : 0) : 0) + 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: ShoppingListCardConfig): void {
|
public setConfig(config: ShoppingListCardConfig): void {
|
||||||
@ -254,6 +254,8 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
|
|||||||
return css`
|
return css`
|
||||||
ha-card {
|
ha-card {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-header {
|
.has-header {
|
||||||
|
@ -82,7 +82,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
|||||||
@query("ha-card") private _card?: HaCard;
|
@query("ha-card") private _card?: HaCard;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 5;
|
return 7;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: ThermostatCardConfig): void {
|
public setConfig(config: ThermostatCardConfig): void {
|
||||||
|
@ -26,6 +26,7 @@ class HuiVerticalStackCard extends HuiStackCard {
|
|||||||
#root {
|
#root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
#root > * {
|
#root > * {
|
||||||
margin: 4px 0 4px 0;
|
margin: 4px 0 4px 0;
|
||||||
|
@ -86,7 +86,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return this._config?.show_forecast !== false ? 4 : 2;
|
return this._config?.show_forecast !== false ? 5 : 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: WeatherForecastCardConfig): void {
|
public setConfig(config: WeatherForecastCardConfig): void {
|
||||||
@ -354,31 +354,38 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.offsetWidth < 375) {
|
const card = this.shadowRoot!.querySelector("ha-card");
|
||||||
|
// If we show an error or warning there is no ha-card
|
||||||
|
if (!card) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (card.offsetWidth < 375) {
|
||||||
this.setAttribute("narrow", "");
|
this.setAttribute("narrow", "");
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("narrow");
|
this.removeAttribute("narrow");
|
||||||
}
|
}
|
||||||
if (this.offsetWidth < 300) {
|
if (card.offsetWidth < 300) {
|
||||||
this.setAttribute("verynarrow", "");
|
this.setAttribute("verynarrow", "");
|
||||||
} else {
|
} else {
|
||||||
this.removeAttribute("verynarrow");
|
this.removeAttribute("verynarrow");
|
||||||
}
|
}
|
||||||
this._veryVeryNarrow = this.offsetWidth < 245;
|
this._veryVeryNarrow = card.offsetWidth < 245;
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [
|
return [
|
||||||
weatherSVGStyles,
|
weatherSVGStyles,
|
||||||
css`
|
css`
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-card {
|
ha-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 16px;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@ -173,7 +173,7 @@ export const computeCards = (
|
|||||||
const cardConfig = {
|
const cardConfig = {
|
||||||
type: "weather-forecast",
|
type: "weather-forecast",
|
||||||
entity: entityId,
|
entity: entityId,
|
||||||
show_forecast: false
|
show_forecast: false,
|
||||||
};
|
};
|
||||||
cards.push(cardConfig);
|
cards.push(cardConfig);
|
||||||
} else if (
|
} else if (
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import {
|
import {
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
internalProperty,
|
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import { processConfigEntities } from "../common/process-config-entities";
|
import { processConfigEntities } from "../common/process-config-entities";
|
||||||
@ -25,7 +25,7 @@ export class HuiButtonsHeaderFooter extends LitElement
|
|||||||
@internalProperty() private _configEntities?: EntityConfig[];
|
@internalProperty() private _configEntities?: EntityConfig[];
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 1;
|
return 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: ButtonsHeaderFooterConfig): void {
|
public setConfig(config: ButtonsHeaderFooterConfig): void {
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import "../../../components/ha-circular-progress";
|
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
internalProperty,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
internalProperty,
|
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
import "../../../components/ha-circular-progress";
|
||||||
import { fetchRecent } from "../../../data/history";
|
import { fetchRecent } from "../../../data/history";
|
||||||
import { HomeAssistant } from "../../../types";
|
import { HomeAssistant } from "../../../types";
|
||||||
import { coordinates } from "../common/graph/coordinates";
|
import { coordinates } from "../common/graph/coordinates";
|
||||||
@ -42,7 +42,7 @@ export class HuiGraphHeaderFooter extends LitElement
|
|||||||
private _fetching = false;
|
private _fetching = false;
|
||||||
|
|
||||||
public getCardSize(): number {
|
public getCardSize(): number {
|
||||||
return 2;
|
return 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setConfig(config: GraphHeaderFooterConfig): void {
|
public setConfig(config: GraphHeaderFooterConfig): void {
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
export const bytesToString = (value = 0, decimals = 2): string => {
|
export const bytesToString = (value = 0, decimals = 2): string => {
|
||||||
if (value === 0) {
|
if (value === 0) {
|
||||||
return '0 Bytes';
|
return "0 Bytes";
|
||||||
}
|
}
|
||||||
const k = 1024;
|
const k = 1024;
|
||||||
decimals = decimals < 0 ? 0 : decimals;
|
decimals = decimals < 0 ? 0 : decimals;
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||||
const i = Math.floor(Math.log(value) / Math.log(k));
|
const i = Math.floor(Math.log(value) / Math.log(k));
|
||||||
return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
|
return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
|
||||||
}
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user