mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
HASSIO Improved addon view (#869)
* Improved addon view Moved files to avoid conflicts with @c727 Modified data to addons Removed unused properties Removed blank line and unused class Added link to polymer-element Redone grouping * Changes based on feedback * Revert flex box Maybe someone else can help to center the icon and text * Display timestamp in new line * Update hassio-card-content.html
This commit is contained in:
Marius
c727
parent
9e09d5b095
commit
ec930d2c56
@ -1,39 +1,40 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
|
||||
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
|
||||
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
|
||||
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
|
||||
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
||||
<link rel='import' href='../../bower_components/paper-card/paper-card.html'>
|
||||
|
||||
<link rel='import' href='../../src/util/hass-mixins.html'>
|
||||
<link rel='import' href='../../src/components/hassio-card-content.html'>
|
||||
<link rel='import' href='../../src/resources/hassio-style.html'>
|
||||
|
||||
<dom-module id="hassio-addons">
|
||||
<dom-module id='hassio-addons'>
|
||||
<template>
|
||||
<style include="ha-style">
|
||||
<style include='ha-style hassio-style'>
|
||||
paper-card {
|
||||
display: block;
|
||||
padding-top: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
paper-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<paper-card heading="Installed Add-ons">
|
||||
<template is='dom-if' if='[[!data.length]]'>
|
||||
<div class='card-content'>
|
||||
Looks like you don't have any add-ons installed yet. Head over to <a href='#' on-tap='openStore'>the add-on store</a> to get started!
|
||||
</div>
|
||||
<div class='content card-group'>
|
||||
<div class='title'>Add-ons</div>
|
||||
<template is='dom-if' if='[[!addons.length]]'>
|
||||
<paper-card>
|
||||
<div class='card-content'>
|
||||
You don't have any add-ons installed yet. Head over to <a href='#' on-tap='openStore'>the add-on store</a> to get started!
|
||||
</div>
|
||||
</paper-card>
|
||||
</template>
|
||||
<template is='dom-repeat' items='[[data]]' as='addon'>
|
||||
<paper-item>
|
||||
<paper-item-body two-line on-tap='addonTapped'>
|
||||
<div>[[addon.name]]</div>
|
||||
<div secondary>[[addon.description]]</div>
|
||||
</paper-item-body>
|
||||
[[addon.installed]]
|
||||
</paper-item>
|
||||
<template is='dom-repeat' items='[[addons]]' as='addon'>
|
||||
<paper-card on-tap='addonTapped'>
|
||||
<div class='card-content'>
|
||||
<hassio-card-content
|
||||
title='[[addon.name]]'
|
||||
description='[[addon.description]]'
|
||||
icon='[[computeIcon(addon)]]'
|
||||
icon-title='[[computeIconTitle(addon)]]'
|
||||
icon-class='[[computeIconClass(addon)]]'
|
||||
></hassio-card-content>
|
||||
</div>
|
||||
</paper-card>
|
||||
</template>
|
||||
</paper-card>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -43,28 +44,27 @@ class HassioAddons extends window.hassMixins.EventsMixin(Polymer.Element) {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
data: {
|
||||
type: Object,
|
||||
value: [],
|
||||
},
|
||||
hass: Object,
|
||||
addons: Array,
|
||||
};
|
||||
}
|
||||
|
||||
computeIcon(addon) {
|
||||
return addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
|
||||
}
|
||||
|
||||
computeIconTitle(addon) {
|
||||
if (addon.installed !== addon.version) return 'New version available';
|
||||
return addon.state === 'started' ? 'Add-on is running' : 'Add-on is stopped';
|
||||
}
|
||||
|
||||
computeIconClass(addon) {
|
||||
if (addon.installed !== addon.version) return 'update';
|
||||
return addon.state === 'started' ? 'running' : '';
|
||||
}
|
||||
|
||||
addonTapped(ev) {
|
||||
history.pushState(null, null, '/hassio/addon/' + this.data[ev.model.index].slug);
|
||||
history.pushState(null, null, '/hassio/addon/' + ev.model.addon.slug);
|
||||
this.fire('location-changed');
|
||||
ev.target.blur();
|
||||
}
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.content {
|
||||
padding: 24px 0 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.status {
|
||||
@ -79,7 +77,7 @@
|
||||
></hassio-hass-update>
|
||||
<hassio-addons
|
||||
hass='[[hass]]'
|
||||
data='[[supervisorInfo.addons]]'
|
||||
addons='[[supervisorInfo.addons]]'
|
||||
></hassio-addons>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
|
||||
77
src/components/hassio-card-content.html
Normal file
77
src/components/hassio-card-content.html
Normal file
@ -0,0 +1,77 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||
|
||||
<link rel='import' href='./ha-relative-time.html'>
|
||||
<link rel='import' href='../util/hass-util.html'>
|
||||
|
||||
<dom-module id='hassio-card-content'>
|
||||
<template>
|
||||
<style>
|
||||
iron-icon {
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
float: left;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
iron-icon.update {
|
||||
color: var(--paper-orange-400);
|
||||
}
|
||||
iron-icon.running,
|
||||
iron-icon.installed {
|
||||
color: var(--paper-green-400);
|
||||
}
|
||||
iron-icon.hassupdate,
|
||||
iron-icon.snapshot {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addition {
|
||||
color: var(--secondary-text-color);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 2.4em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
ha-relative-time {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<iron-icon icon='[[icon]]' class$='[[iconClass]]' title='[[iconTitle]]'></iron-icon>
|
||||
<div>
|
||||
<div class='title'>[[title]]</div>
|
||||
<div class='addition'>
|
||||
<template is='dom-if' if='[[description]]'>
|
||||
[[description]]
|
||||
</template>
|
||||
<template is='dom-if' if='[[datetime]]'>
|
||||
<ha-relative-time class='addition' datetime='[[datetime]]'></ha-relative-time>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
class HassioCardContent extends window.hassMixins.EventsMixin(Polymer.Element) {
|
||||
static get is() { return 'hassio-card-content'; }
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
title: String,
|
||||
description: String,
|
||||
datetime: String,
|
||||
icon: {
|
||||
type: String,
|
||||
value: 'mdi:help-circle'
|
||||
},
|
||||
iconTitle: String,
|
||||
iconClass: String,
|
||||
};
|
||||
}
|
||||
}
|
||||
customElements.define(HassioCardContent.is, HassioCardContent);
|
||||
</script>
|
||||
52
src/resources/hassio-style.html
Normal file
52
src/resources/hassio-style.html
Normal file
@ -0,0 +1,52 @@
|
||||
<dom-module id='hassio-style'>
|
||||
<template>
|
||||
<style>
|
||||
.card-group {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.card-group .title {
|
||||
color: var(--primary-text-color);
|
||||
font-size: 2em;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-group .description {
|
||||
font-size: 0.5em;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.card-group paper-card {
|
||||
--card-group-columns: 4;
|
||||
width: calc((100% - 12px * var(--card-group-columns)) / var(--card-group-columns));
|
||||
margin: 4px;
|
||||
}
|
||||
@media screen and (max-width: 1200px) and (min-width: 901px) {
|
||||
.card-group paper-card {
|
||||
--card-group-columns: 3;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 900px) and (min-width: 601px) {
|
||||
.card-group paper-card {
|
||||
--card-group-columns: 2;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) and (min-width: 0) {
|
||||
.card-group paper-card {
|
||||
width: 100%;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
ha-call-api-button {
|
||||
font-weight: 500;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.error {
|
||||
color: var(--google-red-500);
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
Loading…
x
Reference in New Issue
Block a user