mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Lovelace: Small reorg (#1315)
* Small reorg * Add markdown card * Tweak closeness
This commit is contained in:
Paulus Schoutsen
GitHub
parent
8cebddcccc
commit
77f623d519
@ -22,6 +22,9 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
.states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
.state {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
|
||||
import '../../cards/ha-camera-card.js';
|
||||
import '../../../cards/ha-camera-card.js';
|
||||
import './hui-error-card.js';
|
||||
|
||||
class HuiCameraPreviewCard extends PolymerElement {
|
||||
@ -2,16 +2,16 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import stateCardType from '../../common/entity/state_card_type.js';
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import { DOMAINS_HIDE_MORE_INFO } from '../../common/const.js';
|
||||
import stateCardType from '../../../common/entity/state_card_type.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
import { DOMAINS_HIDE_MORE_INFO } from '../../../common/const.js';
|
||||
|
||||
import '../../components/ha-card.js';
|
||||
import '../../../components/ha-card.js';
|
||||
|
||||
// just importing this now as shortcut to import correct state-card-*
|
||||
import '../../state-summary/state-card-content.js';
|
||||
import '../../../state-summary/state-card-content.js';
|
||||
|
||||
import EventsMixin from '../../mixins/events-mixin.js';
|
||||
import EventsMixin from '../../../mixins/events-mixin.js';
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
@ -23,8 +23,12 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
.state {
|
||||
padding: 4px 0;
|
||||
#states {
|
||||
margin: -4px 0;
|
||||
}
|
||||
#states > * {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.header {
|
||||
@apply --paper-font-headline;
|
||||
@ -10,8 +10,8 @@ import './hui-picture-glance-card';
|
||||
import './hui-plant-status-card.js';
|
||||
import './hui-weather-forecast-card';
|
||||
|
||||
import computeStateDomain from '../../common/entity/compute_state_domain.js';
|
||||
import computeCardElement from './common/compute-card-element.js';
|
||||
import computeStateDomain from '../../../common/entity/compute_state_domain.js';
|
||||
import computeCardElement from '../common/compute-card-element.js';
|
||||
|
||||
class HuiEntitiesCard extends PolymerElement {
|
||||
static get properties() {
|
||||
@ -27,6 +27,11 @@ class HuiEntitiesCard extends PolymerElement {
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._whenDefined = {};
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
return this.lastChild ? this.lastChild.getCardSize() : 1;
|
||||
}
|
||||
@ -75,6 +80,10 @@ class HuiEntitiesCard extends PolymerElement {
|
||||
error = `Unknown card type encountered: "${config.card}".`;
|
||||
} else if (!customElements.get(tag)) {
|
||||
error = `Custom element doesn't exist: "${tag}".`;
|
||||
if (!(tag in this._whenDefined)) {
|
||||
this._whenDefined[tag] = customElements.whenDefined(tag)
|
||||
.then(() => this._configChanged(this.config));
|
||||
}
|
||||
} else if (!config.filter || !Array.isArray(config.filter)) {
|
||||
error = 'No or incorrect filter.';
|
||||
}
|
||||
@ -100,14 +109,11 @@ class HuiEntitiesCard extends PolymerElement {
|
||||
}
|
||||
|
||||
_computeCardConfig(config) {
|
||||
const cardConfig = Object.assign(
|
||||
return Object.assign(
|
||||
{},
|
||||
config,
|
||||
config.card_config,
|
||||
{ entities: this._getEntities(this.hass, config.filter) }
|
||||
);
|
||||
delete cardConfig.card;
|
||||
delete cardConfig.filter;
|
||||
return cardConfig;
|
||||
}
|
||||
}
|
||||
customElements.define('hui-entity-filter-card', HuiEntitiesCard);
|
||||
@ -1,14 +1,14 @@
|
||||
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-card.js';
|
||||
|
||||
import { STATES_ON } from '../../common/const.js';
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeStateDisplay from '../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../common/entity/compute_state_name.js';
|
||||
import { STATES_ON } from '../../../common/const.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
import computeStateDisplay from '../../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../../common/entity/compute_state_name.js';
|
||||
|
||||
import LocalizeMixin from '../../mixins/localize-mixin.js';
|
||||
import LocalizeMixin from '../../../mixins/localize-mixin.js';
|
||||
|
||||
const DOMAINS_NO_STATE = ['scene', 'script', 'weblink'];
|
||||
|
||||
@ -141,4 +141,4 @@ class HuiPictureCard extends LocalizeMixin(PolymerElement) {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('hui-picture-card', HuiPictureCard);
|
||||
customElements.define('hui-entity-picture-card', HuiPictureCard);
|
||||
@ -1,14 +1,14 @@
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeStateDisplay from '../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../common/entity/compute_state_name.js';
|
||||
import computeStateDisplay from '../../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../../common/entity/compute_state_name.js';
|
||||
|
||||
import '../../components/entity/state-badge.js';
|
||||
import '../../components/ha-card.js';
|
||||
import '../../../components/entity/state-badge.js';
|
||||
import '../../../components/ha-card.js';
|
||||
|
||||
import EventsMixin from '../../mixins/events-mixin.js';
|
||||
import LocalizeMixin from '../../mixins/localize-mixin.js';
|
||||
import EventsMixin from '../../../mixins/events-mixin.js';
|
||||
import LocalizeMixin from '../../../mixins/localize-mixin.js';
|
||||
|
||||
/*
|
||||
* @appliesMixin EventsMixin
|
||||
@ -1,8 +1,8 @@
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
|
||||
import '../../cards/ha-history_graph-card.js';
|
||||
import '../../../cards/ha-history_graph-card.js';
|
||||
import './hui-error-card.js';
|
||||
|
||||
class HuiHistoryGraphCard extends PolymerElement {
|
||||
67
src/panels/lovelace/cards/hui-markdown-card.js
Normal file
67
src/panels/lovelace/cards/hui-markdown-card.js
Normal file
@ -0,0 +1,67 @@
|
||||
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-markdown.js';
|
||||
|
||||
class HuiMarkdownCard extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
@apply --paper-font-body1;
|
||||
}
|
||||
ha-markdown {
|
||||
display: block;
|
||||
padding: 0 16px 16px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
:host([no-title]) ha-markdown {
|
||||
padding-top: 16px;
|
||||
}
|
||||
ha-markdown p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
ha-markdown p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ha-markdown a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
ha-markdown img {
|
||||
max-width: 100%;
|
||||
}
|
||||
paper-button {
|
||||
margin: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<ha-card header="[[config.title]]">
|
||||
<ha-markdown content='[[config.content]]'></ha-markdown>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
config: Object,
|
||||
noTitle: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
computed: '_computeNoTitle(config.title)',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
return this.config.content.split('\n').length;
|
||||
}
|
||||
|
||||
_computeNoTitle(title) {
|
||||
return !title;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('hui-markdown-card', HuiMarkdownCard);
|
||||
@ -1,8 +1,8 @@
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
|
||||
import '../../cards/ha-media_player-card.js';
|
||||
import '../../../cards/ha-media_player-card.js';
|
||||
import './hui-error-card.js';
|
||||
|
||||
class HuiMediaControlCard extends PolymerElement {
|
||||
@ -2,16 +2,16 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
import '@polymer/paper-icon-button/paper-icon-button.js';
|
||||
|
||||
import '../../components/ha-card.js';
|
||||
import '../../../components/ha-card.js';
|
||||
|
||||
import { STATES_ON } from '../../common/const.js';
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeStateDisplay from '../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../common/entity/compute_state_name.js';
|
||||
import stateIcon from '../../common/entity/state_icon.js';
|
||||
import { STATES_ON } from '../../../common/const.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
import computeStateDisplay from '../../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../../common/entity/compute_state_name.js';
|
||||
import stateIcon from '../../../common/entity/state_icon.js';
|
||||
|
||||
import EventsMixin from '../../mixins/events-mixin.js';
|
||||
import LocalizeMixin from '../../mixins/localize-mixin.js';
|
||||
import EventsMixin from '../../../mixins/events-mixin.js';
|
||||
import LocalizeMixin from '../../../mixins/localize-mixin.js';
|
||||
|
||||
const DOMAINS_FORCE_DIALOG = ['binary_sensor', 'device_tracker', 'sensor'];
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
|
||||
import '../../cards/ha-plant-card.js';
|
||||
import '../../../cards/ha-plant-card.js';
|
||||
import './hui-error-card.js';
|
||||
|
||||
class HuiPlantStatusCard extends PolymerElement {
|
||||
@ -1,8 +1,8 @@
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import computeDomain from '../../common/entity/compute_domain.js';
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
|
||||
import '../../cards/ha-weather-card.js';
|
||||
import '../../../cards/ha-weather-card.js';
|
||||
import './hui-error-card.js';
|
||||
|
||||
class HuiWeatherForecastCard extends PolymerElement {
|
||||
@ -1,9 +1,24 @@
|
||||
import '../cards/hui-camera-preview-card.js';
|
||||
import '../cards/hui-entities-card.js';
|
||||
import '../cards/hui-entity-filter-card.js';
|
||||
import '../cards/hui-glance-card';
|
||||
import '../cards/hui-history-graph-card.js';
|
||||
import '../cards/hui-markdown-card.js';
|
||||
import '../cards/hui-media-control-card.js';
|
||||
import '../cards/hui-entity-picture-card.js';
|
||||
import '../cards/hui-picture-glance-card';
|
||||
import '../cards/hui-plant-status-card.js';
|
||||
import '../cards/hui-weather-forecast-card';
|
||||
import '../cards/hui-error-card.js';
|
||||
|
||||
const CARD_TYPES = [
|
||||
'camera-preview',
|
||||
'entities',
|
||||
'entity-filter',
|
||||
'entity-picture',
|
||||
'glance',
|
||||
'history-graph',
|
||||
'markdown',
|
||||
'media-control',
|
||||
'picture-glance',
|
||||
'plant-status',
|
||||
|
||||
@ -1,18 +1,6 @@
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import './hui-camera-preview-card.js';
|
||||
import './hui-entities-card.js';
|
||||
import './hui-entity-filter-card.js';
|
||||
import './hui-glance-card';
|
||||
import './hui-history-graph-card.js';
|
||||
import './hui-media-control-card.js';
|
||||
import './hui-picture-card.js';
|
||||
import './hui-picture-glance-card';
|
||||
import './hui-plant-status-card.js';
|
||||
import './hui-weather-forecast-card';
|
||||
import './hui-error-card.js';
|
||||
|
||||
import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
|
||||
import computeCardElement from './common/compute-card-element.js';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user