jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move edit mode actions next to section block (#21840)

Browse Source
This commit is contained in:
Paul Bottein 2024-09-02 13:21:24 +02:00 committed by GitHub
parent 216dbc4d41
commit d8013a4db9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 97 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/panels/lovelace/sections/hui-grid-section.ts
View File

@ -65,20 +65,6 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
const editMode = Boolean(this.lovelace?.editMode && !this.isStrategy);
return html`
${this._config.title || this.lovelace?.editMode
? html`
<h2
class="title ${classMap({
placeholder: !this._config.title,
})}"
>
${this._config.title ||
this.hass.localize(
"ui.panel.lovelace.editor.section.unnamed_section"
)}
</h2>
`
: nothing}
<ha-sortable
.disabled=${!editMode}
@item-moved=${this._cardMoved}
@ -206,33 +192,11 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
.container.edit-mode {
padding: 8px;
border-radius: var(--ha-card-border-radius, 12px);
border-start-end-radius: 0px;
border: 2px dashed var(--divider-color);
min-height: var(--row-height);
}
.title {
color: var(--primary-text-color);
font-size: 20px;
font-weight: normal;
margin: 0px;
letter-spacing: 0.1px;
line-height: 32px;
text-align: var(--ha-view-sections-title-text-align, start);
min-height: 32px;
display: block;
height: var(--row-height);
box-sizing: border-box;
padding: 0 10px 10px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.title.placeholder {
color: var(--secondary-text-color);
font-style: italic;
}
.card {
border-radius: var(--ha-card-border-radius, 12px);
position: relative;

141
src/panels/lovelace/views/hui-sections-view.ts
View File

@ -175,32 +175,53 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
"--column-span": columnSpan,
})}
>
${editMode
? html`
<div class="section-overlay">
<div class="section-actions">
<ha-svg-icon
aria-hidden="true"
class="handle"
.path=${mdiArrowAll}
></ha-svg-icon>
<ha-icon-button
.label=${this.hass.localize("ui.common.edit")}
@click=${this._editSection}
.index=${idx}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize("ui.common.delete")}
@click=${this._deleteSection}
.index=${idx}
.path=${mdiDelete}
></ha-icon-button>
</div>
</div>
`
: nothing}
${section}
${
sectionConfig?.title || this.lovelace?.editMode
? html`
<div class="section-header">
<h2
class="section-title ${classMap({
placeholder: !sectionConfig?.title,
})}"
>
${sectionConfig?.title ||
this.hass.localize(
"ui.panel.lovelace.editor.section.unnamed_section"
)}
</h2>
${editMode
? html`
<div class="section-actions">
<ha-svg-icon
aria-hidden="true"
class="handle"
.path=${mdiArrowAll}
></ha-svg-icon>
<ha-icon-button
.label=${this.hass.localize(
"ui.common.edit"
)}
@click=${this._editSection}
.index=${idx}
.path=${mdiPencil}
></ha-icon-button>
<ha-icon-button
.label=${this.hass.localize(
"ui.common.delete"
)}
@click=${this._deleteSection}
.index=${idx}
.path=${mdiDelete}
></ha-icon-button>
</div>
`
: nothing}
</div>
`
: nothing
}
${section}
</div>
</div>
`;
}
@ -346,25 +367,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
}
}
.section-actions {
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
inset-inline-start: initial;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease-in-out;
background-color: rgba(var(--rgb-card-background-color), 0.3);
border-radius: 18px;
background: var(--secondary-background-color);
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--primary-text-color);
}
.handle {
cursor: grab;
padding: 8px;
@ -396,6 +398,55 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
margin: 16px 8px;
text-align: center;
}
.section-header {
position: relative;
height: var(--row-height);
margin-bottom: var(--row-gap);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.section-title {
color: var(--primary-text-color);
font-size: 20px;
font-weight: normal;
margin: 0px;
letter-spacing: 0.1px;
line-height: 32px;
text-align: var(--ha-view-sections-title-text-align, start);
min-height: 32px;
box-sizing: border-box;
padding: 0 10px 10px;
}
.section-title.placeholder {
color: var(--secondary-text-color);
font-style: italic;
}
.section-actions {
position: absolute;
height: 36px;
bottom: calc(-1 * var(--row-gap) - 2px);
right: 0;
inset-inline-end: 0;
inset-inline-start: initial;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease-in-out;
background-color: rgba(var(--rgb-card-background-color), 0.3);
border-radius: var(--ha-card-border-radius, 12px);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background: var(--secondary-background-color);
--mdc-icon-button-size: 36px;
--mdc-icon-size: 20px;
color: var(--primary-text-color);
}
`;
}
}