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

Add dialog visual pieces

This commit is contained in:
Jonathon Wilson 2013-03-19 19:14:23 -06:00
parent 67fd1fa30c
commit 8333042806
7 changed files with 264 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/content/arrow_left_24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
app/assets/images/content/arrow_right_24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -7,7 +7,8 @@ $ColorUIBackground: #262626; /* Dark Grey */
$ColorScreenPrimary: #ed3618; /* Orange */
$ColorElementPrimary: #0b6672; /* Teal */
$ColorText: #ffffff; /* White */
$ColorLink: #9ec030; /* Lime */
$ColorLink: #fc0;
$ColorLinkHover: #82AEAF;
$ColorSidebarText: #a0b9bd;
$ColorScreenBackground: lighten($ColorUIBackground, 10%);
$ColorTextBoxBackground: #c5c5c5;

40
app/assets/stylesheets/client/dialog.css.scss
View File

@ -2,24 +2,40 @@
.dialog {
display:none;
background-color:$ColorElementPrimary;
background-color: #333;
border: #666;
color:#000;
color:#fff;
min-width: 400px;
min-height: 350px;
z-index: 100;
}
.dialog a {
color: $color1;
.dialog-inner {
padding:25px;
color:#aaa;
font-size:15px;
}
.dialog h1 {
font-weight: bold;
font-size: 150%;
margin: 12px;
.dialog-tabs {
text-align:center;
margin-bottom:10px;
border-bottom:solid 1px #999;
}
.dialog .panel {
background-color: shade($ColorElementPrimary, 6%);
margin:12px;
padding: 12px;
.dialog-tabs a {
padding:10px;
background-color:#666;
color:#999;
text-decoration:none;
}
.dialog-tabs a.selected, .dialog-tabs a:hover {
background-color:#999;
color:#fff;
}
.dialog .tab {
}

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

@ -33,6 +33,7 @@ a {
a:hover {
text-decoration: underline;
color: $ColorLinkHover;
}
a.arrow-up {
@ -60,7 +61,8 @@ a.arrow-down {
}
select {
font-size:12px;
padding:3px;
font-size:15px;
}
form .body {
@ -277,8 +279,11 @@ input[type="text"] {
background-color:$ColorTextBoxBackground;
border:none;
color:#666;
padding:3px;
font-size:15px;
}
.mr10 {
margin-right:10px;
}
@ -312,6 +317,16 @@ input[type="text"] {
-ms-filter: "alpha(opacity=50)";
}
.op30 {
opacity: .3;
-ms-filter: "alpha(opacity=30)";
}
.nowrap {
display:inline-block;
white-space:nowrap;
}
.left {
float:left;
}
@ -341,7 +356,53 @@ input[type="text"] {
font-size:11px;
color:#F00;
}
.grey {
color:#999;
}
.darkgrey {
color:#333;
}
.w10 {
width:10%;
}
.w20 {
width:20%;
}
.w30 {
width:30%;
}
.w40 {
width:40%;
}
.w50 {
width:50%;
}
.w60 {
width:60%;
}
.w70 {
width:70%;
}
.w80 {
width:80%;
}
.w90 {
width:90%;
}
.w100 {
width:100%;
}
/* TODO - we need a separate stylesheet(s) for signin/signup screens */
/* Following is a style adjustment for the sign-in table spacing */

1
app/views/clients/_header.html.erb
View File

@ -3,6 +3,7 @@
<!-- logo -->
<h1>Jamkazam</h1>
<a layout-link="configure-audio">Dialog</a>
<!--
<a href="/#/testBridge">Test Javascript Bridge Page</a>

171
app/views/clients/_session.html.erb
View File

@ -132,6 +132,177 @@
</div> <!-- end of #tracks -->
</div> <!-- end of screen -->
<!-- Configure Track Dialog -->
<!-- Initially just dropped in from Jeff's mockup HTML -->
<!-- TODO: REFACTOR for reusable dialogs -->
<!-- <div class="dialog-overlay dialog-fixed" layout="dialog" layout-id="configure-audio"> -->
<div class="dialog" layout="dialog" layout-id="configure-audio" style="max-width:750px;">
<!-- dialog header -->
<div class="content-head">
<%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' } %>
<h1>configure tracks</h1>
</div>
<div class="dialog-inner">
<div class="dialog-tabs">
<a>Audio Inputs</a>
<a>Audio Outputs</a>
<a class="selected">Voice Chat</a>
</div>
Use arrow buttons to assign audio inputs to your tracks, and choose what
instrument you are playing on each track. Please note that you may only
use one audio device for all audio inputs and outputs. If you don't see
an audio device you think should be listed
<a href="#">view this help topic to understand why</a>.<br /><br />
<!-- Panel for Audio Inputs Tab -->
<div class="tab" tab-id="audio-inputs" style="display:none;">
<div class="left w30">
Unused Inputs:<br />
<select class="w100" multiple="multiple" size="15">
<option>AUDIO INPUTS GO HERE</option>
</select><br />
<br />
<a class="button-grey">ADD NEW AUDIO GEAR</a>
</div>
<!-- Middle Column -->
<div class="left w30 mr30">
<div class="left mr5 ml5">
<br />
<%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
<br />
<%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
</div>
Track 1 Input:<br />
<select class="w80" multiple="multiple" style="height:70px">
<option>USB Audio Codec 1</option>
</select>
<br clear="left" /><br />
<div class="left mr5 ml5">
<br />
<%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
<br />
<%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
</div>
Track 2 Input:<br />
<select class="w80" multiple="multiple" style="height:70px">
<option>USB Audio Codec 1</option>
</select>
<br clear="left" /><br />
<div class="left mr5 ml5">
<br />
<%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
<br />
<%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
</div>
Track 3 Input:<br />
<select class="w80" multiple="multiple" style="height:70px">
<option>USB Audio Codec 1</option>
</select>
</div>
<!-- End Middle Column -->
<!-- Right Column -->
<div class="left w30">
Track 1 Instrument:<br />
<select class="w100" multiple="multiple" style="height:70px">
<option>Acoustic Guitar</option>
</select>
<br />
<br />
Track 2 Instrument:<br />
<select class="w100" multiple="multiple" style="height:70px">
<option>Acoustic Guitar</option>
</select>
<br />
<br />
Track 3 Instrument:<br />
<select class="w100" multiple="multiple" style="height:70px">
<option>Acoustic Guitar</option>
</select>
</div>
<!-- End Right Column -->
</div> <!-- End Panel for Audio Inputs Tab -->
<!-- Panel for Audio Outputs -->
<div class="tab" tab-id="audio-inputs" style="display:none;">
<div class="left w50">
Unused Outputs:<br />
<select class="w100" multiple="multiple" size="8">
<option>Conexant HD Audio...</option>
<option>Conexant HD Audio...</option>
</select><br />
<br />
<a class="button-grey">ADD NEW AUDIO GEAR</a>
</div>
<div class="left w50">
<div class="left mr5 ml5">
<br />
<%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %>
<br/>
<br />
<%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
</div>
Session Audio Output:<br />
<select class="w90" multiple="multiple" size="8"><option>USB Audio Codec 1</option><option>USB Audio Codec 2</option></select>
</div>
</div>
<!-- End Panel for Audio Outputs -->
<!-- Panel for Voice Chat -->
<div class="tab" tab-id="audio-inputs">
<div class="left w50">
Unused Inputs:<br />
<select class="w100" multiple="multiple" size="8">
<option>Conexant HD Audio...</option>
<option>Conexant HD Audio...</option>
</select><br />
<br />
<a class="button-grey">ADD NEW AUDIO GEAR</a>
</div>
<div class="left w50">
<div class="left mr5 ml5">
<br />
<%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %>
<br/>
<br />
<%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
</div>
Voice Chat Input:<br />
<select class="w80" multiple="multiple" size="8">
<option>USB Audio Codec 1</option>
<option>USB Audio Codec 2</option>
</select>
</div>
</div>
<!-- End Panel for Voice Chat -->
<!-- Button Bar -->
<br clear="left" /><br />
<div class="right">
<a href="#" class="button-grey">CANCEL</a>&nbsp;
<a href="#" class="button-orange">UPDATE SETTINGS</a>
</div>
<br clear="all" />
<!-- End Button Bar -->
</div> <!-- end inner -->
</div><!-- end configure track dialog -->
<!-- Track Template -->
<script type="text/template" id="template-session-track">
<div class="session-track track" client-id="{clientId}">