update icons

2024-11-17 19:08:18 -07:00 · 2015-06-19 18:01:47 -04:00 · 2015-06-19 18:01:47 -04:00 · 07df993238
commit 07df993238
parent 4d603ad38c
16 changed files with 199 additions and 75 deletions
--- a/dashboard-ui/scripts/actionsheet.js
+++ b/dashboard-ui/scripts/actionsheet.js
@ -5,7 +5,7 @@
    }
    function show(options) {

-        require(['paperbuttonstyle'], function() {
+        require(['paperbuttonstyle'], function () {
            // items
            // positionTo
            // showCancel
@ -13,7 +13,39 @@
            var id = 'dlg' + new Date().getTime();
            var html = '';

-            html += '<paper-dialog id="' + id + '" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>';
+            var style = "";
+
+            if (options.positionTo) {
+
+                var pos = $(options.positionTo).offset();
+
+                pos.top += $(options.positionTo).innerHeight() / 2;
+                pos.left += $(options.positionTo).innerWidth() / 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 -= 100;
+                pos.left -= 80;
+
+                // 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, $(window).height() - 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);
+
+                style += 'position:fixed;top:' + pos.top + 'px;left:' + pos.left + 'px';
+            }
+
+            html += '<paper-dialog id="' + id + '" entry-animation="fade-in-animation" exit-animation="fade-out-animation" with-backdrop style="' + style + '">';

            if (options.title) {
                html += '<h2>';
@ -26,8 +58,11 @@

                var option = options.items[i];

-                html += '<paper-button class="block blue ripple btnOption" data-id="' + option.id + '" style="margin:0;">';
-                //html += '<iron-icon icon="close"></iron-icon>';
+                html += '<paper-button class="block menuButton ripple btnOption" data-id="' + option.id + '" style="margin:0;">';
+
+                if (option.ironIcon) {
+                    html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
+                }
                html += '<span>' + option.name + '</span>';
                html += '</paper-button>';
            }
@ -53,10 +88,18 @@

                $('.btnOption', dlg).on('click', function () {

-                    if (options.callback) {
-                        options.callback(this.getAttribute('data-id'));
-                    }
-                    dlg.close();
+                    var selectedId = this.getAttribute('data-id');
+
+                    // Add a delay here to allow the click animation to finish, for nice effect
+                    setTimeout(function () {
+
+                        dlg.close();
+
+                        if (options.callback) {
+                            options.callback(selectedId);
+                        }
+
+                    }, 100);
                });
            }, 100);
        });
--- a/dashboard-ui/scripts/addpluginpage.js
+++ b/dashboard-ui/scripts/addpluginpage.js
@ -17,6 +17,7 @@
    }

    function populateVersions(packageInfo, page, installedPlugin) {
+
        var html = '';

        for (var i = 0, length = packageInfo.versions.length; i < length; i++) {
@ -109,12 +110,12 @@
        $('.pluginName', page).html(pkg.name);

        if (pkg.targetSystem == 'Server') {
-            $("#btnInstallDiv", page).show();
+            $("#btnInstallDiv", page).visible(true);
            $("#nonServerMsg", page).hide();
-            $("#pSelectVersion", page).show();
+            $("#pSelectVersion", page).visible(true);
        } else {
-            $("#btnInstallDiv", page).hide();
-            $("#pSelectVersion", page).hide();
+            $("#btnInstallDiv", page).visible(false);
+            $("#pSelectVersion", page).visible(false);

            var msg = Globalize.translate('MessageInstallPluginFromApp');
            $("#nonServerMsg", page).html(msg).show();
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@ -557,7 +557,7 @@

        $('.btnPlay', page).on('click', function () {
            var userdata = currentItem.UserData || {};
-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, "Audio", userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, "Audio", userdata.PlaybackPositionTicks);
        });

        $('.itemsContainer', page).on('playallfromhere', function (e, index) {
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@ -1588,7 +1588,7 @@
                mediaType = "Audio";
            }

-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
        });

        $('.btnPlayTrailer', page).on('click', function () {
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -237,7 +237,7 @@
            });
        },

