d7d167fbf9
* remove min-height to make paper-scrollable work properly. Hack fullscreen background behind it * apply fix to hassio-markdown-dialog
86 lines
2.3 KiB
HTML
86 lines
2.3 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%;
|
|
}
|
|
paper-dialog::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
background-color: inherit;
|
|
}
|
|
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>
|