Skip to content

Replace checkboxes in list items with check-list-item #11610

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
balloob merged 3 commits into from
Feb 9, 2022
Merged

Replace checkboxes in list items with check-list-item #11610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32dd137
Replace checkboxes in list items with `check-list-item`
bramkragten Feb 8, 2022
b3ebfb6
Update src/components/ha-form/ha-form-multi_select.ts
bramkragten Feb 9, 2022
06b8d6a
Use base element to extend, use ha-textfield
bramkragten Feb 9, 2022
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
22 changes: 22 additions & 0 deletions src/components/ha-check-list-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { css } from "lit";
import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
import { styles } from "@material/mwc-list/mwc-control-list-item.css";
import { customElement } from "lit/decorators";

@customElement("ha-check-list-item")
export class HaCheckListItem extends CheckListItemBase {
static override styles = [
styles,
css`
:host {
--mdc-theme-secondary: var(--primary-color);
}
`,
];
}

declare global {
interface HTMLElementTagNameMap {
"ha-check-list-item": HaCheckListItem;
}
}
18 changes: 12 additions & 6 deletions src/components/ha-checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import { Checkbox } from "@material/mwc-checkbox";
import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
import { css } from "lit";
import { customElement } from "lit/decorators";

@customElement("ha-checkbox")
export class HaCheckbox extends Checkbox {
public firstUpdated() {
super.firstUpdated();
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
}
export class HaCheckbox extends CheckboxBase {
static override styles = [
styles,
css`
:host {
--mdc-theme-secondary: var(--primary-color);
}
`,
];
}

declare global {
Expand Down
148 changes: 73 additions & 75 deletions src/components/ha-dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Dialog } from "@material/mwc-dialog";
import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
import { styles } from "@material/mwc-dialog/mwc-dialog.css";
import { mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, TemplateResult } from "lit";
import { css, html, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { computeRTLDirection } from "../common/util/compute_rtl";
import type { HomeAssistant } from "../types";
Expand All @@ -21,8 +22,7 @@ export const createCloseHeading = (
`;

@customElement("ha-dialog")
// @ts-expect-error
export class HaDialog extends Dialog {
export class HaDialog extends DialogBase {
public scrollToPos(x: number, y: number) {
this.contentElement?.scrollTo(x, y);
}
Expand All @@ -31,77 +31,75 @@ export class HaDialog extends Dialog {
return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
}

protected static get styles(): CSSResultGroup {
return [
Dialog.styles,
css`
.mdc-dialog {
--mdc-dialog-scroll-divider-color: var(--divider-color);
z-index: var(--dialog-z-index, 7);
-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
backdrop-filter: var(--dialog-backdrop-filter, none);
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
}
.mdc-dialog__actions span:nth-child(2) {
flex: var(--primary-action-button-flex, unset);
}
.mdc-dialog__container {
align-items: var(--vertial-align-dialog, center);
}
.mdc-dialog__title::before {
display: block;
height: 20px;
}
.mdc-dialog .mdc-dialog__content {
position: var(--dialog-content-position, relative);
padding: var(--dialog-content-padding, 20px 24px);
}
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 20px),
env(safe-area-inset-bottom)
);
}
.mdc-dialog .mdc-dialog__surface {
position: var(--dialog-surface-position, relative);
top: var(--dialog-surface-top);
min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(
--ha-dialog-border-radius,
var(--ha-card-border-radius, 4px)
);
}
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
display: flex;
flex-direction: column;
}
.header_button {
position: absolute;
right: 16px;
top: 10px;
text-decoration: none;
color: inherit;
}
.header_title {
margin-right: 40px;
}
[dir="rtl"].header_button {
right: auto;
left: 16px;
}
[dir="rtl"].header_title {
margin-left: 40px;
margin-right: 0px;
}
`,
];
}
static override styles = [
styles,
css`
.mdc-dialog {
--mdc-dialog-scroll-divider-color: var(--divider-color);
z-index: var(--dialog-z-index, 7);
-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
backdrop-filter: var(--dialog-backdrop-filter, none);
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
}
.mdc-dialog__actions span:nth-child(2) {
flex: var(--primary-action-button-flex, unset);
}
.mdc-dialog__container {
align-items: var(--vertial-align-dialog, center);
}
.mdc-dialog__title::before {
display: block;
height: 20px;
}
.mdc-dialog .mdc-dialog__content {
position: var(--dialog-content-position, relative);
padding: var(--dialog-content-padding, 20px 24px);
}
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 20px),
env(safe-area-inset-bottom)
);
}
.mdc-dialog .mdc-dialog__surface {
position: var(--dialog-surface-position, relative);
top: var(--dialog-surface-top);
min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(
--ha-dialog-border-radius,
var(--ha-card-border-radius, 4px)
);
}
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
display: flex;
flex-direction: column;
}
.header_button {
position: absolute;
right: 16px;
top: 10px;
text-decoration: none;
color: inherit;
}
.header_title {
margin-right: 40px;
}
[dir="rtl"].header_button {
right: auto;
left: 16px;
}
[dir="rtl"].header_title {
margin-left: 40px;
margin-right: 0px;
}
`,
];
}

declare global {
Expand Down
18 changes: 9 additions & 9 deletions src/components/ha-form/ha-form-float.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import "@material/mwc-textfield";
import type { TextField } from "@material/mwc-textfield";
import { css, html, LitElement, TemplateResult, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import type { HaTextField } from "../ha-textfield";
import "../ha-textfield";
import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./types";

@customElement("ha-form-float")
export class HaFormFloat extends LitElement implements HaFormElement {
@property() public schema!: HaFormFloatSchema;
@property({ attribute: false }) public schema!: HaFormFloatSchema;

@property() public data!: HaFormFloatData;
@property({ attribute: false }) public data!: HaFormFloatData;

@property() public label!: string;

@property({ type: Boolean }) public disabled = false;

@query("mwc-textfield") private _input?: HTMLElement;
@query("ha-textfield") private _input?: HaTextField;

public focus() {
if (this._input) {
Expand All @@ -25,7 +25,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {

protected render(): TemplateResult {
return html`
<mwc-textfield
<ha-textfield
inputMode="decimal"
.label=${this.label}
.value=${this.data !== undefined ? this.data : ""}
Expand All @@ -35,7 +35,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
.suffix=${this.schema.description?.suffix}
.validationMessage=${this.schema.required ? "Required" : undefined}
@input=${this._valueChanged}
></mwc-textfield>
></ha-textfield>
`;
}

Expand All @@ -46,7 +46,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
}

private _valueChanged(ev: Event) {
const source = ev.target as TextField;
const source = ev.target as HaTextField;
const rawValue = source.value.replace(",", ".");

let value: number | undefined;
Expand Down Expand Up @@ -81,7 +81,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
:host([own-margin]) {
margin-bottom: 5px;
}
mwc-textfield {
ha-textfield {
display: block;
}
`;
Expand Down
20 changes: 10 additions & 10 deletions src/components/ha-form/ha-form-integer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import "@material/mwc-textfield";
import type { TextField } from "@material/mwc-textfield";
import type { Slider } from "@material/mwc-slider";
import {
css,
CSSResultGroup,
Expand All @@ -14,18 +11,21 @@ import { fireEvent } from "../../common/dom/fire_event";
import { HaCheckbox } from "../ha-checkbox";
import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
import "../ha-slider";
import { HaTextField } from "../ha-textfield";

@customElement("ha-form-integer")
export class HaFormInteger extends LitElement implements HaFormElement {
@property() public schema!: HaFormIntegerSchema;
@property({ attribute: false }) public schema!: HaFormIntegerSchema;

@property() public data?: HaFormIntegerData;
@property({ attribute: false }) public data?: HaFormIntegerData;

@property() public label?: string;

@property({ type: Boolean }) public disabled = false;

@query("mwc-textfield ha-slider") private _input?: HTMLElement;
@query("ha-textfield ha-slider") private _input?:
| HaTextField
| HTMLInputElement;

private _lastValue?: HaFormIntegerData;

Expand Down Expand Up @@ -70,7 +70,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
}

return html`
<mwc-textfield
<ha-textfield
type="number"
inputMode="numeric"
.label=${this.label}
Expand All @@ -81,7 +81,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
.suffix=${this.schema.description?.suffix}
.validationMessage=${this.schema.required ? "Required" : undefined}
@input=${this._valueChanged}
></mwc-textfield>
></ha-textfield>
`;
}

Expand Down Expand Up @@ -138,7 +138,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
}

private _valueChanged(ev: Event) {
const source = ev.target as TextField | Slider;
const source = ev.target as HaTextField | HTMLInputElement;
const rawValue = source.value;

let value: number | undefined;
Expand Down Expand Up @@ -172,7 +172,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
ha-slider {
flex: 1;
}
mwc-textfield {
ha-textfield {
display: block;
}
`;
Expand Down
Loading