Skip to content

F
freeswitch
提交 d3b4b492 authored 作者: Jaon EarlWolf's avatar Jaon EarlWolf
浏览文件
操作

Settings modal rework -> panel slider at top

上级 e840bd9a
隐藏空白字符变更
内嵌 并排
正在显示 包含 228 行增加 和 172 行删除
html5/verto/verto_communicator/src/css/verto.css
浏览文件 @ d3b4b492
......@@ -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;
}
html5/verto/verto_communicator/src/index.html
浏览文件 @ d3b4b492
......@@ -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>
......
html5/verto/verto_communicator/src/partials/menu.html
浏览文件 @ d3b4b492
......@@ -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>
......
html5/verto/verto_communicator/src/partials/modal_settings.html deleted 100644 → 0
浏览文件 @ e840bd9a
<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>
html5/verto/verto_communicator/src/partials/settings.html 0 → 100644
浏览文件 @ d3b4b492
<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>
html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js
浏览文件 @ d3b4b492
......@@ -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;
......
html5/verto/verto_communicator/src/vertoControllers/controllers/ModalSettingsController.js → html5/verto/verto_communicator/src/vertoControllers/controllers/SettingsController.js
浏览文件 @ d3b4b492
......@@ -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();
};
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论