diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts
index 4ceb7b7e45..793b9d1795 100644
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@@ -12,6 +12,8 @@ export class HaClickableListItem extends ListItemBase {
// property used only in css
@property({ type: Boolean, reflect: true }) public rtl = false;
+ @property({ type: Boolean, reflect: true }) public openNewTab = false;
+
@query("a") private _anchor!: HTMLAnchorElement;
public render() {
@@ -20,7 +22,12 @@ export class HaClickableListItem extends ListItemBase {
return html`${this.disableHref
? html`${r}`
- : html`${r}`}`;
+ : html`${r}`}`;
}
firstUpdated() {
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index d4d3784ba1..3af90288dc 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -61,6 +61,7 @@ class HaConfigSystemNavigation extends LitElement {
.pages=${pages}
>
+
`;
@@ -136,6 +137,11 @@ class HaConfigSystemNavigation extends LitElement {
--navigation-list-item-title-font-size: 16px;
--navigation-list-item-padding: 4px;
}
+ .yaml-config {
+ margin-bottom: max(env(safe-area-inset-bottom), 24px);
+ text-align: center;
+ font-style: italic;
+ }
`,
];
}
diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts
index d5a7675fc0..b046e5ff18 100644
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -13,7 +13,6 @@ import "../../../layouts/hass-subpage";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
-import "./integrations-card";
const JS_TYPE = __BUILD__;
const JS_VERSION = __VERSION__;
@@ -21,13 +20,13 @@ const JS_VERSION = __VERSION__;
class HaConfigInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public narrow!: boolean;
+ @property({ type: Boolean }) public narrow!: boolean;
- @property() public isWide!: boolean;
+ @property({ type: Boolean }) public isWide!: boolean;
- @property() public showAdvanced!: boolean;
+ @property({ type: Boolean }) public showAdvanced!: boolean;
- @property() public route!: Route;
+ @property({ attribute: false }) public route!: Route;
@state() private _hostInfo?: HassioHostInfo;
@@ -61,18 +60,22 @@ class HaConfigInfo extends LitElement {
- Home Assistant Core ${hass.connection.haVersion}
+ Home Assistant Core ${hass.connection.haVersion}
${this._hassioInfo
- ? html`
- Home Assistant Supervisor ${this._hassioInfo.supervisor}
-
`
+ ? html`
+
+ Home Assistant Supervisor ${this._hassioInfo.supervisor}
+
+ `
: ""}
${this._osInfo?.version
- ? html`Home Assistant OS ${this._osInfo.version}
`
+ ? html`Home Assistant OS ${this._osInfo.version}
`
: ""}
${this._hostInfo
- ? html`Kernel version ${this._hostInfo.kernel}
- Agent version ${this._hostInfo.agent_version}
`
+ ? html`
+ Kernel version ${this._hostInfo.kernel}
+ Agent version ${this._hostInfo.agent_version}
+ `
: ""}
${this.hass.localize(
@@ -211,18 +214,15 @@ class HaConfigInfo extends LitElement {
.about a {
color: var(--primary-color);
}
-
- integrations-card {
- display: block;
- max-width: 600px;
- margin: 0 auto;
- padding-bottom: 16px;
- }
ha-logo-svg {
padding: 12px;
height: 180px;
width: 180px;
}
+
+ h4 {
+ font-weight: 400;
+ }
`,
];
}
diff --git a/src/panels/config/system-health/ha-config-system-health.ts b/src/panels/config/system-health/ha-config-system-health.ts
index 46222a00da..ba3c2862b0 100644
--- a/src/panels/config/system-health/ha-config-system-health.ts
+++ b/src/panels/config/system-health/ha-config-system-health.ts
@@ -30,7 +30,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
-import "../info/integrations-card";
+import "./integrations-card";
const sortKeys = (a: string, b: string) => {
if (a === "homeassistant") {
diff --git a/src/panels/config/info/integrations-card.ts b/src/panels/config/system-health/integrations-card.ts
similarity index 93%
rename from src/panels/config/info/integrations-card.ts
rename to src/panels/config/system-health/integrations-card.ts
index 8a7d02aea3..2188160eb7 100644
--- a/src/panels/config/info/integrations-card.ts
+++ b/src/panels/config/system-health/integrations-card.ts
@@ -48,7 +48,7 @@ class IntegrationsCard extends LitElement {
@@ -69,6 +69,7 @@ class IntegrationsCard extends LitElement {
graphic="avatar"
twoline
hasMeta
+ openNewTab
@click=${this._entryClicked}
href=${docLink}
>
@@ -129,7 +130,7 @@ class IntegrationsCard extends LitElement {
static get styles(): CSSResultGroup {
return css`
ha-clickable-list-item {
- --mdc-list-item-meta-size: 48px;
+ --mdc-list-item-meta-size: 64px;
--mdc-typography-caption-font-size: 12px;
}
img {
@@ -137,6 +138,11 @@ class IntegrationsCard extends LitElement {
max-height: 40px;
max-width: 40px;
}
+ div[slot="meta"] {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
`;
}
}
diff --git a/src/translations/en.json b/src/translations/en.json
index e95c39cfac..9e7565cfa1 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1152,7 +1152,7 @@
},
"about": {
"main": "About",
- "secondary": "Version, loaded integrations and links to documentation"
+ "secondary": "Version information, credits and more"
}
},
"common": {
@@ -3167,7 +3167,7 @@
"ram_usage": "Memory Usage",
"core_stats": "Core Stats",
"supervisor_stats": "Supervisor Stats",
- "long_loading_integrations": "Long Loading Integrations"
+ "integration_start_time": "Integration Startup Time"
},
"system_dashboard": {
"confirm_restart_text": "Restarting Home Assistant will stop all your active dashboards, automations and scripts.",
@@ -4155,7 +4155,7 @@
"adjust_sum": "Adjust sum"
},
"yaml": {
- "title": "YAML Configuration",
+ "title": "YAML",
"section": {
"validation": {
"heading": "Configuration validation",