Skip to content

Commit

Permalink
Redesigned Panel Buttons; Added Settings Panel; Added Emails Settings…
Browse files Browse the repository at this point in the history 
… to Settings Panel
  • Loading branch information
@overra
overra committed Jan 24, 2012
1 parent 6be90fc commit 549a036
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 46 deletions.
81 changes: 63 additions & 18 deletions css/style.css
View file
Expand Up @@ -465,13 +465,59 @@ body .loading li:nth-child(n+2) {
#maindiv #outer .roomView #right-panel .songlog-container .button {
display: none;
}
#maindiv #outer .roomView #right-panel .settings-container .content form button {
background: -webkit-linear-gradient(transparent, rgba(255,255,255,0.10) 40%, transparent) #606060;
border: 0;
border-radius: 4px;
bottom: 10px;
box-shadow: 0px 1px rgba(0,0,0,0.10), inset 0px 1px rgba(255,255,255,0.10);
color: #303030;
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
font-size: 11pt;
height: 24px;
left: 50%;
margin-left: -100px;
position: absolute;
text-shadow: 0px 1px rgba(255,255,255,0.20);
width: 200px;
}
#maindiv #outer .roomView #right-panel .settings-container .content form button:hover {
background-color: #707070;
}
#maindiv #outer .roomView #right-panel .settings-container .content .section {
margin-bottom: 5px;
}
#maindiv #outer .roomView #right-panel .settings-container .content .section .sectionTitle {
background: -webkit-linear-gradient(left, rgba(255,255,255,0.20), transparent);
color: #fff;
font-size: 14px;
font-weight: 100;
height: 25px;
line-height: 25px;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 32px;
text-shadow: 0px 1px #000;
}
#maindiv #outer .roomView #right-panel .settings-container .content .section .option {
color: #fff;
font-size: 10pt;
font-weight: 100;
line-height: 20px;
padding: 0px 10px;
}
#maindiv #outer .roomView #right-panel .settings-container .content .section .option input {
margin-right: 10px;
}
#maindiv #outer .roomView #right-panel .settings-container,
#maindiv #outer .roomView #right-panel .activity-log-container {
background-color: #404040;
position: absolute;
right: 0;
top: 150px;
width: 300px;
}
#maindiv #outer .roomView #right-panel .settings-container .title,
#maindiv #outer .roomView #right-panel .activity-log-container .title {
background: -webkit-linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.00)), url("https://s3.amazonaws.com/static.turntable.fm/images/room/guest_list_icon_top.png") 6px 6px no-repeat, #202020;
box-shadow: inset 0px 1px rgba(255,255,255,0.10), inset 0px -1px rgba(0,0,0,0.10);
Expand All @@ -482,10 +528,12 @@ body .loading li:nth-child(n+2) {
line-height: 25px;
padding: 0 0 0 32px;
}
#maindiv #outer .roomView #right-panel .settings-container ul,
#maindiv #outer .roomView #right-panel .activity-log-container ul {
list-style-type: none;
overflow: auto;
}
#maindiv #outer .roomView #right-panel .settings-container ul li,
#maindiv #outer .roomView #right-panel .activity-log-container ul li {
box-shadow: inset 0px 1px rgba(255,255,255,0.10), inset 0px -1px rgba(0,0,0,0.10);
color: rgba(255,255,255,0.90);
Expand All @@ -499,6 +547,7 @@ body .loading li:nth-child(n+2) {
text-overflow: ellipsis;
white-space: nowrap;
}
#maindiv #outer .roomView #right-panel .settings-container ul li:nth-child(even),
#maindiv #outer .roomView #right-panel .activity-log-container ul li:nth-child(even) {
background-color: rgba(0,0,0,0.10);
}
Expand All @@ -514,33 +563,29 @@ body .loading li:nth-child(n+2) {
#maindiv #outer .roomView #right-panel .bottom-bar .panelButtons {
list-style-type: none;
position: absolute;
right: 3px;
right: 0px;
}
#maindiv #outer .roomView #right-panel .bottom-bar .panelButtons li {
background: -webkit-linear-gradient(rgba(255,255,255,0.40), rgba(255,255,255,0.00)) #808080;
border: 1px rgba(0,0,0,0.60) solid;
border-radius: 4px;
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.40);
color: #000;
background: -webkit-linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.00)) #404040;
border-left: 1px rgba(0,0,0,0.10) solid;
box-shadow: inset 0px 1px rgba(255,255,255,0.20), inset 0px -1px rgba(0,0,0,0.20);
color: #fff;
cursor: pointer;
float: left;
font-size: 8pt;
font-weight: bold;
height: 22px;
line-height: 24px;
margin: 7px 1px;
padding: 0px 5px;
text-shadow: 0px 1px rgba(255,255,255,0.20);
font-size: 10pt;
font-weight: 100;
height: 38px;
line-height: 38px;
margin: 0px;
padding: 0px 9px;
text-shadow: 0px 1px rgba(0,0,0,0.20);
}
#maindiv #outer .roomView #right-panel .bottom-bar .panelButtons li:hover {
background: -webkit-linear-gradient(rgba(255,255,255,0.40), rgba(255,255,255,0.00)) #a0a0a0;
color: #202020;
background: -webkit-linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.00)) #404040;
}
#maindiv #outer .roomView #right-panel .bottom-bar .panelButtons li.active {
background-color: #606060;
background-color: #202020;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.80), 0px 1px rgba(255,255,255,0.30);
color: #202020;
text-shadow: 0px 1px rgba(255,255,255,0.20);
}
#maindiv #outer .roomView #right-panel .black-right-header {
background: -webkit-linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.00)) #202020;
Expand Down
77 changes: 59 additions & 18 deletions css/style.styl
View file
Expand Up @@ -406,6 +406,51 @@ body
font-weight: 100
.button
display: none
.settings-container
.content
form
button
background: -webkit-linear-gradient(transparent, rgba(255,255,255,.1) 40%, transparent) #606060
border: 0
border-radius: 4px
bottom: 10px
box-shadow: 0px 1px rgba(0,0,0,.1), inset 0px 1px rgba(255,255,255,.1)
color: #303030
cursor: pointer
font-family: Helvetica, Arial, sans-serif
font-size: 11pt
height: 24px
left: 50%
margin-left: -100px
position: absolute
text-shadow: 0px 1px rgba(255,255,255,.2)
width: 200px

