jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 02:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Calendar Card: New Card (#5813)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Zack Arnett
2020-08-24 12:59:50 -05:00
committed by GitHub
parent 06a25284e8
commit dae42b1bd9
12 changed files with 619 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ha-button-toggle-group.ts
View File

@@ -1,3 +1,4 @@
import "@material/mwc-icon-button/mwc-icon-button";
import {
customElement,
html,
@@ -8,14 +9,14 @@ import {
css,
} from "lit-element";
import "./ha-icon-button";
import { fireEvent } from "../common/dom/fire_event";
import type { ToggleButton } from "../types";
import "./ha-svg-icon";
@customElement("ha-button-toggle-group")
export class HaButtonToggleGroup extends LitElement {
@property() public buttons!: ToggleButton[];
@property({ attribute: false }) public buttons!: ToggleButton[];
@property() public active?: string;
@@ -23,14 +24,16 @@ export class HaButtonToggleGroup extends LitElement {
return html`
<div>
${this.buttons.map(
(button) => html` <ha-icon-button
.label=${button.label}
.icon=${button.icon}
.value=${button.value}
?active=${this.active === button.value}
@click=${this._handleClick}
>
</ha-icon-button>`
(button) => html`
<mwc-icon-button
.label=${button.label}
.value=${button.value}
?active=${this.active === button.value}
@click=${this._handleClick}
>
<ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
</mwc-icon-button>
`
)}
</div>
`;
@@ -48,12 +51,13 @@ export class HaButtonToggleGroup extends LitElement {
--mdc-icon-button-size: var(--button-toggle-size, 36px);
--mdc-icon-size: var(--button-toggle-icon-size, 20px);
}
ha-icon-button {
mwc-icon-button {
border: 1px solid var(--primary-color);
border-right-width: 0px;
position: relative;
cursor: pointer;
}
ha-icon-button::before {
mwc-icon-button::before {
top: 0;
left: 0;
width: 100%;
@@ -65,22 +69,26 @@ export class HaButtonToggleGroup extends LitElement {
content: "";
transition: opacity 15ms linear, background-color 15ms linear;
}
ha-icon-button[active]::before {
mwc-icon-button[active]::before {
opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
}
ha-icon-button:first-child {
mwc-icon-button:first-child {
border-radius: 4px 0 0 4px;
}
ha-icon-button:last-child {
mwc-icon-button:last-child {
border-radius: 0 4px 4px 0;
border-right-width: 1px;
}
mwc-icon-button:only-child {
border-radius: 4px;
border-right-width: 1px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-button-toggle-button": HaButtonToggleGroup;
"ha-button-toggle-group": HaButtonToggleGroup;
}
}