From 7fb59cc969fb007a77e44ae4608374048bc97b4b Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 26 Jun 2015 14:32:21 -0400
Subject: [PATCH] update remote controls

---
 dashboard-ui/css/librarybrowser.css           |   2 +-
 dashboard-ui/css/nowplaying.css               |   6 +-
 dashboard-ui/nowplaying.html                  |  57 +++----
 dashboard-ui/scripts/nowplayingpage.js        | 150 +++++++-----------
 dashboard-ui/scripts/search.js                |  22 +--
 dashboard-ui/thirdparty/emby-icons.html       |   4 +
 .../thirdparty/paper-button-style.css         |   5 -
 dashboard-ui/vulcanize-out.html               |   4 +
 8 files changed, 102 insertions(+), 148 deletions(-)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index f641e07f39..4884247583 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -21,7 +21,7 @@
 }
 
 .backdropPage.ui-page-theme-b {
-    background-color: rgba(20, 20,20, .94) !important;
+    background-color: rgba(20, 20,20, .92) !important;
 }
 
 .backdropContainer {
diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css
index cb2f0f77da..ce9b79e47b 100644
--- a/dashboard-ui/css/nowplaying.css
+++ b/dashboard-ui/css/nowplaying.css
@@ -3,13 +3,9 @@
 }
 
     .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        text-align: center;
-        font-size: 24px;
-        padding: 14px 0;
         margin: 2px 1px;
         width: 70px;
