jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align integration card, limit height of logo (#16714)

Browse Source
This commit is contained in:
Bram Kragten 2023-06-01 12:01:09 +02:00 committed by GitHub
parent 24b4060c97
commit 9b2e77e781
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ha-list-item.ts
View File

@ -17,8 +17,14 @@ export class HaListItem extends ListItemBase {
styles, styles,
css` css`
:host { :host {
padding-left: var(--mdc-list-side-padding, 20px); padding-left: var(
padding-right: var(--mdc-list-side-padding, 20px); --mdc-list-side-padding-left,
var(--mdc-list-side-padding, 20px)
);
padding-right: var(
--mdc-list-side-padding-right,
var(--mdc-list-side-padding, 20px)
);
} }
:host([graphic="avatar"]:not([twoLine])), :host([graphic="avatar"]:not([twoLine])),
:host([graphic="icon"]:not([twoLine])) { :host([graphic="icon"]:not([twoLine])) {

3
src/panels/config/integrations/ha-config-integration-page.ts
View File

@ -1179,7 +1179,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
padding: 0; padding: 0;
} }
img { img {
width: 200px; max-width: 200px;
max-height: 100px;
} }
ha-alert { ha-alert {
display: block; display: block;

21
src/panels/config/integrations/ha-integration-card.ts
View File

@ -1,7 +1,12 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-list"; import "@material/mwc-list";
import { mdiApplication, mdiCog, mdiDevices, mdiShape } from "@mdi/js"; import {
mdiCogOutline,
mdiDevices,
mdiHandExtendedOutline,
mdiShapeOutline,
} from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -78,7 +83,7 @@ export class HaIntegrationCard extends LitElement {
href=${`/config/integrations/integration/${this.domain}`} href=${`/config/integrations/integration/${this.domain}`}
slot="header-button" slot="header-button"
> >
<ha-icon-button .path=${mdiCog}></ha-icon-button> <ha-icon-button .path=${mdiCogOutline}></ha-icon-button>
</a> </a>
</ha-integration-header> </ha-integration-header>
@ -103,7 +108,7 @@ export class HaIntegrationCard extends LitElement {
> >
<ha-list-item hasMeta graphic="icon"> <ha-list-item hasMeta graphic="icon">
<ha-svg-icon <ha-svg-icon
.path=${services ? mdiApplication : mdiDevices} .path=${services ? mdiHandExtendedOutline : mdiDevices}
slot="graphic" slot="graphic"
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
@ -122,7 +127,10 @@ export class HaIntegrationCard extends LitElement {
href=${`/config/entities?historyBack=1&domain=${this.domain}`} href=${`/config/entities?historyBack=1&domain=${this.domain}`}
> >
<ha-list-item hasMeta graphic="icon"> <ha-list-item hasMeta graphic="icon">
<ha-svg-icon .path=${mdiShape} slot="graphic"></ha-svg-icon> <ha-svg-icon
.path=${mdiShapeOutline}
slot="graphic"
></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.integrations.config_entry.entities`, `ui.panel.config.integrations.config_entry.entities`,
"count", "count",
@ -191,6 +199,7 @@ export class HaIntegrationCard extends LitElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow: hidden;
--state-color: var(--divider-color, #e0e0e0); --state-color: var(--divider-color, #e0e0e0);
--ha-card-border-color: var(--state-color); --ha-card-border-color: var(--state-color);
--state-message-color: var(--state-color); --state-message-color: var(--state-color);
@ -219,7 +228,9 @@ export class HaIntegrationCard extends LitElement {
} }
.content { .content {
flex: 1; flex: 1;
--mdc-list-side-padding: 16px; --mdc-list-side-padding-right: 20px;
--mdc-list-side-padding-left: 24px;
--mdc-list-item-graphic-margin: 24px;
} }
a { a {
text-decoration: none; text-decoration: none;