switch to shared paperdialoghelper

2025-03-30 19:56:21 +00:00 · 2016-01-30 15:59:09 -05:00 · 2016-01-30 15:59:09 -05:00 · 024642e556
commit 024642e556
parent 1cd7f5bac7
24 changed files with 152 additions and 296 deletions
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@ -15,12 +15,12 @@
  },
  "devDependencies": {},
  "ignore": [],
-  "version": "1.0.32",
-  "_release": "1.0.32",
+  "version": "1.0.35",
+  "_release": "1.0.35",
  "_resolution": {
    "type": "version",
-    "tag": "1.0.32",
-    "commit": "4f59bdceba30ab8a9e1bf4c7d6bacd659d27b9bb"
+    "tag": "1.0.35",
+    "commit": "3fbcae2c9495ad83a36aa1bcf34f985f979923e7"
  },
  "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
  "_target": "~1.0.0",
--- a/dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.css
@ -1,17 +1,19 @@
 .paperDialog {
    margin: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: fixed;
-    max-width: none !important;
-    max-height: none !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }

+    .paperDialog.fixedSize {
+        position: fixed !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        margin: 0 !important;
+        border-radius: 0 !important;
+        max-height: none !important;
+        max-width: none !important;
+    }
+
    .paperDialog.scrollY {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
@ -26,3 +28,35 @@
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }
+
+@media all and (min-width: 1280px) and (min-height: 720px) {
+
+    .paperDialog.medium {
+        top: 10% !important;
+        bottom: 10% !important;
+        left: 10% !important;
+        right: 10% !important;
+    }
+
+    .paperDialog.small {
+        top: 10% !important;
+        bottom: 10% !important;
+        left: 20% !important;
+        right: 20% !important;
+    }
+}
+
+@media all and (min-width: 1280px) and (min-height: 720px) {
+
+    .paperDialog.fullscreen-border {
+        top: 5% !important;
+        bottom: 5% !important;
+        left: 5% !important;
+        right: 5% !important;
+    }
+}
+
+.noScroll {
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+}
--- a/dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.js
@ -5,6 +5,7 @@
        var self = this;
        self.originalUrl = window.location.href;
        var activeElement = document.activeElement;
+        var removeScrollLockOnClose = false;

        function onHashChange(e) {

@ -22,9 +23,8 @@

        function onDialogClosed() {

-            if (lockDocumentScroll !== false) {
-                // TODO
-                //Dashboard.onPopupClose();
+            if (removeScrollLockOnClose) {
+                document.body.classList.remove('noScroll');
            }

            window.removeEventListener('popstate', onHashChange);
@ -55,9 +55,9 @@
        dlg.addEventListener('iron-overlay-closed', onDialogClosed);
        dlg.open();

-        if (lockDocumentScroll !== false) {
-            // TODO
-            //Dashboard.onPopupOpen();
+        if (lockDocumentScroll !== false && !document.body.classList.contains('noScroll')) {
+            document.body.classList.add('noScroll');
+            removeScrollLockOnClose = true;
        }

        historyManager.pushState({ dialogId: hash }, "Dialog", hash);
@ -135,7 +135,14 @@
            dlg.setAttribute('data-removeonclose', 'true');
        }

+        if (options.size) {
+            dlg.classList.add('fixedSize');
+            dlg.classList.add(options.size);
+        }
+
+        if (options.autoFocus !== false) {
            dlg.addEventListener('iron-overlay-opened', onDialogOpened);
+        }

        return dlg;
    }
--- a/dashboard-ui/bower_components/iron-behaviors/.bower.json
+++ b/dashboard-ui/bower_components/iron-behaviors/.bower.json
@ -29,14 +29,14 @@
    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  },
  "ignore": [],
-  "homepage": "https://github.com/PolymerElements/iron-behaviors",
+  "homepage": "https://github.com/polymerelements/iron-behaviors",
  "_release": "1.0.12",
  "_resolution": {
    "type": "version",
    "tag": "v1.0.12",
    "commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
  },
-  "_source": "git://github.com/PolymerElements/iron-behaviors.git",
+  "_source": "git://github.com/polymerelements/iron-behaviors.git",
  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-behaviors"
+  "_originalSource": "polymerelements/iron-behaviors"
 }