&:hover
background-color: #707070
.section
margin-bottom: 5px

.sectionTitle
background: -webkit-linear-gradient(left, rgba(255,255,255,.2), transparent)
color: #fff
font-size: 14px
font-weight: 100
height: 25px
line-height: 25px
margin: 0px 0px 5px 0px
padding: 0px 0px 0px 32px
text-shadow: 0px 1px #000
.option
color: #fff
font-size: 10pt
font-weight: 100
line-height: 20px
padding: 0px 10px

input
margin-right: 10px
.settings-container
.activity-log-container
background-color: #404040
position: absolute
Expand Down Expand Up @@ -452,31 +497,27 @@ body
.panelButtons
list-style-type: none
position: absolute
right: 3px
right: 0px
li
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0)) #808080
border: 1px rgba(0,0,0,.6) solid
border-radius: 4px
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.4)
color: #000
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0)) #404040
border-left: 1px rgba(0,0,0,.1) solid
box-shadow: inset 0px 1px rgba(255,255,255,0.2), inset 0px -1px rgba(0,0,0,.2)
color: #fff
cursor: pointer
float: left
font-size: 8pt
font-weight: bold
height: 22px
line-height: 24px
margin: 7px 1px
padding: 0px 5px
text-shadow: 0px 1px rgba(255, 255, 255, .2)
font-size: 10pt
font-weight: 100
height: 38px
line-height: 38px
margin: 0px
padding: 0px 9px
text-shadow: 0px 1px rgba(0, 0, 0, .2)

&:hover
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0)) #a0a0a0
color: #202020
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0)) #404040
&.active
background-color: #606060
background-color: #202020
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.8), 0px 1px rgba(255,255,255,0.3)
color: #202020
text-shadow: 0px 1px rgba(255, 255, 255, .2)
.black-right-header
background: -webkit-linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0)) #202020
box-shadow: inset 0px 1px rgba(255,255,255,.1), inset 0px -1px rgba(0,0,0,.1)
Expand Down
100 changes: 90 additions & 10 deletions js/script.js
View file
Expand Up @@ -93,7 +93,7 @@
if ($('.chat-container .messages').height()=='0') {
$('.chat-container').animate({height: $this.roomHeight*.4}, 1000)
$('.chat-container .messages').animate({height: $this.roomHeight*.4-38-25}, 1000, function() {
$('.chat-container .messages').scrollTop += 9001;
$('.chat-container .messages').scrollTop(99999);
})
$('.chat-container .chatHeader').animate({bottom: $this.roomHeight*.4-25}, 1000)
}
Expand Down Expand Up @@ -166,25 +166,31 @@
$(this).addClass('active');
$('.panel.active').removeClass('active');
$('.playlist-container').addClass('active');
} } }, 'My Queue'],
} } }, 'Playlist'],
['li.recentSongs', {event: {click: function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.panel.active').removeClass('active');
$('.songlog-container .panel').addClass('active');
} } }, 'Recent Songs'],
} } }, 'Recent'],
['li.guestList', {event: {click: function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.panel.active').removeClass('active');
$('.guest-list-container').addClass('active');
} } }, 'Guest List'],
} } }, 'Listeners'],
['li.activityLog', {event: {click: function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.panel.active').removeClass('active');
$('.activity-log-container').addClass('active');
} } }, 'Activity Log'],
} } }, 'Log'],
['li.settings', {event: {click: function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.panel.active').removeClass('active');
$('.settings-container').addClass('active');
} } }, 'Settings'],
];
$('.bottom-bar').append(util.buildTree(panelButtons));

