seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-1020 share dialog work

This commit is contained in:
Brian Smith 2014-01-25 10:37:15 -05:00
parent d6a38f6bee
commit dcea238631
14 changed files with 516 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/assets/javascripts/session.js
View File

@ -1319,6 +1319,7 @@
configureTrackDialog.showVoiceChatPanel(true);
configureTrackDialog.showMusicAudioPanel(true);
});
$('#close-playback-recording').on('click', closeRecording);
$(playbackControls)
.on('pause', onPause)

102
web/app/assets/javascripts/shareDialog.js Normal file
View File

@ -0,0 +1,102 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.ShareDialog = function(app) {
var logger = context.JK.logger;
var rest = context.JK.Rest();
function registerEvents(onOff) {
}
/*function showEmailDialog() {
$('#invitation-dialog').show();
$('#invitation-textarea-container').show();
$('#invitation-checkbox-container').hide();
$('#btn-send-invitation').show();
$('#btn-next-invitation').hide();
clearTextFields();
app.layout.showDialog('inviteUsers')
}
function showGoogleDialog() {
$('#invitation-dialog').show();
$('#invitation-textarea-container').hide();
$('#invitation-checkbox-container').show();
$('#btn-send-invitation').hide();
$('#btn-next-invitation').show();
clearTextFields();
app.layout.showDialog('inviteUsers')
$('#invitation-checkboxes').html('<div style="text-align: center; margin-top: 100px;">Loading your contacts...</div>');
window._oauth_callback = function() {
window._oauth_win.close();
window._oauth_win = null;
window._oauth_callback = null;
$.ajax({
type: "GET",
url: "/gmail_contacts",
success: function(response) {
$('#invitation-checkboxes').html('');
for (var i in response) {
$('#invitation-checkboxes').append("<label><input type='checkbox' class='invitation-checkbox' data-email='" + response[i] + "' /> " + response[i] + "</label>");
}
$('.invitation-checkbox').change(function() {
var checkedBoxes = $('.invitation-checkbox:checkbox:checked');
var emails = '';
for (var i = 0; i < checkedBoxes.length; i++) {
emails += $(checkedBoxes[i]).data('email') + ', ';
}
emails = emails.replace(/, $/, '');
// track how many of these came from google
$('#txt-emails').val(emails).data('google_invite_count', checkedBoxes.length);
});
},
error: function() {
$('#invitation-checkboxes').html("Load failed!");
}
});
};
window._oauth_win = window.open("/auth/google_login", "_blank", "height=500,width=500,menubar=no,resizable=no,status=no");
}
function showFacebookDialog() {
window._oauth_callback = function() {
window._oauth_win.close();
window._oauth_win = null;
window._oauth_callback = null;
};
window._oauth_win = window.open("/auth/facebook_login", "_blank", "height=500,width=500,menubar=no,resizable=no,status=no");
}*/
function clearTextFields() {
}
function beforeShow() {
registerEvents(true);
}
function afterHide() {
registerEvents(false);
}
function initialize(){
var dialogBindings = {
'beforeShow' : beforeShow,
'afterHide': afterHide
};
app.bindDialog('shareSessionRecording', dialogBindings);
};
this.initialize = initialize;
}
return this;
})(window,jQuery);

26
web/app/assets/javascripts/web/recordings.js
View File