--- a/dashboard-ui/components/collectioneditor/collectioneditor.js
+++ b/dashboard-ui/components/collectioneditor/collectioneditor.js
@ -193,11 +193,14 @@
                size: 'small'
            });

+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+
            var html = '';
            var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');

            html += '<div class="dialogHeader">';
-            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
            html += '<div class="dialogHeaderTitle">';
            html += title;
            html += '</div>';
--- a/dashboard-ui/components/directorybrowser/directorybrowser.js
+++ b/dashboard-ui/components/directorybrowser/directorybrowser.js
@ -208,10 +208,13 @@
            getSystemInfo().then(function (systemInfo) {

                var dlg = paperDialogHelper.createDialog({
-                    theme: 'a',
                    size: 'medium'
                });

+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                dlg.classList.add('directoryPicker');

                var html = '';
--- a/dashboard-ui/components/imagedownloader/imagedownloader.js
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.js
@ -271,11 +271,19 @@
            currentItemId = itemId;
            currentItemType = itemType;

-            var dlg = paperDialogHelper.createDialog();
+            var dlg = paperDialogHelper.createDialog({
+                size: 'fullscreen-border'
+            });
+
+            var theme = 'b';
+
+            dlg.classList.add('ui-body-' + theme);
+            dlg.classList.add('background-theme-' + theme);
+            dlg.classList.add('popupEditor');

            var html = '';
            html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
            html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
            html += '</h2>';

--- a/dashboard-ui/components/imageeditor/imageeditor.js
+++ b/dashboard-ui/components/imageeditor/imageeditor.js
@ -242,12 +242,18 @@
            ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {

                var dlg = paperDialogHelper.createDialog({
-                    theme: options.theme
+                    size: 'fullscreen-border'
                });

+                var theme = options.theme || 'b';
+
+                dlg.classList.add('ui-body-' + theme);
+                dlg.classList.add('background-theme-' + theme);
+                dlg.classList.add('popupEditor');
+
                var html = '';
                html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
                html += '</h2>';

--- a/dashboard-ui/components/imageuploader/imageuploader.js
+++ b/dashboard-ui/components/imageuploader/imageuploader.js
@ -134,12 +134,18 @@
            currentItemId = itemId;

            var dlg = paperDialogHelper.createDialog({
-                theme: options.theme
+                size: 'fullscreen-border'
            });

+            var theme = options.theme || 'b';
+
+            dlg.classList.add('ui-body-' + theme);
+            dlg.classList.add('background-theme-' + theme);
+            dlg.classList.add('popupEditor');
+
            var html = '';
            html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
            html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
            html += '</h2>';

--- a/dashboard-ui/components/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.js
@ -295,6 +295,9 @@
                    size: 'medium'
                });

+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                var html = '';
                html += Globalize.translateDocument(template);

--- a/dashboard-ui/components/itemidentifier/itemidentifier.template.html
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
+    <paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
    <div class="dialogHeaderTitle">
    </div>
 </div>
--- a/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
+++ b/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
@ -194,15 +194,18 @@
                var template = this.response;
                var dlg = paperDialogHelper.createDialog({
                    size: 'small',
-                    theme: 'a',

                    // In (at least) chrome this is causing the text field to not be editable
                    modal: false
                });

+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                var html = '';
                html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';

                var title = Globalize.translate('ButtonAddMediaLibrary');

--- a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
+++ b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
@ -148,15 +148,18 @@
                var template = this.response;
                var dlg = paperDialogHelper.createDialog({
                    size: 'small',
-                    theme: 'a',

                    // In (at least) chrome this is causing the text field to not be editable
                    modal: false
                });

+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                var html = '';
                html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
+                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';

                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
                html += '</h2>';
--- a/dashboard-ui/components/metadataeditor/metadataeditor.js
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.js
@ -868,6 +868,9 @@
                        size: 'small'
                    });

