VRFS-356 fix alignment problems on configure / add track dialogs
This commit is contained in:
Brian Smith
parent
10d4ccaaea
commit
dffe182073
|
|
@ -101,20 +101,20 @@
|
|||
|
||||
function toggleTrack2ConfigDetails(visible) {
|
||||
if (visible) {
|
||||
$('#track2-arrows-div').show();
|
||||
$('#track2-input-div').show();
|
||||
$('#track2-instrument-div').show();
|
||||
|
||||
$('#track1-input').height('70px');
|
||||
$('#track1-instrument').height('70px');
|
||||
$('#track2-details').show();
|
||||
$('#track2-input-buttons').show();
|
||||
$('#track1-input').height('92px');
|
||||
$('#track1-instrument').height('92px');
|
||||
$('#track1-input-buttons').addClass('mt30');
|
||||
$('#track1-input-buttons').removeClass('mt65');
|
||||
}
|
||||
else {
|
||||
$('#track2-arrows-div').hide();
|
||||
$('#track2-input-div').hide();
|
||||
$('#track2-instrument-div').hide();
|
||||
|
||||
$('#track1-input').height('145px');
|
||||
$('#track1-instrument').height('145px');
|
||||
$('#track2-details').hide();
|
||||
$('#track2-input-buttons').hide();
|
||||
$('#track1-input').height('195px');
|
||||
$('#track1-instrument').height('195px');
|
||||
$('#track1-input-buttons').addClass('mt65');
|
||||
$('#track1-input-buttons').removeClass('mt30');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -713,7 +713,8 @@
|
|||
this.initialize = function() {
|
||||
events();
|
||||
_init();
|
||||
toggleTrack2ConfigDetails(myTrackCount > 1);
|
||||
// toggleTrack2ConfigDetails(myTrackCount > 1);
|
||||
toggleTrack2ConfigDetails(false);
|
||||
};
|
||||
|
||||
this.showMusicAudioPanel = showMusicAudioPanel;
|
||||
|
|
|
|||
|
|
@ -381,14 +381,30 @@ input[type="text"], input[type="password"]{
|
|||
width:20%;
|
||||
}
|
||||
|
||||
.w25 {
|
||||
width:25%;
|
||||
}
|
||||
|
||||
.w27 {
|
||||
width:27%;
|
||||
}
|
||||
|
||||
.w30 {
|
||||
width:30%;
|
||||
}
|
||||
|
||||
.w38 {
|
||||
width:38%;
|
||||
}
|
||||
|
||||
.w40 {
|
||||
width:40%;
|
||||
}
|
||||
|
||||
.w45 {
|
||||
width:45%;
|
||||
}
|
||||
|
||||
.w50 {
|
||||
width:50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,6 +252,10 @@ a img {
|
|||
margin-right:35px;
|
||||
}
|
||||
|
||||
.mr40 {
|
||||
margin-right:40px;
|
||||
}
|
||||
|
||||
.mr120 {
|
||||
margin-right:120px;
|
||||
}
|
||||
|
|
@ -280,6 +284,10 @@ a img {
|
|||
margin-left:35px;
|
||||
}
|
||||
|
||||
.ml45 {
|
||||
margin-left:45px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
|
@ -288,6 +296,22 @@ a img {
|
|||
margin-top:10px;
|
||||
}
|
||||
|
||||
.mt15 {
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.mt25 {
|
||||
margin-top:25px;
|
||||
}
|
||||
|
||||
.mt30 {
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
.mt35 {
|
||||
margin-top:35px;
|
||||
}
|
||||
|
|
@ -296,6 +320,22 @@ a img {
|
|||
margin-top:40px;
|
||||
}
|
||||
|
||||
.mt45 {
|
||||
margin-top:45px;
|
||||
}
|
||||
|
||||
.mt50 {
|
||||
margin-top:50px;
|
||||
}
|
||||
|
||||
.mt55 {
|
||||
margin-top:55px;
|
||||
}
|
||||
|
||||
.mt65 {
|
||||
margin-top:65px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,37 +5,59 @@
|
|||
<h1>add a track</h1>
|
||||
</div>
|
||||
<div class="dialog-inner">
|
||||
Use arrow buttons to assign audio inputs to this new track, and choose what instrument you are playing on this 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 />
|
||||
<div class="left w30">
|
||||
Unused Inputs:<br />
|
||||
<select id="add-track2-unused" class="w100" multiple="multiple" size="6">
|
||||
</select>
|
||||
<br /><br />
|
||||
<a layout-link="add-new-audio-gear" class="button-grey">ADD NEW AUDIO GEAR</a>
|
||||
<div>
|
||||
Use arrow buttons to assign audio inputs to this new track, and choose what instrument you are playing on this 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>.
|
||||
</div>
|
||||
<div class="left w30 mr30">
|
||||
<div class="left mr5 ml5">
|
||||
<br />
|
||||
<img id="img-add-track2-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
<br/>
|
||||
<br />
|
||||
<img id="img-add-track2-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
|
||||
<div class="clearall"></div>
|
||||
|
||||
<div class="left w100 mt10">
|
||||
<div class="left w30">
|
||||
<div class="left">Unused Inputs:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="add-track2-unused" class="w100" multiple="multiple" size="6"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left mt35">
|
||||
<div class="left w5 ml10 mr10">
|
||||
<div>
|
||||
<img id="img-add-track2-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<img id="img-add-track2-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w60">
|
||||
<div class="left w45">
|
||||
<div class="left w100">
|
||||
<div class="left">Track 2 Input:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="add-track2-input" class="w100" multiple="multiple" size="6"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w45 ml20">
|
||||
<div class="left">Track 2 Instrument:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="add-track2-instrument" class="w100" multiple="multiple" size="6"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Track 2 Input:<br />
|
||||
<select id="add-track2-input" class="w80" multiple="multiple" size="6">
|
||||
</select>
|
||||
</div>
|
||||
<div class="left w30">
|
||||
Track 2 Instrument:<br />
|
||||
<select id="add-track2-instrument" class="w100" multiple="multiple" size="6">
|
||||
</select>
|
||||
<div class="clearall"></div>
|
||||
<div class="mt10" style="padding-left:2px;">
|
||||
<div class="left">
|
||||
<a layout-link="add-new-audio-gear" class="button-grey" style="margin-left:0px;">ADD NEW AUDIO GEAR</a>
|
||||
</div>
|
||||
<div class="right mr40">
|
||||
<a layout-action="close" class="button-grey">CANCEL</a>
|
||||
<a id="btn-add-track" class="button-orange">ADD TRACK</a>
|
||||
</div>
|
||||
</div>
|
||||
<br clear="left" /><br />
|
||||
<div class="right">
|
||||
<a layout-action="close" class="button-grey">CANCEL</a>
|
||||
<a id="btn-add-track" class="button-orange">ADD TRACK</a>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
<div class="clearall"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,122 +9,177 @@
|
|||
<a id="tab-configure-audio" class="selected">Music Audio</a>
|
||||
<a id="tab-configure-voice">Voice Chat</a>
|
||||
</div>
|
||||
<span id="instructions"></span>
|
||||
<br /><br />
|
||||
<div><span id="instructions"></span></div>
|
||||
|
||||
<div class="clearall"></div>
|
||||
|
||||
<!-- Music Audio Panel -->
|
||||
<div class="tab" tab-id="music-audio">
|
||||
<!-- Left Column -->
|
||||
<div class="left w30">
|
||||
Audio Driver:<br />
|
||||
<select id="audio-drivers" class="w100">
|
||||
</select>
|
||||
<br /><br />
|
||||
Unused Inputs:<br />
|
||||
<select id="audio-inputs-unused" class="w100" multiple="multiple" size="10">
|
||||
</select>
|
||||
<br /><br />
|
||||
Unused Outputs:<br />
|
||||
<select id="audio-output-unused" class="w100" multiple="multiple" size="4">
|
||||
</select>
|
||||
<br /><br />
|
||||
<a layout-link="add-new-audio-gear" class="button-grey">ADD NEW AUDIO GEAR</a>
|
||||
</div>
|
||||
<!-- End Left Column -->
|
||||
|
||||
<!-- Middle Column -->
|
||||
<div class="left w30 mr30">
|
||||
<div class="left mr5 ml5">
|
||||
<br /><br /><br /><br /><br>
|
||||
<img id="img-track1-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
<br/>
|
||||
<br />
|
||||
<img id="img-track1-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
<!-- 1st Row -->
|
||||
<div class="left w100 mt20">
|
||||
<div class="w100">
|
||||
<div class="left w30">
|
||||
<div class="left">Audio Driver:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="audio-drivers" class="w100"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top:20px;">
|
||||
<a id="btn-driver-settings" class="button-grey ml45">DRIVER SETTINGS...</a>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<a id="btn-driver-settings" class="button-grey" >DRIVER SETTINGS...</a><br /><br /><br />
|
||||
Track 1 Input:<br />
|
||||
<select id="track1-input" class="w80" multiple="multiple" style="height:70px">
|
||||
</select>
|
||||
<br clear="left" /><br />
|
||||
<div id="track2-arrows-div" class="left mr5 ml5">
|
||||
<br />
|
||||
<img id="img-track2-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
<br/>
|
||||
<br />
|
||||
<img id="img-track2-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div id="track2-input-div">
|
||||
Track 2 Input:<br />
|
||||
<select id="track2-input" class="w80" multiple="multiple" style="height:70px">
|
||||
</select>
|
||||
</div>
|
||||
<br clear="left" /><br />
|
||||
<div class="left mr5 ml5">
|
||||
<br />
|
||||
<br />
|
||||
<img id="img-audio-output-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
<br/>
|
||||
<br />
|
||||
<img id="img-audio-output-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<br />
|
||||
Session Audio Output:<br />
|
||||
<select id="audio-output-selection" class="w80" multiple="multiple" size="4">
|
||||
</select>
|
||||
</div>
|
||||
<!-- End Middle Column -->
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="left w30">
|
||||
<br /><br /><br /><br />
|
||||
Track 1 Instrument:<br />
|
||||
<select id="track1-instrument" class="w100" multiple="multiple" style="height:70px">
|
||||
</select>
|
||||
<br />
|
||||
<br />
|
||||
<div id="track2-instrument-div">
|
||||
Track 2 Instrument:<br />
|
||||
<select id="track2-instrument" multiple="multiple" class="w100" style="height:70px">
|
||||
</select>
|
||||
<div class="clearall"></div>
|
||||
|
||||
<!-- 2nd row -->
|
||||
<div class="left w100 mt10">
|
||||
<div class="left w30">
|
||||
<div class="left">Unused Inputs:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="audio-inputs-unused" class="w100" multiple="multiple" size="10"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div id="track1-input-buttons" class="left w5 ml10 mr10">
|
||||
<div>
|
||||
<img id="img-track1-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<img id="img-track1-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
<div id="track2-input-buttons" class="left w5 ml10 mr10 mt45">
|
||||
<div>
|
||||
<img id="img-track2-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<img id="img-track2-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w60">
|
||||
<div class="left w100">
|
||||
<div class="left w45">
|
||||
<div class="left">Track 1 Input:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="track1-input" class="w100" multiple="multiple" style="height:100%"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w45 ml20">
|
||||
<div class="left">Track 1 Instrument:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="track1-instrument" class="w100" multiple="multiple" style="height:100%"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearall"></div>
|
||||
|
||||
<div id="track2-details" class="left mt5 w100">
|
||||
<div class="left w45">
|
||||
<div class="left">Track 2 Input:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="track2-input" class="w100" multiple="multiple"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w45 ml20">
|
||||
<div class="left">Track 2 Instrument:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="track2-instrument" class="w100" multiple="multiple"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Right Column -->
|
||||
</div> <!-- End Panel for Music Audio Tab -->
|
||||
|
||||
<div class="clearall"></div>
|
||||
|
||||
<!-- 3rd row -->
|
||||
<div class="left w100 mt10">
|
||||
<div class="left w30">
|
||||
<div class="left">Unused Outputs:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="audio-output-unused" class="w100" multiple="multiple" size="4"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left ml10 mr10 mt25">
|
||||
<div>
|
||||
<img id="img-audio-output-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<img id="img-audio-output-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left w27">
|
||||
<div class="left">Session Audio Output:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="audio-output-selection" class="w100" multiple="multiple" size="4"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
</div> <!-- End Music Audio Tab -->
|
||||
|
||||
<!-- Voice Chat Panel -->
|
||||
<div class="tab" tab-id="voice-chat" style="display:none;">
|
||||
<div class="left w50">
|
||||
Voice Chat Device:<br />
|
||||
<select id="voice-chat-device" class="w100">
|
||||
<option value="1">Use an input on my session audio device for chat</option>
|
||||
<option value="0">Use a device from the list below for chat</option>
|
||||
<option value="2">Use my session audio mic for both music and chat</option>
|
||||
</select>
|
||||
<br /><br />
|
||||
Unused Inputs:<br />
|
||||
<select id="voice-inputs-unused" class="w100" multiple="multiple" size="8">
|
||||
</select>
|
||||
</div>
|
||||
<div class="left w50">
|
||||
<div class="left mr5 ml5">
|
||||
<br /><br /><br /><br /><br />
|
||||
<img id="img-voice-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" /><br/>
|
||||
<br />
|
||||
<br />
|
||||
<img id="img-voice-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" /><br/>
|
||||
<div class="left w50 mt10">
|
||||
<div class="left">Voice Chat Device:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="voice-chat-device" class="w100">
|
||||
<option value="1">Use an input on my session audio device for chat</option>
|
||||
<option value="0">Use a device from the list below for chat</option>
|
||||
<option value="2">Use my session audio mic for both music and chat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
<div class ="left w50 mt10">
|
||||
<div class="left">Unused Inputs:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="voice-inputs-unused" class="w100" multiple="multiple" size="8"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left mt55">
|
||||
<div class="left ml10 mr10">
|
||||
<div>
|
||||
<img id="img-voice-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
|
||||
</div>
|
||||
<div class="mt10">
|
||||
<img id="img-voice-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left mt10 w38">
|
||||
<div class="left">Voice Chat Input:</div>
|
||||
<div class="clearall"></div>
|
||||
<div class="left w100">
|
||||
<select id="voice-inputs-selection" class="w100" multiple="multiple" size="8"></select>
|
||||
</div>
|
||||
<br /><br /><br /><br />
|
||||
Voice Chat Input:<br />
|
||||
<select id="voice-inputs-selection" class="w80" multiple="multiple" size="8">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<br clear="left" /><br />
|
||||
<div class="right mr30">
|
||||
<a id="btn-cancel-settings" layout-action="close" class="button-grey">CANCEL</a>
|
||||
<a id="btn-save-settings" class="button-orange">UPDATE SETTINGS</a>
|
||||
<div class="clearall"></div>
|
||||
<div class="mt10" style="padding-left:2px;">
|
||||
<div class="left">
|
||||
<a layout-link="add-new-audio-gear" class="button-grey" style="margin-left:0px;">ADD NEW AUDIO GEAR</a>
|
||||
</div>
|
||||
<div class="right mr35">
|
||||
<a id="btn-cancel-settings" layout-action="close" class="button-grey">CANCEL</a>
|
||||
<a id="btn-save-settings" class="button-orange">UPDATE SETTINGS</a>
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
<div class="clearall"></div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue