Implement playlist shade mode

Fixes #138
This commit is contained in:
Jordan Eldredge 2015-01-20 03:17:40 -08:00
parent 06cc24419f
commit 2425b7aec8
2 changed files with 80 additions and 10 deletions

View file

@ -83,19 +83,31 @@
}
#playlist .top #playlist-shade {
background-position: -156px -3px;
position: absolute;
top: 3px;
left: 3px;
right: 13px;
height: 9px;
width: 9px;
}
#playlist .top #playlist-shade:active {
background-position: -62px -42px;
}
#playlist .top #playlist-shade.selected {
background-position: -150px -42px;
}
#playlist .top #playlist-close {
background-position: -167px -3px;
position: absolute;
top: 3px;
right: 3px;
height: 9px;
width: 9px;
}
#playlist .top #playlist-close {
position: absolute;
top: 3px;
left: 14px;
height: 9px;
width: 9px;
#playlist .top #playlist-close:active {
background-position: -52px -42px;
}
#playlist .left {
@ -144,3 +156,57 @@
bottom: 0px;
right: 0px;
}
/* Shade View */
#playlist.shade {
height: 14px;
}
#playlist.shade .bottom,
#playlist.shade .left,
#playlist.shade .right,
#playlist.shade .title
{
display: none;
}
#playlist.shade .playlist-top-tile {
background: none;
}
#playlist.shade .top .top-left {
background-position: -72px -42px;
width: 25px;
height: 14px;
}
#playlist.shade .top .top-right {
background-position: -99px -42px;
width: 50px;
height: 14px;
}
#playlist.shade .top #playlist-close {
background-position: -138px -45px;
}
#playlist.shade .top #playlist-close:active {
background-position: -52px -42px;
}
#playlist.shade .top #playlist-shade {
background-position: -128px -45px;
}
#playlist.shade .top #playlist-shade:active {
background-position: -150px -42px;
}
#playlist.shade #tracks {
top: 0;
height: 14px;
background: none;
}
#playlist.shade #tracks li {
display: none;
height: 10px;
margin: 2px 0;
background: none;
}
#playlist.shade #tracks li.current {
display: block;
}

View file

@ -33,6 +33,10 @@ PlaylistWindow = {
self.winamp.closePlaylist();
}
this.nodes.shade.onclick = function() {
self.nodes.window.classList.toggle('shade');
}
this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
this.nodes.window.addEventListener('dragover', this.dragover.bind(this));
this.nodes.window.addEventListener('drop', this.drop.bind(this));
@ -66,7 +70,7 @@ PlaylistWindow = {
for(i = 0; i < this.winamp.playlist.length; i++) {
var li = document.createElement('li');
li.innerHTML = "<li>" + (i+1) + ". " + this.winamp.playlist[i].name + "</li>";
li.innerHTML = (i+1) + ". " + this.winamp.playlist[i].name;
tracks.appendChild(li);
}
@ -77,9 +81,9 @@ PlaylistWindow = {
var tracks = this.nodes.tracks.children;
for(i = 0; i < tracks.length; i++) {
if(i == this.winamp.currentTrack) {
tracks[i].classList.add('selected');
tracks[i].classList.add('current');
} else {
tracks[i].classList.remove('selected');
tracks[i].classList.remove('current');
}
}
},