+                    dlg.classList.add('ui-body-b');
+                    dlg.classList.add('background-theme-b');
+
                    dlg.classList.add('formDialog');

                    var html = '';
--- a/dashboard-ui/components/paperdialoghelper.js
+++ b/dashboard-ui/components/paperdialoghelper.js
@ -1,207 +0,0 @@
-define(['paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation'], function () {
-
-    function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
-
-        var self = this;
-        self.originalUrl = window.location.href;
-        var activeElement = document.activeElement;
-
-        function onHashChange(e) {
-
-            var isBack = self.originalUrl == window.location.href;
-
-            if (isBack || !dlg.opened) {
-                window.removeEventListener('popstate', onHashChange);
-            }
-
-            if (isBack) {
-                self.closedByBack = true;
-                dlg.close();
-            }
-        }
-
-        function onDialogClosed() {
-
-            if (lockDocumentScroll !== false) {
-                Dashboard.onPopupClose();
-            }
-
-            window.removeEventListener('popstate', onHashChange);
-
-            if (!self.closedByBack) {
-                var state = history.state || {};
-                if (state.dialogId == hash) {
-                    history.back();
-                }
-            }
-
-            activeElement.focus();
-
-            if (dlg.getAttribute('data-removeonclose') == 'true') {
-                dlg.parentNode.removeChild(dlg);
-            }
-
-            //resolve();
-            // if we just called history.back(), then use a timeout to allow the history events to fire first
-            setTimeout(function () {
-                resolve({
-                    element: dlg,
-                    closedByBack: self.closedByBack
-                });
-            }, 1);
-        }
-
-        dlg.addEventListener('iron-overlay-closed', onDialogClosed);
-        dlg.open();
-
-        if (lockDocumentScroll !== false) {
-            Dashboard.onPopupOpen();
-        }
-
-        var state = {
-            dialogId: hash,
-            navigate: false
-        };
-        history.pushState(state, "Dialog", hash);
-
-        jQuery.onStatePushed(state);
-
-        window.addEventListener('popstate', onHashChange);
-    }
-
-    function open(dlg) {
-
-        return new Promise(function (resolve, reject) {
-
-            new paperDialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
-        });
-    }
-
-    function close(dlg) {
-
-        if (dlg.opened) {
-            history.back();
-        }
-    }
-
-    function onDialogOpened(e) {
-
-        //Emby.FocusManager.autoFocus(e.target, true);
-    }
-
-    function createDialog(options) {
-
-        options = options || {};
-
-        var dlg = document.createElement('paper-dialog');
-
-        dlg.setAttribute('with-backdrop', 'with-backdrop');
-        dlg.setAttribute('role', 'alertdialog');
-
-        // without this safari will scroll the background instead of the dialog contents
-        // but not needed here since this is already on top of an existing dialog
-        // but skip it in IE because it's causing the entire browser to hang
-        // Also have to disable for firefox because it's causing select elements to not be clickable
-        if (!browserInfo.msie && !browserInfo.firefox) {
-            if (options.modal !== false) {
-                //dlg.setAttribute('modal', 'modal');
-            }
-        }
-
-        // seeing max call stack size exceeded in the debugger with this
-        dlg.setAttribute('noAutoFocus', 'noAutoFocus');
-
-        // These don't seem to perform well on mobile
-        var defaultEntryAnimation = browserInfo.mobile ? 'fade-in-animation' : 'scale-up-animation';
-        dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
-        dlg.exitAnimation = 'fade-out-animation';
-
-        dlg.animationConfig = {
-            // scale up
-            'entry': {
-                name: options.entryAnimation || defaultEntryAnimation,
-                node: dlg,
-                timing: { duration: options.entryAnimationDuration || 300, easing: 'ease-out' }
-            },
-            // fade out
-            'exit': {
-                name: 'fade-out-animation',
-                node: dlg,
-                timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
-            }
-        };
-
-        if (options.size != 'auto') {
-            dlg.classList.add('popupEditor');
-
-            if (options.size == 'small') {
-                dlg.classList.add('small-paper-dialog');
-            }
-            else if (options.size == 'medium') {
-                dlg.classList.add('medium-paper-dialog');
-            } else {
-                dlg.classList.add('fullscreen-paper-dialog');
-            }
-        }
-
-        var theme = options.theme || 'b';
-
-        dlg.classList.add('ui-body-' + theme);
-        dlg.classList.add('background-theme-' + theme);
-        dlg.classList.add('smoothScrollY');
-
-        if (options.removeOnClose) {
-            dlg.setAttribute('data-removeonclose', 'true');
-        }
-
-        return dlg;
-    }
-
-    function positionTo(dlg, elem) {
-
-        var windowHeight = $(window).height();
-
-        // If the window height is under a certain amount, don't bother trying to position
-        // based on an element.
-        if (windowHeight >= 540) {
-
-            var pos = $(elem).offset();
-
-            pos.top += elem.offsetHeight / 2;
-            pos.left += elem.offsetWidth / 2;
-
-            // Account for margins
-            pos.top -= 24;
-            pos.left -= 24;
-
-            // Account for popup size - we can't predict this yet so just estimate
-            pos.top -= $(dlg).height() / 2;
-            pos.left -= $(dlg).width() / 2;
-
-            // Account for scroll position
-            pos.top -= $(window).scrollTop();
-            pos.left -= $(window).scrollLeft();
-
-            // Avoid showing too close to the bottom
-            pos.top = Math.min(pos.top, windowHeight - 300);
-            pos.left = Math.min(pos.left, $(window).width() - 300);
-
-            // Do some boundary checking
-            pos.top = Math.max(pos.top, 0);
-            pos.left = Math.max(pos.left, 0);
-
-            dlg.style.position = 'fixed';
-            dlg.style.left = pos.left + 'px';
-            dlg.style.top = pos.top + 'px';
-        }
-    }
-
-    window.PaperDialogHelper = {
-        open: open,
-        close: close,
-        createDialog: createDialog,
-        positionTo: positionTo
-    };
-
-    return PaperDialogHelper;
-});
--- a/dashboard-ui/components/playlisteditor/playlisteditor.js
+++ b/dashboard-ui/components/playlisteditor/playlisteditor.js
@ -198,12 +198,15 @@
                size: 'small'
            });

