From a3464422461187660052672ce033319a4f803cf5 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Mon, 7 Jan 2019 16:50:51 +0100 Subject: [PATCH] Draft for Snapcast UI style --- .../http/static/css/music.snapcast.css | 34 ++++++++++++++ .../backend/http/static/js/music.snapcast.js | 44 +++++++++++++------ .../templates/plugins/music.snapcast.html | 2 +- 3 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 platypush/backend/http/static/css/music.snapcast.css diff --git a/platypush/backend/http/static/css/music.snapcast.css b/platypush/backend/http/static/css/music.snapcast.css new file mode 100644 index 0000000000..f9351ba5e1 --- /dev/null +++ b/platypush/backend/http/static/css/music.snapcast.css @@ -0,0 +1,34 @@ +.snapcast-host-container { + min-width: 40em; + margin: 1em auto; + background: rgba(245,245,245,0.6); + border: 1px solid rgba(220,220,220,1.0); + border-radius: 10px; +} + +.snapcast-host-header { + border-bottom: 1px solid rgba(220,220,220,1.0); + font-size: 1em; +} + +.snapcast-group-header { + padding: 0.5em; +} + + .snapcast-group-settings { + text-align: center; + cursor: pointer; + } + + .snapcast-group-header h2 { + font-size: 1.5em; + } + +.snapcast-client-container { + padding: 0 1.4em; +} + + .snapcast-client-header h3 { + font-size: 1.2em; + } + diff --git a/platypush/backend/http/static/js/music.snapcast.js b/platypush/backend/http/static/js/music.snapcast.js index a59ead5677..2c5e3f0ca7 100644 --- a/platypush/backend/http/static/js/music.snapcast.js +++ b/platypush/backend/http/static/js/music.snapcast.js @@ -58,18 +58,26 @@ $(document).ready(function() { .addClass('snapcast-group-header'); var $groupTitle = $('

') - .addClass('eleven columns') - .text(groupName); + .addClass('ten columns'); var $groupSettings = $('') .addClass('snapcast-group-settings') - .addClass('one column') .addClass('fa fa-cog') .data('name', groupName) .data('id', group.id); + var $groupName = $('') + .html('  ' + groupName); + + var $groupMuteToggle = createPowerToggleElement({ + id: group.id, + on: !group.muted, + }).addClass('two columns').addClass('snapcast-group-mute-toggle'); + + $groupSettings.appendTo($groupTitle); + $groupName.appendTo($groupTitle); $groupTitle.appendTo($groupHeader); - $groupSettings.appendTo($groupHeader); + $groupMuteToggle.appendTo($groupHeader); $groupHeader.appendTo($group); for (var client of group.clients) { @@ -79,23 +87,33 @@ $(document).ready(function() { .data('name', clientName) .data('id', client.id); - var $clientHeader = $('
').addClass('row') + var $clientRow = $('
').addClass('row') .addClass('snapcast-client-header'); var $clientTitle = $('

') - .addClass('eleven columns') + .addClass('three columns') .data('connected', client.connected) .text(clientName); + var $volumeSlider = $('') + .addClass('slider snapcast-volume-slider') + .addClass('eight columns') + .data('id', client.id) + .attr('type', 'range') + .attr('min', 0).attr('max', 100) + .val(client.config.volume.percent); + var $clientMuteToggle = createPowerToggleElement({ - type: 'client', id: client.id, on: !client.config.volume.muted, - }).addClass('one column'); + }) + .addClass('one column') + .addClass('snapcast-client-mute-toggle'); - $clientTitle.appendTo($clientHeader); - $clientMuteToggle.appendTo($clientHeader); - $clientHeader.appendTo($client); + $clientTitle.appendTo($clientRow); + $volumeSlider.appendTo($clientRow); + $clientMuteToggle.appendTo($clientRow); + $clientRow.appendTo($client); $client.appendTo($group); } @@ -106,7 +124,7 @@ $(document).ready(function() { } }; - var initUi = function() { + var redraw = function() { var promises = []; for (var host of Object.keys(window.config.snapcast_hosts)) { @@ -297,7 +315,7 @@ $(document).ready(function() { }; var init = function() { - initUi(); + redraw(); }; init(); diff --git a/platypush/backend/http/templates/plugins/music.snapcast.html b/platypush/backend/http/templates/plugins/music.snapcast.html index 7b2baf6b12..9928b06468 100644 --- a/platypush/backend/http/templates/plugins/music.snapcast.html +++ b/platypush/backend/http/templates/plugins/music.snapcast.html @@ -1,5 +1,5 @@ - +