jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create outlined button component (#16631)

Browse Source 
* Create outlined button component

* Fix css comment

* Don't use Md classes

* Simplify
This commit is contained in:
Paul Bottein 2023-05-26 15:28:49 +02:00 committed by GitHub
parent ef51336770
commit da0cf9d950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 94 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ha-outlined-button.ts Normal file
View File

@ -0,0 +1,26 @@
import { css } from "lit";
import { customElement } from "lit/decorators";
import { OutlinedButton } from "@material/web/button/lib/outlined-button";
import { styles as outlinedStyles } from "@material/web/button/lib/outlined-styles.css";
import { styles as sharedStyles } from "@material/web/button/lib/shared-styles.css";
@customElement("ha-outlined-button")
export class HaOutlinedButton extends OutlinedButton {
static override styles = [
sharedStyles,
outlinedStyles,
css`
:host {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-outline: var(--divider-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-outlined-button": HaOutlinedButton;
}
}

39
src/components/ha-outlined-icon-button.ts Normal file
View File

@ -0,0 +1,39 @@
import { css } from "lit";
import { customElement } from "lit/decorators";
import { IconButton } from "@material/web/iconbutton/lib/icon-button";
import { styles as outlinedStyles } from "@material/web/iconbutton/lib/outlined-styles.css";
import { styles as sharedStyles } from "@material/web/iconbutton/lib/shared-styles.css";
@customElement("ha-outlined-icon-button")
export class HaOutlinedIconButton extends IconButton {
protected override getRenderClasses() {
return {
...super.getRenderClasses(),
outlined: true,
};
}
static override styles = [
sharedStyles,
outlinedStyles,
css`
:host {
--ha-icon-display: block;
--md-sys-color-on-surface: var(--secondary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
}
button {
/* Fix md-outlined-icon-button padding for iOS */
padding: 0;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-outlined-icon-button": HaOutlinedIconButton;
}
}

13
src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
View File

@ -1,10 +1,10 @@
import "@material/web/button/outlined-button";
import { mdiShieldOff } from "@mdi/js"; import { mdiShieldOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { domainIcon } from "../../../common/entity/domain_icon"; import { domainIcon } from "../../../common/entity/domain_icon";
import { stateColorCss } from "../../../common/entity/state_color"; import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-outlined-button";
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel"; import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes"; import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes";
@ -67,12 +67,12 @@ class MoreInfoAlarmControlPanel extends LitElement {
.path=${domainIcon("alarm_control_panel", this.stateObj)} .path=${domainIcon("alarm_control_panel", this.stateObj)}
></ha-svg-icon> ></ha-svg-icon>
</div> </div>
<md-outlined-button @click=${this._disarm}> <ha-outlined-button @click=${this._disarm}>
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action" "ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
)} )}
<ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
</md-outlined-button> </ha-outlined-button>
</div> </div>
` `
: html` : html`
@ -94,11 +94,6 @@ class MoreInfoAlarmControlPanel extends LitElement {
:host { :host {
--icon-color: var(--primary-color); --icon-color: var(--primary-color);
} }
md-outlined-button {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-outline: var(--divider-color);
}
@keyframes pulse { @keyframes pulse {
0% { 0% {
opacity: 1; opacity: 1;
@ -139,7 +134,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
transition: background-color 180ms ease-in-out; transition: background-color 180ms ease-in-out;
opacity: 0.2; opacity: 0.2;
} }
.status md-outlined-button { .status ha-outlined-button {
margin-top: 32px; margin-top: 32px;
} }
`, `,

46
src/dialogs/more-info/controls/more-info-fan.ts
View File

@ -1,5 +1,3 @@
import "@material/web/button/outlined-button";
import "@material/web/iconbutton/outlined-icon-button";
import { import {
mdiCreation, mdiCreation,
mdiFan, mdiFan,
@ -8,14 +6,7 @@ import {
mdiRotateLeft, mdiRotateLeft,
mdiRotateRight, mdiRotateRight,
} from "@mdi/js"; } from "@mdi/js";
import { import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit";
css,
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
} from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { import {
@ -26,10 +17,12 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
import { stateActive } from "../../../common/entity/state_active"; import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-outlined-button";
import "../../../components/ha-outlined-icon-button";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { import {
computeFanSpeedStateDisplay,
computeFanSpeedCount, computeFanSpeedCount,
computeFanSpeedStateDisplay,
FanEntity, FanEntity,
FanEntityFeature, FanEntityFeature,
FAN_SPEED_COUNT_MAX_FOR_BUTTONS, FAN_SPEED_COUNT_MAX_FOR_BUTTONS,
@ -201,17 +194,17 @@ class MoreInfoFan extends LitElement {
? html`<div class="buttons"> ? html`<div class="buttons">
${supportSpeedPercentage ${supportSpeedPercentage
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
@click=${this._toggle} @click=${this._toggle}
> >
<ha-svg-icon .path=${mdiPower}></ha-svg-icon> <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
${supportsDirection ${supportsDirection
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE || .disabled=${this.stateObj.state === UNAVAILABLE ||
this.stateObj.attributes.direction === "reverse"} this.stateObj.attributes.direction === "reverse"}
.title=${this.hass.localize( .title=${this.hass.localize(
@ -223,8 +216,8 @@ class MoreInfoFan extends LitElement {
@click=${this._setReverseDirection} @click=${this._setReverseDirection}
> >
<ha-svg-icon .path=${mdiRotateLeft}></ha-svg-icon> <ha-svg-icon .path=${mdiRotateLeft}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE || .disabled=${this.stateObj.state === UNAVAILABLE ||
this.stateObj.attributes.direction === "forward"} this.stateObj.attributes.direction === "forward"}
.title=${this.hass.localize( .title=${this.hass.localize(
@ -236,12 +229,12 @@ class MoreInfoFan extends LitElement {
@click=${this._setForwardDirection} @click=${this._setForwardDirection}
> >
<ha-svg-icon .path=${mdiRotateRight}></ha-svg-icon> <ha-svg-icon .path=${mdiRotateRight}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
${supportsOscillate ${supportsOscillate
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize( .title=${this.hass.localize(
`ui.dialogs.more_info_control.fan.${ `ui.dialogs.more_info_control.fan.${
@ -264,7 +257,7 @@ class MoreInfoFan extends LitElement {
? haOscillating ? haOscillating
: haOscillatingOff} : haOscillatingOff}
></ha-svg-icon> ></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
</div> ` </div> `
@ -279,7 +272,7 @@ class MoreInfoFan extends LitElement {
fixed fixed
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
> >
<md-outlined-button <ha-outlined-button
slot="trigger" slot="trigger"
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
> >
@ -294,7 +287,7 @@ class MoreInfoFan extends LitElement {
slot="icon" slot="icon"
path=${mdiCreation} path=${mdiCreation}
></ha-svg-icon> ></ha-svg-icon>
</md-outlined-button> </ha-outlined-button>
${this.stateObj.attributes.preset_modes?.map( ${this.stateObj.attributes.preset_modes?.map(
(mode) => (mode) =>
html` html`
@ -328,16 +321,7 @@ class MoreInfoFan extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return moreInfoControlStyle;
moreInfoControlStyle,
css`
md-outlined-button {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-outline: var(--divider-color);
}
`,
];
} }
} }

31
src/dialogs/more-info/controls/more-info-light.ts
View File

@ -1,6 +1,4 @@
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import "@material/web/button/outlined-button";
import "@material/web/iconbutton/outlined-icon-button";
import { import {
mdiCreation, mdiCreation,
mdiFileWordBox, mdiFileWordBox,
@ -24,6 +22,8 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
import { blankBeforePercent } from "../../../common/translations/blank_before_percent"; import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-button-menu"; import "../../../components/ha-button-menu";
import "../../../components/ha-outlined-button";
import "../../../components/ha-outlined-icon-button";
import "../../../components/ha-select"; import "../../../components/ha-select";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
@ -129,7 +129,7 @@ class MoreInfoLight extends LitElement {
<div class="buttons"> <div class="buttons">
${supportsBrightness ${supportsBrightness
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.light.toggle" "ui.dialogs.more_info_control.light.toggle"
@ -140,12 +140,12 @@ class MoreInfoLight extends LitElement {
@click=${this._toggle} @click=${this._toggle}
> >
<ha-svg-icon .path=${mdiPower}></ha-svg-icon> <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
${supportsColorTemp || supportsColor ${supportsColorTemp || supportsColor
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
class=${classMap({ class=${classMap({
"color-rgb-mode": supportsColor, "color-rgb-mode": supportsColor,
"color-temp-mode": !supportsColor, "color-temp-mode": !supportsColor,
@ -159,12 +159,12 @@ class MoreInfoLight extends LitElement {
)} )}
@click=${this._showLightColorPickerView} @click=${this._showLightColorPickerView}
> >
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
${supportsWhite ${supportsWhite
? html` ? html`
<md-outlined-icon-button <ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize( .title=${this.hass.localize(
"ui.dialogs.more_info_control.light.set_white" "ui.dialogs.more_info_control.light.set_white"
@ -175,7 +175,7 @@ class MoreInfoLight extends LitElement {
@click=${this._setWhiteColor} @click=${this._setWhiteColor}
> >
<ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon> <ha-svg-icon .path=${mdiFileWordBox}></ha-svg-icon>
</md-outlined-icon-button> </ha-outlined-icon-button>
` `
: nothing} : nothing}
</div> </div>
@ -189,7 +189,7 @@ class MoreInfoLight extends LitElement {
fixed fixed
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
> >
<md-outlined-button <ha-outlined-button
slot="trigger" slot="trigger"
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
> >
@ -201,7 +201,7 @@ class MoreInfoLight extends LitElement {
this.hass.entities, this.hass.entities,
"effect" "effect"
)} )}
</md-outlined-button> </ha-outlined-button>
${this.stateObj.attributes.effect_list.map( ${this.stateObj.attributes.effect_list.map(
(effect: string) => html` (effect: string) => html`
<ha-list-item <ha-list-item
@ -272,17 +272,6 @@ class MoreInfoLight extends LitElement {
return [ return [
moreInfoControlStyle, moreInfoControlStyle,
css` css`
md-outlined-icon-button {
--ha-icon-display: block;
--md-sys-color-on-surface: var(--secondary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
}
md-outlined-button {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-outline: var(--divider-color);
}
.color-rgb-mode { .color-rgb-mode {
background-image: url("/static/images/color_wheel.png"); background-image: url("/static/images/color_wheel.png");
background-size: cover; background-size: cover;