Skip to content

Commit

Permalink
Fix selection mode backups on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
bramkragten committed Dec 23, 2024
1 parent faf3bb2 commit a00f88b
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 103 deletions.
3 changes: 2 additions & 1 deletion src/components/ha-fab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export class HaFab extends FabBase {
direction: var(--direction);
}
:disabled {
opacity: var(--light-disabled-opacity);
--mdc-theme-secondary: var(--disabled-text-color);
pointer-events: none;
}
`,
// safari workaround - must be explicit
Expand Down
121 changes: 23 additions & 98 deletions src/panels/config/backup/ha-config-backup-backups.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import {
mdiUpload,
} from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { relativeTime } from "../../../common/datetime/relative_time";
import { storage } from "../../../common/decorators/storage";
Expand Down Expand Up @@ -346,39 +345,27 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
</ha-button-menu>
</div>
${this._selected.length
? html`<div
class=${classMap({
"header-toolbar": this.narrow,
"table-header": !this.narrow,
})}
slot="header"
>
<p class="selected-txt">
${this._selected.length} backups selected
</p>
<div class="header-btns">
${!this.narrow
? html`
<ha-button @click=${this._deleteSelected} class="warning">
Delete selected
</ha-button>
`
: html`
<ha-icon-button
.label=${"Delete selected"}
.path=${mdiDelete}
id="delete-btn"
class="warning"
@click=${this._deleteSelected}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="delete-btn">
Delete selected
</simple-tooltip>
`}
</div>
</div> `
: nothing}
<div slot="selection-bar">
${!this.narrow
? html`
<ha-button @click=${this._deleteSelected} class="warning">
Delete selected
</ha-button>
`
: html`
<ha-icon-button
.label=${"Delete selected"}
.path=${mdiDelete}
id="delete-btn"
class="warning"
@click=${this._deleteSelected}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="delete-btn">
Delete selected
</simple-tooltip>
`}
</div>
<ha-filter-states
.hass=${this.hass}
label="Type"
Expand Down Expand Up @@ -533,69 +520,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
}

static get styles(): CSSResultGroup {
return [
haStyle,
css`
.header {
padding: 16px 16px 0 16px;
display: flex;
flex-direction: row;
gap: 16px;
background-color: var(--primary-background-color);
}
@media (max-width: 1000px) {
.header {
flex-direction: column;
}
}
.header > * {
flex: 1;
min-width: 0;
}
ha-fab[disabled] {
--mdc-theme-secondary: var(--disabled-text-color) !important;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
box-sizing: border-box;
}
.header-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--secondary-text-color);
position: relative;
top: -4px;
}
.selected-txt {
font-weight: bold;
padding-left: 16px;
padding-inline-start: 16px;
padding-inline-end: initial;
color: var(--primary-text-color);
}
.table-header .selected-txt {
margin-top: 20px;
}
.header-toolbar .selected-txt {
font-size: 16px;
}
.header-toolbar .header-btns {
margin-right: -12px;
margin-inline-end: -12px;
margin-inline-start: initial;
}
.header-btns > ha-button,
.header-btns > ha-icon-button {
margin: 8px;
}
`,
];
return haStyle;
}
}

Expand Down
4 changes: 0 additions & 4 deletions src/panels/config/backup/ha-config-backup-overview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -258,10 +258,6 @@ class HaConfigBackupOverview extends LitElement {
padding-left: 0;
padding-right: 0;
}
ha-fab[disabled] {
--mdc-theme-secondary: var(--disabled-text-color) !important;
pointer-events: none;
}
`,
];
}
Expand Down

0 comments on commit a00f88b

Please sign in to comment.