mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 09:56:36 +00:00
Fix layout dev tools for Safari
This commit is contained in:
Paulus Schoutsen
parent
fb6b2fc5d6
commit
017e38d512
@ -11,10 +11,11 @@
|
||||
<dom-module id="partial-dev-call-service">
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.form {
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
margin-top: 64px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
@ -28,30 +29,33 @@
|
||||
margin-top: 24px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>Call Service</span>
|
||||
|
||||
<div class='form fit'>
|
||||
<p>
|
||||
Call a service from a component.
|
||||
</p>
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
<p>
|
||||
Call a service from a component.
|
||||
</p>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='layout vertical flex'>
|
||||
<div class='ha-form'>
|
||||
<paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
|
||||
<paper-input label="Service" value='{{service}}'></paper-input>
|
||||
<paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
|
||||
<paper-button on-tap='callService' raised>Call Service</paper-button>
|
||||
</div>
|
||||
<div class='description'>[[description]]</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Available services:</h4>
|
||||
<services-list on-service-selected='serviceSelected'></services-list>
|
||||
<div class='ha-form'>
|
||||
<paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
|
||||
<paper-input label="Service" value='{{service}}'></paper-input>
|
||||
<paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
|
||||
<paper-button on-tap='callService' raised>Call Service</paper-button>
|
||||
</div>
|
||||
<div class='description'>[[description]]</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class='header'>Available services</div>
|
||||
<services-list on-service-selected='serviceSelected'></services-list>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
|
||||
@ -75,6 +75,6 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeFormClasses(narrow) {
|
||||
return `layout ${narrow ? 'vertical' : 'horizontal'}`;
|
||||
return `content fit ${narrow ? '' : 'layout horizontal'}`;
|
||||
},
|
||||
});
|
||||
|
||||
@ -11,10 +11,11 @@
|
||||
<dom-module id="partial-dev-fire-event">
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.form {
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
margin-top: 64px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
@ -23,28 +24,32 @@
|
||||
.ha-form {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
|
||||
<span header-title>Fire Event</span>
|
||||
|
||||
<div class='form fit'>
|
||||
<p>
|
||||
Fire an event on the event bus.
|
||||
</p>
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
<p>
|
||||
Fire an event on the event bus.
|
||||
</p>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='ha-form flex'>
|
||||
<div class='ha-form'>
|
||||
<paper-input label="Event Type" autofocus required value='{{eventType}}'></paper-input>
|
||||
<paper-textarea label="Event Data (JSON, optional)" value='{{eventData}}'></paper-textarea>
|
||||
<paper-button on-tap='fireEvent' raised>Fire Event</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Available events:</h4>
|
||||
<events-list on-event-selected='eventSelected'></event-list>
|
||||
</div>
|
||||
<div>
|
||||
<div class='header'>Available Events</div>
|
||||
<events-list on-event-selected='eventSelected'></event-list>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
|
||||
@ -52,6 +52,6 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeFormClasses(narrow) {
|
||||
return `layout ${narrow ? 'vertical' : 'horizontal'}`;
|
||||
return `content fit ${narrow ? '' : 'layout horizontal'}`;
|
||||
},
|
||||
});
|
||||
|
||||
@ -6,15 +6,17 @@
|
||||
|
||||
<link rel="import" href="./partial-base.html">
|
||||
|
||||
<link rel="import" href="../components/ha-dev-responsive-content.html">
|
||||
<link rel="import" href="../components/entity-list.html">
|
||||
|
||||
<dom-module id="partial-dev-set-state">
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.form {
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
margin-top: 64px;
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
@ -23,30 +25,34 @@
|
||||
.ha-form {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
|
||||
<span header-title>Set State</span>
|
||||
|
||||
<div class='form fit'>
|
||||
<div>
|
||||
Set the representation of a device within Home Assistant.<br />
|
||||
This will not communicate with the actual device.
|
||||
</div>
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='flex'>
|
||||
<p>
|
||||
Set the representation of a device within Home Assistant.<br />
|
||||
This will not communicate with the actual device.
|
||||
</p>
|
||||
|
||||
<div class$='[[computeFormClasses(narrow)]]'>
|
||||
<div class='ha-form flex'>
|
||||
<div class='ha-form'>
|
||||
<paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
|
||||
<paper-input label="State" required value='{{state}}'></paper-input>
|
||||
<paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
|
||||
<paper-button on-tap='handleSetState' raised>Set State</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='sidebar'>
|
||||
<h4>Current entities:</h4>
|
||||
<entity-list on-entity-selected='entitySelected'></entity-list>
|
||||
</div>
|
||||
<div>
|
||||
<div class='header'>Current entities</div>
|
||||
<entity-list on-entity-selected='entitySelected'></entity-list>
|
||||
</div>
|
||||
</div>
|
||||
</partial-base>
|
||||
|
||||
@ -4,6 +4,7 @@ import Polymer from '../polymer';
|
||||
|
||||
require('./partial-base');
|
||||
require('../components/entity-list');
|
||||
require('../components/ha-dev-responsive-content');
|
||||
|
||||
const { reactor, entityGetters, entityActions } = hass;
|
||||
|
||||
@ -73,6 +74,6 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeFormClasses(narrow) {
|
||||
return `layout ${narrow ? 'vertical' : 'horizontal'}`;
|
||||
return `content fit ${narrow ? '' : 'layout horizontal'}`;
|
||||
},
|
||||
});
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.content {
|
||||
@apply(--paper-font-body1);
|
||||
margin-top: 64px;
|
||||
padding: 16px;
|
||||
background-color: white;
|
||||
@ -42,6 +43,7 @@
|
||||
}
|
||||
|
||||
.rendered {
|
||||
@apply(--paper-font-code1)
|
||||
clear: both;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@ -59,13 +61,13 @@
|
||||
<p>
|
||||
Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
|
||||
<li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
|
||||
<li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
|
||||
</ul>
|
||||
<paper-textarea label="Template" value='{{template}}'></paper-textarea>
|
||||
</div>
|
||||
|
||||
<div class='render-pane'>
|
||||
<paper-spinner class='render-spinner' active='[[rendering]]'></paper-spinner>
|
||||
<pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
|
||||
|
||||
@ -67,7 +67,7 @@ export default new Polymer({
|
||||
},
|
||||
|
||||
computeFormClasses(narrow) {
|
||||
return `content fit layout ${narrow ? 'vertical' : 'horizontal'}`;
|
||||
return `content fit ${narrow ? '' : 'layout horizontal'}`;
|
||||
},
|
||||
|
||||
computeRenderedClasses(error) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user