Draft for Snapcast UI style

This commit is contained in:
Fabio Manganiello 2019-01-07 16:50:51 +01:00
parent 004868f526
commit a346442246
3 changed files with 66 additions and 14 deletions

View file

@ -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;
}

View file

@ -58,18 +58,26 @@ $(document).ready(function() {
.addClass('snapcast-group-header'); .addClass('snapcast-group-header');
var $groupTitle = $('<h2></h2>') var $groupTitle = $('<h2></h2>')
.addClass('eleven columns') .addClass('ten columns');
.text(groupName);
var $groupSettings = $('<i></i>') var $groupSettings = $('<i></i>')
.addClass('snapcast-group-settings') .addClass('snapcast-group-settings')
.addClass('one column')
.addClass('fa fa-cog') .addClass('fa fa-cog')
.data('name', groupName) .data('name', groupName)
.data('id', group.id); .data('id', group.id);
var $groupName = $('<span></span>')
.html('&nbsp; ' + 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); $groupTitle.appendTo($groupHeader);
$groupSettings.appendTo($groupHeader); $groupMuteToggle.appendTo($groupHeader);
$groupHeader.appendTo($group); $groupHeader.appendTo($group);
for (var client of group.clients) { for (var client of group.clients) {
@ -79,23 +87,33 @@ $(document).ready(function() {
.data('name', clientName) .data('name', clientName)
.data('id', client.id); .data('id', client.id);
var $clientHeader = $('<div></div>').addClass('row') var $clientRow = $('<div></div>').addClass('row')
.addClass('snapcast-client-header'); .addClass('snapcast-client-header');
var $clientTitle = $('<h3></h3>') var $clientTitle = $('<h3></h3>')
.addClass('eleven columns') .addClass('three columns')
.data('connected', client.connected) .data('connected', client.connected)
.text(clientName); .text(clientName);
var $volumeSlider = $('<input></input>')
.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({ var $clientMuteToggle = createPowerToggleElement({
type: 'client',
id: client.id, id: client.id,
on: !client.config.volume.muted, on: !client.config.volume.muted,
}).addClass('one column'); })
.addClass('one column')
.addClass('snapcast-client-mute-toggle');
$clientTitle.appendTo($clientHeader); $clientTitle.appendTo($clientRow);
$clientMuteToggle.appendTo($clientHeader); $volumeSlider.appendTo($clientRow);
$clientHeader.appendTo($client); $clientMuteToggle.appendTo($clientRow);
$clientRow.appendTo($client);
$client.appendTo($group); $client.appendTo($group);
} }
@ -106,7 +124,7 @@ $(document).ready(function() {
} }
}; };
var initUi = function() { var redraw = function() {
var promises = []; var promises = [];
for (var host of Object.keys(window.config.snapcast_hosts)) { for (var host of Object.keys(window.config.snapcast_hosts)) {
@ -297,7 +315,7 @@ $(document).ready(function() {
}; };
var init = function() { var init = function() {
initUi(); redraw();
}; };
init(); init();

View file

@ -1,5 +1,5 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/music.snapcast.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/music.snapcast.js') }}"></script>
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/light.hue.css') }}"></script> --> <link rel="stylesheet" href="{{ url_for('static', filename='css/music.snapcast.css') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
window.config = window.config || {}; window.config = window.config || {};