From 79d2427d6d44df8cf20907420eccf87c06b821d9 Mon Sep 17 00:00:00 2001
From: PliablePixels <pliablepixels@gmail.com>
Date: Tue, 14 Jul 2015 16:02:57 -0400
Subject: Feed screens now have a grey background, also have ability to scale
 images to crop or fit

---
 www/templates/events-modal.html   |  6 ++++--
 www/templates/monitors-modal.html | 15 +++++++++------
 www/templates/montage.html        |  4 ++--
 3 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a37e12d2..9f3f257f 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,12 +1,14 @@
 <ion-modal-view cache="false">
-    <ion-content>
+    <ion-content style="background-color:#444444">
         <!-- so I can access my common modal controller
             which is shared between events and monitors for modal views -->
         <div ng-controller="ModalCtrl">
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
                         direction="xy" style="width: 100%; ">
+                   <div style="height: 100vh;">
                 <img imageonload="finishedLoadingImage()"
-                     ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" />
+                     ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" ng-class="{'zm-image-fit':imageStyle==true, 'zm-image-crop':imageStyle==false}" />
+                </div>
             </ion-scroll>
         </div>
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 0e1401ab..e1d5c98a 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -1,18 +1,20 @@
 <ion-modal-view cache="false">
-    <ion-content>
+    <ion-content style="background-color:#444444">
         <div ng-controller="ModalCtrl">
 
             <!-- replay can also be gapless imageonload="finishedLoadingImage()"-->
 
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
+                <!-- android needs this 100vh - otherwise max- does not work -->
+                <div style="height: 100vh;">
 
-                <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" />
-
+                    <img imageonload="finishedLoadingImage()"
+                         ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" ng-class="{'zm-image-fit':imageStyle==true, 'zm-image-crop':imageStyle==false}" />
+                </div>
 
             </ion-scroll>
     </ion-content>
 
-
     <div ng-show="isControllable=='1' && showPTZ">
         <div class="ptzcentered">
             <circular options="radialMenuOptions">
@@ -24,7 +26,8 @@
 </ion-modal-view>
 
 <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
-    <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></button>
+    <button mfb-button icon="ion-arrow-resize" label="fit image" ng-click="scaleImage();"></button>
+    <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"></button>
     <button mfb-button icon="ion-arrow-expand" label="pan/tilt/zoom" ng-click="togglePTZ();"></button>
-    <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal()"></button>
+    <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal();"></button>
 </nav>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 00ac7d62..d63a3bcd 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -26,9 +26,9 @@
     </ion-nav-buttons>
 
 
-    <ion-content has-bouncing="false">
+    <ion-content has-bouncing="false" >
         <div ng-controller="ModalCtrl">
-           <!-- <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>-->
+           <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
             <span ng-show="!minimal">
                 <div class=" range range-positive">
                     <i class="icon ion-arrow-shrink"></i>
-- 
cgit v1.2.3