-        background: #383838;
-        border-radius: 2px;
+        height: 70px;
     }
 
 .nowPlayingPageImage img {
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index e939a9ddc3..1e2fc8232e 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -41,23 +41,23 @@
 
                             <div class="nowPlayingInfoButtons">
                                 <div>
-                                    <paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand large subdued square" title="${ButtonPreviousTrack}"></paper-fab>
-                                    <paper-fab icon="pause" class="btnPause btnPlayStateCommand large subdued square" title="${ButtonPause}"></paper-fab>
-                                    <paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand large subdued square" title="${ButtonPlay}"></paper-fab>
-                                    <paper-fab icon="stop" class="btnPlayStateCommand btnStop large subdued square" title="${ButtonStop}"></paper-fab>
-                                    <paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack large subdued square" title="${ButtonNextTrack}"></paper-fab>
+                                    <paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
+                                    <paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
+                                    <paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
+                                    <paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
+                                    <paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
                                 </div>
                                 <div>
-                                    <paper-fab icon="volume-up" class="btnCommand large subdued square" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
-                                    <paper-fab icon="volume-off" class="btnCommand large subdued square" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
-                                    <paper-fab icon="info" class="btnCommand videoButton large subdued square" title="${ButtonOsd}" data-command="ToggleOsdMenu"></paper-fab>
-                                    <paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand large subdued square" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
+                                    <paper-fab icon="volume-up" class="btnCommand subdued" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
+                                    <paper-fab icon="volume-off" class="btnCommand subdued" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
+                                    <paper-fab icon="info" class="btnCommand videoButton subdued" title="${ButtonOsd}" data-command="ToggleOsdMenu"></paper-fab>
+                                    <paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
                                 </div>
                                 <div>
-                                    <paper-fab icon="volume-down" class="btnCommand large subdued square" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
-                                    <paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand large subdued square" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
-                                    <paper-fab icon="subtitles" class="btnSubtitles videoButton btnPlayStateCommand large subdued square" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
-                                    <paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand large subdued square" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
+                                    <paper-fab icon="volume-down" class="btnCommand subdued" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
+                                    <paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
+                                    <paper-fab icon="subtitles" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
+                                    <paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
                                 </div>
                             </div>
                         </div>
@@ -65,32 +65,34 @@
                     <neon-animatable>
                         <div style="text-align:center;">
                             <div>
-                                <button type="button" data-role="none" title="${ButtonArrowUp}" class="btnArrowUp btnCommand imageButton" data-command="MoveUp"><i class="fa fa-arrow-up"></i></button>
+                                <paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
                             </div>
                             <div>
-                                <button type="button" data-role="none" title="${ButtonArrowLeft}" class="btnArrowLeft btnCommand imageButton" data-command="MoveLeft"><i class="fa fa-arrow-left"></i></button>
-                                <button type="button" data-role="none" title="${ButtonOk}" class="btnOk btnCommand imageButton" data-command="Select"><i class="fa fa-check"></i></button>
-                                <button type="button" data-role="none" title="${ButtonArrowRight}" class="btnArrowRight btnCommand imageButton" data-command="MoveRight"><i class="fa fa-arrow-right"></i></button>
+                                <paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
+
+                                <paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
+                                <paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
                             </div>
                             <div>
-                                <button type="button" data-role="none" title="${ButtonArrowDown}" class="btnArrowDown btnCommand imageButton" data-command="MoveDown"><i class="fa fa-arrow-down"></i></button>
+                                <paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
                             </div>
                             <div>
-                                <button data-icon="back" data-inline="true" data-iconpos="notext" title="${ButtonBack}" class="btnBack btnCommand" data-command="Back">${ButtonBack}</button>
-                                <button data-icon="info" data-inline="true" data-iconpos="notext" title="${ButtonInfo}" class="btnInfo btnCommand" data-command="ToggleContextMenu">${ButtonInfo}</button>
+                                <paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
+                                <paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
                             </div>
                             <br />
                             <div>
-                                <button type="button" data-role="none" title="${ButtonHome}" class="btnGoHome btnCommand imageButton" data-command="GoHome"><i class="fa fa-home"></i></button>
+                                <paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
+
                                 <!--<button data-inline="true" data-iconpos="right" title="${ButtonPageUp}" data-icon="plus" class="btnPageUp btnCommand ui-nodisc-icon" data-command="PageUp">${PageButtonAbbreviation}</button>
                                 <button data-inline="true" data-iconpos="right" title="${ButtonLetterUp}" data-icon="plus" class="btnLetterUp btnCommand ui-nodisc-icon" data-command="NextLetter">${LetterButtonAbbreviation}</button>-->
-                                <button type="button" data-role="none" title="${ButtonSearch}" class="btnShowSearch btnCommand imageButton" data-command="GoToSearch"><i class="fa fa-search"></i></button>
+                                <paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
                             </div>
                             <div>
-                                <button type="button" data-role="none" title="${ButtonSettings}" class="bthShowSettings btnCommand imageButton" data-command="GoToSettings"><i class="fa fa-gear"></i></button>
+                                <paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
                                 <!--<button data-inline="true" data-iconpos="right" title="${ButtonPageDown}" data-icon="minus" class="btnPageDown btnCommand ui-nodisc-icon" data-command="PageDown">${PageButtonAbbreviation}</button>
                                 <button data-inline="true" data-iconpos="right" title="${ButtonLetterDown}" data-icon="minus" class="btnLetterDown btnCommand ui-nodisc-icon" data-command="PreviousLetter">${LetterButtonAbbreviation}</button>-->
-                                <button type="button" data-role="none" title="${ButtonTakeScreenshot}" class="btnScreenshot btnCommand imageButton" data-command="TakeScreenshot"><i class="fa fa-video-camera"></i></button>
+                                <paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
                             </div>
                         </div>
                         <div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
@@ -152,13 +154,6 @@
             </template>
 
         </div>
-        <div data-role="popup" id="popupAudioTrackMenu">
-            <div class="trackList"></div>
-        </div>
-
-        <div data-role="popup" id="popupSubtitleTrackMenu">
-            <div class="trackList"></div>
-        </div>
 
         <div class="chapterMenuOverlay" style="display: none;"></div>
         <div class="chapterMenu hiddenScrollX" style="display: none;">
diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js
index b33e86a39d..caba36cf41 100644
--- a/dashboard-ui/scripts/nowplayingpage.js
+++ b/dashboard-ui/scripts/nowplayingpage.js
@@ -104,125 +104,106 @@
         $('.chapterMenu', page).hide();
     }
 