+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+
            var html = '';

            var title = Globalize.translate('HeaderAddToPlaylist');

            html += '<div class="dialogHeader">';
-            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
            html += '<div class="dialogHeaderTitle">';
            html += title;
            html += '</div>';
--- a/dashboard-ui/components/recordingcreator/recordingcreator.js
+++ b/dashboard-ui/components/recordingcreator/recordingcreator.js
@ -296,6 +296,9 @@
                    size: 'small'
                });

+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                dlg.classList.add('formDialog');

                var html = '';
--- a/dashboard-ui/components/recordingcreator/recordingcreator.template.html
+++ b/dashboard-ui/components/recordingcreator/recordingcreator.template.html
@ -1,5 +1,5 @@
 <div class="dialogHeader">
-    <paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
+    <paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
    <div class="dialogHeaderTitle">
        ${HeaderNewRecording}
    </div>
--- a/dashboard-ui/components/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
@ -344,9 +344,12 @@
                    removeOnClose: true
                });

+                dlg.classList.add('ui-body-b');
+                dlg.classList.add('background-theme-b');
+
                var html = '';
                html += '<div class="dialogHeader">';
-                html += '<paper-icon-button icon="arrow-back" class="btnCancel"></paper-icon-button>';
+                html += '<paper-icon-button icon="arrow-back" class="btnCancel" tabindex="-1"></paper-icon-button>';
                html += '<div class="dialogHeaderTitle">';
                html += item.Name;
                html += '</div>';
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -2881,11 +2881,12 @@

                var dlg = paperDialogHelper.createDialog({
                    removeOnClose: true,
-                    theme: 'a',
-                    size: 'auto',
                    modal: false
                });

