Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Redesigned Panel Buttons; Added Settings Panel; Added Emails Settings…

… to Settings Panel
  • Loading branch information...
commit 549a036a7992d2bb851b02e850d476d82e591303 1 parent 6be90fc
@overra overra authored
Showing with 212 additions and 46 deletions.
  1. +63 −18 css/style.css
  2. +59 −18 css/style.styl
  3. +90 −10 js/script.js
View
81 css/style.css
@@ -465,6 +465,51 @@ 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;
@@ -472,6 +517,7 @@ body .loading li:nth-child(n+2) {
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);
@@ -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);
@@ -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);
}
@@ -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;
View
77 css/style.styl
@@ -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
@@ -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)
View
100 js/script.js
@@ -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)
}
@@ -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));
@@ -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
@@ -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
@@ -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();
@@ -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,
@@ -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.'];
Please sign in to comment.
Something went wrong with that request. Please try again.