Markup/CSS rework, visual me vs others mix slider. No back-end wireup yet.

This commit is contained in:
Jonathon Wilson 2013-04-06 10:59:55 -06:00
parent d68b95cf73
commit b6e4a3fcea
3 changed files with 66 additions and 36 deletions

View File

@ -137,7 +137,7 @@
mixerIds.push(mixer.id);
var gainPercent = percentFromMixerValue(
mixer.range_low, mixer.range_high, mixer.volume_left);
$volumeSlider.find('.slider-volume').css('left', gainPercent + '%');
$volumeSlider.find('.handle').css('left', gainPercent + '%');
}
if (mixer.group_id === ChannelGroupIds.MonitorGroup) {
mixerIds.push(mixer.id);
@ -596,8 +596,8 @@
$('#tracks').on('mousemove', faderMouseMove);
$('body').on('mouseup', faderMouseUp);
$('#volume').on('click', 'div[control="fader"]', faderClick);
$('#volume').on('mousedown', '.slider-volume', faderHandleDown);
$('#session-controls .fader').on('click', 'div[control="fader"]', faderClick);
$('#session-controls .fader').on('mousedown', '.handle', faderHandleDown);
$('body').on('mousemove', faderMouseMove);
$('body').on('mouseup', faderMouseUp);

View File

@ -105,38 +105,49 @@ table.vu td {
/* Just bringing in Jeff's session.css file in entirety below */
/* But have modified significantly to make things work. Needs cleanup */
#session-controls {
.label {
float:left;
font-size:12px;
color:#ccc;
margin: 0px 0px 0px 4px;
}
.master-volume-label {
font-size:12px;
position:absolute;
left: 226px;
top: 16px;
}
.block {
float:left;
margin: 6px 8px 0px 8px;
}
#volume {
position:absolute;
top: 15px;
left: 284px;
width: 60px;
height: 24px;
font-size:12px;
color:#ccc;
background-image: url('/assets/content/bkg_volume.png');
background-repeat:no-repeat;
}
#volume div[control="fader"] {
position:absolute;
width: 60px;
height: 24px;
}
.fader {
float:left;
position: relative;
margin: 0px 0px 0px 4px;
width: 60px;
height: 24px;
}
[control="fader"] {
height: 24px;
}
.slider-volume {
position:absolute;
top:2px;
right:30px;
width:8px;
height:17px;
.fader.lohi {
background-image: url('/assets/content/bkg_volume.png');
background-repeat:no-repeat;
}
.fader.flat {
background-image: url('/assets/content/bkg_playcontrols.png');
height: 17px;
width: 80px;
}
.handle {
position:absolute;
top:2px;
width:8px;
height:17px;
}
}
.settings {

View File

@ -18,15 +18,34 @@
<%= image_tag "content/icon_share.png", {:align => "texttop", :height => 12, :width => 12} %>
SHARE
</a>
<div class="master-volume-label">VOLUME</div>
<div id="volume" mixer-id="">
<div control="fader" orientation="horizontal">
<div class="slider-volume" style="left:0%;" control="fader-handle">
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
<!-- Volume Slider -->
<div class="block">
<div class="label">VOLUME:</div>
<div id="volume" class="fader lohi" mixer-id="">
<div control="fader" orientation="horizontal">
<div class="handle" style="left:0%;" control="fader-handle">
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
</div>
</div>
</div>
</div>
<!-- Mix: Me versus Others -->
<div class="block">
<div class="label">MIX:</div>
<div class="label"><small>me</small></div>
<div class="fader flat" mixer-id="">
<div control="fader" orientation="horizontal">
<div class="handle" style="left:0%;" control="fader-handle">
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
</div>
</div>
</div>
<div class="label"><small>others</small></div>
</div>
<!-- Leave Button -->
<a class="button-grey right leave" href="#/home">X&nbsp;&nbsp;LEAVE</a>
</div>
<!-- end session controls -->