+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+
                var html = '';

                // There seems to be a bug with this in safari causing it to immediately roll up to 0 height
--- a/dashboard-ui/scripts/registrationservices.js
+++ b/dashboard-ui/scripts/registrationservices.js
@ -99,14 +99,20 @@

        require(['paperdialoghelper', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper) {

-            var dlg = paperDialogHelper.createDialog({});
+            var dlg = paperDialogHelper.createDialog({
+                size: 'fullscreen-border'
+            });
+
+            dlg.classList.add('ui-body-b');
+            dlg.classList.add('background-theme-b');
+            dlg.classList.add('popupEditor');

            var html = '';
            html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo"></paper-fab>';
+            html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo" tabindex="-1"></paper-fab>';
            html += '</h2>';

-            html += '<div class="readOnlyContent" style="margin:20px auto 0;color:#fff;padding:1em;">';
+            html += '<div class="readOnlyContent" style="margin:0 auto 0;color:#fff;padding:1em;">';

            html += '<h1>' + Globalize.translate('HeaderTryEmbyPremiere') + '</h1>';

@ -123,7 +129,7 @@

            html += '<br/>';

-            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
+            html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block" autoFocus><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
            html += '<paper-button raised class="subdued block btnCancelSupporterInfo" style="background:#444;"><iron-icon icon="close"></iron-icon><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></paper-button>';

            html += '</div>';
--- a/dashboard-ui/scripts/sync.js
+++ b/dashboard-ui/scripts/sync.js
@ -236,10 +236,14 @@

                var dlg = paperDialogHelper.createDialog({
                    size: 'small',
-                    theme: 'a',
-                    removeOnClose: true
+                    removeOnClose: true,
+                    autoFocus: false
                });

+                dlg.classList.add('ui-body-a');
+                dlg.classList.add('background-theme-a');
+                dlg.classList.add('popupEditor');
+
                var html = '';
                html += '<h2 class="dialogHeader">';
                html += '<paper-fab icon="arrow-back" mini class="btnCancel"></paper-fab>';
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@ -532,45 +532,6 @@ paper-dialog paper-radio-group paper-radio-button {
    display: block;
 }

-.fullscreen-paper-dialog, .medium-paper-dialog, .small-paper-dialog {
-    position: fixed !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    margin: 0 !important;
-    border-radius: 0 !important;
-    max-height: none !important;
-    max-width: none !important;
-}
-
-@media all and (min-width: 1280px) and (min-height: 720px) {
-
-    .medium-paper-dialog {
-        top: 10% !important;
-        bottom: 10% !important;
-        left: 10% !important;
-        right: 10% !important;
-    }
-
-    .small-paper-dialog {
-        top: 10% !important;
-        bottom: 10% !important;
-        left: 20% !important;
-        right: 20% !important;
-    }
-}
-
-@media all and (min-width: 1280px) and (min-height: 720px) {
-
-    .fullscreen-paper-dialog {
-        top: 5% !important;
-        bottom: 5% !important;
-        left: 5% !important;
-        right: 5% !important;
-    }
-}
-
 div.dialogHeader {
    margin: 0 0 2.5em!important;
    padding: .35em .5em;
--- a/dashboard-ui/voice/voice.js
+++ b/dashboard-ui/voice/voice.js
@ -234,9 +234,12 @@
            removeOnClose: true
        });

+        dlg.classList.add('ui-body-b');
+        dlg.classList.add('background-theme-b');
+
        var html = '';
        html += '<h2 class="dialogHeader">';
-        html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput"></paper-fab>';
+        html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput" tabindex="-1"></paper-fab>';
        html += '</h2>';

        html += '<div>';