Add styling to Config Entries (#1011)

* Add some styling to Config Entries

This commit adds some styling to the (experimental) Config Entries

* re-add localization

Note: I'm having issues with localization on my current setup -- it doesn't
seem to be working for me 🤷. This commit just keeps the same localization
as there was previously, no change

* Update based on PR review

* Remove stale annotations
This commit is contained in:
Marc Khouri 2018-03-22 13:32:32 -04:00 committed by Paulus Schoutsen
parent 42f3294523
commit 399d14a5e0

View File

@ -12,62 +12,71 @@
<dom-module id="ha-config-entries">
<template>
<style include='iron-flex ha-style'>
.content {
padding: 8px;
paper-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
margin-right: -.57em;
}
.entries {
margin: 0 -4px;
}
.entries paper-card {
margin: 4px;
paper-card:last-child {
margin-top: 12px;
}
</style>
<hass-subpage title='Integrations'>
<div class='content'>
<h1>Configured</h1>
<template is='dom-if' if='[[!_entries.length]]'>
<i>Nothing configured.</i>
</template>
<div class='entries layout horizontal wrap'>
<template is='dom-repeat' items='[[_entries]]'>
<paper-card heading='[[item.title]]'>
<div class='card-content'>
Integration: [[_computeIntegrationTitle(localize, item.domain)]]<br>
State: [[item.state]]<br>
Added by: [[item.source]]
</div>
<div class="card-actions">
<paper-button on-click='_removeEntry'>Remove</paper-button>
</div>
</paper-card>
</template>
</div>
<template is='dom-if' if='[[_progress.length]]'>
<h1>To be finished</h1>
<div class='entries layout horizontal wrap'>
<template is='dom-if' if='[[_progress.length]]'>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>In Progress</span>
<paper-card>
<template is='dom-repeat' items='[[_progress]]'>
<paper-card heading='[[_computeIntegrationTitle(localize, item.domain)]]'>
<div class="card-actions">
<paper-button on-click='_continueFlow'>Configure</paper-button>
</div>
</paper-card>
<paper-item>
<paper-item-body>
[[_computeIntegrationTitle(localize, item.domain)]]
</paper-item-body>
<paper-button on-click='_continueFlow'>Configure</paper-button>
</paper-item>
</template>
</div>
</template>
</paper-card>
</ha-config-section>
</template>
<h1>Add integration</h1>
<div class='entries layout horizontal wrap'>
<template is='dom-repeat' items='[[_handlers]]'>
<paper-card heading='[[_computeIntegrationTitle(localize, item)]]'>
<!-- <div class="card-content">Some content</div> -->
<div class="card-actions">
<paper-button on-click='_createFlow'>Configure</paper-button>
</div>
</paper-card>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Configured</span>
<paper-card>
<template is='dom-if' if='[[!_entries.length]]'>
<paper-item>
<paper-item-body>
Nothing configured yet
</paper-item-body>
</paper-item>
</template>
</div>
</div>
<template is='dom-repeat' items='[[_entries]]'>
<paper-item>
<paper-item-body three-line>
[[item.title]]
<div secondary>Integration: [[_computeIntegrationTitle(localize, item.domain)]]</div>
<div secondary>Added by: [[item.source]]</div>
<div secondary>State: [[item.state]]</div>
</paper-item-body>
<paper-button on-click='_removeEntry'>Remove</paper-button>
</paper-item>
</template>
</paper-card>
</ha-config-section>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Available</span>
<paper-card>
<template is='dom-repeat' items='[[_handlers]]'>
<paper-item>
<paper-item-body>
[[_computeIntegrationTitle(localize, item)]]
</paper-item-body>
<paper-button on-click='_createFlow'>Configure</paper-button>
</paper-item>
</template>
</paper-card>
</ha-config-section>
</hass-subpage>
<ha-config-flow