Expand All @@ -193,9 +199,72 @@
'div.activity-log-container.panel',
['div.title', 'Activity Log'],
['ul#activityLog', '']
]
];
$('#right-panel').append(util.buildTree(activityLog))


// Create Settings Panel
var settingsPanel = function(a,b) {
var notifyLabels = [
'When someone I fanned starts DJing',
'When someone becomes a fan of me',
'About new features, news, etc',
'At random times with pieces of pi',
];
var facebookLabels = [
'When I awesome in public rooms',
'When I join a public room',
'When I DJ in a public room'
];
var notifyContent = [],
facebookContent=[];
$(a).each(function(i) {
notifyContent.push([
'div.option',
['input', {type: 'checkbox', name: $(this).attr('name'), id: $(this).attr('name'), checked: $(this).attr('checked') }],
['label', {for: $(this).attr('name')}, notifyLabels[i]]
])
})
notifyContent.splice(0,0,['div.sectionTitle', 'Email me..'])
notifyContent.splice(0,0,'div.section')

$(b).each(function(i) {
facebookContent.push([
'div.option',
['input', {type: 'checkbox', name: $(this).attr('name'), id: $(this).attr('name'), checked: $(this).attr('checked') }],
['label', {for: $(this).attr('name')}, facebookLabels[i]]
])
})
facebookContent.splice(0,0,['div.sectionTitle', 'Publish to Facebook..'])
facebookContent.splice(0,0,'div.section')

return [
'div.content',
[
'form#emailSettings',
{event: {submit: function(){
$.post('/settings', $(this).serialize(), function() {
tt.room.showRoomTip('Settings saved..', 2);
});
return false;
}} },
notifyContent,
facebookContent,
['button', {type: 'submit'}, 'Save Settings']
]
]
};
$('#right-panel').append(util.buildTree([
'div.settings-container.panel',
['div.title', 'Settings']
]))
getSettings = function() { return $.get('/settings') }
$.when(getSettings()).then(function(a) {
var c = $(a).find('input[name*=notify]')
var b = $(a).find('input[name*=facebook]')
$('.settings-container').append(util.buildTree(settingsPanel(c,b)));

})

// Set Active Panel and Panel Button
$('.guest-list-container, .panelButtons .guestList').addClass('active');
// Overwrite setPage method
Expand Down Expand Up @@ -345,9 +414,11 @@
$('.songlog-container .panel .songlog').css({height: roomHeight-39-25-150}); // Songlog Element
$('.activity-log-container').css({height: roomHeight-39-150}); // Activity Log Container
$('.activity-log-container #activityLog').css({height: roomHeight-39-25-150}); // Songlog Panel Element
$('.chat-container').css({height: roomHeight*.4}); // Songlog Panel Element
$('.chat-container .messages').css({height: roomHeight*.4-38-25}); // Songlog Panel Element
$('.chat-container .chatHeader').css({bottom: roomHeight*.4-25}); // Songlog Panel Element
$('.settings-container').css({height: roomHeight-39-150}); // Settings Container
$('.settings-container .content').css({height: roomHeight-39-150-25}); // Settings Content Element
$('.chat-container').css({height: roomHeight*.4}); // Chat Container
$('.chat-container .messages').css({height: roomHeight*.4-38-25}); // Chat Messages Element
$('.chat-container .chatHeader').css({bottom: roomHeight*.4-25}); // Chat Header Element


// Reposition
Expand Down Expand Up @@ -456,6 +527,11 @@
} else { // Playlist data
}
}
if (b.rooms) {
if ($this.lastDirectoryGraph) { console.log((Date.now()-$this.lastDirectoryGraph)/1000) }
$this.lastDirectoryGraph = Date.now();
console.log('Directory Graph: ', b);
}
if (b.room&&!b.command) {
var users = b.users;
$this.currentSong = new CurrentSong();
Expand Down Expand Up @@ -514,6 +590,9 @@
for (i in votes) {
var activity = ['li', ((turntable.room.users[votes[i][0]]&&turntable.room.users[votes[i][0]].name)||'Anonymous user')+' voted '+votes[i][1]+'.'];
$('#activityLog').prepend(util.buildTree(activity));
if (votes[i][1]=='up'&&tt.room.downvoters.indexOf(votes[i][0])>=0) {

}
}
$this.currentSong.set({
upvotes: room.upvotes,
Expand Down Expand Up @@ -587,6 +666,7 @@
this.bind('change:downvotes', function(m, a) { $('#downvotes').html(a); });
this.bind('change:queues', function(m, a) { $('#queues').html(a); });
$('#upvotes, #downvotes, #queues').html(0);
tt.room.downvoters = [];
},
snag: function(a) {
var activity = ['li', tt.room.users[a.userid].name+' queued the song.'];
Expand Down

0 comments on commit 549a036

Please sign in to comment.