Add buttons on mobile to move sections
This commit is contained in:
parent
c05824c641
commit
f75d3f887e
|
@ -1,4 +1,11 @@
|
||||||
import { mdiArrowAll, mdiDelete, mdiPencil, mdiViewGridPlus } from "@mdi/js";
|
import {
|
||||||
|
mdiArrowAll,
|
||||||
|
mdiArrowDown,
|
||||||
|
mdiArrowUp,
|
||||||
|
mdiDelete,
|
||||||
|
mdiPencil,
|
||||||
|
mdiViewGridPlus,
|
||||||
|
} from "@mdi/js";
|
||||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { repeat } from "lit/directives/repeat";
|
import { repeat } from "lit/directives/repeat";
|
||||||
|
@ -21,6 +28,8 @@ import {
|
||||||
} from "../editor/lovelace-path";
|
} from "../editor/lovelace-path";
|
||||||
import { HuiSection } from "../sections/hui-section";
|
import { HuiSection } from "../sections/hui-section";
|
||||||
import type { Lovelace, LovelaceBadge } from "../types";
|
import type { Lovelace, LovelaceBadge } from "../types";
|
||||||
|
import { isTouch } from "../../../util/is_touch";
|
||||||
|
import { listenMediaQuery } from "../../../common/dom/media_query";
|
||||||
|
|
||||||
@customElement("hui-sections-view")
|
@customElement("hui-sections-view")
|
||||||
export class SectionsView extends LitElement implements LovelaceViewElement {
|
export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
|
@ -38,6 +47,23 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
|
|
||||||
@state() private _config?: LovelaceViewConfig;
|
@state() private _config?: LovelaceViewConfig;
|
||||||
|
|
||||||
|
@state() private _narrow = false;
|
||||||
|
|
||||||
|
private _unsubMql?: () => void;
|
||||||
|
|
||||||
|
public connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
this._unsubMql = listenMediaQuery("(max-width: 600px)", (matches) => {
|
||||||
|
this._narrow = matches;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
this._unsubMql?.();
|
||||||
|
this._unsubMql = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
public setConfig(config: LovelaceViewConfig): void {
|
public setConfig(config: LovelaceViewConfig): void {
|
||||||
this._config = config;
|
this._config = config;
|
||||||
}
|
}
|
||||||
|
@ -58,12 +84,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
|
|
||||||
const editMode = this.lovelace.editMode;
|
const editMode = this.lovelace.editMode;
|
||||||
|
|
||||||
|
const supportDnD = !(isTouch && this._narrow);
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${this.badges.length > 0
|
${this.badges.length > 0
|
||||||
? html`<div class="badges">${this.badges}</div>`
|
? html`<div class="badges">${this.badges}</div>`
|
||||||
: ""}
|
: ""}
|
||||||
<ha-sortable
|
<ha-sortable
|
||||||
.disabled=${!editMode}
|
.disabled=${!editMode && !supportDnD}
|
||||||
@item-moved=${this._sectionMoved}
|
@item-moved=${this._sectionMoved}
|
||||||
group="section"
|
group="section"
|
||||||
handle-selector=".handle"
|
handle-selector=".handle"
|
||||||
|
@ -90,11 +118,28 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
? html`
|
? html`
|
||||||
<div class="section-overlay">
|
<div class="section-overlay">
|
||||||
<div class="section-actions">
|
<div class="section-actions">
|
||||||
<ha-svg-icon
|
${supportDnD
|
||||||
aria-hidden="true"
|
? html`
|
||||||
class="handle"
|
<ha-svg-icon
|
||||||
.path=${mdiArrowAll}
|
aria-hidden="true"
|
||||||
></ha-svg-icon>
|
class="handle"
|
||||||
|
.path=${mdiArrowAll}
|
||||||
|
></ha-svg-icon>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<ha-icon-button
|
||||||
|
.label=${"Down"}
|
||||||
|
@click=${this._moveDown}
|
||||||
|
.index=${idx}
|
||||||
|
.path=${mdiArrowDown}
|
||||||
|
></ha-icon-button>
|
||||||
|
<ha-icon-button
|
||||||
|
.label=${"Up"}
|
||||||
|
@click=${this._moveUp}
|
||||||
|
.index=${idx}
|
||||||
|
.path=${mdiArrowUp}
|
||||||
|
></ha-icon-button>
|
||||||
|
`}
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
.label=${this.hass.localize("ui.common.edit")}
|
.label=${this.hass.localize("ui.common.edit")}
|
||||||
@click=${this._editSection}
|
@click=${this._editSection}
|
||||||
|
@ -231,6 +276,30 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
this.lovelace!.saveConfig(newConfig);
|
this.lovelace!.saveConfig(newConfig);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _moveDown(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
const { index } = ev.currentTarget;
|
||||||
|
|
||||||
|
const newConfig = moveSection(
|
||||||
|
this.lovelace!.config,
|
||||||
|
[this.index!, index],
|
||||||
|
[this.index!, index + 1]
|
||||||
|
);
|
||||||
|
this.lovelace!.saveConfig(newConfig);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _moveUp(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
const { index } = ev.currentTarget;
|
||||||
|
|
||||||
|
const newConfig = moveSection(
|
||||||
|
this.lovelace!.config,
|
||||||
|
[this.index!, index],
|
||||||
|
[this.index!, index - 1]
|
||||||
|
);
|
||||||
|
this.lovelace!.saveConfig(newConfig);
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
:host {
|
||||||
|
@ -283,7 +352,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
|
|
||||||
.section-actions {
|
.section-actions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 20px;
|
||||||
right: 0;
|
right: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue