mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Add a couple of labels (#3310)
* Add a couple of labels * Add some more labels
This commit is contained in:
parent
e804e62e66
commit
3becefaf8b
@ -188,6 +188,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
|
|
||||||
<div class="controls layout horizontal justified">
|
<div class="controls layout horizontal justified">
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Turn off"
|
||||||
icon="hass:power"
|
icon="hass:power"
|
||||||
on-click="handleTogglePower"
|
on-click="handleTogglePower"
|
||||||
invisible$="[[computeHidePowerButton(playerObj)]]"
|
invisible$="[[computeHidePowerButton(playerObj)]]"
|
||||||
@ -196,12 +197,14 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
|
|
||||||
<div class="playback-controls">
|
<div class="playback-controls">
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Previous track"
|
||||||
icon="hass:skip-previous"
|
icon="hass:skip-previous"
|
||||||
invisible$="[[!playerObj.supportsPreviousTrack]]"
|
invisible$="[[!playerObj.supportsPreviousTrack]]"
|
||||||
disabled="[[playerObj.isOff]]"
|
disabled="[[playerObj.isOff]]"
|
||||||
on-click="handlePrevious"
|
on-click="handlePrevious"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Play or Pause"
|
||||||
class="primary"
|
class="primary"
|
||||||
icon="[[computePlaybackControlIcon(playerObj)]]"
|
icon="[[computePlaybackControlIcon(playerObj)]]"
|
||||||
invisible$="[[!computePlaybackControlIcon(playerObj)]]"
|
invisible$="[[!computePlaybackControlIcon(playerObj)]]"
|
||||||
@ -209,6 +212,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
on-click="handlePlaybackControl"
|
on-click="handlePlaybackControl"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Next track"
|
||||||
icon="hass:skip-next"
|
icon="hass:skip-next"
|
||||||
invisible$="[[!playerObj.supportsNextTrack]]"
|
invisible$="[[!playerObj.supportsNextTrack]]"
|
||||||
disabled="[[playerObj.isOff]]"
|
disabled="[[playerObj.isOff]]"
|
||||||
@ -217,6 +221,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="More information."
|
||||||
icon="hass:dots-vertical"
|
icon="hass:dots-vertical"
|
||||||
on-click="handleOpenMoreInfo"
|
on-click="handleOpenMoreInfo"
|
||||||
class="self-center secondary"
|
class="self-center secondary"
|
||||||
|
@ -15,6 +15,7 @@ import {
|
|||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
import { forwardHaptic } from "../../data/haptics";
|
import { forwardHaptic } from "../../data/haptics";
|
||||||
|
import computeStateName from "../../common/entity/compute_state_name";
|
||||||
|
|
||||||
const isOn = (stateObj?: HassEntity) =>
|
const isOn = (stateObj?: HassEntity) =>
|
||||||
stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
|
stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
|
||||||
@ -35,11 +36,13 @@ class HaEntityToggle extends LitElement {
|
|||||||
if (this.stateObj.attributes.assumed_state) {
|
if (this.stateObj.attributes.assumed_state) {
|
||||||
return html`
|
return html`
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
|
||||||
icon="hass:flash-off"
|
icon="hass:flash-off"
|
||||||
@click=${this._turnOff}
|
@click=${this._turnOff}
|
||||||
?state-active=${!this._isOn}
|
?state-active=${!this._isOn}
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
|
||||||
icon="hass:flash"
|
icon="hass:flash"
|
||||||
@click=${this._turnOn}
|
@click=${this._turnOn}
|
||||||
?state-active=${this._isOn}
|
?state-active=${this._isOn}
|
||||||
@ -49,6 +52,9 @@ class HaEntityToggle extends LitElement {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<paper-toggle-button
|
<paper-toggle-button
|
||||||
|
aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
|
||||||
|
this._isOn ? "off" : "on"
|
||||||
|
}`}
|
||||||
.checked=${this._isOn}
|
.checked=${this._isOn}
|
||||||
@change=${this._toggleChanged}
|
@change=${this._toggleChanged}
|
||||||
></paper-toggle-button>
|
></paper-toggle-button>
|
||||||
|
@ -55,7 +55,9 @@ class HaCameraStream extends LitElement {
|
|||||||
.src=${__DEMO__
|
.src=${__DEMO__
|
||||||
? `/api/camera_proxy_stream/${this.stateObj.entity_id}`
|
? `/api/camera_proxy_stream/${this.stateObj.entity_id}`
|
||||||
: computeMJPEGStreamUrl(this.stateObj)}
|
: computeMJPEGStreamUrl(this.stateObj)}
|
||||||
.alt=${computeStateName(this.stateObj)}
|
.alt=${`Preview of the ${computeStateName(
|
||||||
|
this.stateObj
|
||||||
|
)} camera.`}
|
||||||
/>
|
/>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
|
@ -68,6 +68,7 @@ const computePanels = (hass: HomeAssistant) => {
|
|||||||
|
|
||||||
const renderPanel = (hass, panel) => html`
|
const renderPanel = (hass, panel) => html`
|
||||||
<a
|
<a
|
||||||
|
aria-role="option"
|
||||||
href="${computeUrl(panel.url_path)}"
|
href="${computeUrl(panel.url_path)}"
|
||||||
data-panel="${panel.url_path}"
|
data-panel="${panel.url_path}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
@ -115,12 +116,17 @@ class HaSidebar extends LitElement {
|
|||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img id="logo" src="/static/icons/favicon-192x192.png" />
|
<img
|
||||||
|
id="logo"
|
||||||
|
src="/static/icons/favicon-192x192.png"
|
||||||
|
alt="Home Assistant logo"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
|
||||||
<paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
|
<paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
|
||||||
<a
|
<a
|
||||||
|
aria-role="option"
|
||||||
href="${computeUrl(this._defaultPage)}"
|
href="${computeUrl(this._defaultPage)}"
|
||||||
data-panel=${this._defaultPage}
|
data-panel=${this._defaultPage}
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
@ -197,6 +203,7 @@ class HaSidebar extends LitElement {
|
|||||||
${this._externalConfig && this._externalConfig.hasSettingsScreen
|
${this._externalConfig && this._externalConfig.hasSettingsScreen
|
||||||
? html`
|
? html`
|
||||||
<a
|
<a
|
||||||
|
aria-role="option"
|
||||||
aria-label="App Configuration"
|
aria-label="App Configuration"
|
||||||
href="#external-app-configuration"
|
href="#external-app-configuration"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
@ -219,7 +226,13 @@ class HaSidebar extends LitElement {
|
|||||||
${configPanel ? renderPanel(hass, configPanel) : ""}
|
${configPanel ? renderPanel(hass, configPanel) : ""}
|
||||||
${hass.user
|
${hass.user
|
||||||
? html`
|
? html`
|
||||||
<a href="/profile" data-panel="panel" tabindex="-1">
|
<a
|
||||||
|
href="/profile"
|
||||||
|
data-panel="panel"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-role="option"
|
||||||
|
aria-label=${hass.localize("panel.profile")}
|
||||||
|
>
|
||||||
<paper-icon-item class="profile">
|
<paper-icon-item class="profile">
|
||||||
<ha-user-badge
|
<ha-user-badge
|
||||||
slot="item-icon"
|
slot="item-icon"
|
||||||
@ -233,7 +246,11 @@ class HaSidebar extends LitElement {
|
|||||||
</a>
|
</a>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<paper-icon-item @click=${this._handleLogOut} class="logout">
|
<paper-icon-item
|
||||||
|
@click=${this._handleLogOut}
|
||||||
|
class="logout"
|
||||||
|
aria-role="option"
|
||||||
|
>
|
||||||
<ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
|
<ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
|
||||||
<span class="item-text"
|
<span class="item-text"
|
||||||
>${hass.localize("ui.sidebar.log_out")}</span
|
>${hass.localize("ui.sidebar.log_out")}</span
|
||||||
|
@ -14,6 +14,7 @@ class HaStartVoiceButton extends EventsMixin(PolymerElement) {
|
|||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Start conversation"
|
||||||
icon="hass:microphone"
|
icon="hass:microphone"
|
||||||
hidden$="[[!canListen]]"
|
hidden$="[[!canListen]]"
|
||||||
on-click="handleListenClick"
|
on-click="handleListenClick"
|
||||||
|
@ -64,9 +64,14 @@ class HaPanelDevInfo extends LitElement {
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<p class="version">
|
<p class="version">
|
||||||
<a href="https://www.home-assistant.io" target="_blank"
|
<a href="https://www.home-assistant.io" target="_blank">
|
||||||
><img src="/static/icons/favicon-192x192.png" height="192"/></a
|
<img
|
||||||
><br />
|
src="/static/icons/favicon-192x192.png"
|
||||||
|
height="192"
|
||||||
|
alt="Home Assistant logo"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
Home Assistant<br />
|
Home Assistant<br />
|
||||||
${hass.config.version}
|
${hass.config.version}
|
||||||
</p>
|
</p>
|
||||||
|
@ -41,6 +41,7 @@ class HuiEntitiesToggle extends LitElement {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<paper-toggle-button
|
<paper-toggle-button
|
||||||
|
aria-label="Toggle entities."
|
||||||
?checked="${this._toggleEntities!.some((entityId) => {
|
?checked="${this._toggleEntities!.some((entityId) => {
|
||||||
const stateObj = this.hass!.states[entityId];
|
const stateObj = this.hass!.states[entityId];
|
||||||
return stateObj && stateObj.state === "on";
|
return stateObj && stateObj.state === "on";
|
||||||
|
@ -23,6 +23,7 @@ class HuiNotificationsButton extends LitElement {
|
|||||||
protected render(): TemplateResult | void {
|
protected render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Show Notifications"
|
||||||
icon="hass:bell"
|
icon="hass:bell"
|
||||||
@click="${this._clicked}"
|
@click="${this._clicked}"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
|
@ -144,6 +144,7 @@ class HUIRoot extends LitElement {
|
|||||||
horizontal-offset="-5"
|
horizontal-offset="-5"
|
||||||
>
|
>
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
|
aria-label="Open Lovelace menu"
|
||||||
icon="hass:dots-vertical"
|
icon="hass:dots-vertical"
|
||||||
slot="dropdown-trigger"
|
slot="dropdown-trigger"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user