Added buddy classes to let css react on component hide/show stuff.

11 years ago · 90f3eb8724
5 changed files with 26 additions and 6 deletions
--- a/html/main.html
+++ b/html/main.html
@ -3,7 +3,7 @@
				@@ -3,7 +3,7 @@
 <head>
 <%template "head" .%>
 </head>
-<body ng-controller="MediastreamController">
+<body ng-controller="MediastreamController" ng-class="{withBuddylist: showBuddylist, withChat: chatEnabled, withSettings: showSettings, slideright: !showBuddylist}">
 <div id="background"></div>
 <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
 <div class="ng-cloak" id="help">
@ -36,7 +36,7 @@
				@@ -36,7 +36,7 @@
 <div id="screenshare" class="ng-cloak mainview" ng-show="mainview=='screenshare'">
    <screenshare/>
 </div>
-<div class="ng-cloak nicescroll" id="rightslide" ng-show="roomstatus" ng-class="{slideright: !showBuddylist}">
+<div class="ng-cloak nicescroll" id="rightslide" ng-show="roomstatus">
    <div class="rightslidepane">
        <div id="buddylist"><buddy-list/></div>
        <div id="chat"><chat/></div>
--- a/src/styles/components/_audiovideo.scss
+++ b/src/styles/components/_audiovideo.scss
@ -33,6 +33,12 @@ bottom:0px;
				@@ -33,6 +33,12 @@ bottom:0px;
 left:0px;
 background:black;
 }
+.withChat #audiovideo, .withBuddylist #audiovideo {
+right:260px;
+}
+.withBuddylist.withChat #audiovideo {
+right:520px;
+}
 #audiovideo.fullscreen .remoteVideo .peeractions {
 display:none;
 }
--- a/src/styles/components/_rightslide.scss
+++ b/src/styles/components/_rightslide.scss
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 #rightslide {
 position: absolute;
 top: 44px;
-right: 0px;
+right: -260px;
 bottom: 0px;
 left: 0px;
 z-index:5;
@ -14,8 +14,8 @@ pointer-events:none;
				@@ -14,8 +14,8 @@ pointer-events:none;
 overflow-x: auto;
 overflow-y: hidden;
 }
-#rightslide.slideright {
-right:-260px;
+.withBuddylist #rightslide {
+right:0px;
 }
 #rightslide .rightslidepane {
 position:relative;
--- a/src/styles/components/_usability.scss
+++ b/src/styles/components/_usability.scss
@ -28,6 +28,14 @@ width:350px;
				@@ -28,6 +28,14 @@ width:350px;
 font-size:1.1em;
 color:#aaa;
 margin: 0 auto;
+-webkit-transition: left 200ms ease-in-out;
+-moz-transition: left 200ms ease-in-out;
+-ms-transition: left 200ms ease-in-out;
+-o-transition: left 200ms ease-in-out;
+transition: left 200ms ease-in-out;
+}
+.withSettings #help, .withChat.withBuddylist #help {
+left:-22%;
 }
 #help > div {
 margin-left:-55%;
--- a/static/js/controllers/mediastreamcontroller.js
+++ b/static/js/controllers/mediastreamcontroller.js
@ -20,7 +20,7 @@
				@@ -20,7 +20,7 @@
 */
 define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigScreen, moment) {

-    return ["$scope", "$rootScope", "$window", "$timeout", "safeDisplayName", "safeApply", "mediaStream", "appData", "playSound", "desktopNotify", "alertify", "toastr", "translation", "fileDownload", function($scope, $rootScope, $window, $timeout, safeDisplayName, safeApply, mediaStream, appData, playSound, desktopNotify, alertify, toastr, translation, fileDownload) {
+    return ["$scope", "$rootScope", "$element", "$window", "$timeout", "safeDisplayName", "safeApply", "mediaStream", "appData", "playSound", "desktopNotify", "alertify", "toastr", "translation", "fileDownload", function($scope, $rootScope, $element, $window, $timeout, safeDisplayName, safeApply, mediaStream, appData, playSound, desktopNotify, alertify, toastr, translation, fileDownload) {

        /*console.log("route", $route, $routeParams, $location);*/

@ -552,6 +552,12 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
				@@ -552,6 +552,12 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
            }
        });

+        $scope.$watch(function() {
+            return $element.attr("class");
+        }, function() {
+            $scope.$broadcast("mainresize");
+        });
+
        mediaStream.webrtc.e.on("done", function() {
            if (mediaStream.connector.connected) {
                $scope.setStatus("waiting");