-        showPlayMenu: function (positionTo, itemId, itemType, isFolder, mediaType, resumePositionTicks, showAddToPlaylist) {
+        showPlayMenu: function (positionTo, itemId, itemType, isFolder, mediaType, resumePositionTicks) {

            var externalPlayers = AppSettings.enableExternalPlayers();

@ -249,49 +249,91 @@
                }
            }

-            $('.playFlyout').popup("close").remove();
-
-            var html = '<div data-role="popup" class="playFlyout" data-history="false" data-theme="a">';
-
-            html += '<ul data-role="listview" style="min-width: 160px;">';
-
-            html += '<li data-icon="false"><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonPlay') + '</a></li>';
-
-            if (!isFolder && externalPlayers) {
-                html += '<li data-icon="false"><a href="#" onclick="LibraryBrowser.closePlayMenu();LibraryBrowser.playInExternalPlayer(\'' + itemId + '\');">' + Globalize.translate('ButtonPlayExternalPlayer') + '</a></li>';
-            }
+            var menuItems = [];

            if (resumePositionTicks) {
-                html += '<li data-icon="false"><a href="#" onclick="MediaController.play({ids:[\'' + itemId + '\'],startPositionTicks:' + resumePositionTicks + '});LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonResume') + '</a></li>';
+                menuItems.push({
+                    name: Globalize.translate('ButtonResume'),
+                    id: 'resume',
+                    ironIcon: 'play-arrow'
+                });
+            }
+
+            menuItems.push({
+                name: Globalize.translate('ButtonPlay'),
+                id: 'play',
+                ironIcon: 'play-arrow'
+            });
+
+            if (!isFolder && externalPlayers && mediaType != "Audio") {
+                menuItems.push({
+                    name: Globalize.translate('ButtonPlayExternalPlayer'),
+                    id: 'externalplayer',
+                    ironIcon: 'airplay'
+                });
            }

            if (MediaController.canQueueMediaType(mediaType, itemType)) {
-                html += '<li data-icon="false"><a href="#" onclick="MediaController.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonQueue') + '</a></li>';
+                menuItems.push({
+                    name: Globalize.translate('ButtonQueue'),
+                    id: 'queue',
+                    ironIcon: 'playlist-add'
+                });
            }

            if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                html += '<li data-icon="false"><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonInstantMix') + '</a></li>';
+                menuItems.push({
+                    name: Globalize.translate('ButtonInstantMix'),
+                    id: 'instantmix',
+                    ironIcon: 'shuffle'
+                });
            }

            if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
-                html += '<li data-icon="false"><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonShuffle') + '</a></li>';
+                menuItems.push({
+                    name: Globalize.translate('ButtonShuffle'),
+                    id: 'shuffle',
+                    ironIcon: 'shuffle'
+                });
            }

