Apply paper-dialog-behavior instead of nesting paper-dialogs (#987)

* disable ha-url-sync

* apply a paper-dialog-behavior mixin to dialogs

* Revert "disable ha-url-sync"

This reverts commit 4758a81af61d9f6979a93c0a899d3788fb48090e.

* fix css :host attribute selector

* move hass back to the components

src/dialogs/ha-more-info-dialog.html

@@ -1,6 +1,6 @@
 <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/paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="../components/state-history-charts.html">
 <link rel="import" href="../data/ha-state-history-data.html">
@@ -12,8 +12,8 @@
 
 <dom-module id="ha-more-info-dialog">
   <template>
-    <style include="ha-style-dialog">
-      paper-dialog {
+    <style include="ha-style-dialog paper-dialog-shared-styles">
+      :host {
         font-size: 14px;
         width: 365px;
         border-radius: 2px;
@@ -33,68 +33,53 @@
           --more-info-header-background: var(--primary-color);
           --more-info-header-color: var(--text-primary-color);
         }
-        paper-dialog {
+        :host {
           max-height: 100%;
           height: 100%;
         }
       }
 
-      paper-dialog[data-domain=camera] {
+      :host([data-domain=camera]) {
         width: auto;
       }
 
-      paper-dialog[data-domain=history_graph] {
+      :host([data-domain=history_graph]) {
         width: 90%;
       }
     </style>
 
-    <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
-    <paper-dialog
-      id="dialog"
-      with-backdrop
-      opened='{{_dialogOpen}}'
-      data-domain$='[[_computeDomain(stateObj)]]'
-    >
-      <template is='dom-if' if='[[!_page]]'>
-        <more-info-controls
-          class='no-padding'
-          hass='[[hass]]'
-          state-obj='[[stateObj]]'
-          dialog-element='[[_dialogElement]]'
-          can-configure='[[_registryInfo]]'
-        ></more-info-controls>
-      </template>
-      <template is='dom-if' if='[[_equals(_page, "settings")]]'>
-        <more-info-settings
-          class='no-padding'
-          hass='[[hass]]'
-          state-obj='[[stateObj]]'
-          registry-info='{{_registryInfo}}'
-        ></more-info-settings>
-      </template>
-    </paper-dialog>
+    <template is='dom-if' if='[[!_page]]'>
+      <more-info-controls
+        class='no-padding'
+        hass='[[hass]]'
+        state-obj='[[stateObj]]'
+        dialog-element='[[_dialogElement]]'
+        can-configure='[[_registryInfo]]'
+      ></more-info-controls>
+    </template>
+    <template is='dom-if' if='[[_equals(_page, "settings")]]'>
+      <more-info-settings
+        class='no-padding'
+        hass='[[hass]]'
+        state-obj='[[stateObj]]'
+        registry-info='{{_registryInfo}}'
+      ></more-info-settings>
+    </template>
   </template>
 </dom-module>
 
 <script>
-class HaMoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
+class HaMoreInfoDialog extends window.hassMixins.DialogMixin(Polymer.Element) {
   static get is() { return 'ha-more-info-dialog'; }
   static get properties() {
     return {
       hass: Object,
-
       stateObj: {
         type: Object,
         computed: '_computeStateObj(hass)',
         observer: '_stateObjChanged',
       },
 
-      _dialogOpen: {
-        type: Boolean,
-        value: false,
-        observer: '_dialogOpenChanged',
-      },
-
       _dialogElement: Object,
       _registryInfo: Object,
 
@@ -102,12 +87,19 @@ class HaMoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
         type: String,
         value: null,
       },
+
+      dataDomain: {
+        computed: '_computeDomain(stateObj)',
+        reflectToAttribute: true
+      },
     };
   }
 
+  static get observers() { return ['_dialogOpenChanged(opened)']; }
+
   ready() {
     super.ready();
-    this._dialogElement = this.$.dialog;
+    this._dialogElement = this;
     this.addEventListener('more-info-page', (ev) => { this._page = ev.detail.page; });
   }
 
@@ -122,7 +114,7 @@ class HaMoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
   _stateObjChanged(newVal, oldVal) {
     if (!newVal) {
       this.setProperties({
-        _dialogOpen: false,
+        opened: false,
         _page: null,
         _registryInfo: null,
       });
@@ -141,7 +133,7 @@ class HaMoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
     requestAnimationFrame(() => requestAnimationFrame(() => {
       // allow dialog to render content before showing it so it will be
       // positioned correctly.
-      this._dialogOpen = true;
+      this.opened = true;
     }));
   }
 

src/dialogs/ha-voice-command-dialog.html

@@ -1,13 +1,13 @@
 <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/paper-dialog-behavior/paper-dialog-shared-styles.html">
 
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
 <dom-module id="ha-voice-command-dialog">
   <template>
-    <style>
+    <style include="paper-dialog-shared-styles">
       iron-icon {
         margin-right: 8px;
       }
@@ -16,6 +16,7 @@
         width: 450px;
         min-height: 80px;
         font-size: 18px;
+        padding: 16px;
       }
 
       .messages {
@@ -75,12 +76,12 @@
         display: none;
       }
 
-      paper-dialog {
+      :host {
         border-radius: 2px;
       }
 
       @media all and (max-width: 450px) {
-        paper-dialog {
+        :host {
           margin: 0;
           width: 100%;
           max-height: calc(100% - 64px);
@@ -104,50 +105,39 @@
       }
     </style>
 
-    <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
-      <div class='content'>
-        <div class='messages' id='messages'>
-          <template is='dom-repeat' items='[[_conversation]]' as='message'>
-            <div class$='[[_computeMessageClasses(message)]]'>[[message.text]]</div>
-          </template>
-        </div>
-        <template is='dom-if' if='[[results]]'>
-          <div class='messages'>
-            <div class='message user'>
-              <span>{{results.final}}</span>
-              <span class='interimTranscript'>[[results.interim]]</span>
-              …
-            </div>
-          </div>
+    <div class='content'>
+      <div class='messages' id='messages'>
+        <template is='dom-repeat' items='[[_conversation]]' as='message'>
+          <div class$='[[_computeMessageClasses(message)]]'>[[message.text]]</div>
         </template>
-        <div class='icon' hidden$="[[results]]">
-          <paper-icon-button
-            icon="mdi:text-to-speech"
-            on-click='startListening'
-          ></paper-icon-button>
-        </div>
       </div>
-    </paper-dialog>
+      <template is='dom-if' if='[[results]]'>
+        <div class='messages'>
+          <div class='message user'>
+            <span>{{results.final}}</span>
+            <span class='interimTranscript'>[[results.interim]]</span>
+            …
+          </div>
+        </div>
+      </template>
+      <div class='icon' hidden$="[[results]]">
+        <paper-icon-button
+          icon="mdi:text-to-speech"
+          on-click='startListening'
+        ></paper-icon-button>
+      </div>
+    </div>
   </template>
 
 </dom-module>
 
 <script>
-class HaVoiceCommandDialog extends Polymer.Element {
+class HaVoiceCommandDialog extends window.hassMixins.DialogMixin(Polymer.Element) {
   static get is() { return 'ha-voice-command-dialog'; }
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      dialogOpen: {
-        type: Boolean,
-        value: false,
-        observer: 'dialogOpenChanged',
-      },
-
+      hass: Object,
       results: {
         type: Object,
         value: null,
@@ -164,6 +154,8 @@ class HaVoiceCommandDialog extends Polymer.Element {
     };
   }
 
+  static get observers() { return ['dialogOpenChanged(opened)']; }
+
   initRecognition() {
     /* eslint-disable new-cap */
     this.recognition = new webkitSpeechRecognition();

src/layouts/home-assistant-main.html

@@ -130,7 +130,7 @@
 
     handleStartVoice(ev) {
       ev.stopPropagation();
-      this.$.voiceDialog.dialogOpen = true;
+      this.$.voiceDialog.opened = true;
     }
 
     handleOpenMenu() {

src/util/hass-mixins.html

@@ -1,4 +1,5 @@
 <link rel='import' href='../../bower_components/app-localize-behavior/app-localize-behavior.html'>
+<link rel="import" href='../../bower_components/paper-dialog/paper-dialog-behavior.html'>
 
 <script>
 
@@ -108,4 +109,21 @@ window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
     }
   });
 
+/**
+ * @polymerMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ * @appliesMixin Polymer.PaperDialogBehavior
+ */
+window.hassMixins.DialogMixin = Polymer.dedupingMixin(superClass =>
+  class extends Polymer.mixinBehaviors([window.hassMixins.EventsMixin,
+    Polymer.PaperDialogBehavior], superClass) {
+    static get properties() {
+      return {
+        withBackdrop: {
+          type: Boolean,
+          value: true,
+        },
+      };
+    }
+  });
 </script>