jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-09 18:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update snapshot actions to be a list (#4045)

Browse Source 
* Update snapshot actions to be a list

* Update text of delete button to warning color
This commit is contained in:
Phi Dong 2019-10-19 09:03:22 -07:00 committed by Bram Kragten
parent 603240c467
commit 4dbf5327bd
1 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts Normal file → Executable file
View File

@ -3,6 +3,7 @@ import "@material/mwc-button";
import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -94,13 +95,23 @@ class HassioSnapshotDialog extends PolymerElement {
.details { .details {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.download {
color: var(--primary-color);
}
.warning, .warning,
.error { .error {
color: var(--google-red-500); color: var(--google-red-500);
} }
.buttons {
display: flex;
flex-direction: column;
}
.buttons li {
list-style-type: none;
}
.buttons .icon {
margin-right: 16px;
}
.no-margin-top {
margin-top: 0;
}
</style> </style>
<ha-paper-dialog <ha-paper-dialog
id="dialog" id="dialog"
@ -132,7 +143,7 @@ class HassioSnapshotDialog extends PolymerElement {
</template> </template>
<template is="dom-if" if="[[_addons.length]]"> <template is="dom-if" if="[[_addons.length]]">
<div>Add-ons:</div> <div>Add-ons:</div>
<paper-dialog-scrollable> <paper-dialog-scrollable class="no-margin-top">
<template is="dom-repeat" items="[[_addons]]" sort="_sortAddons"> <template is="dom-repeat" items="[[_addons]]" sort="_sortAddons">
<paper-checkbox checked="{{item.checked}}"> <paper-checkbox checked="{{item.checked}}">
[[item.name]] <span class="details">([[item.version]])</span> [[item.name]] <span class="details">([[item.version]])</span>
@ -151,28 +162,35 @@ class HassioSnapshotDialog extends PolymerElement {
<template is="dom-if" if="[[error]]"> <template is="dom-if" if="[[error]]">
<p class="error">Error: [[error]]</p> <p class="error">Error: [[error]]</p>
</template> </template>
<div class="buttons"> <div>Actions:</div>
<paper-icon-button <ul class="buttons">
icon="hassio:delete" <li>
on-click="_deleteClicked" <mwc-button on-click="_downloadClicked">
class="warning" <iron-icon icon="hassio:download" class="icon"></iron-icon>
title="Delete snapshot" Download Snapshot
></paper-icon-button> </mwc-button>
<paper-icon-button </li>
on-click="_downloadClicked" <li>
icon="hassio:download" <mwc-button on-click="_partialRestoreClicked">
class="download" <iron-icon icon="hassio:history" class="icon"> </iron-icon>
title="Download snapshot" Restore Selected
></paper-icon-button> </mwc-button>
<mwc-button on-click="_partialRestoreClicked" </li>
>Restore selected</mwc-button
>
<template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]"> <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
<mwc-button on-click="_fullRestoreClicked" <li>
>Wipe &amp; restore</mwc-button <mwc-button on-click="_fullRestoreClicked">
> <iron-icon icon="hassio:history" class="icon"> </iron-icon>
Wipe &amp; restore
</mwc-button>
</li>
</template> </template>
</div> <li>
<mwc-button on-click="_deleteClicked">
<iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
<span class="warning">Delete Snapshot</span>
</mwc-button>
</li>
</ul>
</ha-paper-dialog> </ha-paper-dialog>
`; `;
} }