ha-frontend-cdce8p/hassio/hassio-markdown-dialog.html
c727 6bdf1c8b80 Hassio: show hardware (#997)
* Hassio: list hardware

* Hassio: show hardware

* Remove debug

* Travis

* Concept

* Lint

* Raised button

* Lint
2018-03-21 12:26:46 -07:00

77 lines
2.1 KiB
HTML

<link rel='import' href='../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../bower_components/paper-dialog/paper-dialog.html'>
<link rel='import' href='../bower_components/app-layout/app-toolbar/app-toolbar.html'>
<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
<link rel='import' href='../src/components/ha-markdown.html'>
<link rel='import' href='../src/resources/ha-style.html'>
<dom-module id='hassio-markdown-dialog'>
<template>
<style include='ha-style-dialog'>
paper-dialog {
min-width: 350px;
font-size: 14px;
border-radius: 2px;
}
app-toolbar {
margin: 0;
padding: 0 16px;
color: var(--primary-text-color);
background-color: var(--secondary-background-color);
}
app-toolbar [main-title] {
margin-left: 16px;
}
paper-checkbox {
display: block;
margin: 4px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
max-height: 100%;
height: 100%;
}
app-toolbar {
color: var(--text-primary-color);
background-color: var(--primary-color);
}
}
</style>
<paper-dialog
id='dialog'
with-backdrop
>
<app-toolbar>
<paper-icon-button
icon='mdi:close'
dialog-dismiss
></paper-icon-button>
<div main-title>[[title]]</div>
</app-toolbar>
<paper-dialog-scrollable>
<ha-markdown content='[[content]]'></ha-markdown>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
<script>
class HassioMarkdownDialog extends Polymer.Element {
static get is() { return 'hassio-markdown-dialog'; }
static get properties() {
return {
title: String,
content: String,
};
}
openDialog() {
this.$.dialog.open();
}
}
customElements.define(HassioMarkdownDialog.is, HassioMarkdownDialog);
</script>