-    function showAudioMenu(page, item, currentIndex) {
+    function showAudioMenu(page, button, item, currentIndex) {
 
         var streams = (item.MediaStreams || []).filter(function (i) {
 
             return i.Type == 'Audio';
         });
 
-        var elem = $('#popupAudioTrackMenu', page);
+        var menuItems = streams.map(function (s) {
 
-        var html = '<ul data-role="listview" data-inset="true" style="min-width: 210px;"><li data-role="list-divider">' + Globalize.translate('HeaderSelectAudio') + '</li>';
-
-        html += streams.map(function (s) {
-
-            var streamHtml = '<li><a data-index="' + s.Index + '" href="#" class="lnkTrackOption">';
-
-            streamHtml += '<h3>';
-
-            if (s.Index == currentIndex) {
-                streamHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:top;" />';
-            }
-
-            streamHtml += (s.Codec || '').toUpperCase();
+            var name = (s.Codec || '').toUpperCase();
 
             if (s.Profile) {
-                streamHtml += ' ' + s.Profile;
+                name += ' ' + s.Profile;
             }
 
-            streamHtml += '</h3><p>';
-
-            var extras = [];
-
             if (s.Language) {
-                extras.push(s.Language);
+                name += ' · ' + s.Language;
             }
             if (s.Layout) {
-                extras.push(s.Layout);
+                name += ' · ' + s.Layout;
             }
             else if (s.Channels) {
-                extras.push(s.Channels + ' ch');
+                name += ' · ' + s.Channels + ' ch';
             }
 
-            if (s.BitRate) {
-                extras.push((parseInt(s.BitRate / 1000)) + ' kbps');
+            var menuItem = {
+                name: name,
+                id: s.Index
+            };
+
+            if (s.Index == currentIndex) {
+                menuItem.ironIcon = 'check';
             }
 
-            streamHtml += extras.join(' - ');
+            return menuItem;
+        });
 
-            streamHtml += '</p></a></li>';
+        require(['actionsheet'], function () {
 
-            return streamHtml;
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: button,
+                callback: function (id) {
 
-        }).join('');
+                    currentPlayer.setAudioStreamIndex(parseInt(id));
+                }
+            });
 
-        html += '</ul>';
-
-        $('.trackList', elem).html(html).trigger('create');
-
-        elem.popup('open');
+        });
     }
 
-    function showSubtitleMenu(page, item, currentIndex) {
-
-        var currentStreamImage = '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:top;" />';
+    function showSubtitleMenu(page, button, item, currentIndex) {
 
         var streams = (item.MediaStreams || []).filter(function (i) {
 
             return i.Type == 'Subtitle';
         });
 
-        var elem = $('#popupSubtitleTrackMenu', page);
+        var menuItems = streams.map(function (s) {
 
-        var html = '<ul data-role="listview" data-inset="true" style="min-width: 210px;"><li data-role="list-divider">' + Globalize.translate('HeaderSelectSubtitles') + '</li>';
-
-        html += '<li><a href="#" data-index="-1" class="lnkTrackOption"><h3>';
-
-        if (currentIndex == null) {
-            html += currentStreamImage;
-        }
-
-        html += 'Off';
-        html += '</h3></a></li>';
-
-        html += streams.map(function (s) {
-
-            var streamHtml = '<li><a data-index="' + s.Index + '" href="#" class="lnkTrackOption">';
-
-            streamHtml += '<h3>';
-
-            if (s.Index == currentIndex) {
-                streamHtml += currentStreamImage;
-            }
-
-            streamHtml += (s.Language || Globalize.translate('LabelUnknownLanguage'));
+            var name = (s.Language || Globalize.translate('LabelUnknownLanguage'));
 
             if (s.IsDefault && s.IsForced) {
-                streamHtml += ' ' + Globalize.translate('LabelDefaultForcedStream');
+                name += ' · ' + Globalize.translate('LabelDefaultForcedStream');
             }
             else if (s.IsDefault) {
-                streamHtml += ' ' + Globalize.translate('LabelDefaultStream');
+                name += ' · ' + Globalize.translate('LabelDefaultStream');
             }
             else if (s.IsForced) {
-                streamHtml += ' ' + Globalize.translate('LabelForcedStream');
+                name += ' · ' + Globalize.translate('LabelForcedStream');
             }
 
-            streamHtml += '</h3><p>';
+            if (s.Codec) {
+                name += ' · ' + s.Codec.toUpperCase();
+            }
 
-            streamHtml += (s.Codec || '').toUpperCase();
+            var menuItem = {
+                name: name,
+                id: s.Index
+            };
 
-            streamHtml += '</p></a></li>';
+            if (s.Index == currentIndex) {
+                menuItem.ironIcon = 'check';
+            }
 
-            return streamHtml;
+            return menuItem;
+        });
 
-        }).join('');
+        require(['actionsheet'], function () {
 
-        html += '</ul>';
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: button,
+                callback: function (id) {
 
-        $('.trackList', elem).html(html).trigger('create');
+                    currentPlayer.setSubtitleStreamIndex(parseInt(id));
+                }
+            });
 
-        elem.popup('open');
+        });
     }
 
     function bindEvents(page) {
@@ -264,35 +245,12 @@
             }
         });
 
