jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-icon when user can set icon (#1399)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-07-03 14:33:43 -04:00 committed by GitHub
parent e5c900aec1
commit ad4814dfad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 23 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/cards/ha-plant-card.js
View File

@ -1,8 +1,8 @@
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../components/ha-card.js';
import '../components/ha-icon.js';
import computeStateName from '../common/entity/compute_state_name.js';
import EventsMixin from '../mixins/events-mixin.js';
@ -44,7 +44,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
.has-plant-image .content {
padding-bottom: 16px;
}
iron-icon {
ha-icon {
color: var(--paper-item-icon-color);
margin-bottom: 8px;
}
@ -70,7 +70,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
<div class="content">
<template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
<div class="attributes" on-click="attributeClicked">
<div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
<div><ha-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></ha-icon></div>
<div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
[[computeValue(stateObj.attributes, item)]]
</div>

10
src/cards/ha-weather-card.js
View File

@ -1,8 +1,8 @@
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../components/ha-card.js';
import '../components/ha-icon.js';
import EventsMixin from '../mixins/events-mixin.js';
import LocalizeMixin from '../mixins/localize-mixin.js';
@ -23,7 +23,7 @@ class HaWeatherCard extends
padding: 0 20px 20px;
}
iron-icon {
ha-icon {
color: var(--paper-item-icon-color);
}
@ -40,7 +40,7 @@ class HaWeatherCard extends
margin-right: 32px;
}
.main iron-icon {
.main ha-icon {
--iron-icon-height: 72px;
--iron-icon-width: 72px;
margin-right: 8px;
@ -94,7 +94,7 @@ class HaWeatherCard extends
<div class="now">
<div class="main">
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
<ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
</template>
<div class="temp">
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
@ -135,7 +135,7 @@ class HaWeatherCard extends
</div>
<template is="dom-if" if="[[item.condition]]">
<div class="icon">
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
<ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
</div>
</template>
<div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>

4
src/components/ha-label-badge.js
View File

@ -1,6 +1,6 @@
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import './ha-icon.js';
class HaLabelBadge extends PolymerElement {
static get template() {
@ -83,7 +83,7 @@ class HaLabelBadge extends PolymerElement {
<div class="badge-container">
<div class="label-badge" id="badge">
<div class$="[[computeValueClasses(value)]]">
<iron-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></iron-icon>
<ha-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></ha-icon>
<span hidden$="[[computeHideValue(value, image)]]">[[value]]</span>
</div>
<div hidden$="[[computeHideLabel(label)]]" class$="[[computeLabelClasses(label)]]">

6
src/components/ha-labeled-slider.js
View File

@ -1,8 +1,8 @@
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import './ha-paper-slider.js';
import './ha-icon.js';
class HaLabeledSlider extends PolymerElement {
static get template() {
@ -18,7 +18,7 @@ class HaLabeledSlider extends PolymerElement {
opacity: var(--dark-primary-opacity);
}
iron-icon {
ha-icon {
float: left;
margin-top: 4px;
opacity: var(--dark-secondary-opacity);
@ -34,7 +34,7 @@ class HaLabeledSlider extends PolymerElement {
<slot name="extra"></slot>
</div>
<div class="slider-container">
<iron-icon icon="[[icon]]" hidden$="[[!icon]]"></iron-icon>
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
<ha-paper-slider
min="[[min]]" max="[[max]]" step="[[step]]"
pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"

6
src/layouts/partial-cards.js
View File

@ -3,7 +3,6 @@ import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/app-route/app-route.js';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-pages/iron-pages.js';
import '@polymer/paper-tabs/paper-tab.js';
import '@polymer/paper-tabs/paper-tabs.js';
@ -11,6 +10,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../components/ha-cards.js';
import '../components/ha-icon.js';
import '../components/ha-menu-button.js';
import '../components/ha-start-voice-button.js';
@ -69,7 +69,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
</template>
<template is="dom-if" if="[[defaultView]]">
<template is="dom-if" if="[[defaultView.attributes.icon]]">
<iron-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
<ha-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></ha-icon>
</template>
<template is="dom-if" if="[[!defaultView.attributes.icon]]">
[[_computeStateName(defaultView)]]
@ -79,7 +79,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
<template is="dom-repeat" items="[[views]]">
<paper-tab data-entity$="[[item.entity_id]]" on-click="scrollToTop">
<template is="dom-if" if="[[item.attributes.icon]]">
<iron-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
<ha-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></ha-icon>
</template>
<template is="dom-if" if="[[!item.attributes.icon]]">
[[_computeStateName(item)]]

10
src/panels/lovelace/ha-panel-lovelace.js
View File

@ -1,14 +1,6 @@
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-tabs/paper-tab.js';
import '@polymer/paper-tabs/paper-tabs.js';
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-button/paper-button.js';
import '../../layouts/hass-loading-screen.js';
import '../../layouts/hass-error-screen.js';

4
src/panels/lovelace/hui-root.js
View File

@ -5,7 +5,6 @@ import '@polymer/app-route/app-route.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-tabs/paper-tab.js';
import '@polymer/paper-tabs/paper-tabs.js';
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
@ -17,6 +16,7 @@ import NavigateMixin from '../../mixins/navigate-mixin.js';
import '../../layouts/ha-app-layout.js';
import '../../components/ha-start-voice-button.js';
import '../../components/ha-icon.js';
import { loadModule, loadJS } from '../../common/dom/load_resource.js';
import './hui-view.js';
@ -65,7 +65,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
<template is="dom-repeat" items="[[config.views]]">
<paper-tab>
<template is="dom-if" if="[[item.icon]]">
<iron-icon title$="[[item.title]]" icon="[[item.icon]]"></iron-icon>
<ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
</template>
<template is="dom-if" if="[[!item.icon]]">
[[_computeTabTitle(item.title)]]

7
src/panels/map/ha-panel-map.js
View File

@ -1,10 +1,10 @@
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import Leaflet from 'leaflet';
import '../../components/ha-menu-button.js';
import '../../components/ha-icon.js';
import './ha-entity-marker.js';
@ -126,8 +126,9 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
// create icon
var iconHTML = '';
if (entity.attributes.icon) {
iconHTML = (
"<iron-icon icon='" + entity.attributes.icon + "'></iron-icon>");
const el = document.createElement('ha-icon');
el.setAttribute('icon', entity.attributes.icon);
iconHTML = el.outerHTML;
} else {
iconHTML = title;
}