-
-
- Create snapshot
-
- Snapshots allow you to easily backup and
- restore all data of your Hass.io instance.
+
+
+
+
+ Create snapshot
+
+ Snapshots allow you to easily backup and restore all data of your
+ Hass.io instance.
+
-
-
-
-
- Type:
-
-
- Full snapshot
-
-
- Partial snapshot
-
-
-
- Folders:
-
-
- [[item.name]]
-
-
- Add-ons:
-
-
- [[item.name]]
-
-
-
- Security:
-
Password protection
-
-
-
-
- [[error]]
-
-
-
-
-
-
Available snapshots
-
- You don't have any snapshots yet.
-
-
-
-
-
+
+ Type:
+
+
+ Full snapshot
+
+
+ Partial snapshot
+
+
+
+ Folders:
+
+
+ [[item.name]]
+
+
+ Add-ons:
+
+
+ [[item.name]]
+
+
+
+ Security:
+
Password protection
+
+
+
+
+ [[error]]
+
+
+
+
+
+
Available snapshots
+
+
+ You don't have any snapshots yet.
+
+
+
+
+
+
+
+
+
+
-
-`;
+ `;
}
static get properties() {
diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
index 4ade53491f..0b650e3e48 100644
--- a/hassio/src/system/hassio-host-info.js
+++ b/hassio/src/system/hassio-host-info.js
@@ -9,90 +9,110 @@ import EventsMixin from "../../../src/mixins/events-mixin";
class HassioHostInfo extends EventsMixin(PolymerElement) {
static get template() {
return html`
-
-
-
-
Host system
-
-
- | Hostname |
- [[data.hostname]] |
-
-
- | System |
- [[data.operating_system]] |
-
-
-
- | Deployment |
- [[data.deployment]] |
-
-
-
-
- Hardware
-
-
-
- Change hostname
+ @media screen and (max-width: 830px) {
+ paper-card {
+ margin-top: 8px;
+ margin-left: 0;
+ width: 100%;
+ }
+ .card-content {
+ height: auto;
+ }
+ }
+ .info {
+ width: 100%;
+ }
+ .info td:nth-child(2) {
+ text-align: right;
+ }
+ .errors {
+ color: var(--google-red-500);
+ margin-top: 16px;
+ }
+ paper-button.info {
+ max-width: calc(50% - 12px);
+ }
+ table.info {
+ margin-bottom: 10px;
+ }
+
+
+
+
Host system
+
+
+
+ | Hostname |
+ [[data.hostname]] |
+
+
+ | System |
+ [[data.operating_system]] |
+
+
+
+ | Deployment |
+ [[data.deployment]] |
+
+
+
+
+
+ Hardware
-
-
- Error: [[errors]]
-
-
-
- Reboot
-
-
- Shutdown
-
-
- Import from USB
-
-
- Update
-
-
-
-`;
+
+
+ Change hostname
+
+
+
+ Error: [[errors]]
+
+
+
+ Reboot
+
+
+ Shutdown
+
+
+ Import from USB
+
+
+ Update
+
+
+
+ `;
}
static get properties() {
diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
index c594bad418..a067700623 100644
--- a/hassio/src/system/hassio-supervisor-info.js
+++ b/hassio/src/system/hassio-supervisor-info.js
@@ -9,73 +9,96 @@ import EventsMixin from "../../../src/mixins/events-mixin";
class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
static get template() {
return html`
-
-
-
-
Hass.io supervisor
-
-
- | Version |
-
- [[data.version]]
- |
-
-
- | Latest version |
- [[data.last_version]] |
-
-
-
- | Channel |
- [[data.channel]] |
-
+ @media screen and (max-width: 830px) {
+ paper-card {
+ width: 100%;
+ }
+ .card-content {
+ height: auto;
+ }
+ }
+ .info {
+ width: 100%;
+ }
+ .info td:nth-child(2) {
+ text-align: right;
+ }
+ .errors {
+ color: var(--google-red-500);
+ margin-top: 16px;
+ }
+
+
+
+
Hass.io supervisor
+
+
+
+ | Version |
+ [[data.version]] |
+
+
+ | Latest version |
+ [[data.last_version]] |
+
+
+
+ | Channel |
+ [[data.channel]] |
+
+
+
+
+
+ Error: [[errors]]
-
-
- Error: [[errors]]
-
-
-
Reload
-
- Update
-
-
- Leave beta channel
-
-
- Join beta channel
-
-
-`;
+
+
+
Reload
+
+ Update
+
+
+ Leave beta channel
+
+
+ Join beta channel
+
+
+
+ `;
}
static get properties() {
diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js
index 4b08600851..26a3a6a078 100644
--- a/hassio/src/system/hassio-supervisor-log.js
+++ b/hassio/src/system/hassio-supervisor-log.js
@@ -6,23 +6,21 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
class HassioSupervisorLog extends PolymerElement {
static get template() {
return html`
-
-
-
-
-
-`;
+
+
+
+
+
+ `;
}
static get properties() {
diff --git a/hassio/src/system/hassio-system.js b/hassio/src/system/hassio-system.js
index 48d963c35d..dbfa76241f 100644
--- a/hassio/src/system/hassio-system.js
+++ b/hassio/src/system/hassio-system.js
@@ -9,26 +9,32 @@ import "./hassio-supervisor-log";
class HassioSystem extends PolymerElement {
static get template() {
return html`
-
-
-
Information
-
-
-
System log
-
-
-`;
+
+
+
Information
+
+
+
System log
+
+
+ `;
}
static get properties() {
diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
index 22f4435c83..e872c04e97 100644
--- a/src/auth/ha-auth-flow.js
+++ b/src/auth/ha-auth-flow.js
@@ -7,54 +7,61 @@ import LocalizeLiteMixin from "../mixins/localize-lite-mixin";
class HaAuthFlow extends LocalizeLiteMixin(PolymerElement) {
static get template() {
return html`
-
-
+ `;
}
static get properties() {
diff --git a/src/auth/ha-authorize.js b/src/auth/ha-authorize.js
index dfc266898e..c4b85f9c7d 100644
--- a/src/auth/ha-authorize.js
+++ b/src/auth/ha-authorize.js
@@ -12,49 +12,51 @@ import "./ha-auth-flow";
class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
static get template() {
return html`
-
+
-
- [[localize('ui.panel.page-authorize.initializing')]]
-
+
+ [[localize('ui.panel.page-authorize.initializing')]]
+
-
-
+
+
-
-
-
-
+ redirect-uri="[[redirectUri]]"
+ oauth2-state="[[oauth2State]]"
+ auth-provider="[[_authProvider]]"
+ step="{{step}}"
+ >
+
+
+
+
-
-`;
+ `;
}
static get properties() {
diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js
index 378e656ad5..3e31129069 100644
--- a/src/auth/ha-pick-auth-provider.js
+++ b/src/auth/ha-pick-auth-provider.js
@@ -14,22 +14,22 @@ class HaPickAuthProvider extends EventsMixin(
) {
static get template() {
return html`
-
- [[localize('ui.panel.page-authorize.pick_auth_provider')]]:
-
-
- [[item.name]]
-
-
-
-`;
+
+ [[localize('ui.panel.page-authorize.pick_auth_provider')]]:
+
+
+ [[item.name]]
+
+
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-badges-card.js b/src/cards/ha-badges-card.js
index 47e8327eb0..6b62930888 100644
--- a/src/cards/ha-badges-card.js
+++ b/src/cards/ha-badges-card.js
@@ -6,16 +6,19 @@ import "../components/entity/ha-state-label-badge";
class HaBadgesCard extends PolymerElement {
static get template() {
return html`
-
-
-
-
-`;
+
+
+
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-camera-card.js b/src/cards/ha-camera-card.js
index 424867052e..c26b60b72c 100644
--- a/src/cards/ha-camera-card.js
+++ b/src/cards/ha-camera-card.js
@@ -14,51 +14,55 @@ const UPDATE_INTERVAL = 10000; // ms
class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
-
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 16px;
+ color: white;
+ }
+
-
- ![[[_computeStateName(stateObj)]]]([[cameraFeedSrc]])
-
-
- [[_computeStateName(stateObj)]]
-
- ([[localize('ui.card.camera.not_available')]])
-
-
-`;
+
+
+
+
+ [[_computeStateName(stateObj)]]
+
+ ([[localize('ui.card.camera.not_available')]])
+
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index b1ce669fd7..30e3cac114 100644
--- a/src/cards/ha-entities-card.js
+++ b/src/cards/ha-entities-card.js
@@ -16,54 +16,68 @@ import LocalizeMixin from "../mixins/localize-mixin";
class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
-
-
+
+ line-height: 40px;
+ color: var(--primary-text-color);
+ padding: 4px 0 12px;
+ }
+ .header .name {
+ @apply --paper-font-common-nowrap;
+ }
+ ha-entity-toggle {
+ margin-left: 16px;
+ }
+ .more-info {
+ cursor: pointer;
+ }
+
-
-
-
-
-
-
-
-
-`;
+
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js
index 2b1e79a863..bef1e9e70b 100644
--- a/src/cards/ha-history_graph-card.js
+++ b/src/cards/ha-history_graph-card.js
@@ -14,39 +14,56 @@ import EventsMixin from "../mixins/events-mixin";
class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
static get template() {
return html`
-
-
-
-
-
-
-
-
-
-`;
+
+
+
+
+
+
+
+
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js
index 804ccb2780..e10e252f0e 100644
--- a/src/cards/ha-media_player-card.js
+++ b/src/cards/ha-media_player-card.js
@@ -18,169 +18,200 @@ import LocalizeMixin from "../mixins/localize-mixin";
class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
-
+ [invisible] {
+ visibility: hidden !important;
+ }
+
-
-
+
+
-
- [[_computeStateName(stateObj)]]
-
[[computePrimaryText(localize, playerObj)]]
- [[playerObj.secondaryTitle]]
-
-
-
-
-
-
-
-
-
-
-
-
+
+ [[_computeStateName(stateObj)]]
+
[[computePrimaryText(localize, playerObj)]]
+ [[playerObj.secondaryTitle]]
+
-
+
-
-`;
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-persistent_notification-card.js b/src/cards/ha-persistent_notification-card.js
index 9592c05699..af594cd851 100644
--- a/src/cards/ha-persistent_notification-card.js
+++ b/src/cards/ha-persistent_notification-card.js
@@ -15,40 +15,42 @@ import computeObjectId from "../common/entity/compute_object_id";
class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
-
+
-
-
- [[localize('ui.card.persistent_notification.dismiss')]]
-
-`;
+
+
+ [[localize('ui.card.persistent_notification.dismiss')]]
+
+ `;
}
static get properties() {
diff --git a/src/cards/ha-plant-card.js b/src/cards/ha-plant-card.js
index 93862dece0..2cb91c762d 100644
--- a/src/cards/ha-plant-card.js
+++ b/src/cards/ha-plant-card.js
@@ -10,76 +10,93 @@ import EventsMixin from "../mixins/events-mixin";
class HaPlantCard extends EventsMixin(PolymerElement) {
static get template() {
return html`
-
+
-
-
-
-
-
-
-
-
-
- [[computeValue(stateObj.attributes, item)]]
+
+
+
+
+
+
+
+
+
+
+
+ [[computeValue(stateObj.attributes, item)]]
+
+
+ [[computeUom(stateObj.attributes.unit_of_measurement_dict,
+ item)]]
+
[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]
-
-
-`;
+
+
@@ -117,26 +115,38 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
- [[stateObj.attributes.temperature]][[getUnit('temperature')]]
+ [[stateObj.attributes.temperature]][[getUnit('temperature')]]
-
+
[[localize('ui.card.weather.attributes.air_pressure')]]:
[[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
-
+
[[localize('ui.card.weather.attributes.humidity')]]:
[[stateObj.attributes.humidity]] %
-
+
[[localize('ui.card.weather.attributes.wind_speed')]]:
- [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
+ [[getWind(stateObj.attributes.wind_speed,
+ stateObj.attributes.wind_bearing, localize)]]
@@ -145,22 +155,31 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
-
[[computeDate(item.datetime)]]
+
+ [[computeDate(item.datetime)]]
[[computeTime(item.datetime)]]
-
+
-
[[item.temperature]] [[getUnit('temperature')]]
+
+ [[item.temperature]] [[getUnit('temperature')]]
+
- [[item.templow]] [[getUnit('temperature')]]
+
+ [[item.templow]] [[getUnit('temperature')]]
+
- [[item.precipitation]] [[getUnit('precipitation')]]
+
+ [[item.precipitation]] [[getUnit('precipitation')]]
+
diff --git a/src/common/entity/attribute_class_names.ts b/src/common/entity/attribute_class_names.ts
index 28d06f53fa..bf273870b8 100644
--- a/src/common/entity/attribute_class_names.ts
+++ b/src/common/entity/attribute_class_names.ts
@@ -8,9 +8,8 @@ export default function attributeClassNames(
return "";
}
return attributes
- .map(
- (attribute) =>
- attribute in stateObj.attributes ? "has-" + attribute : ""
+ .map((attribute) =>
+ attribute in stateObj.attributes ? "has-" + attribute : ""
)
.filter((attr) => attr !== "")
.join(" ");
diff --git a/src/common/entity/feature_class_names.ts b/src/common/entity/feature_class_names.ts
index 4cafc68b86..d2d0cac26e 100644
--- a/src/common/entity/feature_class_names.ts
+++ b/src/common/entity/feature_class_names.ts
@@ -12,10 +12,9 @@ export default function featureClassNames(
const features = stateObj.attributes.supported_features;
return Object.keys(classNames)
- .map(
- (feature) =>
- // tslint:disable-next-line
- (features & Number(feature)) !== 0 ? classNames[feature] : ""
+ .map((feature) =>
+ // tslint:disable-next-line
+ (features & Number(feature)) !== 0 ? classNames[feature] : ""
)
.filter((attr) => attr !== "")
.join(" ");
diff --git a/src/components/buttons/ha-call-api-button.js b/src/components/buttons/ha-call-api-button.js
index 01de64a64d..792d7d719c 100644
--- a/src/components/buttons/ha-call-api-button.js
+++ b/src/components/buttons/ha-call-api-button.js
@@ -10,7 +10,8 @@ class HaCallApiButton extends LitElement {
.progress="${this.progress}"
@click="${this._buttonTapped}"
?disabled="${this.disabled}"
- >
+ >
`;
}
diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js
index 3f3b02860f..ce05a5340b 100644
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@@ -10,8 +10,13 @@ import EventsMixin from "../../mixins/events-mixin";
class HaCallServiceButton extends EventsMixin(PolymerElement) {
static get template() {
return html`
-
-`;
+
+ `;
}
static get properties() {
diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js
index f45a8a0c88..f7b6faccec 100644
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -6,53 +6,55 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
class HaProgressButton extends PolymerElement {
static get template() {
return html`
-
-
-`;
+ .progress {
+ @apply --layout;
+ @apply --layout-center-center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+
+ `;
}
static get properties() {
diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index fa8364b480..4fca809873 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -18,120 +18,126 @@ class HaChartBase extends mixinBehaviors(
) {
static get template() {
return html`
-
-
- 
-