Animation on call end icon.

This commit is contained in:
David Baker 2014-09-10 15:45:09 +01:00
parent dde7ec8e64
commit e2d2d63bcd
4 changed files with 14 additions and 16 deletions

View File

@ -160,13 +160,9 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even
$rootScope.onCallHangup = function(call) { $rootScope.onCallHangup = function(call) {
if (call == $rootScope.currentCall) { if (call == $rootScope.currentCall) {
$timeout(function() { $timeout(function(){
var icon = angular.element('#callEndedIcon'); $rootScope.currentCall = undefined;
$animate.addClass(icon, 'callIconRotate'); }, 4070);
$timeout(function(){
$rootScope.currentCall = undefined;
}, 4070);
}, 100);
} }
} }
}]); }]);

View File

@ -55,20 +55,20 @@ a:active { color: #000; }
margin-left: 4px; margin-left: 4px;
margin-right: 4px; margin-right: 4px;
margin-top: 8px; margin-top: 8px;
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
} }
.callIconRotate { #callEndedIcon {
-webkit-transform: rotateZ(45deg); transition:all linear 0.5s;
-moz-transform: rotateZ(45deg); }
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg); #callEndedIcon {
transform: rotateZ(45deg); transform: rotateZ(45deg);
} }
#callEndedIcon.ng-hide {
transform: rotateZ(0deg);
}
#callPeerImage { #callPeerImage {
width: 32px; width: 32px;
height: 32px; height: 32px;

View File

@ -16,6 +16,7 @@ limitations under the License.
var matrixWebClient = angular.module('matrixWebClient', [ var matrixWebClient = angular.module('matrixWebClient', [
'ngRoute', 'ngRoute',
'ngAnimate',
'MatrixWebClientController', 'MatrixWebClientController',
'LoginController', 'LoginController',
'RegisterController', 'RegisterController',

View File

@ -15,6 +15,7 @@
<script src="js/angular.min.js"></script> <script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script> <script src="js/angular-route.min.js"></script>
<script src="js/angular-sanitize.min.js"></script> <script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script> <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
<script src="app.js"></script> <script src="app.js"></script>
<script src="config.js"></script> <script src="config.js"></script>