Draft for Snapcast UI style
This commit is contained in:
parent
004868f526
commit
a346442246
3 changed files with 66 additions and 14 deletions
34
platypush/backend/http/static/css/music.snapcast.css
Normal file
34
platypush/backend/http/static/css/music.snapcast.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
|
@ -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(' ' + 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();
|
||||||
|
|
|
@ -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 || {};
|
||||||
|
|
Loading…
Reference in a new issue