@ -1,32 +1,10 @@
$(function() {
function search() {
var locationQuery = $('#location').val().length > 0 ? $('#location').val() : '';
function like() {
var searchUrl = "/search";
if (locationQuery.length > 0) {
searchUrl = searchUrl + "?location=" + encodeURIComponent(locationQuery);
if ($('#activity').val().length > 0) {
searchUrl = searchUrl + "&activity=" + encodeURIComponent($('#activity').val());
}
}
else {
if ($('#activity').val().length > 0) {
searchUrl = searchUrl + "?activity=" + encodeURIComponent($('#activity').val());
}
}
window.location.href = searchUrl;
}
// search click handler
$('#btnSearch').click(search);
$('#btnlike').click(like);
$("#location").keypress(function(evt) {
if (evt.which === 13) {
evt.preventDefault();
search();
}
});
});

26
web/app/assets/javascripts/web/sessions.js
View File

@ -1,32 +1,10 @@
$(function() {
function search() {
var locationQuery = $('#location').val().length > 0 ? $('#location').val() : '';
function like() {
var searchUrl = "/search";
if (locationQuery.length > 0) {
searchUrl = searchUrl + "?location=" + encodeURIComponent(locationQuery);
if ($('#activity').val().length > 0) {
searchUrl = searchUrl + "&activity=" + encodeURIComponent($('#activity').val());
}
}
else {
if ($('#activity').val().length > 0) {
searchUrl = searchUrl + "?activity=" + encodeURIComponent($('#activity').val());
}
}
window.location.href = searchUrl;
}
// search click handler
$('#btnSearch').click(search);
$('#btnlike').click(like);
$("#location").keypress(function(evt) {
if (evt.which === 13) {
evt.preventDefault();
search();
}
});
});

3
web/app/assets/javascripts/web/web.js
View File

@ -6,6 +6,7 @@
//= require AAC_underscore
//= require globals
//= require invitationDialog
//= require shareDialog
//= require layout
//= require user_dropdown
//= require jamkazam
@ -16,3 +17,5 @@
//= require landing/signup
//= require web/downloads
//= require web/congratulations
//= require web/sessions
//= require web/recordings

2
web/app/assets/stylesheets/client/client.css
View File

@ -32,6 +32,8 @@
*= require ./search
*= require ./ftue
*= require ./invitationDialog
*= require ./shareDialog
*= require ./widget
*= require ./recordingFinishedDialog
*= require ./localRecordingsDialog
*= require ./createSession

201
web/app/assets/stylesheets/client/screen_common.css.scss
View File

@ -169,8 +169,8 @@ a {
display:inline-block;
}
small {
font-size:11px;
small, .small {
font-size:11px;
}
.button-grey {
@ -207,6 +207,11 @@ small {
text-decoration:none;
}
.smallbutton {
font-size:10px;
padding:2px 8px;
}
.button-orange:hover {
background-color:#f16750;
color:#FFF;
@ -230,49 +235,24 @@ a img {
border:none;
}
.clearall {
clear:both;
}
.clearall {clear:both;}
.left {float:left;}
.right {float:right;}
.center {text-align:center !important;}
.left {
float:left;
}
.right {
float:right;
}
.f8 {
font-size: 8px !important;
}
.f9 {
font-size: 9px !important;
}
.f10 {
font-size: 10px !important;
}
.f11 {
font-size: 11px !important;
}
.f12 {
font-size: 12px !important;
}
.f13 {
font-size: 13px !important;
}
.f14 {
font-size: 14px !important;
}
.f15 {
font-size: 15px !important;
}
.f8 {font-size:8px !important}
.f9 {font-size:9px !important}
.f10 {font-size:10px !important}
.f11 {font-size:11px !important}
.f12 {font-size:12px !important}
.f13 {font-size:13px !important}
.f14 {font-size:14px !important}
.f15 {font-size:15px !important}
.f16 {font-size:16px !important}
.f17 {font-size:17px !important}
.f18 {font-size:18px !important}
.f19 {font-size:19px !important}
.f20 {font-size:20px !important}
.m0 {
margin: 0 !important;
@ -322,73 +302,54 @@ a img {
margin-left:25px;
}
.ml30 {
margin-left:30px;
}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml45 {margin-left:45px;}
.ml35 {
margin-left:35px;
}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mt45 {margin-top:45px;}
.mt50 {margin-top:50px;}
.mt55 {margin-top:55px;}
.mt65 {margin-top:65px;}
.ml45 {
margin-left:45px;
}
.mb5 {margin-bottom:5px;}
.mb15 {margin-bottom:15px;}
.mt5 {
margin-top:5px;
}
.w0 {width:0% !important}
.w5 {width:5% !important}
.w10 {width:10% !important}
.w15 {width:15% !important}
.w20 {width:20% !important}
.w25 {width:25% !important}
.w30 {width:30% !important}
.w35 {width:35% !important}
.w40 {width:40% !important}
.w45 {width:45% !important}
.w50 {width:50% !important}
.w55 {width:55% !important}
.w60 {width:60% !important}
.w65 {width:65% !important}
.w70 {width:70% !important}
.w75 {width:75% !important}
.w80 {width:80% !important}
.w85 {width:85% !important}
.w90 {width:90% !important}
.w95 {width:95% !important}
.w100 {width:100% !important}
.mt10 {
margin-top:10px;
}
.mt15 {
margin-top:15px;
}
.mt20 {
margin-top:20px;
}
.mt25 {
margin-top:25px;
}
.mt30 {
margin-top:30px;
}
.mt35 {
margin-top:35px;
}
.mt40 {
margin-top:40px;
}
.mt45 {
margin-top:45px;
}
.mt50 {
margin-top:50px;
}
.mt55 {
margin-top:55px;
}
.mt65 {
margin-top:65px;
}
.mb5 {
margin-bottom:5px;
}
.mb15 {
margin-bottom:15px;
}
.p5 {padding:5px !important}
.p10 {padding:10px !important}
.p15 {padding:15px !important}
.p20 {padding:20px !important}
.p25 {padding:25px !important}
.p30 {padding:30px !important}
.op50 {
opacity: .5;
@ -443,20 +404,16 @@ a img {
width:239px;
}
.white {
color:#fff;
}
.lightgrey {
color:#ccc;
}
.grey {
color:#999;
}
.darkgrey {
color:#333;
}
.white {color:#fff;}
.lightgrey {color:#ccc;}
.grey {color:#999;}
.darkgrey {color:#333;}
.orange {color:#ED3618 !important;}
.teal {color:#2b8897;}
.green-fill {background-color:#72a43b;}
.gold-fill {background-color:#cc9900;}
.red-fill {background-color:#660000;}
.orange-fill {background-color:#ed3618;}
.teal-fill {background-color:#0b6672;}
/* End of Jeff's common.css file */

11
web/app/assets/stylesheets/client/shareDialog.css.scss Normal file
View File

@ -0,0 +1,11 @@
@import 'widget.css.scss'
h3 {
display: block;
font-size: 1.17em !important;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

185
web/app/assets/stylesheets/client/widget.css.scss Normal file
View File

@ -0,0 +1,185 @@
body.widgets {
background:#fff;
padding:20px;
}
.widget {
width:430px;
height:180px;
background:#353535;
border:solid 1px;
text-align:left;
}
.widget.session {
border-color:#0b6672;
}
.widget.recording {
border-color:#ed3618;
}
.widget-header {
color:#fff;
font-size:17px;
padding:8px;
}
.widget-content {
width:100%;
color:#ccc;
position:relative;
}
.widget-avatar {
top:15px;
left:15px;
position:absolute;
padding:2px;
width:110px;
height:110px;
background-color:#ed3618;
-webkit-border-radius:57px;
-moz-border-radius:57px;
border-radius:57px;
margin-bottom:10px;
}
.widget-avatar img {
width:110px;
height:110px;
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
}
.widget-playbutton {
position:absolute;
top:55px;
left:55px;
width:35px;
height:31px;
background-image:url(../images/shared/play_button.png);
background-repeat:no-repeat;
}
.widget-pausebutton {
position:absolute;
top:55px;
left:55px;
width:35px;
height:31px;
background-image:url(../images/shared/pause_button.png);
background-repeat:no-repeat;
}
.widget-title {
font-size:18px;
position:absolute;
top:20px;
left:153px;
width:260px;
height:22px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.widget-description {
font-size:13px;
position:absolute;
top:15px;
left:153px;
width:260px;
height:32px;
overflow:hidden;
text-overflow:ellipsis;
}
.widget-controls {
position:absolute;
top:25px;
left:153px;
width:270px;
height:32px;
}
.widget-members {
position:absolute;
left:153px;
top:60px;
width:280px;
height:38px;
overflow:hidden;
}
.widget-social {
position:absolute;
top:75px;
left:153px;
width:270px;
height:20px;
font-size:13px;
}
.widget-branding {
position: absolute;
top: 110px;
right: 8px;
width: 270px;
height: 34px;
font-size: 13px;
text-align:right;
}
.widget .recording-controls {
margin-top:0px;
height:22px;
padding:8px 5px;
}
.widget .recording-playback {
width:65%;
}
.widget .recording-position {
margin-left:-30px;
width:95%;
}
.widget .recording-current {
top:8px;
}
.widget a {
color:#ccc;
text-decoration:none;
}
img.space {
margin-left:28px;
}
.widget a:hover {
color:#fff;
}
.widget-avatar-small {
float:left;
padding:1px;
width: 36px;
height:36px;
background-color:#ed3618;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
margin-right:15px;
}
.widget-avatar-small img {
width: 36px;
height: 36px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border-radius:18px;
}

2
web/app/assets/stylesheets/web/web.css
View File

@ -7,6 +7,8 @@
*= require client/user_dropdown
*= require client/dialog
*= require client/invitationDialog
*= require client/shareDialog
*= require client/widget
*= require web/main
*= require web/footer
*= require web/recordings

3
web/app/views/clients/_session.html.erb
View File

@ -18,7 +18,7 @@
<%= image_tag "content/icon_settings_sm.png", {:align => "texttop", :height => 12, :width => 12} %>
SETTINGS
</a>
<a class="button-grey left">
<a layout-link="share-dialog" class="button-grey left">
<%= image_tag "content/icon_share.png", {:align => "texttop", :height => 12, :width => 12} %>
SHARE
</a>
@ -137,6 +137,7 @@
<%= render "addNewGear" %>
<%= render "error" %>
<%= render "sessionSettings" %>
<%= render "shareDialog" %>
<!-- Track Template -->
<script type="text/template" id="template-session-track">

120
web/app/views/clients/_shareDialog.html.erb Normal file
View File

@ -0,0 +1,120 @@
<!-- Share dialog -->
<div class="dialog" layout="dialog" layout-id="share-dialog">
<div class="content-head"><h1>share this session</h1></div>
<div class="dialog-inner">
<div class="right"> <a class="button-orange" layout-action="close">X CLOSE</a></div>
<table class="w100">
<tr>
<td valign="top" width="45%" class="border-right"><h3 class="mb5">Share to Social Media:</h3>
<textarea class="w95" rows="3">Add a Message...</textarea><br />
<div class="left">
<input type="checkbox" />
<%= image_tag "content/icon_facebook.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
<input type="checkbox" />
<%= image_tag "content/icon_twitter.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
<input type="checkbox" />
<%= image_tag "content/icon_google.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>&nbsp;
</div>
<div class=" right mr10 mt5"><a class="button-orange" id="dialog-share-button">SHARE</a></div>
</td>
<td valign="top" width="48%">
<div class="ml10">
<h3>Share a Link:</h3><br />http://jamkazam.com/TD48JKZ1<br /><br />
<div class="right"><a class="button-orange">COPY LINK</a></div>
</div>
</td>
</tr>
<tr><td colspan=2 class="border-bottom"><br /><br /></td></tr>
</table><br /><br />
<table class="w100">
<tr>
<td valign="top" width="40%"><h3>Get a Widget:</h3>
<!-- ########## Javascript code for widget ########## -->
<textarea class="w95" rows="10">
<!-- session widget -->
<div class="widget session">
<!-- header -->
<div class="widget-header orange-fill"><strong>LIVE SESSION</strong> by Raven &amp; The Blackbirds</div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img src="images/content/avatar_band4.jpg" alt=""/></div>
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
<!-- song title -->
<div class="widget-controls">
<!-- timeline and controls -->
<div class="w100">
<!-- recording play controls -->
<div class="recording-controls">
<!-- playback position -->
<div class="recording-position">
<!-- start time -->
<div class="recording-time">0:00</div>
<!-- playback background & slider -->
<div class="recording-playback">
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
</div>
<!-- end time -->
<div class="recording-time">4:59</div>
</div>
<!-- end playback position -->
<!-- current playback time -->
<div class="recording-current">1:23</div>
</div>
<!-- end recording play controls -->
</div>
</div>
<!-- band member avatars -->
<div class="widget-social">&nbsp;
<a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/>&nbsp;&nbsp;LIKE</a>
<a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/>&nbsp;&nbsp;COMMENT</a>
<a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/>&nbsp;&nbsp;SHARE</a>
</div>
<!-- jamkazam branding -->
<div class="widget-branding">recorded on
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</textarea> <br /><br />
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
</td>
<td>
<div class="ml10">Preview:
<!-- recording widget -->
<div class="widget recording">
<!-- header -->
<div class="widget-header orange-fill"><strong>LIVE SESSION</strong> by Raven &amp; The Blackbirds</div>
<!-- start widget content -->
<div class="widget-content">
<!-- band avatar -->
<div class="widget-avatar"><img src="images/content/avatar_band4.jpg" alt=""/></div>
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
<!-- song title -->
<div class="widget-title">You Hurt Me Bad</div>
<!-- band member avatars -->
<div class="widget-members">
<div class="widget-avatar-small"><img src="images/shared/avatar_david.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_creepyeye.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_saltnpepper.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_creepyeye.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_silverfox.jpg" alt=""/></div>
<div class="widget-avatar-small"><img src="images/shared/avatar_saltnpepper.jpg" alt=""/></div>
</div>
<!-- jamkazam branding -->
<div class="widget-branding">live session on <a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
</div>
</div>
<!-- end widget content -->
</div>
<!-- /widget -->
</div>
</td>
</tr>
</table>
</div>
</div>

3
web/app/views/clients/index.html.erb
View File

@ -97,6 +97,9 @@
var invitationDialog = new JK.InvitationDialog(JK.app);
invitationDialog.initialize();
var shareDialog = new JK.ShareDialog(JK.app);
shareDialog.initialize();
var localRecordingsDialog = new JK.LocalRecordingsDialog(JK.app);
localRecordingsDialog.initialize();

2
web/app/views/music_sessions/show.html.erb
View File

@ -68,3 +68,5 @@
<% end %>
<%= javascript_include_tag "web/sessions" %>
<%= render "clients/shareDialog" %>