diff options
| -rw-r--r-- | www/css/style.css | 4 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 11 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 23 |
3 files changed, 25 insertions, 13 deletions
diff --git a/www/css/style.css b/www/css/style.css index 91ce9830..042b9ee8 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -220,7 +220,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */ position:absolute; bottom:60px; left:30px; - z-index:10; + z-index:99; opacity:0.7; width:70%; } @@ -228,7 +228,7 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */ .events-range-modal-text { position:absolute; - bottom:20px; + bottom:10px; right:10px; z-index:10; opacity:0.7; diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index df63ed16..00bec5d3 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -16,7 +16,7 @@ angular.module('zmApp.controllers') // Controller main //--------------------------------------------------- - + $scope.animationInProgress = false; var loginData = ZMDataModel.getLogin(); $scope.hours = []; @@ -1170,26 +1170,25 @@ angular.module('zmApp.controllers') var element = angular.element(document.getElementById("full-screen-event")); element.addClass(slideout).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', outWithOld); + + function outWithOld() { element.removeClass(slideout); prepareModalEvent(eid); + $scope.animationInProgress = true; element.addClass(slidein).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', inWithNew ); } function inWithNew() { element.removeClass(slidein); + $scope.animationInProgress = false; } }; - - - - - //-------------------------------------------------------- // utility function //-------------------------------------------------------- diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index 46bffd06..a57e2bcf 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -4,15 +4,26 @@ <ion-content style="background-color:#444444" ng-cloak> <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; "> - <div style="height: 100vh;"> + <div id="full-screen-event" style="height: 100vh;"> <div ng-if="defaultVideo=='' || loginData.enableh264==false"> <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{calcMsTimer(eFramesNum, eventDur)/1000.0}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}"> <li ng-repeat="slide in slides"> - - <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100" image-spinner-loader="lines" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" /> + <div ng-if="!animationInProgress"> + <img imageonload="finishedLoadingImage($index)" + image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale=100" + image-spinner-loader="lines" + ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" /> + </div> + <div ng-if="animationInProgress"> + <img imageonload="finishedLoadingImage($index)" + image-spinner-src="img/pausevideo.png" + image-spinner-loader="lines" + ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" /> + </div> + <!--<img id="hello" imageonload="finishedLoadingImage($index)" image-spinner-src="{{eventBasePath}}{{slide.img}}?rand={{rand}}" @@ -33,7 +44,7 @@ </div> </div> - + </div> <!-- 100vh --> @@ -61,7 +72,7 @@ <a mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"> </a> </nav> -<div class="events-range-modal-text" id="full-screen-event">playing event: {{eventId}}</div> + <div class="events-range-modal" ng-if="defaultVideo==''"> <div style="width:90%"> @@ -71,6 +82,8 @@ </div> +<div class="events-range-modal-text" >playing event: {{eventId}}</div> + <span class="event-modal-alarm-badge"> <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon ion-ios-bell notification-badge button-assertive" ng-click="handleAlarms();" ng-if="$root.isAlarm" ></a> |