-            if (showAddToPlaylist) {
-                html += '<li data-icon="false"><a href="#" onclick="PlaylistManager.showPanel([\'' + itemId + '\']);LibraryBrowser.closePlayMenu();">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
-            }
+            require(['actionsheet'], function () {

-            html += '</ul>';
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: positionTo,
+                    callback: function (id) {

-            html += '</div>';
+                        switch (id) {

-            $($.mobile.activePage).append(html);
+                            case 'play':
+                                MediaController.play(itemId);
+                                break;
+                            case 'externalplayer':
+                                LibraryBrowser.playInExternalPlayer(itemId);
+                                break;
+                            case 'resume':
+                                MediaController.play({
+                                    ids: [itemId],
+                                    startPositionTicks: resumePositionTicks
+                                });
+                                break;
+                            case 'queue':
+                                MediaController.queue(itemId);
+                                break;
+                            case 'instantmix':
+                                MediaController.instantMix(itemId);
+                                break;
+                            case 'shuffle':
+                                MediaController.shuffle(itemId);
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                });

-            $('.playFlyout').popup({ positionTo: positionTo || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
-
-                $(this).off("popupafterclose").remove();
-
-            }).parents(".ui-popup-container");
+            });
        },

        closePlayMenu: function () {
@ -357,7 +399,7 @@
            // The timeout allows the flyout to close
            setTimeout(function () {

-                var msg = "<p>" + Globalize.translate('ConfirmDeleteItem') + "</p>";
+                var msg = Globalize.translate('ConfirmDeleteItem');

                Dashboard.confirm(msg, Globalize.translate('HeaderDeleteItem'), function (result) {

@ -426,10 +468,10 @@
                        switch (id) {

                            case 'addtocollection':
-                                BoxSetEditor.showPanel(itemId);
+                                BoxSetEditor.showPanel([itemId]);
                                break;
-                            case 'icon':
-                                PlaylistManager.showPanel(itemId);
+                            case 'playlist':
+                                PlaylistManager.showPanel([itemId]);
                                break;
                            case 'delete':
                                LibraryBrowser.deleteItem(itemId);
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@ -1006,7 +1006,7 @@

        msg += "<br/><br/>" + Globalize.translate('MessageConfirmItemGrouping');

-        Dashboard.confirm(msg, "Group Versions", function (confirmResult) {
+        Dashboard.confirm(msg, Globalize.translate('HeaderGroupVersions'), function (confirmResult) {

            if (confirmResult) {

--- a/dashboard-ui/scripts/livetvchannel.js
+++ b/dashboard-ui/scripts/livetvchannel.js
@ -168,7 +168,7 @@

        $('#btnPlay', page).on('click', function () {
            var userdata = currentItem.UserData || {};
-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, currentItem.MediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, currentItem.MediaType, userdata.PlaybackPositionTicks);
        });

        $('#btnEdit', page).on('click', function () {
--- a/dashboard-ui/scripts/livetvguide.js
+++ b/dashboard-ui/scripts/livetvguide.js
@ -378,7 +378,8 @@

            dateOptions.push({
                name: LibraryBrowser.getFutureDateText(start),
-                id: start.getTime()
+                id: start.getTime(),
+                ironIcon: 'today'
            });

            start.setDate(start.getDate() + 1);
--- a/dashboard-ui/scripts/livetvprogram.js
+++ b/dashboard-ui/scripts/livetvprogram.js
@ -112,7 +112,7 @@
                
                var userdata = channel.UserData || {};

-                LibraryBrowser.showPlayMenu(this, channel.Id, channel.Type, false, channel.MediaType, userdata.PlaybackPositionTicks);
+                LibraryBrowser.showPlayMenu(null, channel.Id, channel.Type, false, channel.MediaType, userdata.PlaybackPositionTicks);
            });
        });

--- a/dashboard-ui/scripts/livetvrecording.js
+++ b/dashboard-ui/scripts/livetvrecording.js
@ -27,7 +27,7 @@

        var mediaType = currentItem.MediaType;

-        LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, mediaType, userdata.PlaybackPositionTicks);
+        LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, mediaType, userdata.PlaybackPositionTicks);
    }

    function renderRecording(page, item) {
--- a/dashboard-ui/scripts/playlistedit.js
+++ b/dashboard-ui/scripts/playlistedit.js
@ -187,7 +187,7 @@
                mediaType = "Audio";
            }

-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
        });

        $('.itemsContainer', page).on('needsrefresh', function () {
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -50,7 +50,9 @@ var Dashboard = {

        $.event.special.swipe.verticalDistanceThreshold = 40;
        $.mobile.loader.prototype.options.disabled = true;
-        //$.mobile.page.prototype.options.domCache = true;
+
+
+        $.mobile.page.prototype.options.domCache = true;

        $.mobile.loadingMessage = false;
        $.mobile.loader.prototype.options.html = "";
@ -570,7 +572,7 @@ var Dashboard = {
    confirm: function (message, title, callback) {

        // Cordova
-        if (navigator.notification && navigator.notification.alert && message.indexOf('<') == -1) {
+        if (navigator.notification && navigator.notification.confirm && message.indexOf('<') == -1) {

            var buttonLabels = [Globalize.translate('ButtonOk'), Globalize.translate('ButtonCancel')];

--- a/dashboard-ui/thirdparty/cordova/imagestore.js
+++ b/dashboard-ui/thirdparty/cordova/imagestore.js
@ -54,7 +54,9 @@
        function normalizeReturnUrl(url) {
            if ($.browser.safari) {

-                if ($.browser.iOSVersion == 8) {
+                // Use the embedded server for iOS8, and also if we don't know the iOS version, just to be safe
+                //if ($.browser.iOSVersion == 8 || !$.browser.iOSVersion)
+                {
                    return url.replace('file://', '');
                }
            }
--- a/dashboard-ui/thirdparty/cordova/ios/actionsheet.js
+++ b/dashboard-ui/thirdparty/cordova/ios/actionsheet.js
@ -14,7 +14,8 @@
            })
        };

-        if (options.showCancel) {
+        // Show cancel unless the caller explicitly set it to false
+        if (options.showCancel !== false) {
            innerOptions.addCancelButtonWithLabel = Globalize.translate('ButtonCancel');
        }

--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@ -34,24 +34,30 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
 <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 <iron-iconset-svg name="icons" size="24">
-<svg><defs>
-<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
-<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
-<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
-         <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></g>
-         <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
-         <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" /></g>
-         <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
-         <g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></g>
-         <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" /></g>
-         <g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /></g>
-         <g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
-         <g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" /></g>
-         <g id="mode-edit"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /></g>
-         <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
-         <g id="cast"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z" /></g>
-         <g id="cast-connected"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
-         <g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g>
-         <g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z" /></g>
-     </defs></svg>
+    <svg>
+        <defs>
+            <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></g>
+            <g id="airplay"><defs><path id="a" d="M0 0h24v24H0V0z" /></defs><defs><path id="c" d="M0 0h24v24H0V0z" /></defs><clipPath id="b"><use xlink:href="#a" overflow="visible" /></clipPath><clipPath id="d" clip-path="url(#b)"><use xlink:href="#c" overflow="visible" /></clipPath><path d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" clip-path="url(#d)" /></g>
+            <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
+            <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
+            <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></g>
+            <g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
+            <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" /></g>
+            <g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
+            <g id="lock"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></g>
+            <g id="settings"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" /></g>
+            <g id="refresh"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /></g>
+            <g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
+            <g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" /></g>
+            <g id="mode-edit"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /></g>
+            <g id="more-vert"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
+            <g id="playlist-add"><path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z" /></g>
+            <g id="cast"><path d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z" /></g>
+            <g id="cast-connected"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" /></g>
+            <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" /></g>
+            <g id="shuffle"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z" /></g>
+            <g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g>
+            <g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z" /></g>
+        </defs>
+    </svg>
 </iron-iconset-svg>
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@ -17,6 +17,15 @@
            background: #e1f5f3;
        }

+    paper-button.menuButton {
+        color: #212121;
+        text-align: left;
+    }
+
+        paper-button.menuButton:hover {
+            background: #e1f5f3;
+        }
+
    paper-button.ripple::shadow paper-ripple {
        color: #ff3bee;
    }
@ -185,6 +194,23 @@ paper-button.notext {
    bottom: 30px;
 }

+paper-dialog {
+    border-radius: 4px;
+}
+
 iron-overlay-backdrop {
    z-index: 999998 !important;
 }
+
+/* These values default to 24px and create huge white padding around the dialog content. */
+.scrollable.paper-dialog-scrollable {
+    padding: 0 12px;
+}
+
+paper-dialog > *:last-child {
+    margin-bottom: 12px;
+}
+
+paper-dialog > *:first-child {
+    margin-top: 12px;
+}