mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Add view top margin option for section view (#24386)
This commit is contained in:
parent
50ac60b35e
commit
8f06e70a11
@ -45,6 +45,7 @@ export interface LovelaceBaseViewConfig {
|
||||
// Only used for section view, it should move to a section view config type when the views will have dedicated editor.
|
||||
max_columns?: number;
|
||||
dense_section_placement?: boolean;
|
||||
top_margin?: boolean;
|
||||
}
|
||||
|
||||
export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
|
||||
|
@ -100,6 +100,12 @@ export class HuiViewEditor extends LitElement {
|
||||
boolean: {},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "top_margin",
|
||||
selector: {
|
||||
boolean: {},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
] as const satisfies HaFormSchema[])
|
||||
@ -149,6 +155,7 @@ export class HuiViewEditor extends LitElement {
|
||||
if (config.type !== SECTIONS_VIEW_LAYOUT) {
|
||||
delete config.max_columns;
|
||||
delete config.dense_section_placement;
|
||||
delete config.top_margin;
|
||||
}
|
||||
|
||||
if (
|
||||
@ -174,6 +181,7 @@ export class HuiViewEditor extends LitElement {
|
||||
case "subview":
|
||||
case "max_columns":
|
||||
case "dense_section_placement":
|
||||
case "top_margin":
|
||||
case "section_specifics":
|
||||
return this.hass.localize(
|
||||
`ui.panel.lovelace.editor.edit_view.${schema.name}`
|
||||
@ -191,6 +199,7 @@ export class HuiViewEditor extends LitElement {
|
||||
switch (schema.name) {
|
||||
case "subview":
|
||||
case "dense_section_placement":
|
||||
case "top_margin":
|
||||
return this.hass.localize(
|
||||
`ui.panel.lovelace.editor.edit_view.${schema.name}_helper`
|
||||
);
|
||||
|
@ -154,44 +154,49 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||
const maxColumnCount = this._columnsController.value ?? 1;
|
||||
|
||||
return html`
|
||||
<hui-view-header
|
||||
.hass=${this.hass}
|
||||
.badges=${this.badges}
|
||||
.lovelace=${this.lovelace}
|
||||
.viewIndex=${this.index}
|
||||
.config=${this._config?.header}
|
||||
style=${styleMap({
|
||||
"--max-column-count": maxColumnCount,
|
||||
})}
|
||||
></hui-view-header>
|
||||
<ha-sortable
|
||||
.disabled=${!editMode}
|
||||
@item-moved=${this._sectionMoved}
|
||||
group="section"
|
||||
handle-selector=".handle"
|
||||
draggable-selector=".section"
|
||||
.rollback=${false}
|
||||
<div
|
||||
class="wrapper ${classMap({
|
||||
"top-margin": Boolean(this._config?.top_margin),
|
||||
})}"
|
||||
>
|
||||
<div
|
||||
class="container ${classMap({
|
||||
dense: Boolean(this._config?.dense_section_placement),
|
||||
})}"
|
||||
<hui-view-header
|
||||
.hass=${this.hass}
|
||||
.badges=${this.badges}
|
||||
.lovelace=${this.lovelace}
|
||||
.viewIndex=${this.index}
|
||||
.config=${this._config?.header}
|
||||
style=${styleMap({
|
||||
"--total-section-count": totalSectionCount,
|
||||
"--max-column-count": maxColumnCount,
|
||||
})}
|
||||
></hui-view-header>
|
||||
<ha-sortable
|
||||
.disabled=${!editMode}
|
||||
@item-moved=${this._sectionMoved}
|
||||
group="section"
|
||||
handle-selector=".handle"
|
||||
draggable-selector=".section"
|
||||
.rollback=${false}
|
||||
>
|
||||
${repeat(
|
||||
sections,
|
||||
(section) => this._getSectionKey(section),
|
||||
(section, idx) => {
|
||||
const columnSpan = Math.min(
|
||||
section.config.column_span || 1,
|
||||
maxColumnCount
|
||||
);
|
||||
const rowSpan = section.config.row_span || 1;
|
||||
<div
|
||||
class="container ${classMap({
|
||||
dense: Boolean(this._config?.dense_section_placement),
|
||||
})}"
|
||||
style=${styleMap({
|
||||
"--total-section-count": totalSectionCount,
|
||||
"--max-column-count": maxColumnCount,
|
||||
})}
|
||||
>
|
||||
${repeat(
|
||||
sections,
|
||||
(section) => this._getSectionKey(section),
|
||||
(section, idx) => {
|
||||
const columnSpan = Math.min(
|
||||
section.config.column_span || 1,
|
||||
maxColumnCount
|
||||
);
|
||||
const rowSpan = section.config.row_span || 1;
|
||||
|
||||
return html`
|
||||
return html`
|
||||
<div
|
||||
class="section"
|
||||
style=${styleMap({
|
||||
@ -238,72 +243,73 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)}
|
||||
${editMode
|
||||
? html`
|
||||
<ha-sortable
|
||||
group="card"
|
||||
@item-added=${this._handleCardAdded}
|
||||
draggable-selector=".card"
|
||||
.rollback=${false}
|
||||
>
|
||||
<div class="create-section-container">
|
||||
<div class="drop-helper" aria-hidden="true">
|
||||
<p>
|
||||
}
|
||||
)}
|
||||
${editMode
|
||||
? html`
|
||||
<ha-sortable
|
||||
group="card"
|
||||
@item-added=${this._handleCardAdded}
|
||||
draggable-selector=".card"
|
||||
.rollback=${false}
|
||||
>
|
||||
<div class="create-section-container">
|
||||
<div class="drop-helper" aria-hidden="true">
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.drop_card_create_section"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="create-section"
|
||||
@click=${this._createSection}
|
||||
aria-label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.create_section"
|
||||
)}
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.create_section"
|
||||
)}
|
||||
>
|
||||
<ha-ripple></ha-ripple>
|
||||
<ha-svg-icon .path=${mdiViewGridPlus}></ha-svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ha-sortable>
|
||||
`
|
||||
: nothing}
|
||||
${editMode && this._config?.cards?.length
|
||||
? html`
|
||||
<div class="section imported-cards">
|
||||
<div class="imported-card-header">
|
||||
<p class="title">
|
||||
<ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.drop_card_create_section"
|
||||
"ui.panel.lovelace.editor.section.imported_cards_title"
|
||||
)}
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.imported_cards_description"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="create-section"
|
||||
@click=${this._createSection}
|
||||
aria-label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.create_section"
|
||||
<hui-section
|
||||
.lovelace=${this.lovelace}
|
||||
.hass=${this.hass}
|
||||
.config=${this._importedCardSectionConfig(
|
||||
this._config.cards
|
||||
)}
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.create_section"
|
||||
)}
|
||||
>
|
||||
<ha-ripple></ha-ripple>
|
||||
<ha-svg-icon .path=${mdiViewGridPlus}></ha-svg-icon>
|
||||
</button>
|
||||
.viewIndex=${this.index}
|
||||
preview
|
||||
import-only
|
||||
></hui-section>
|
||||
</div>
|
||||
</ha-sortable>
|
||||
`
|
||||
: nothing}
|
||||
${editMode && this._config?.cards?.length
|
||||
? html`
|
||||
<div class="section imported-cards">
|
||||
<div class="imported-card-header">
|
||||
<p class="title">
|
||||
<ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.imported_cards_title"
|
||||
)}
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.section.imported_cards_description"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<hui-section
|
||||
.lovelace=${this.lovelace}
|
||||
.hass=${this.hass}
|
||||
.config=${this._importedCardSectionConfig(
|
||||
this._config.cards
|
||||
)}
|
||||
.viewIndex=${this.index}
|
||||
preview
|
||||
import-only
|
||||
></hui-section>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
</ha-sortable>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
</ha-sortable>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -429,6 +435,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||
--column-gap: var(--ha-view-sections-column-gap, 32px);
|
||||
--column-max-width: var(--ha-view-sections-column-max-width, 500px);
|
||||
--column-min-width: var(--ha-view-sections-column-min-width, 320px);
|
||||
--top-margin: var(--ha-view-sections-extra-top-margin, 80px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -438,6 +445,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper.top-margin {
|
||||
display: block;
|
||||
margin-top: var(--top-margin);
|
||||
}
|
||||
|
||||
.container > * {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
@ -6569,6 +6569,8 @@
|
||||
"section_specifics": "Sections view specific settings",
|
||||
"dense_section_placement": "Dense section placement",
|
||||
"dense_section_placement_helper": "Will try to fill gaps with sections that fit the gap. This may make section placement less predictable.",
|
||||
"top_margin": "Add additional space above",
|
||||
"top_margin_helper": "Helps reveal more of the background",
|
||||
"subview_helper": "Subviews don't appear in tabs and have a back button.",
|
||||
"edit_ui": "Edit in visual editor",
|
||||
"edit_yaml": "Edit in YAML",
|
||||
|
Loading…
x
Reference in New Issue
Block a user