Settings modal rework -> panel slider at top
This commit is contained in:
Jaon EarlWolf
parent
e840bd9a0b
commit
d3b4b49274
|
|
@ -764,7 +764,7 @@ body .modal-body .btn-group .btn.active {
|
|||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
z-index: 1000;
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
height: calc(100% - 60px);
|
||||
|
|
@ -1686,3 +1686,49 @@ body:-webkit-full-screen #incall .video-footer {
|
|||
from { max-height:2000px;}
|
||||
to { max-height:0px;}
|
||||
}
|
||||
|
||||
#settings {
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
background: rgba(10, 56, 127, 0.9);
|
||||
width: 100%;
|
||||
transition: .4s ease-out;
|
||||
color: white;
|
||||
max-height: 80%;
|
||||
overflow: auto;
|
||||
top: -100%;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#settings select {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#settings option {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#settings .content {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#settings.toggled {
|
||||
top: 67px;
|
||||
}
|
||||
|
||||
#settings .form-group .form-control:focus {
|
||||
background-image: linear-gradient(#d2d2d2, #d2d2d2), linear-gradient(#d2d2d2, #d2d2d2)
|
||||
}
|
||||
|
||||
#settings .checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
#settings .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
|
||||
#settings .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#settings .btn {
|
||||
color: rgba(0, 10, 66, 0.84);
|
||||
background-color: #E8E8E8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
<body>
|
||||
|
||||
<div ng-include="'partials/menu.html'"></div>
|
||||
<div ng-include="'partials/settings.html'"></div>
|
||||
|
||||
<div id="wrapper" class="toggled">
|
||||
<!-- Sidebar -->
|
||||
|
|
@ -125,7 +126,7 @@
|
|||
<script type="text/javascript" src="src/vertoControllers/controllers/ModalDialpadController.js"></script>
|
||||
<script type="text/javascript" src="src/vertoControllers/controllers/ModalWsReconnectController.js"></script>
|
||||
<script type="text/javascript" src="src/vertoControllers/controllers/ModalLoginInformationController.js"></script>
|
||||
<script type="text/javascript" src="src/vertoControllers/controllers/ModalSettingsController.js"></script>
|
||||
<script type="text/javascript" src="src/vertoControllers/controllers/SettingsController.js"></script>
|
||||
<script type="text/javascript" src="src/vertoControllers/controllers/PreviewController.js"></script>
|
||||
|
||||
<script type="text/javascript" src="src/vertoDirectives/vertoDirectives.module.js"></script>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="navbar-item-icon" ng-show="verto.data.connected">
|
||||
<a href="" ng-click="openModal('partials/modal_settings.html', 'ModalSettingsController')">
|
||||
<a href="" ng-click="toggleSettings()">
|
||||
<i class="mdi-action-settings"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,159 +0,0 @@
|
|||
<div class="modal-header">
|
||||
<h3 class="modal-title">Device Settings</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group" ng-show="mydata.useVideo">
|
||||
<label for="settings-camera">Camera:</label>
|
||||
<select name="camera" id="settings-camera" class="form-control"
|
||||
ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="mydata.useVideo">
|
||||
<label for="settings-share-device">Share device:</label>
|
||||
<select name="share-device" id="settings-share-device" class="form-control"
|
||||
ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">Microphone:</label>
|
||||
<select name="microphone" id="settings-microphone" class="form-control"
|
||||
ng-model="mydata.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">
|
||||
Speaker:
|
||||
<span ng-show="!speakerFeature" class="unsupported">
|
||||
Your browser doesn't seem to support this feature
|
||||
</span>
|
||||
</label>
|
||||
<select name="microphone" id="settings-microphone" class="form-control" ng-disabled="!speakerFeature"
|
||||
ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary" href="" ng-click="showPreview()">Preview Settings</a>
|
||||
<a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">General settings:</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_video" value="mydata.useVideo" ng-model="mydata.useVideo">
|
||||
Use Video
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_stereo_audio" ng-value="mydata.useStereo" ng-model="mydata.useStereo">
|
||||
Stereo Audio
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_stun" ng-value="mydata.useSTUN" ng-model="mydata.useSTUN">
|
||||
Use STUN
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="mirror_input" ng-value="mydata.mirrorInput" ng-model="mydata.mirrorInput">
|
||||
Scale Remote Video To Match Camera Resolution
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="ask_recover_call" ng-value="mydata.askRecoverCall" ng-model="mydata.askRecoverCall">
|
||||
Ask before recovering call
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-framerate">Best frame rate:</label>
|
||||
<select name="settings-framerate" id="settings-framerate" class="form-control"
|
||||
ng-model="mydata.bestFrameRate"
|
||||
ng-options="item.id as item.label for item in verto.framerate"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">Audio settings:</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googEchoCancellation" value="mydata.googEchoCancellation" ng-model="mydata.googEchoCancellation">
|
||||
Echo Cancellation
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googNoiseSuppression" value="mydata.googNoiseSuppression" ng-model="mydata.googNoiseSuppression">
|
||||
Noise Suppression
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googHighpassFilter" value="mydata.googHighpassFilter" ng-model="mydata.googHighpassFilter">
|
||||
Highpass Filter
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Video settings:</label> <br>
|
||||
<input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
|
||||
|
||||
|
||||
<div ng-show="mydata.useDedenc" class="dedicated_encoder">
|
||||
<p>Dedicated Remote Encoder enabled.</b>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
|
||||
Automatically determine speed and resolution settings
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox" ng-show="mydata.autoBand">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="mydata.testSpeedJoin">
|
||||
Recheck bandwidth before each outgoing call
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">Check Network Speed</a> <span ng-bind="speedMsg"></span>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="video-quality">Video quality:</label>
|
||||
<select name="video_quality" id="video-quality" class="form-control"
|
||||
ng-disabled="mydata.autoBand"
|
||||
ng-model="mydata.vidQual"
|
||||
ng-change="checkVideoQuality(mydata.vidQual)"
|
||||
ng-options="item.id as item.label for item in verto.videoQuality"></select>
|
||||
</div>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="incoming-bandwidth">Max incoming bandwidth:</label>
|
||||
<select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
|
||||
ng-model="mydata.incomingBandwidth"
|
||||
ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
|
||||
ng-options="item.id as item.label for item in verto.bandwidth"></select>
|
||||
</div>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
|
||||
<select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
|
||||
ng-model="mydata.outgoingBandwidth"
|
||||
ng-options="item.id as item.label for item in verto.bandwidth"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger pull-left btn-pull-left" ng-click="resetSettings()">Factory reset</button>
|
||||
<!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
|
||||
<button class="btn btn-primary" ng-click="ok()">Save Device Settings</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<div id="settings" ng-controller="SettingsController">
|
||||
<div class="content">
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="form-group" ng-show="mydata.useVideo">
|
||||
<label for="settings-camera">Camera:</label>
|
||||
<select name="camera" id="settings-camera" class="form-control"
|
||||
ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-show="mydata.useVideo">
|
||||
<label for="settings-share-device">Share device:</label>
|
||||
<select name="share-device" id="settings-share-device" class="form-control"
|
||||
ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">Microphone:</label>
|
||||
<select name="microphone" id="settings-microphone" class="form-control"
|
||||
ng-model="mydata.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">
|
||||
Speaker:
|
||||
<span ng-show="!speakerFeature" class="unsupported">
|
||||
Your browser doesn't seem to support this feature
|
||||
</span>
|
||||
</label>
|
||||
<select name="microphone" id="settings-microphone" class="form-control" ng-disabled="!speakerFeature"
|
||||
ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-framerate">Best frame rate:</label>
|
||||
<select name="settings-framerate" id="settings-framerate" class="form-control"
|
||||
ng-model="mydata.bestFrameRate"
|
||||
ng-options="item.id as item.label for item in verto.framerate"></select>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary" href="" ng-click="showPreview()">Preview Settings</a>
|
||||
<a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">General settings:</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_video" value="mydata.useVideo" ng-model="mydata.useVideo">
|
||||
Use Video
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_stereo_audio" ng-value="mydata.useStereo" ng-model="mydata.useStereo">
|
||||
Stereo Audio
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="use_stun" ng-value="mydata.useSTUN" ng-model="mydata.useSTUN">
|
||||
Use STUN
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="mirror_input" ng-value="mydata.mirrorInput" ng-model="mydata.mirrorInput">
|
||||
Scale Remote Video To Match Camera Resolution
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="ask_recover_call" ng-value="mydata.askRecoverCall" ng-model="mydata.askRecoverCall">
|
||||
Ask before recovering call
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="settings-microphone">Audio settings:</label>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googEchoCancellation" value="mydata.googEchoCancellation" ng-model="mydata.googEchoCancellation">
|
||||
Echo Cancellation
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googNoiseSuppression" value="mydata.googNoiseSuppression" ng-model="mydata.googNoiseSuppression">
|
||||
Noise Suppression
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" name="googHighpassFilter" value="mydata.googHighpassFilter" ng-model="mydata.googHighpassFilter">
|
||||
Highpass Filter
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Video settings:</label> <br>
|
||||
<input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
|
||||
|
||||
|
||||
<div ng-show="mydata.useDedenc" class="dedicated_encoder">
|
||||
<p>Dedicated Remote Encoder enabled.</b>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
|
||||
Automatically determine speed and resolution settings
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox" ng-show="mydata.autoBand">
|
||||
<label>
|
||||
<input type="checkbox" ng-model="mydata.testSpeedJoin">
|
||||
Recheck bandwidth before each outgoing call
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">Check Network Speed</a> <span ng-bind="speedMsg"></span>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="video-quality">Video quality:</label>
|
||||
<select name="video_quality" id="video-quality" class="form-control"
|
||||
ng-disabled="mydata.autoBand"
|
||||
ng-model="mydata.vidQual"
|
||||
ng-change="checkVideoQuality(mydata.vidQual)"
|
||||
ng-options="item.id as item.label for item in verto.videoQuality"></select>
|
||||
</div>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="incoming-bandwidth">Max incoming bandwidth:</label>
|
||||
<select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
|
||||
ng-model="mydata.incomingBandwidth"
|
||||
ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
|
||||
ng-options="item.id as item.label for item in verto.bandwidth"></select>
|
||||
</div>
|
||||
|
||||
<div ng-show="!mydata.autoBand">
|
||||
<label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
|
||||
<select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
|
||||
ng-model="mydata.outgoingBandwidth"
|
||||
ng-options="item.id as item.label for item in verto.bandwidth"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -278,6 +278,12 @@
|
|||
angular.element('#wrapper').addClass('toggled');
|
||||
};
|
||||
|
||||
$scope.toggleSettings = function() {
|
||||
var settingsEl = angular.element(document.querySelector('#settings'));
|
||||
settingsEl.toggleClass('toggled');
|
||||
$rootScope.$emit('toggledSettings', settingsEl.hasClass('toggled'));
|
||||
};
|
||||
|
||||
$scope.goFullscreen = function() {
|
||||
if (storage.data.userStatus !== 'connected') {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -3,16 +3,25 @@
|
|||
|
||||
angular
|
||||
.module('vertoControllers')
|
||||
.controller('ModalSettingsController', ['$scope', '$http',
|
||||
'$location', '$modalInstance', '$rootScope', 'storage', 'verto', 'toastr',
|
||||
function($scope, $http, $location, $modalInstance, $rootScope, storage, verto, toastr) {
|
||||
.controller('SettingsController', ['$scope', '$http',
|
||||
'$location', '$rootScope', 'storage', 'verto',
|
||||
function($scope, $http, $location, $rootScope, storage, verto) {
|
||||
console.debug('Executing ModalSettingsController.');
|
||||
|
||||
$.material.init();
|
||||
|
||||
$scope.speakerFeature = typeof document.getElementById('webcam').sinkId !== 'undefined';
|
||||
$scope.storage = storage;
|
||||
$scope.verto = verto;
|
||||
$scope.mydata = angular.copy(storage.data);
|
||||
|
||||
$scope.speakerFeature = typeof document.getElementById('webcam').sinkId !== 'undefined';
|
||||
$rootScope.$on('toggledSettings', function(e, status) {
|
||||
if (status) {
|
||||
$scope.mydata = angular.copy(storage.data);
|
||||
} else {
|
||||
$scope.ok();
|
||||
}
|
||||
});
|
||||
|
||||
$scope.ok = function() {
|
||||
if ($scope.mydata.selectedSpeaker != storage.data.selectedSpeaker) {
|
||||
|
|
@ -24,11 +33,6 @@
|
|||
if (storage.data.autoBand) {
|
||||
$scope.testSpeed();
|
||||
}
|
||||
$modalInstance.close('Ok.');
|
||||
};
|
||||
|
||||
$scope.cancel = function() {
|
||||
$modalInstance.dismiss('cancel');
|
||||
};
|
||||
|
||||
$scope.refreshDeviceList = function() {
|
||||
|
|
@ -60,7 +64,6 @@
|
|||
if (confirm('Factory Reset Settings?')) {
|
||||
storage.factoryReset();
|
||||
$scope.logout();
|
||||
$modalInstance.close('Ok.');
|
||||
window.location.reload();
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue