Permalink
Browse files

Wizzard added, multiple views based on appartment, style fixes

  • Loading branch information...
1 parent 399d5d7 commit 14869dcfcce871235b1ddd77c717bdb5c5823ce1 @Robin1337 Robin1337 committed Jan 11, 2017
@@ -0,0 +1,56 @@
+<html><head><link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+</head><body><dom-module id="input-speed">
+ <template>
+ <style type="text/css">
+ paper-dropdown-menu.speed{
+ background-color: #374c4f;
+ }
+
+ paper-dropdown-menu.speed{
+ width:80px;
+ }
+ .paper-input{
+ padding:0;
+ }
+ paper-dropdown-menu.speed > ::content paper-input-container{
+ padding:0;
+ margin:5px 0;
+ }
+ paper-dropdown-menu.speed > ::content .floated-label-placeholder{
+ display: none;
+ }
+ paper-dropdown-menu.speed > ::content .label-and-input-container input{
+ text-align: center;
+ }
+
+ paper-dropdown-menu.speed {
+ --paper-input-container-input: {
+ color:#FFFFFF;
+ }
+ --paper-input-container-label: {
+ display:none;
+ }
+ --paper-input-container-underline: {
+ border-color:transparent;
+ }
+
+ --paper-input-container-focus-color:{
+ color:transparent;
+ border-color:transparent;
+ }
+ };
+ </style>
+ <paper-dropdown-menu class="speed">
+ <paper-listbox class="dropdown-content">
+ <paper-item>Auto</paper-item>
+ <paper-item>Low</paper-item>
+ <paper-item>Medium</paper-item>
+ <paper-item>High</paper-item>
+ </paper-listbox>
+ </paper-dropdown-menu>
+ </template>
+
+ <script>Polymer({is:"input-speed"});</script>
+</dom-module></body></html>
@@ -1,6 +1,6 @@
-<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
+<html><head><link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
-<dom-module id="input-switch-blok">
+</head><body><dom-module id="input-switch-blok">
<template>
<style type="text/css">
paper-radio-group.square-group{
@@ -15,13 +15,14 @@
width: 120px;
height: 120px;
float: left;
- display: block;
+ display: table;
padding: 0
}
paper-radio-group paper-radio-button.square > ::content #radioContainer{
width:100px;
height:100px;
margin:10px;
+ position: absolute;
}
paper-radio-group paper-radio-button.square > ::content #radioContainer #offRadio{
background-color:#374c4f;
@@ -44,31 +45,25 @@
paper-radio-group paper-radio-button.square.break{
clear:both;
}
+
paper-radio-group paper-radio-button.square > ::content #radioLabel.paper-radio-button{
color:#FFFFFF;
- line-height: 100px;
text-align: center;
- position: absolute;
- left: 0;
- top: 10px;
- width: 100px;
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+ padding: 20px;
}
</style>
- <paper-radio-group selected="morning" class="square-group" allow-empty-selection>
+ <paper-radio-group selected="morning" class="square-group" allow-empty-selection="">
<content>
- <paper-radio-button class="square" name="morning">Morning</paper-radio-button>
- <paper-radio-button class="square" name="away">Away</paper-radio-button>
- <paper-radio-button class="square break" name="evening">Evening</paper-radio-button>
- <paper-radio-button class="square" name="night">Night</paper-radio-button>
+ <paper-radio-button class="square" name="morning"><strong>Morning</strong></paper-radio-button>
+ <paper-radio-button class="square" name="away"><strong>Away</strong></paper-radio-button>
+ <paper-radio-button class="square break" name="evening">Expected<br><strong>Evening</strong><br> at 18:11</paper-radio-button>
+ <paper-radio-button class="square" name="night">Expected<br><strong>Night</strong><br> at 23:45</paper-radio-button>
</content>
</paper-radio-group>
</template>
- <script>
-
- Polymer({
- is: 'input-switch-blok'
- });
-
- </script>
-</dom-module>
+ <script>Polymer({is:"input-switch-blok"});</script>
+</dom-module></body></html>
@@ -1,40 +1,57 @@
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<html><head><link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<dom-module id="input-temperature">
+</head><body><dom-module id="input-temperature" attributes="size">
<template>
<style type="text/css">
paper-dropdown-menu.custom{
background-color: #374c4f;
- padding: 20px;
}
- paper-dropdown-menu.custom {
- --paper-input-container-label: {
- color: #FFFFFF;
- font-size
+
+ paper-dropdown-menu.custom.small{
+ width:80px;
}
- --paper-input-container-input: {
- font-size:36px;
- color:#FFFFFF;
+ .paper-input{
+ padding:0;
+ }
+
+ paper-dropdown-menu.custom.small > ::content paper-input-container{
+ padding:0;
+ margin:5px 0;
+ }
+ paper-dropdown-menu.custom > ::content .floated-label-placeholder{
+ display: none;
+ }
+ paper-dropdown-menu.custom > ::content .label-and-input-container input{
+ text-align: center;
}
+ paper-dropdown-menu.custom.large > ::content .label-and-input-container input{
+ font-size:42px;
+ }
+ paper-dropdown-menu.custom.large{
+ padding:30px 20px;
+ }
+ paper-dropdown-menu.custom {
+ --paper-input-container-input: {
+ color:#FFFFFF;
+ }
+ --paper-input-container-label: {
+ display:none;
+ }
--paper-input-container-underline: {
- border-color:#c0d62e;
+ border-color:transparent;
}
--paper-input-container-focus-color:{
- color:#c0d62e;
- border-color:#c0d62e;
+ color:transparent;
+ border-color:transparent;
}
};
</style>
- <paper-dropdown-menu class="custom" label="Set">
+ <paper-dropdown-menu class$="custom {{size}}">
<paper-listbox class="dropdown-content">
- <paper-item>15.0</paper-item>
- <paper-item>15.5</paper-item>
- <paper-item>16.0</paper-item>
- <paper-item>16.5</paper-item>
<paper-item>17.0</paper-item>
<paper-item>17.5</paper-item>
<paper-item>18.0</paper-item>
@@ -51,17 +68,9 @@
<paper-item>23.5</paper-item>
<paper-item>24.0</paper-item>
<paper-item>24.5</paper-item>
- <paper-item>25.0</paper-item>
- <paper-item>25.5</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
- <script>
-
- Polymer({
- is: 'input-temperature'
- });
-
- </script>
-</dom-module>
+ <script>Polymer({is:"input-temperature"});</script>
+</dom-module></body></html>
@@ -1,4 +1,4 @@
-<dom-module id="table-schedule">
+<html><head></head><body><dom-module id="table-schedule">
<template>
<style type="text/css">
table{
@@ -22,7 +22,7 @@
border-bottom: 1px solid #FFFFFF;
}
</style>
- <table style="width: 100%;" border="0">
+ <table style="width: 100%" border="0">
<tbody>
<tr>
<th>&nbsp;</th>
@@ -84,11 +84,5 @@
</table>
</template>
- <script>
-
- Polymer({
- is: 'table-schedule'
- });
-
- </script>
-</dom-module>
+ <script>Polymer({is:"table-schedule"});</script>
+</dom-module></body></html>
@@ -0,0 +1,59 @@
+<html><head></head><body><dom-module id="template-scenes-input">
+ <template>
+ <style type="text/css">
+ .container {
+ @apply(--layout-horizontal);
+ }
+ .small {
+ --iron-icon-height: auto;
+ --iron-icon-width: 15px;
+ }
+
+ .container {
+ position: relative;
+ display: flex;
+ flex-flow: row wrap;
+ }
+ .item {
+ box-sizing: border-box;
+ padding: 10px;
+ flex: 1;
+ }
+ .container-column {
+ box-sizing: border-box;
+ padding: 0 5px;
+ }
+ .container-column:first-child{
+ padding-right:20px;
+ }
+ .container-column:nth-child(2){
+ }
+
+ .container-column:last-child{
+ margin-left: auto;
+ }
+ </style>
+ <div class="container">
+ <div class="container-column">
+ <iron-icon class="small" src="../../images/panel/temperature_gauge_100.png"></iron-icon>
+ </div>
+ <div class="container-column">Bedroom</div>
+ <div class="container-column">21,0</div>
+ <div class="container-column">
+ <input-temperature size="small"></input-temperature>
+ </div>
+ </div>
+ <div class="container">
+ <div class="container-column">
+ <iron-icon class="small" src="../../images/panel/temperature_gauge_100.png"></iron-icon>
+ </div>
+ <div class="container-column">Bathroom</div>
+ <div class="container-column">21,0</div>
+ <div class="container-column">
+ <input-temperature size="small"></input-temperature>
+ </div>
+ </div>
+ </template>
+
+ <script>Polymer({is:"template-scenes-input"});</script>
+</dom-module></body></html>
Oops, something went wrong.

0 comments on commit 14869dc

Please sign in to comment.