Commit 2539921f authored by Alan Szlosek's avatar Alan Szlosek

google material design icons

parent 07b37aba
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<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"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v14l11-7z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
</svg>
\ No newline at end of file
<svg enable-background="new 0 0 24 24" fill="#FFFFFF" height="24" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<g id="XMLID_1_">
<path d="M0,0h24v24H0V0z" fill="none"/>
<g id="XMLID_2_">
<rect height="2" id="XMLID_3_" width="12" x="4" y="10"/>
<rect height="2" id="XMLID_4_" width="12" x="4" y="6"/>
<rect height="2" id="XMLID_5_" width="8" x="4" y="14"/>
<polygon id="XMLID_6_" points="14,14 14,20 19,17 "/>
</g>
</g>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
\ No newline at end of file
......@@ -134,32 +134,25 @@ input, textarea {
box-shadow: 0 0 0.8em rgba(17,17,17,0.2)
}
#controls > * {
align-items: center;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
color: #fff;
font-size: 3em;
line-height: 1.0em;
height: 1em;
/*
margin-bottom: 10px;
padding: 0.9em 0;
*/
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
height: 48px;
justify-content: center;
}
#controls > *.selected {
background-color: #0074d9;
}
#controls img {
height: 40px;
}
#catalogButton, #playlistButton {
background-color: #ccc;
}
/*
#catalogButton {
font-size: 3em;
line-height: 1em;
height: 1em;
}
*/
#controls #play.active {
background-color: #2ecc40;
}
......@@ -180,23 +173,15 @@ input, textarea {
#playlist .active {
}
#playlist .button {
border-right: 1px solid #fff;
height: 3em;
line-height: 3em;
text-align: center;
text-decoration: none;
width: 3em;
}
#playlist .clear.button {
width: 5em;
height: 53px;
}
#playlist .songs {
margin-top: 20px;
}
#playlist .song {
border-bottom: 1px solid #ccc;
height: 3em;
}
#playlist .song .title {
padding: 0.9em 0;
......@@ -231,18 +216,23 @@ input, textarea {
#catalog > div {
border-bottom: 1px solid #ccc;
}
#catalog .button {
#catalog img, #playlist img {
height: 48px;
}
#catalog .button, #playlist .button {
align-items: center;
border-right: 1px solid #fff;
padding: 0.9em 0.9em;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8px;
}
#catalog .button img, #playlist .button img {
height: 32px;
}
#catalog .title {
color: #000;
/*
font-size: 1.3em;
line-height: 2.5em;
*/
padding: 0.9em 0;
text-decoration: none;
}
......@@ -271,12 +261,12 @@ input, textarea {
<div id="endTime"></div>
</div>
<div id="controls" class="flex controls">
<a href="#/catalog" class="one selected" id="catalogButton" data-tab="catalog">&colone;</a>
<a href="#/playlist" class="one disabled" id="playlistButton" data-tab="playlist">&sung;</a>
<a href="#/catalog" class="one selected" id="catalogButton" data-tab="catalog"><img src="/icons/ic_list_white_24px.svg" /></a>
<a href="#/playlist" class="one disabled" id="playlistButton" data-tab="playlist"><img src="/icons/ic_queue_music_white_24px.svg" /></a>
<div style="width: 3px; background-color: #fff;"></div>
<div id="prev" class="one warning previous disabled">&larrb;</div>
<div id="play" class="one warning play disabled">&rtrif;</div>
<div id="next" class="one warning next disabled">&rarrb;</div>
<div id="prev" class="one warning previous disabled"><img src="/icons/ic_skip_previous_white_24px.svg" /></div>
<div id="play" class="one warning play disabled"><img src="/icons/ic_play_arrow_white_24px.svg" /></div>
<div id="next" class="one warning next disabled"><img src="/icons/ic_skip_next_white_24px.svg" /></div>
</div>
</div>
......@@ -368,7 +358,7 @@ var tag = function(tagName, attributes) {
element.setAttribute(i, attributes[i]);
}
// Convert text to text node
for (var i = 0; i < args.length; i ++) {
for (var i = 0; i < args.length; i++) {
var node = args[i];
if (node == null) {
continue;
......@@ -422,8 +412,12 @@ var fillCatalog = function() {
out.push(
tag('div', {class: 'flex artist', 'data-artistid': artistId},
tag('div', {class: 'one title'}, song.albumArtist),
tag('div', {class:'button warning enqueue'}, '+'),
tag('div', {class:'button success play'}, "\u21D2")
tag('div', {class:'button warning enqueue'},
tag('img', {src: '/icons/ic_playlist_add_white_24px.svg'})
),
tag('div', {class:'button success play'},
tag('img', {src: '/icons/ic_playlist_play_white_24px.svg'})
)
)
);
}
......@@ -433,8 +427,12 @@ var fillCatalog = function() {
'div',
{class: 'hidden flex album artist-' + artistId, 'data-albumid': albumId},
tag('div', {class:'one title'}, song.album),
tag('div', {class:'button warning enqueue'}, '+'),
tag('div', {class:'button success play'}, "\u21D2")
tag('div', {class:'button warning enqueue'},
tag('img', {src: '/icons/ic_playlist_add_white_24px.svg'})
),
tag('div', {class:'button success play'},
tag('img', {src: '/icons/ic_playlist_play_white_24px.svg'})
)
)
);
}
......@@ -444,8 +442,12 @@ var fillCatalog = function() {
{class: 'hidden flex song artist-' + artistId + ' album-' + albumId, "data-songid": i},
// For albums with Various artists, show artist name
tag('div', {class:'one title'}, ("00" + song.trackNumber).slice(-2) + '. ' + (song.albumArtist != song.artist ? song.artist + ' - ' : '') + song.name),
tag('div', {class:'button warning enqueue'}, '+'),
tag('div', {class:'button success play'}, "\u21D2")
tag('div', {class:'button warning enqueue'},
tag('img', {src: '/icons/ic_playlist_add_white_24px.svg'})
),
tag('div', {class:'button success play'},
tag('img', {src: '/icons/ic_playlist_play_white_24px.svg'})
)
)
);
currentArtistId = song.albumArtistId;
......@@ -538,7 +540,9 @@ var player = {
'div',
{class: 'flex clear'},
tag('div', {class:'one'}),
tag('div', {class:'button clear error'}, 'Clear')
tag('div', {class:'button clear error'},
tag('img', {src: '/icons/ic_clear_all_white_24px.svg'})
)
)
);
......@@ -560,7 +564,9 @@ var player = {
'div',
{class: 'flex song', "data-index": i},
tag('div', {class:'one title'}, ("00" + song.trackNumber).slice(-2) + '. ' + song.artist + ' - ' + song.name),
tag('div', {class:'button error dequeue'}, 'X')
tag('div', {class:'button error dequeue'},
tag('img', {src: '/icons/ic_clear_white_24px.svg'})
)
)
);
}
......@@ -754,6 +760,10 @@ handles.catalog.addEventListener('click', function(event) {
}
}
if (target.tagName == 'IMG') {
target = target.parentNode;
}
if (target.classList.contains('play')) {
var parent = target.parentNode;
......@@ -804,6 +814,9 @@ handles.catalog.addEventListener('click', function(event) {
handles.controls.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName == 'IMG') {
target = target.parentNode;
}
if (target.classList.contains('play')) {
player.transition('playpause');
}
......@@ -839,6 +852,9 @@ handles.player.addEventListener('ended', function(event) {
handles.playlist.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName == 'IMG') {
target = target.parentNode;
}
if (target.classList.contains('dequeue')) {
var parent = target.parentNode;
var index = parent.getAttribute('data-index');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment