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-201 create session mockup integration

This commit is contained in:
Brian Smith 2013-01-10 22:43:30 -05:00
parent b6609eb39c
commit 6dab346305
8 changed files with 418 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/assets/javascripts/createSession.js
View File

@ -99,8 +99,6 @@ Message from Seth on sequence for creating/joining sessions:
errors.push(['textarea[name="description"]', "Please enter a description."]);
}
return (errors.length) ? errors : null;
}
@ -199,21 +197,39 @@ Message from Seth on sequence for creating/joining sessions:
function events() {
$('#create-session-form').submit(submitForm);
$('#added-invitations').on("click", ".invitation span", removeInvitation);
$('#genre-list-header').on("click", toggleGenreBox);
$('#genre-list-arrow').on("click", toggleGenreBox);
$('#musician-access').change(toggleMusicianAccess);
$('#fan-access').change(toggleFanAccess);
}
function removeInvitation(evt) {
$(evt.currentTarget).closest('.invitation').remove();
}
function genresLoaded(response) {
var options = [];
var optionTemplate = $('#template-genre-option').html();
$.each(response, function() {
var d = {value: this.id, label: this.description};
var opt = context.JK.fillTemplate(optionTemplate, d);
options.push(opt);
});
$('#create-session-form select[name="genres"]').html(options.join(''));
function toggleMusicianAccess() {
var value = $("#musician-access option:selected").val();
if (value == "private") {
$("[name='musician-access-option']").attr('disabled', 'disabled');
$("[name='musician-access-option']").parent().addClass("op50");
}
else {
$("[name='musician-access-option']").removeAttr('disabled');
$("[name='musician-access-option']").parent().removeClass("op50");
}
}
function toggleFanAccess() {
var value = $("#fan-access option:selected").val();
if (value == "private") {
$("[name='fan-chat-option']").attr('disabled', 'disabled');
$("[name='fan-chat-option']").parent().addClass("op50");
}
else {
$("[name='fan-chat-option']").removeAttr('disabled');
$("[name='fan-chat-option']").parent().removeClass("op50");
}
}
function loadGenres() {
@ -225,9 +241,60 @@ Message from Seth on sequence for creating/joining sessions:
});
}
function genresLoaded(response) {
$.each(response, function() {
var template = $('#template-genre-option').html();
var genreOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.description});
$('#genre-list-items').append(genreOptionHtml);
//$('#genre-list-items').append("<div class='list-item-text'><input type='checkbox' name='" + this.id + "'>" + this.description + "</div>");
});
}
function toggleGenreBox() {
var boxHeight = $('#genre-list').css("height");
// TODO: clean this up (check class name of arrow to determine current state)
if (boxHeight == "20px") {
$('#genre-list').css({height: "auto"});
$('#genre-list-arrow').removeClass("arrow-down").addClass("arrow-up");
}
else {
$('#genre-list').css({height: "20px"});
$('#genre-list-arrow').removeClass("arrow-up").addClass("arrow-down");
}
}
function loadBands() {
var url = "/api/users/" + context.JK.currentUserId + "/bands";
$.ajax({
type: "GET",
url: url,
success: bandsLoaded
});
}
function bandsLoaded(response) {
$.each(response, function() {
var template = $('#template-band-option').html();
var bandOptionHtml = context.JK.fillTemplate(template, {value: this.id, label: this.name});
$('#band-list').append(bandOptionHtml);
});
}
function enterText(div,v) {
cv = $(div).value;
if (cv != v && v != '' && cv != '') {
$(div).value = cv;
}
else {
$(div).value = v;
}
}
function initialize() {
events();
loadGenres();
loadBands();
var screenBindings = { 'afterShow': afterShow, 'beforeShow': beforeShow };
app.bindScreen('createSession', screenBindings);
}
@ -237,7 +304,9 @@ Message from Seth on sequence for creating/joining sessions:
this.resetForm = resetForm;
this.submitForm = submitForm;
this.loadGenres = loadGenres;
this.loadBands = loadBands;
this.validateForm = validateForm;
this.toggleGenreBox = toggleGenreBox;
return this;
};

1
app/assets/stylesheets/client/common.css.scss
View File

@ -10,6 +10,7 @@ $ColorText: #ffffff; /* White */
$ColorLink: #9ec030; /* Lime */
$ColorSidebarText: #a0b9bd;
$ColorScreenBackground: lighten($ColorUIBackground, 10%);
$ColorTextBoxBackground: #c5c5c5;
$color1: #006AB6; /* mid blue */
$color2: #9A9084; /* warm gray */

83
app/assets/stylesheets/client/createSession.css.scss Normal file
View File

@ -0,0 +1,83 @@
.content-scroller {
height:inherit;
position:relative;
display:block;
overflow:auto;
}
.content-wrapper {
padding:20px 30px 20px 36px;
font-size:15px;
color:#ccc;
border-bottom: dotted 1px #444;
}
.content-wrapper h2 {
color:#fff;
font-weight:600;
font-size:24px;
}
.session-left {
width:50%;
float:left;
}
.session-right {
width:45%;
float:right;
font-size:13px;
}
.session-description {
padding:5px;
width:100%;
height:80px;
}
.friendbox {
padding:5px;
width:100%;
height:60px;
}
.terms-checkbox {
float:left;
display:block;
margin-right:10px;
}
.terms {
font-size:11px;
width:85%;
overflow:hidden;
float:left;
display:block;
}
.invite-friend {
margin:0px 4px 4px 4px;
float:left;
display:block;
background-color:#666;
color:#fff;
font-size:12px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding:2px 2px 2px 4px;
}
div.friendbox {
background-color:#c5c5c5;
border:none;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
color:#333;
}
div.friendbox input[type=text] {
-webkit-box-shadow: inset 0px 0px 0px 0px #888;
box-shadow: inset 0px 0px 0px 0px #888;
color:#666;
font-style:italic;
}

111
app/assets/stylesheets/client/jamkazam.css.scss
View File

