@@ -139,6 +142,7 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
@@ -226,7 +230,7 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
- background-color: var(--card-background-color)
+ background-color: var(--card-background-color);
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
Courier, monospace;
@@ -235,8 +239,9 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
--mdc-theme-primary: var(--update-available-color);
}
esphome-button-menu {
- --mdc-theme-text-icon-on-background: var(--primary-text-color);
+ --mdc-theme-text-icon-on-background: var(--mdc-theme-primary);
}
+
.tooltip-container {
display: inline-block;
}
@@ -244,7 +249,7 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
color: var(--alert-error-color);
}
.mdc-icon-button {
- color: var(--primary-text-color);
+ color: var(--mdc-theme-primary);
}
`,
];
diff --git a/src/devices/devices-list.ts b/src/devices/devices-list.ts
index 905d8ec7..0e856201 100644
--- a/src/devices/devices-list.ts
+++ b/src/devices/devices-list.ts
@@ -9,7 +9,9 @@ import {
} from "../api/devices";
import { openWizardDialog } from "../wizard";
import "@material/mwc-button";
+import "@material/mwc-icon";
import "@material/mwc-textfield";
+import "@material/mwc-linear-progress";
import { subscribeOnlineStatus } from "../api/online-status";
import "./configured-device-card";
import "./importable-device-card";
@@ -34,69 +36,94 @@ class ESPHomeDevicesList extends LitElement {
};
protected render() {
+ const emptySvg = html`
+
+ `;
if (this._devices?.length === 0) {
return html`
- =
this._devices!.filter((item) => this._filter(item));
-
- let htmlClass = "no-result-container";
- let htmlDevices = html`
- this.requestUpdate()}>
-
+
+ `;
+ }
return html`
+
+ ${emptySvg}
+ Welcome to ESPHome
-It looks like you don't yet have any devices.
-
-
+ It looks like you don't have any devices yet.
-
+
`;
}
const filtered: Array
+
+ No devices found
-Adjust your search criteria.
- `; - if ((filtered?.length ? filtered?.length : 0) > 0) { - htmlClass = "grid"; - htmlDevices = html`${repeat( - filtered!, - (device) => device.name, - (device) => html` - ${this._isImportable(device) - ? html`
+ ${emptySvg}
+
+ `;
}
+ const htmlDevices = html`${repeat(
+ filtered!,
+ (device) => device.name,
+ (device) => html`
+ ${this._isImportable(device)
+ ? html`No devices found
++ Please try entering a different search term or + add a new device. +
+${htmlDevices}
+
+ this.requestUpdate()}>
+
`;
}
@@ -137,14 +164,22 @@ class ESPHomeDevicesList extends LitElement {
}
static styles = css`
+ .page-container {
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+ margin: 20px auto;
+ align-items: stretch;
+ max-width: 1920px;
+ gap: 20px;
+ }
+
.grid {
+ width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1.5rem;
- margin: 20px auto;
- width: 90%;
- max-width: 1920px;
justify-content: stretch;
}
@media only screen and (max-width: 1100px) {
@@ -166,17 +201,31 @@ class ESPHomeDevicesList extends LitElement {
esphome-importable-device-card {
margin: 0.5rem 0 1rem 0;
}
+
.no-result-container {
text-align: center;
margin-top: 40px;
color: var(--primary-text-color);
}
- h5 {
+
+ .no-result-container h5 {
font-size: 1.64rem;
line-height: 110%;
font-weight: 400;
margin: 1rem 0 0.65rem 0;
}
+ .no-result-container .helper-text {
+ color: var(--secondary-text-color);
+ }
+ .no-result-container .empty-icon {
+ width: 100px;
+ color: var(--disabled-text-color);
+ }
+
+ .no-result-container a {
+ color: var(--mdc-theme-primary);
+ }
+
hr {
margin-top: 16px;
margin-bottom: 16px;
diff --git a/src/devices/importable-device-card.ts b/src/devices/importable-device-card.ts
index 5a33dfe5..81324a37 100644
--- a/src/devices/importable-device-card.ts
+++ b/src/devices/importable-device-card.ts
@@ -9,10 +9,40 @@ import { esphomeCardStyles } from "../styles";
@customElement("esphome-importable-device-card")
class ESPHomeImportableDeviceCard extends LitElement {
- @property() public device!: ImportableDevice;
- @property() public highlightOnAdd = false;
+ @property({ attribute: false }) public device!: ImportableDevice;
+ @property({ type: Boolean }) public highlightOnAdd = false;
+ @property({ type: Boolean }) public skeleton = false;
protected render() {
+ if (this.skeleton || !this.device) {
+ return html`
+ ${htmlDevices}
+
+
+
+ ${" "}
+
+
+
+
+ ${" "} ${" "}
+
+
+
+
+
+
@@ -56,6 +86,28 @@ class ESPHomeImportableDeviceCard extends LitElement {
esphome-card {
--status-color: var(--status-imported);
}
+
+ esphome-card.skeleton {
+ min-height: 145px;
+ /* skeleton animation on background */
+ background: #eee;
+ background: linear-gradient(
+ 110deg,
+ #ececec 8%,
+ #f5f5f5 18%,
+ #ececec 33%
+ );
+
+ background-size: 200% 100%;
+ animation: 1.5s shine linear infinite;
+ }
+
+ @keyframes shine {
+ to {
+ background-position-x: -200%;
+ }
+ }
+
.inlinecode {
box-sizing: border-box;
padding: 0.2em 0.4em;
diff --git a/src/dialogs/confirmation-dialog.ts b/src/dialogs/confirmation-dialog.ts
index 96181a88..fea242cd 100644
--- a/src/dialogs/confirmation-dialog.ts
+++ b/src/dialogs/confirmation-dialog.ts
@@ -41,6 +41,7 @@ class ESPHomeConfirmationDialog extends LitElement {
class=${classMap({
destructive: this._params.destructive || false,
})}
+ raised
dialogAction="confirm"
>
@@ -54,10 +55,10 @@ class ESPHomeConfirmationDialog extends LitElement {
static get styles(): CSSResultGroup {
return css`
- mwc-button {
- --mdc-theme-primary: var(--primary-text-color);
+ mwc-button button {
+ display: flex;
+ align-items: center;
}
-
.destructive {
--mdc-theme-primary: var(--alert-error-color);
}
diff --git a/src/editor/esphome-editor.ts b/src/editor/esphome-editor.ts
index 97baa164..d91787ce 100644
--- a/src/editor/esphome-editor.ts
+++ b/src/editor/esphome-editor.ts
@@ -54,6 +54,7 @@ class ESPHomeEditor extends LitElement {
overflow: hidden;
}
.esphome-header {
+ padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -73,9 +74,6 @@ class ESPHomeEditor extends LitElement {
mwc-icon-button {
--mdc-icon-button-size: 32px;
}
- mwc-button {
- --mdc-theme-primary: var(--primary-text-color);
- }
- 
-
-
-
diff --git a/src/styles.ts b/src/styles.ts
index 4b9a0085..b0ce105b 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -14,7 +14,6 @@ export const esphomeCardStyles = css`
}
mwc-button {
line-height: 1em;
- --mdc-theme-primary: var(--primary-text-color);
}
.card-actions {
display: flex;
@@ -76,8 +75,7 @@ export const esphomeDialogStyles = css`
}
mwc-button[no-attention] {
- --mdc-theme-primary: var(--mdc-theme-primary-no-attention);
- --mdc-theme-on-primary: var(--mdc-theme-on-primary-no-attention);
+ --mdc-theme-primary: var(--mdc-theme-primary);
}
@media only screen and (max-width: 450px) {
@@ -99,9 +97,9 @@ export const esphomeDialogStyles = css`
padding: 0 24px;
}
- mwc-button {
- --mdc-theme-primary: var(--primary-text-color);
- }
+ /* mwc-button {
+ --mdc-theme-primary: var(--primary-theme-color);
+ } */
`;
export const esphomeSvgStyles = css`
diff --git a/src/wizard/wizard-dialog.ts b/src/wizard/wizard-dialog.ts
index 3ff11949..9fe409e0 100644
--- a/src/wizard/wizard-dialog.ts
+++ b/src/wizard/wizard-dialog.ts
@@ -233,6 +233,7 @@ export class ESPHomeWizardDialog extends LitElement {
{
this._state = "basic_config";
}}
@@ -244,11 +245,7 @@ export class ESPHomeWizardDialog extends LitElement {
target="_blank"
rel="noopener"
>
-
-
-
+
+
+
+
+