From d3b4b49274c63ba2d53cfa0fa06cf18c4824be0c Mon Sep 17 00:00:00 2001
From: Jaon EarlWolf <jamonsterr@gmail.com>
Date: Thu, 7 Jan 2016 15:50:35 -0300
Subject: [PATCH] Settings modal rework -> panel slider at top
---
.../verto_communicator/src/css/verto.css | 48 +++++-
html5/verto/verto_communicator/src/index.html | 3 +-
.../verto_communicator/src/partials/menu.html | 2 +-
.../src/partials/modal_settings.html | 159 ------------------
.../src/partials/settings.html | 159 ++++++++++++++++++
.../controllers/MainController.js | 6 +
...ngsController.js => SettingsController.js} | 23 +--
7 files changed, 228 insertions(+), 172 deletions(-)
delete mode 100644 html5/verto/verto_communicator/src/partials/modal_settings.html
create mode 100644 html5/verto/verto_communicator/src/partials/settings.html
rename html5/verto/verto_communicator/src/vertoControllers/controllers/{ModalSettingsController.js => SettingsController.js} (88%)
diff --git a/html5/verto/verto_communicator/src/css/verto.css b/html5/verto/verto_communicator/src/css/verto.css
index a69d645600..d2d3b7add3 100644
--- a/html5/verto/verto_communicator/src/css/verto.css
+++ b/html5/verto/verto_communicator/src/css/verto.css
@@ -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;
+}
diff --git a/html5/verto/verto_communicator/src/index.html b/html5/verto/verto_communicator/src/index.html
index ecbb15c64f..e10df64552 100644
--- a/html5/verto/verto_communicator/src/index.html
+++ b/html5/verto/verto_communicator/src/index.html
@@ -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>
diff --git a/html5/verto/verto_communicator/src/partials/menu.html b/html5/verto/verto_communicator/src/partials/menu.html
index bd62f8fe17..e4d190fb12 100644
--- a/html5/verto/verto_communicator/src/partials/menu.html
+++ b/html5/verto/verto_communicator/src/partials/menu.html
@@ -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>
diff --git a/html5/verto/verto_communicator/src/partials/modal_settings.html b/html5/verto/verto_communicator/src/partials/modal_settings.html
deleted file mode 100644
index e4aa9021f1..0000000000
--- a/html5/verto/verto_communicator/src/partials/modal_settings.html
+++ /dev/null
@@ -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>
diff --git a/html5/verto/verto_communicator/src/partials/settings.html b/html5/verto/verto_communicator/src/partials/settings.html
new file mode 100644
index 0000000000..4fc7a2010c
--- /dev/null
+++ b/html5/verto/verto_communicator/src/partials/settings.html
@@ -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>
diff --git a/html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js b/html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js
index 70c43d72ac..dc21cb1077 100644
--- a/html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js
+++ b/html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js
@@ -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;
diff --git a/html5/verto/verto_communicator/src/vertoControllers/controllers/ModalSettingsController.js b/html5/verto/verto_communicator/src/vertoControllers/controllers/SettingsController.js
similarity index 88%
rename from html5/verto/verto_communicator/src/vertoControllers/controllers/ModalSettingsController.js
rename to html5/verto/verto_communicator/src/vertoControllers/controllers/SettingsController.js
index 34fa507a35..a9adcd630f 100644
--- a/html5/verto/verto_communicator/src/vertoControllers/controllers/ModalSettingsController.js
+++ b/html5/verto/verto_communicator/src/vertoControllers/controllers/SettingsController.js
@@ -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();
};
};