@ -30,10 +30,35 @@ a:hover {
text-decoration: underline;
}
a.arrow-up {
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #333;
}
a.arrow-down {
float:right;
margin-right:5px;
display:block;
margin-top:6px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
}
form {
clear:both;
margin: 1em;
}
form .body {
/* TODO - size with layout */
width: 100%;
@ -41,6 +66,7 @@ form .body {
max-height: 40%;
overflow:auto;
}
fieldset {
/*border: 1px solid #555;*/
/*padding: 1em;*/
@ -48,9 +74,11 @@ fieldset {
/*width:auto;*/
/*float:left;*/
}
fieldset.unstyled {
border: 1px solid #f00;
}
.formrow {
margin: 1em;
padding: 1em;
@ -71,6 +99,19 @@ label {
padding:8px;
}
input[type="button"] {
margin:0px 8px 0px 8px;
background-color:#666;
border: solid 1px #868686;
outline:solid 2px #666;
padding:3px 10px;
font-family:raleway;
font-size:12px;
font-weight:300;
cursor:pointer;
color:#ccc;
}
.hidden {
display:none;
}
@ -79,16 +120,17 @@ label {
background-color: shade($color7, 10%);
}
.avatar {
display: block;
float:left;
}
.avatar.medium {
width: 48px;
height: 48px;
margin-right: 12px;
}
.avatar.small {
width: 32px;
height: 32px;
@ -141,4 +183,71 @@ label {
.autocomplete strong { font-weight:normal; color:#3399FF; }
.multiselect-dropdown {
position:relative;
z-index:99;
width: 175px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color:#C5C5C5;
border: none;
color:#333;
font-weight:400;
padding:0px 0px 0px 8px;
height:20px;
line-height:20px;
overflow:hidden;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
}
.multiselect-dropdown a {
color:#333;
text-decoration:none;
}
.list-items {
float:left;
width:175px;
height:127px;
overflow:auto;
}
.list-item-text {
font-size:11px;
float:left;
width:135px;
}
input[type="text"] {
background-color: $ColorTextBoxBackground;
}
.mr10 {
margin-right:10px;
}
.mr20 {
margin-right:20px;
}
.mr30 {
margin-right:30px;
}
.ml10 {
margin-left:10px;
}
.ml20 {
margin-left:20px;
}
.ml30 {
margin-left:30px;
}
.op50 {
opacity: .5;
-ms-filter: "alpha(opacity=50)";
}

23
app/assets/stylesheets/client/screen_common.css.scss
View File

@ -17,13 +17,17 @@
background-color:#ED3618;
h1 {
margin: 0px 0px 0px 0px;
margin: -6px 0px 0px 0px;
padding:0;
float:left;
font-weight:100;
font-size:24px;
}
.content-icon {
margin-right:10px;
float:left;
}
.content-nav {
float:right;
@ -70,6 +74,7 @@
width:100%;
/*text-align:right;*/
}
.screen.secondary .footer button {
margin:1em 0em 1em 1em;
}
@ -90,3 +95,19 @@
.screen.secondary p.current {
font-weight: bold;
}
.left {
float:left;
}
.right {
float:right;
}
textarea {
background-color: $ColorTextBoxBackground;
border:none;
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
box-shadow: inset 2px 2px 3px 0px #888;
color:#333;
}

243
app/views/clients/_createSession.html.erb
View File

@ -1,136 +1,127 @@
<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary">
<div class="content-head">
<h1>Create Session</h1>
<%= render "screen_navigation" %>
</div>
<form id="create-session-form">
<div class="body">
<fieldset class="unstyled">
<legend>Unstyled and Lots of things omitted</legend>
<!--
<div class="formrow">
<label>Band
<select>
<option>Not a band session</option>
<option>The Killers</option>
<option>J&amp;J AdHoc Electronica Duo</option>
</select>
</label>
<div class="content">
<div class="content-head">
<div class="content-icon">
<a href=""><%= image_tag "content/icon_add.png", :size => "19x19" %></a>
</div>
<h1>create session</h1>
-->
<div class="formrow">
<fieldset>Musician Access
<label>
<input type="radio" value="true" checked="checked" name="musician_access" id="music_access_true"/>
Public
</label>
<label>
<input type="radio" value="false" name="musician_access" id="music_access_false"/>
Private
</label>
</fieldset>
</div>
<%= render "screen_navigation" %>
</div>
<form id="create-session-form">
<div class="content-scroller">
<div class="content-wrapper">
<!-- left column -->
<div class="session-left">
<h2>session info</h2>
<br />
Description:<br />
<textarea rows=4 class="session-description"></textarea>
<br />
<br />
<div class="left mr20">
Genre:<br />
<div id="genre-list" class="multiselect-dropdown">
<div class="list-item-text">
<a id="genre-list-header">Choose up to 3 genres</a>
</div>
<a class="arrow-down" id="genre-list-arrow"></a>
<div id="genre-list-items" class="list-items">
</div>
</div>
</div>
<div class="left">
Band:<br />
<select id="band-list">
<option>Not a Band Session</option>
</select>
</div>
<div class="formrow">
<fieldset>Musician Access Method
<label>
<input type="radio" value="true" name="approval_required" id="approval_required_false"/>
By request/approval
</label>
<label>
<input type="radio" value="false" checked="checked" name="approval_required" id="approval_required_false"/>
Open
</label>
</fieldset>
</div>
<br clear="all" />
<br />
<div class="formrow">
<label>Fan Access
<label>
<input type="radio" value="true" checked="checked" name="fan_access" id="fan_access_true" />
Public
</label>
<label>
<input type="radio" value="false" name="fan_access" id="fan_access_false" />
Private
</label>
</label>
</div>
Musician Access:<br />
<select id="musician-access" class="left mr20">
<option selected="selected" value="public">Public</option>
<option value="private">Private</option>
</select>
<div class="left">
<input type="radio" name="musician-access-option" checked="checked" />&nbsp;Open&nbsp;&nbsp;
<input type="radio" name="musician-access-option" />&nbsp;By Approval
</div>
<div class="formrow">
<label>Fan Chat
<label>
<input type="radio" value="true" checked="checked" name="fan_chat" id="fan_chat_true" />
Yes
</label>
<label>
<input type="radio" value="false" name="fan_chat" id="fan_chat_false"/>
No
</label>
</label>
</div>
<br clear="all" /><br />
<div class="formrow">
<label>Genres
<select multiple="multiple" name="genres">
</select>
</label>
<input type="text" class="hidden"/>
</div>
<div class="formrow">
<label>Tracks (TODO! - hardcoded in form handler)
</label>
</div>
<div class="formrow">
<label>Session Description</label>
<textarea name="description"></textarea>
</div>
<div class="formrow">
<div id="added-invitations"></div>
<div id="invitation-controls">
<label>Musician Invitations
<input id="invitations" type="text"/>
</label>
Fan Access:<br />
<select id="fan-access" class="left mr20">
<option value="public">Public</option>
<option selected="selected" value="private">Private</option>
</select>
<div class="left op50">
<input type="radio" name="fan-chat-option" disabled="disabled" />&nbsp;Chat&nbsp;&nbsp;
<input type="radio" name="fan-chat-option" disabled="disabled" />&nbsp;No Fan Chat
</div>
</div>
<!-- right column -->
<div class="session-right">
<h2>invite musicians</h2>
<br />
Start typing:<br /> <!-- or: <input type="button" value="CHOOSE FRIENDS" /><br /> -->
<br />
<!-- friend invitation box -->
<div class="friendbox">
<input id="friend-input" type="text" value="Type a friend's name" onfocus="enterText(this.id,'')" onblur="enterText(this.id,'Type a friend\'s name')" />
<div class="clearall"></div>
</div>
<br />
Invite friends and contacts to join you on JamKazam from:<br /><br />
<div class="left mr20">
<%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>&nbsp;&nbsp;Facebook
</div>
<div class="left mr20">
<%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %>&nbsp;&nbsp;Twitter
</div>
<div class="left">
<%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>&nbsp;&nbsp;E-mail
</div>
<br clear="all" />
<br />
<!-- terms -->
<div class="terms-checkbox">
<input type="checkbox" />
</div>
<div class="terms">
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance awith the JamKazam Terms of Service.
</div>
</div>
<br clear="all" />
<div class="right">
<input type="submit" id="btn-create-session" class="jam-button" value="JAM!" />&nbsp;
<button layout-link="home" class="mr10">CANCEL</button>
</div>
<br clear="all" />
</div>
</div>
<!--
<div class="formrow">
<label>Fan Invitations
<label>
<input type="checkbox"/>
Post link to this session for fans on
</label>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Google+</a>
</label>
<p><a href="#">
Upgrade your Studio subscription to let more fans listen
</a></p>
</div>
-->
<div class="formrow">
<label>Legal Terms
<input type="checkbox" name="legal_terms"/>
I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the Creative Commons CC BY-NC-SA license in accordance with the JamKazam Terms of Service.
</label>
</div>
<!--<div class="body">
</fieldset>
</div>
<div class="footer">
<input type="submit" id="btn-create-session" value="Create Session"/>
<button layout-link="home">Cancel</button>
</div>
</form>
<div class="formrow">
<div id="added-invitations"></div>
<div id="invitation-controls">
<label>Musician Invitations
<input id="invitations" type="text"/>
</label>
</div>
</div>
</div>
<div class="footer">
<input type="submit" id="btn-create-session" value="JAM!"/>
<button layout-link="home">CANCEL</button>
</div>-->
</form>
</div>
</div>
<!-- Added Invitation Template -->
@ -140,9 +131,15 @@
<!-- Genre option template -->
<script type="text/template" id="template-genre-option">
<div class="list-item-text"><input type="checkbox" name="{value}"> {label}</div>
</script>
<!-- Band option template -->
<script type="text/template" id="template-band-option">
<option value="{value}">{label}</option>
</script>
<!-- Create Session:Audio Screen -->
<!-- Keeping as this will move into a user settings dialog... -->
<div layout="screen" layout-id="createSessionAudio" class="screen secondary">
@ -260,9 +257,9 @@
<label>VU Meter goes here</label>
</fieldset>
<div class="footer">
<button layout-link="createSessionInvite">Back</button>
<button layout-link="session">Jam</button>
<button layout-link="home">Cancel</button>
<button layout-link="createSessionInvite">Back</button>
<button layout-link="session">Jam</button>
<button layout-link="home">Cancel</button>
</div>
</form>
</div>

2
app/views/clients/_footer.html.erb
View File

@ -1,6 +1,6 @@
<div class="footer">
<p class="left">
Copyright &copy; 2012 JamKazam, Inc. All Rights Reserved.
Copyright &copy; <%= Time.now.year %> JamKazam, Inc. All Rights Reserved.
</p>
<p class="right">
<a href="/#/contact">contact</a> |

1
app/views/layouts/client.html.erb
View File

@ -19,6 +19,7 @@
<%= stylesheet_link_tag "client/session", media: "all" %>
<%= stylesheet_link_tag "client/search", media: "all" %>
<%= stylesheet_link_tag "client/lato", media: "all" %>
<%= stylesheet_link_tag "client/createSession", media: "all" %>
<%= include_gon %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>