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

Tweak lovelace editor position badge (#17069)

Browse Source
This commit is contained in:
Bram Kragten 2023-06-28 15:10:33 +02:00 committed by GitHub
parent 24e531a16c
commit 7727bf7901
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/panels/lovelace/components/hui-card-options.ts
View File

@ -7,6 +7,7 @@ import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
nothing,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
@ -34,6 +35,8 @@ export class HuiCardOptions extends LitElement {
@property() public path?: [number, number]; @property() public path?: [number, number];
@property({ type: Boolean }) public showPosition = false;
@queryAssignedNodes() private _assignedNodes?: NodeListOf<LovelaceCard>; @queryAssignedNodes() private _assignedNodes?: NodeListOf<LovelaceCard>;
@storage({ @storage({
@ -68,7 +71,7 @@ export class HuiCardOptions extends LitElement {
"ui.panel.lovelace.editor.edit_card.edit" "ui.panel.lovelace.editor.edit_card.edit"
)}</mwc-button )}</mwc-button
> >
<div> <div class="right">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<ha-icon-button <ha-icon-button
.label=${this.hass!.localize( .label=${this.hass!.localize(
@ -81,18 +84,22 @@ export class HuiCardOptions extends LitElement {
.length === .length ===
this.path![1] + 1} this.path![1] + 1}
></ha-icon-button> ></ha-icon-button>
<div class="position-badge"> ${this.showPosition
${this.path![1] + 1} ? html`<div class="position-badge">
<simple-tooltip ${this.path![1] + 1}
>${this.hass!.localize( <simple-tooltip
"ui.panel.lovelace.editor.edit_card.position", >${this.hass!.localize(
"position", "ui.panel.lovelace.editor.edit_card.position",
`${this.path![1] + 1}`, "position",
"total", `${this.path![1] + 1}`,
`${this.lovelace!.config.views[this.path![0]].cards!.length}` "total",
)}</simple-tooltip `${
> this.lovelace!.config.views[this.path![0]].cards!.length
</div> }`
)}</simple-tooltip
>
</div>`
: nothing}
<ha-icon-button <ha-icon-button
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_up" "ui.panel.lovelace.editor.edit_card.move_up"
@ -167,18 +174,21 @@ export class HuiCardOptions extends LitElement {
align-items: center; align-items: center;
} }
.right {
display: flex;
align-items: center;
}
.position-badge { .position-badge {
display: inline-block; display: inline-block;
vertical-align: bottom; width: 24px;
width: 48px; line-height: 24px;
line-height: 48px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
font-weight: 400; font-weight: 400;
font-size: 1.25em;
background-color: var(--divider-color);
text-align: center; text-align: center;
color: var(--text-accent-color, var(--text-primary-color)); background-color: var(--app-header-edit-background-color, #455a64);
color: var(--app-header-edit-text-color, white);
} }
ha-icon-button { ha-icon-button {

1
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -269,6 +269,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
wrapper.hass = this.hass; wrapper.hass = this.hass;
wrapper.lovelace = this.lovelace; wrapper.lovelace = this.lovelace;
wrapper.path = [this.index!, index]; wrapper.path = [this.index!, index];
wrapper.showPosition = true;
card.editMode = true; card.editMode = true;
wrapper.appendChild(card); wrapper.appendChild(card);
columnEl.appendChild(wrapper); columnEl.appendChild(wrapper);