Skip to content
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

Jump to bottom

Consolidate all icon button logic into <ha-icon-button> + ensure tooltip #9230

Merged
merged 33 commits into from
Oct 14, 2021
Merged

Consolidate all icon button logic into <ha-icon-button> + ensure tooltip #9230

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
6c71a8c
Consolidate all icon logic into `<ha-icon-button` + ensure tooltip
spacegaier May 22, 2021
cc48c55
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
spacegaier Jun 12, 2021
81e2efa
More icon conversions
spacegaier Jun 12, 2021
d7c16df
More icon conversions
spacegaier Jun 12, 2021
10b51e6
More icon conversions
spacegaier Jun 12, 2021
80c8162
More cleanups and mwc-icon-button replacements
spacegaier Oct 4, 2021
03c2f9d
Fix marked checkbox outlined icon
spacegaier Oct 4, 2021
613eb6c
Organize
spacegaier Oct 4, 2021
45bec38
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
spacegaier Oct 4, 2021
d488cc7
Remove accidental file
spacegaier Oct 4, 2021
d51ebc1
Lint fix
spacegaier Oct 4, 2021
8685f6b
Linter fixes
spacegaier Oct 4, 2021
1290069
Prettier
spacegaier Oct 4, 2021
d08cadf
"hass:" icon replacements + various fixes
spacegaier Oct 4, 2021
5fa3c05
Linter fix
spacegaier Oct 4, 2021
e818d54
More mwc-icon-button replacements
spacegaier Oct 5, 2021
641da21
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
spacegaier Oct 5, 2021
409132a
Typo fix in energy period selector
spacegaier Oct 5, 2021
e151d5d
ARIA fixes
spacegaier Oct 6, 2021
08a30ea
Merge branch 'dev' into ha-icon-button
spacegaier Oct 6, 2021
14dddd4
Changes from review
spacegaier Oct 7, 2021
91ba75b
Merge branch 'dev' into ha-icon-button
spacegaier Oct 7, 2021
4a6b2ad
Use correct ARIA property
spacegaier Oct 7, 2021
55cb582
Merge branch 'dev' into ha-icon-button
spacegaier Oct 8, 2021
ee08a88
Add label to icon button in zone edit
spacegaier Oct 8, 2021
6283ebe
Merge branch 'ha-icon-button' of https://github.com/spacegaier/fronte…
spacegaier Oct 8, 2021
9cbb40f
Prettier
spacegaier Oct 8, 2021
3f52c00
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
spacegaier Oct 8, 2021
08637d6
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
spacegaier Oct 14, 2021
dc2bae9
Cleanup imports
spacegaier Oct 14, 2021
7fd9a17
Use slot for non SVG icon
spacegaier Oct 14, 2021
8c32082
Merge branch 'dev' into ha-icon-button
spacegaier Oct 14, 2021
b0d6da1
Make slot unnamed + add missing usages
spacegaier Oct 14, 2021
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
8 changes: 5 additions & 3 deletions hassio/src/addon-store/hassio-addon-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,9 +92,11 @@ class HassioAddonStore extends LitElement {
slot="toolbar-icon"
@action=${this._handleAction}
>
<mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
spacegaier marked this conversation as resolved.
Show resolved Hide resolved
.label=${this.supervisor.localize("common.menu")}
.path=${mdiDotsVertical}
slot="trigger"
></ha-icon-button>
<mwc-list-item>
${this.supervisor.localize("store.repositories")}
</mwc-list-item>
Expand Down
8 changes: 5 additions & 3 deletions hassio/src/addon-view/config/hassio-addon-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,11 @@ class HassioAddonConfig extends LitElement {
</h2>
<div class="card-menu">
<ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
<mwc-icon-button slot="trigger">
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
spacegaier marked this conversation as resolved.
Show resolved Hide resolved
.label=${this.hass.localize("common.menu")}
.path=${mdiDotsVertical}
slot="trigger"
></ha-icon-button>
<mwc-list-item .disabled=${!this._canShowSchema}>
${this._yamlMode
? this.supervisor.localize(
Expand Down
8 changes: 5 additions & 3 deletions hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,11 @@ class HassioHardwareDialog extends LitElement {
<h2>
${this._dialogParams.supervisor.localize("dialog.hardware.title")}
</h2>
<mwc-icon-button dialogAction="close">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.close")}
.path=${mdiClose}
dialogAction="close"
></ha-icon-button>
<search-input
autofocus
no-label-float
Expand Down
9 changes: 6 additions & 3 deletions hassio/src/dialogs/network/dialog-hassio-network.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,12 @@ export class DialogHassioNetwork
<span slot="title">
${this.supervisor.localize("dialog.network.title")}
</span>
<mwc-icon-button slot="actionItems" dialogAction="cancel">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.close")}
.path=${mdiClose}
slot="actionItems"
dialogAction="cancel"
></ha-icon-button>
</ha-header-bar>
${this._interfaces.length > 1
? html` <mwc-tab-bar
Expand Down
9 changes: 4 additions & 5 deletions hassio/src/dialogs/registries/dialog-hassio-registries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,16 +110,15 @@ class HassioRegistriesDialog extends LitElement {
)}:
${entry.username}</span
>
<mwc-icon-button
<ha-icon-button
spacegaier marked this conversation as resolved.
Show resolved Hide resolved
.entry=${entry}
.title=${this.supervisor.localize(
.label=${this.supervisor.localize(
"dialog.registries.remove"
)}
.path=${mdiDelete}
slot="meta"
@click=${this._removeRegistry}
>
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
</mwc-list-item>
`
)
Expand Down
9 changes: 4 additions & 5 deletions hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,14 @@ class HassioRepositoriesDialog extends LitElement {
<div secondary>${repo.maintainer}</div>
<div secondary>${repo.url}</div>
</paper-item-body>
<mwc-icon-button
<ha-icon-button
.slug=${repo.slug}
.title=${this._dialogParams!.supervisor.localize(
.label=${this._dialogParams!.supervisor.localize(
"dialog.repositories.remove"
)}
.path=${mdiDelete}
@click=${this._removeRepository}
>
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
</paper-item>
`
)
Expand Down
9 changes: 6 additions & 3 deletions hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,12 @@ export class DialogHassioSnapshotUpload
<div slot="heading">
<ha-header-bar>
<span slot="title"> Upload snapshot </span>
<mwc-icon-button slot="actionItems" dialogAction="cancel">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.close")}
.path=${mdiClose}
slot="actionItems"
dialogAction="cancel"
></ha-icon-button>
</ha-header-bar>
</div>
<hassio-upload-snapshot
Expand Down
17 changes: 11 additions & 6 deletions hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,12 @@ class HassioSnapshotDialog
<div slot="heading">
<ha-header-bar>
<span slot="title">${this._snapshot.name}</span>
<mwc-icon-button slot="actionItems" dialogAction="cancel">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.close")}
.path=${mdiClose}
slot="actionItems"
dialogAction="cancel"
></ha-icon-button>
</ha-header-bar>
</div>
${this._restoringSnapshot
Expand Down Expand Up @@ -104,9 +107,11 @@ class HassioSnapshotDialog
@action=${this._handleMenuAction}
@closed=${(ev: Event) => ev.stopPropagation()}
>
<mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.menu")}
.path=${mdiDotsVertical}
slot="trigger"
></ha-icon-button>
<mwc-list-item>Download Snapshot</mwc-list-item>
<mwc-list-item class="error">Delete Snapshot</mwc-list-item>
</ha-button-menu>`
Expand Down
9 changes: 4 additions & 5 deletions hassio/src/ingress-view/hassio-ingress-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,11 @@ class HassioIngressView extends LitElement {

return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
? html`<div class="header">
<mwc-icon-button
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
<ha-icon-button
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
.path=${mdiMenu}
@click=${this._toggleMenu}
>
<ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
<div class="main-title">${this._addon.name}</div>
</div>
${iframe}`
Expand Down
18 changes: 11 additions & 7 deletions hassio/src/snapshots/hassio-snapshots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,9 +179,11 @@ export class HassioSnapshots extends LitElement {
slot="toolbar-icon"
@action=${this._handleAction}
>
<mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.menu")}
.path=${mdiDotsVertical}
slot="trigger"
></ha-icon-button>
<mwc-list-item>
${this.supervisor?.localize("common.reload")}
</mwc-list-item>
Expand Down Expand Up @@ -216,13 +218,15 @@ export class HassioSnapshots extends LitElement {
</mwc-button>
`
: html`
<mwc-icon-button
<ha-icon-button
.label=${this.supervisor.localize(
"snapshot.delete_selected"
)}
.path=${mdiDelete}
id="delete-btn"
class="warning"
@click=${this._deleteSelected}
>
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
<paper-tooltip animation-delay="0" for="delete-btn">
${this.supervisor.localize("snapshot.delete_selected")}
</paper-tooltip>
Expand Down
8 changes: 5 additions & 3 deletions hassio/src/system/hassio-host-info.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,9 +184,11 @@ class HassioHostInfo extends LitElement {
corner="BOTTOM_START"
@action=${this._handleMenuAction}
>
<mwc-icon-button slot="trigger">
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button
.label=${this.hass.localize("common.menu")}
.path=${mdiDotsVertical}
slot="trigger"
></ha-icon-button>
<mwc-list-item>
${this.supervisor.localize("system.host.hardware")}
</mwc-list-item>
Expand Down
10 changes: 5 additions & 5 deletions src/common/search/search-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
TemplateResult,
} from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../components/ha-icon-button";
import "../../components/ha-svg-icon";
import { fireEvent } from "../dom/fire_event";

Expand Down Expand Up @@ -50,13 +51,12 @@ class SearchInput extends LitElement {
</slot>
${this.filter &&
html`
<mwc-icon-button
<ha-icon-button
slot="suffix"
@click=${this._clearSearch}
title="Clear"
>
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
.label=${"Clear"}
.path=${mdiClose}
></ha-icon-button>
`}
</paper-input>
`;
Expand Down
17 changes: 7 additions & 10 deletions src/components/device/ha-area-devices-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import "../ha-icon-button";
import "@material/mwc-button/mwc-button";
import "@material/mwc-icon-button/mwc-icon-button";
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
Expand Down Expand Up @@ -313,29 +314,25 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
>
<div class="suffix" slot="suffix">
${this.value
? html`<mwc-icon-button
? html`<ha-icon-button
class="clear-button"
.label=${this.hass.localize(
"ui.components.device-picker.clear"
)}
.path=${mdiClose}
@click=${this._clearValue}
no-ripple
>
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button> `
></ha-icon-button> `
: ""}
${areas.length > 0
? html`
<mwc-icon-button
<ha-icon-button
.label=${this.hass.localize(
"ui.components.device-picker.show_devices"
)}
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
class="toggle-button"
>
<ha-svg-icon
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
`
: ""}
</div>
Expand Down
17 changes: 7 additions & 10 deletions src/components/entity/ha-entity-attribute-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { HomeAssistant } from "../../types";
import { formatAttributeName } from "../../util/hass-attributes-util";
import "../ha-svg-icon";
import "./state-badge";
import "../ha-icon-button";

export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

Expand Down Expand Up @@ -96,31 +97,27 @@ class HaEntityAttributePicker extends LitElement {
<div class="suffix" slot="suffix">
${this.value
? html`
<mwc-icon-button
<ha-icon-button
.label=${this.hass.localize(
"ui.components.entity.entity-picker.clear"
)}
.path=${mdiClose}
class="clear-button"
tabindex="-1"
@click=${this._clearValue}
no-ripple
>
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
`
: ""}

<mwc-icon-button
<ha-icon-button
.label=${this.hass.localize(
"ui.components.entity.entity-attribute-picker.show_attributes"
)}
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
class="toggle-button"
tabindex="-1"
>
<ha-svg-icon
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
</div>
</paper-input>
</vaadin-combo-box-light>
Expand Down
17 changes: 7 additions & 10 deletions src/components/entity/ha-entity-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import "../ha-svg-icon";
import "./state-badge";
import "../ha-icon-button";

export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

Expand Down Expand Up @@ -229,31 +230,27 @@ export class HaEntityPicker extends LitElement {
<div class="suffix" slot="suffix">
${this.value && !this.hideClearIcon
? html`
<mwc-icon-button
<ha-icon-button
.label=${this.hass.localize(
"ui.components.entity.entity-picker.clear"
)}
.path=${mdiClose}
class="clear-button"
tabindex="-1"
@click=${this._clearValue}
no-ripple
>
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
`
: ""}

<mwc-icon-button
<ha-icon-button
.label=${this.hass.localize(
"ui.components.entity.entity-picker.show_entities"
)}
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
class="toggle-button"
tabindex="-1"
>
<ha-svg-icon
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
></ha-svg-icon>
</mwc-icon-button>
></ha-icon-button>
</div>
</paper-input>
</vaadin-combo-box-light>
Expand Down
Loading