jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Edit Footer for Cards (#4752)

Browse Source 
* Update CSS

* Radius Updates

* Updating to be a ha-card element
This commit is contained in:
Zack Arnett 2020-02-06 02:05:49 -05:00 committed by GitHub
parent c72105dca3
commit 2e47aa1905
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,72 +33,79 @@ export class HuiCardOptions extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<slot></slot> <slot></slot>
<div class="options"> <ha-card>
<div class="primary-actions"> <div class="options">
<mwc-button @click="${this._editCard}" <div class="primary-actions">
>${this.hass!.localize( <mwc-button @click="${this._editCard}"
"ui.panel.lovelace.editor.edit_card.edit" >${this.hass!.localize(
)}</mwc-button "ui.panel.lovelace.editor.edit_card.edit"
> )}</mwc-button
</div> >
<div class="secondary-actions"> </div>
<paper-icon-button <div class="secondary-actions">
title="Move card down"
class="move-arrow"
icon="hass:arrow-down"
@click="${this._cardDown}"
?disabled="${this.lovelace!.config.views[this.path![0]].cards!
.length ===
this.path![1] + 1}"
></paper-icon-button>
<paper-icon-button
title="Move card up"
class="move-arrow"
icon="hass:arrow-up"
@click="${this._cardUp}"
?disabled="${this.path![1] === 0}"
></paper-icon-button>
<paper-menu-button
horizontal-align="right"
vertical-align="bottom"
vertical-offset="40"
close-on-activate
>
<paper-icon-button <paper-icon-button
icon="hass:dots-vertical" title="Move card down"
slot="dropdown-trigger" class="move-arrow"
aria-label=${this.hass!.localize( icon="hass:arrow-down"
"ui.panel.lovelace.editor.edit_card.options" @click="${this._cardDown}"
)} ?disabled="${this.lovelace!.config.views[this.path![0]].cards!
.length ===
this.path![1] + 1}"
></paper-icon-button> ></paper-icon-button>
<paper-listbox slot="dropdown-content"> <paper-icon-button
<paper-item @tap="${this._moveCard}"> title="Move card up"
${this.hass!.localize( class="move-arrow"
"ui.panel.lovelace.editor.edit_card.move" icon="hass:arrow-up"
)}</paper-item @click="${this._cardUp}"
> ?disabled="${this.path![1] === 0}"
<paper-item .class="delete-item" @tap="${this._deleteCard}"> ></paper-icon-button>
${this.hass!.localize( <paper-menu-button
"ui.panel.lovelace.editor.edit_card.delete" horizontal-align="right"
)}</paper-item vertical-align="bottom"
> vertical-offset="40"
</paper-listbox> close-on-activate
</paper-menu-button> >
<paper-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
aria-label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.options"
)}
></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @tap="${this._moveCard}">
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
)}</paper-item
>
<paper-item .class="delete-item" @tap="${this._deleteCard}">
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}</paper-item
>
</paper-listbox>
</paper-menu-button>
</div>
</div> </div>
</div> </ha-card>
`; `;
} }
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
div.options { ha-card {
border-top: 1px solid #e8e8e8; border-top-right-radius: 0;
padding: 5px 8px; border-top-left-radius: 0;
background: var(--paper-card-background-color, white);
box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 5px -4px, rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
}
div.options {
border-top: 1px solid #e8e8e8;
padding: 5px 8px;
display: flex; display: flex;
margin-top: -1px;
} }
div.options .primary-actions { div.options .primary-actions {