-        $('#popupAudioTrackMenu', page).on('click', '.lnkTrackOption', function () {
-
-            if (currentPlayer && lastPlayerState) {
-
-                var index = this.getAttribute('data-index');
-
-                currentPlayer.setAudioStreamIndex(parseInt(index));
-
-                $('#popupAudioTrackMenu', page).popup('close');
-            }
-        });
-
-        $('#popupSubtitleTrackMenu', page).on('click', '.lnkTrackOption', function () {
-
-            if (currentPlayer && lastPlayerState) {
-                var index = this.getAttribute('data-index');
-
-                currentPlayer.setSubtitleStreamIndex(parseInt(index));
-
-                $('#popupSubtitleTrackMenu', page).popup('close');
-            }
-        });
-
         $('.btnAudioTracks', page).on('click', function () {
 
             if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
 
                 var currentIndex = lastPlayerState.PlayState.AudioStreamIndex;
-                showAudioMenu(page, lastPlayerState.NowPlayingItem, currentIndex);
+                showAudioMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
             }
         });
 
@@ -301,7 +259,7 @@
             if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
 
                 var currentIndex = lastPlayerState.PlayState.SubtitleStreamIndex;
-                showSubtitleMenu(page, lastPlayerState.NowPlayingItem, currentIndex);
+                showSubtitleMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
             }
         });
 
diff --git a/dashboard-ui/scripts/search.js b/dashboard-ui/scripts/search.js
index 3a5b969e8d..b48016e123 100644
--- a/dashboard-ui/scripts/search.js
+++ b/dashboard-ui/scripts/search.js
@@ -224,19 +224,21 @@
 
     function hideSearchMenu() {
 
-        require(["jquery", "velocity"], function ($, Velocity) {
+        if ($('.viewMenuSearch').is(':visible')) {
+            require(["jquery", "velocity"], function ($, Velocity) {
 
-            $('.btnCloseSearch').hide();
-            var elem = $('.viewMenuSearch')
-                .css({ left: '0' })[0];
+                $('.btnCloseSearch').hide();
+                var elem = $('.viewMenuSearch')
+                    .css({ left: '0' })[0];
 
-            Velocity.animate(elem, { "left": "100%" },
-            {
-                complete: function () {
-                    $('.viewMenuSearch').visible(false);
-                }
+                Velocity.animate(elem, { "left": "100%" },
+                {
+                    complete: function () {
+                        $('.viewMenuSearch').visible(false);
+                    }
+                });
             });
-        });
+        }
     }
 
     $(document).on('pagebeforehide', ".libraryPage", function () {
diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html
index 95e8bb1f69..3f6350445a 100644
--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@@ -102,6 +102,10 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="audiotrack"><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z" /></g>
             <g id="subtitles"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" /></g>
             <g id="movie"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" /></g>
+            <g id="keyboard-arrow-down"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" /></g>
+            <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
+            <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
+            <g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" /></g>
         </defs>
     </svg>
 </iron-iconset-svg>
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index 9fe086b686..bc62793910 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -307,11 +307,6 @@ paper-fab.blue {
         background: #01579b !important;
     }
 
-paper-fab.large {
-    width: 64px;
-    height: 64px;
-}
-
 paper-fab.square {
     border-radius: 5px;
 }
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 828967f274..00ed025cad 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -14913,6 +14913,10 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
             <g id="audiotrack"><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"></path></g>
             <g id="subtitles"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"></path></g>
             <g id="movie"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"></path></g>
+            <g id="keyboard-arrow-down"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></path></g>
+            <g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path></g>
+            <g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></g>
+            <g id="keyboard-arrow-up"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></g>
         </defs>
     </svg>
 </iron-iconset-svg>