Skip to content

Add toolbars and mobile headers + layout tweaks #4803

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Feb 13, 2020
Merged

Add toolbars and mobile headers + layout tweaks #4803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc8da02
Add toolbars and mobile headers + layout tweaks
bramkragten Feb 7, 2020
877fd24
Comments
bramkragten Feb 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions src/common/search/search-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,43 @@ import {
property,
} from "lit-element";
import { fireEvent } from "../dom/fire_event";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-icon-button/paper-icon-button";
import "@material/mwc-button";
import "../../components/ha-icon";
import { classMap } from "lit-html/directives/class-map";

@customElement("search-input")
class SearchInput extends LitElement {
@property() public filter?: string;
@property({ type: Boolean, attribute: "no-label-float" })
public noLabelFloat? = false;
@property({ type: Boolean, attribute: "no-underline" })
public noUnderline = false;

public focus() {
this.shadowRoot!.querySelector("paper-input")!.focus();
}

protected render(): TemplateResult {
return html`
<style>
Copy link
Copy Markdown
Member

@balloob balloob Feb 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this not in styles ?

Copy link
Copy Markdown
Member Author

@bramkragten bramkragten Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because mixins don't work in styles

Copy link
Copy Markdown
Member

@balloob balloob Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mixins shouldn't work at all 🤷‍♂ . The only reason they still work is because we have ShadyCSS on the page.

Anyway, we will have that as long as we have Polymer around, so no problem 👍

.no-underline {
--paper-input-container-underline: {
display: none;
height: 0;
}
}
</style>
<div class="search-container">
<paper-input
class=${classMap({ "no-underline": this.noUnderline })}
autofocus
label="Search"
.value=${this.filter}
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
<iron-icon
icon="hass:magnify"
slot="prefix"
class="prefix"
></iron-icon>
<ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
${this.filter &&
html`
<paper-icon-button
Expand Down
215 changes: 120 additions & 95 deletions src/components/data-table/ha-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ export class HaDataTable extends BaseElement {
@property({ type: String }) private _sortColumn?: string;
@property({ type: String }) private _sortDirection: SortingDirection = null;
@property({ type: Array }) private _filteredData: DataTableRowData[] = [];
@query("slot[name='header']") private _header!: HTMLSlotElement;
@query(".scroller") private _scroller!: HTMLDivElement;
private _sortColumns: {
[key: string]: DataTableSortColumnData;
} = {};
Expand Down Expand Up @@ -170,7 +172,7 @@ export class HaDataTable extends BaseElement {
protected render() {
return html`
<div class="mdc-data-table">
<slot name="header">
<slot name="header" @slotchange=${this._calcScrollHeight}>
${this._filterable
? html`
<div class="table-header">
Expand All @@ -181,112 +183,114 @@ export class HaDataTable extends BaseElement {
`
: ""}
</slot>
<table class="mdc-data-table__table">
<thead>
<tr class="mdc-data-table__header-row">
${this.selectable
? html`
<div class="scroller">
<table class="mdc-data-table__table">
<thead>
<tr class="mdc-data-table__header-row">
${this.selectable
? html`
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
role="columnheader"
scope="col"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleHeaderRowCheckboxChange}
.indeterminate=${this._headerIndeterminate}
.checked=${this._headerChecked}
>
</ha-checkbox>
</th>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
const sorted = key === this._sortColumn;
const classes = {
"mdc-data-table__header-cell--numeric": Boolean(
column.type && column.type === "numeric"
),
"mdc-data-table__header-cell--icon": Boolean(
column.type && column.type === "icon"
),
sortable: Boolean(column.sortable),
"not-sorted": Boolean(column.sortable && !sorted),
};
return html`
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
class="mdc-data-table__header-cell ${classMap(classes)}"
role="columnheader"
scope="col"
@click=${this._handleHeaderClick}
data-column-id="${key}"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleHeaderRowCheckboxChange}
.indeterminate=${this._headerIndeterminate}
.checked=${this._headerChecked}
>
</ha-checkbox>
${column.sortable
? html`
<ha-icon
.icon=${sorted && this._sortDirection === "desc"
? "hass:arrow-down"
: "hass:arrow-up"}
></ha-icon>
`
: ""}
<span>${column.title}</span>
</th>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
const sorted = key === this._sortColumn;
const classes = {
"mdc-data-table__header-cell--numeric": Boolean(
column.type && column.type === "numeric"
),
"mdc-data-table__header-cell--icon": Boolean(
column.type && column.type === "icon"
),
sortable: Boolean(column.sortable),
"not-sorted": Boolean(column.sortable && !sorted),
};
return html`
<th
class="mdc-data-table__header-cell ${classMap(classes)}"
role="columnheader"
scope="col"
@click=${this._handleHeaderClick}
data-column-id="${key}"
`;
})}
</tr>
</thead>
<tbody class="mdc-data-table__content">
${repeat(
this._filteredData!,
(row: DataTableRowData) => row[this.id],
(row: DataTableRowData) => html`
<tr
data-row-id="${row[this.id]}"
@click=${this._handleRowClick}
class="mdc-data-table__row"
>
${column.sortable
${this.selectable
? html`
<ha-icon
.icon=${sorted && this._sortDirection === "desc"
? "hass:arrow-down"
: "hass:arrow-up"}
></ha-icon>
<td
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleRowCheckboxChange}
.checked=${this._checkedRows.includes(
String(row[this.id])
)}
>
</ha-checkbox>
</td>
`
: ""}
<span>${column.title}</span>
</th>
`;
})}
</tr>
</thead>
<tbody class="mdc-data-table__content">
${repeat(
this._filteredData!,
(row: DataTableRowData) => row[this.id],
(row: DataTableRowData) => html`
<tr
data-row-id="${row[this.id]}"
@click=${this._handleRowClick}
class="mdc-data-table__row"
>
${this.selectable
? html`
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
return html`
<td
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type && column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type && column.type === "icon"
),
})}"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleRowCheckboxChange}
.checked=${this._checkedRows.includes(
String(row[this.id])
)}
>
</ha-checkbox>
${column.template
? column.template(row[key], row)
: row[key]}
</td>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
return html`
<td
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type && column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type && column.type === "icon"
),
})}"
>
${column.template
? column.template(row[key], row)
: row[key]}
</td>
`;
})}
</tr>
`
)}
</tbody>
</table>
`;
})}
</tr>
`
)}
</tbody>
</table>
</div>
</div>
`;
}
Expand Down Expand Up @@ -434,6 +438,11 @@ export class HaDataTable extends BaseElement {
this._debounceSearch(ev.detail.value);
}

private async _calcScrollHeight() {
await this.updateComplete;
this._scroller.style.maxHeight = `calc(100% - ${this._header.clientHeight}px)`;
}

static get styles(): CSSResult {
return css`
/* default mdc styles, colors changed, without checkbox styles */
Expand Down Expand Up @@ -584,8 +593,14 @@ export class HaDataTable extends BaseElement {

/* custom from here */

:host {
display: block;
}

.mdc-data-table {
display: block;
border-width: var(--data-table-border-width, 1px);
height: 100%;
}
.mdc-data-table__header-cell {
overflow: hidden;
Expand Down Expand Up @@ -614,6 +629,16 @@ export class HaDataTable extends BaseElement {
.table-header {
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
}
search-input {
position: relative;
top: 2px;
}
.scroller {
overflow: auto;
}
slot[name="header"] {
display: block;
}
`;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/device/ha-area-devices-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ import { fireEvent } from "../../common/dom/fire_event";
import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
DeviceEntityLookup,
} from "../../data/device_registry";
import { compare } from "../../common/string/compare";
import { PolymerChangedEvent } from "../../polymer-types";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
} from "../../data/area_registry";
import { DeviceEntityLookup } from "../../panels/config/devices/ha-devices-data-table";
import {
EntityRegistryEntry,
subscribeEntityRegistry,
Expand Down
2 changes: 1 addition & 1 deletion src/components/device/ha-device-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
computeDeviceName,
DeviceEntityLookup,
} from "../../data/device_registry";
import { compare } from "../../common/string/compare";
import { PolymerChangedEvent } from "../../polymer-types";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
} from "../../data/area_registry";
import { DeviceEntityLookup } from "../../panels/config/devices/ha-devices-data-table";
import {
EntityRegistryEntry,
subscribeEntityRegistry,
Expand Down
4 changes: 4 additions & 0 deletions src/data/device_registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export interface DeviceRegistryEntry {
name_by_user?: string;
}

export interface DeviceEntityLookup {
[deviceId: string]: EntityRegistryEntry[];
}

export interface DeviceRegistryEntryMutableParams {
area_id?: string | null;
name_by_user?: string | null;
Expand Down
Loading