From d3b4b49274c63ba2d53cfa0fa06cf18c4824be0c Mon Sep 17 00:00:00 2001 From: Jaon EarlWolf 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 @@
+
@@ -125,7 +126,7 @@ - + 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 @@
  • - +
    • 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 @@ -
    -

    Device Settings

    -
    -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - - Preview Settings - Refresh device list - -
    - -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    - -
    - -
    - - -
    - -
    - -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - - - -
    -

    Dedicated Remote Encoder enabled. -

    - -
    - -
    - -
    - -
    - - Check Network Speed - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    -
    - - - -
    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 @@ +
    +
    +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + + Preview Settings + Refresh device list +
    +
    +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +
    + +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    + +
    +
    + + + +
    +

    Dedicated Remote Encoder enabled. +

    + +
    + +
    + +
    + +
    + + Check Network Speed + +
    + + +
    + +
    + + +
    + +
    + + +
    +
    +
    +
    +
    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(); }; };