#967 notch

31 files changed, 40 insertions, 31 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 3b9d8160..c7670e58 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1946,9 +1946,18 @@ body {
     font-family: sans-serif;
     height:100%;
     padding-top: constant(safe-area-inset-top);
-}
+    padding-top: env(safe-area-inset-top);
 
+   
+}
 
+.notch-ready {
+  margin-left: constant(safe-area-inset-left);
+  margin-left: env(safe-area-inset-left);
+  
+  margin-right: constant(safe-area-inset-right);
+  margin-right: env(safe-area-inset-right);
+}
 
 * {
     font-family: -apple-system, "Helvetica Neue", sans-serif;
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 68f605cd..44825a20 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -8,7 +8,7 @@
   <ion-nav-buttons side="right">
     <button id="devoptions-move-2" class="button button-clear" ng-click="saveDevOptions()">{{'kSave' | translate}}</button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
     <div class="list list-inset">
       <span style="color:rgb(100,100,100)">
         <i class="ion-android-settings" style="font-size:150%"></i> {{'kDeveloperOptionsFor'|translate}}
diff --git a/www/templates/events-date-time-filter.html b/www/templates/events-date-time-filter.html
index 9d7b765d..ad198746 100644
--- a/www/templates/events-date-time-filter.html
+++ b/www/templates/events-date-time-filter.html
@@ -1,5 +1,5 @@
 <ion-view view-title="{{'kFilterEvents' | translate}}">
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
     <label class="item item-input">
       <span class="input-label">{{'kFromDate'|translate}}:</span>
       <input type="date" ng-model="$root.fromDate" max={{today}}>
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 36771e55..24df4b1e 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,7 +1,7 @@
 <div ng-controller="EventModalCtrl">
   <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
   <ion-modal-view cache-view="false">
-    <ion-content style="background-color:#000000" ng-cloak>
+    <ion-content style="background-color:#000000" ng-cloak class="notch-ready">
 
 
       <!-- alarm frames in snapshot-->
diff --git a/www/templates/events-modalgraph.html b/www/templates/events-modalgraph.html
index 75f2ec15..dfc84bab 100644
--- a/www/templates/events-modalgraph.html
+++ b/www/templates/events-modalgraph.html
@@ -1,6 +1,6 @@
 <div ng-controller="EventsModalGraphCtrl">
   <ion-modal-view cache-view="false" style="width:80%;height:80%; top: 10%; left: 10%; right: 10%; bottom: 10%;">
-    <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="eventgraph-modal-delegate">
+    <ion-content class="notch-ready" ng-cloak on-double-tap="closeModal()" delegate-handle="eventgraph-modal-delegate">
       <div data-tap-disabled="true">
         <canvas id="eventchart" width="auto" height="70%"></canvas>
       </div>
diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html
index 8ccc1c8f..923d693f 100644
--- a/www/templates/events-popover.html
+++ b/www/templates/events-popover.html
@@ -1,5 +1,5 @@
 <ion-popover-view class="fit">
-  <ion-content>
+  <ion-content class="notch-ready">
     <div class="list" ng-click="popover.hide()">
       <a class="item" ng-href="" ng-click="popover.hide();$state.go('app.events-date-time-filter');">{{'kFilterByDateTime'
         | translate}}</a>
diff --git a/www/templates/events.html b/www/templates/events.html
index a2dec860..73b79fd0 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -24,7 +24,7 @@
     </ion-header-bar>
   </div>
   <!-- collection repeat forces js scrolling, thing to remember -->
-  <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll on-scroll="scrolling();">
+  <ion-content class="notch-ready" ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll on-scroll="scrolling();" >
     <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
     </ion-refresher>
     <!-- needed for header-shrink so first item doesn't go below header-->
diff --git a/www/templates/eventserversettings.html b/www/templates/eventserversettings.html
index ea5080aa..13803b2a 100644
--- a/www/templates/eventserversettings.html
+++ b/www/templates/eventserversettings.html
@@ -8,7 +8,7 @@
   <ion-nav-buttons side="right">
     <button class="button button-clear" ng-click="saveItems()">{{'kSave'|translate}}</button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
     <div class="list list-inset">
       {{'kEventServerConfig1' | translate }}
     </div>
diff --git a/www/templates/help.html b/www/templates/help.html
index 8a497c5e..1359dfa9 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -4,7 +4,7 @@
     <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
-  <ion-content class="padding" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content class="notch-ready" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
     <p>
       <small>{{$root.appName}} v{{zmAppVersion}}</small>
     </p>
diff --git a/www/templates/image-modal.html b/www/templates/image-modal.html
index c1e0e5e6..b5bdaf9b 100644
--- a/www/templates/image-modal.html
+++ b/www/templates/image-modal.html
@@ -1,5 +1,5 @@
 <ion-modal-view cache-view="false" style="background-color:#444444">
-  <ion-content ng-cloak on-double-tap="closeModal();" scroll="false">
+  <ion-content ng-cloak on-double-tap="closeModal();" scroll="false" class="notch-ready">
 
 
     <div id="imagecontainer">
diff --git a/www/templates/important_message.html b/www/templates/important_message.html
index 35c449e8..835eb44c 100644
--- a/www/templates/important_message.html
+++ b/www/templates/important_message.html
@@ -2,7 +2,7 @@
   <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
   </ion-nav-buttons>
-  <ion-content class="pin-background">
+  <ion-content class="pin-background notch-ready">
     <div style="margin-left:20px; margin-right:20px">
       <center>
         <br />
diff --git a/www/templates/invalidapi.html b/www/templates/invalidapi.html
index c73e8be7..1c5f8ddb 100644
--- a/www/templates/invalidapi.html
+++ b/www/templates/invalidapi.html
@@ -2,7 +2,7 @@
   <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
   </ion-nav-buttons>
-  <ion-content class="pin-background">
+  <ion-content class="pin-background notch-ready">
     <div style="margin-left:20px; margin-right:20px">
       <center>
         <br />
diff --git a/www/templates/log.html b/www/templates/log.html
index 2884c4bb..ae534ab6 100644
--- a/www/templates/log.html
+++ b/www/templates/log.html
@@ -22,7 +22,7 @@
       <a class="button button-icon icon ion-android-download" ng-href="" ng-click="downloadLogs()"> </a>
     </div>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
 
     <!-- <h2> iCloud: </h2>
     {{cloudString}}
diff --git a/www/templates/login.html b/www/templates/login.html
index 617b79f5..797fde37 100644
--- a/www/templates/login.html
+++ b/www/templates/login.html
@@ -8,7 +8,7 @@
   <ion-nav-buttons side="right">
     <button id = 'testaut_settings_save' class="button button-clear" ng-click="saveItems()">{{'kSave' | translate}}</button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
     <div class="item item-text-wrap  item-input-inset">
       {{'kServerName' | translate }}:&nbsp;
       <label class="item-input-wrapper">
diff --git a/www/templates/lowversion.html b/www/templates/lowversion.html
index 440406b7..3f6c72cc 100644
--- a/www/templates/lowversion.html
+++ b/www/templates/lowversion.html
@@ -1,5 +1,5 @@
 <ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false">
-  <ion-content class="pin-background">
+  <ion-content class="pin-background notch-ready">
     <div style="margin-left:20px; margin-right:20px">
       <center>
         <br />
diff --git a/www/templates/menu.html b/www/templates/menu.html
index 2a78bb6e..f71aba5c 100644
--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -14,7 +14,7 @@
         <h1 class="title">{{'kMenuOptions'|translate}}</h1>
         </button>
       </ion-header-bar>
-      <ion-content has-header="true" mouse-wheel-scroll>
+      <ion-content has-header="true" mouse-wheel-scroll class="notch-ready">
         <!-- <ion-scroll scrollbar-y="false" style="height:100%" >-->
         <ion-list>
           <!--<ion-item ng-click="navigateView('app.montage')" menu-close>-->
diff --git a/www/templates/moment-mask.html b/www/templates/moment-mask.html
index 6493e4be..851be5ff 100644
--- a/www/templates/moment-mask.html
+++ b/www/templates/moment-mask.html
@@ -6,7 +6,7 @@
       <button class="button button-icon icon ion-close" ng-click="cancelMask()"></button>
     </div>
   </ion-header-bar>
-  <ion-content>
+  <ion-content class="notch-ready">
     <div class="list">
       <span ng-repeat="item in monitors">
 
diff --git a/www/templates/moment-popover.html b/www/templates/moment-popover.html
index 6d2485ca..5d6a87be 100644
--- a/www/templates/moment-popover.html
+++ b/www/templates/moment-popover.html
@@ -1,5 +1,5 @@
 <ion-popover-view class="fit">
-  <ion-content>
+  <ion-content class="notch-ready">
     <div class="list" ng-click="popover.remove()">
 
       <a class="item" ng-href="" ng-click="popover.remove();getMoments('StartTime');">
diff --git a/www/templates/moment.html b/www/templates/moment.html
index 9852b925..9a31a922 100644
--- a/www/templates/moment.html
+++ b/www/templates/moment.html
@@ -25,7 +25,7 @@
   </div>
 
 
-  <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll style="background-color:#444444">
+  <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll class="notch-ready" style="background-color:#444444">
 
     <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 0ead585c..84c9049a 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -1,6 +1,6 @@
 <div ng-controller="MonitorModalCtrl" ng-cloak>
   <ion-modal-view cache-view="false" style="background-color:#444444">
-    <ion-content ng-cloak on-double-tap="closeModal();" scroll="false">
+    <ion-content ng-cloak on-double-tap="closeModal();" scroll="false" class="notch-ready">
 
       <div id="imagecontainer">
         <ion-scroll on-scroll="checkZoom()" delegate-handle="imgscroll" has-bouncing=false min-zoom=1
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index 4770b139..39674023 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -5,7 +5,7 @@
     <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
     <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()">
     </ion-refresher>
     <div style="float:right;margin-top:3px;margin-right:8px;">
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 82fb70f3..62b7e2a6 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -13,7 +13,7 @@
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
   <ion-content has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false"
-    mouse-wheel-scroll>
+    mouse-wheel-scroll class="notch-ready">
     <div class="timeline_text"> {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}}
       ({{humanizeTime(datetimeValueFrom.value)}})
       <div ng-if="!isMultiPort">({{'kChromeMax' | translate}})</div>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 360e4a4a..62afc9f5 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -35,7 +35,7 @@
     </button>
   </ion-nav-buttons>
   <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate"
-    overflow-scroll="false" padding="false">
+    overflow-scroll="false" padding="false" class="notch-ready">
 
     <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>
 
diff --git a/www/templates/news.html b/www/templates/news.html
index 2512bb4c..4cb13bb9 100644
--- a/www/templates/news.html
+++ b/www/templates/news.html
@@ -4,7 +4,7 @@
     <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
 
     <div class="list">
 
diff --git a/www/templates/reorder-modal.html b/www/templates/reorder-modal.html
index 8d31ce22..c5f599ff 100644
--- a/www/templates/reorder-modal.html
+++ b/www/templates/reorder-modal.html
@@ -8,7 +8,7 @@
       <button class="button button-small" ng-click="cancelReorder()">{{'kButtonCancel'|translate}}</button>
     </div>
   </ion-header-bar>
-  <ion-content>
+  <ion-content class="notch-ready">
     <div class="list">
       <span ng-repeat="item in copyMontage">
         <a ng-class="{ 'item  item-avatar item-icon-right' :  item.Monitor.listDisplay == 'show', 'item  item-avatar item-icon-right eye-background-red' : item.Monitor.listDisplay!='show' }"
diff --git a/www/templates/state.html b/www/templates/state.html
index bdad22d0..7954c7e1 100644
--- a/www/templates/state.html
+++ b/www/templates/state.html
@@ -4,7 +4,7 @@
     <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
-  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll >
+  <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready" >
     <ion-refresher pulling-text="{{'kPullToReload' | translate}}..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
 
     <ion-item>
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index 5b6c8694..ddbef952 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -1,6 +1,6 @@
 <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
 <ion-modal-view cache-view="false">
-  <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate">
+  <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate" class="notch-ready">
     <div ng-controller="TimelineModalCtrl">
       <br />
       <div class="item item-divider">{{mName}}&nbsp;
diff --git a/www/templates/timeline-popover.html b/www/templates/timeline-popover.html
index e43e0605..f1a19d9a 100644
--- a/www/templates/timeline-popover.html
+++ b/www/templates/timeline-popover.html
@@ -1,5 +1,5 @@
 <ion-popover-view class="fit">
-  <ion-content>
+  <ion-content class="notch-ready">
 
     <div class="list" ng-click="popover.hide()">
 
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index 73a6c7c5..ca9f31f5 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -17,7 +17,7 @@
         <button class="button button-icon button-clear ion-log-out" ng-click="zoom(0.2)"></button>&nbsp;-->
     </ion-nav-buttons>
     <!--<ion-content data-tap-disabled="true">-->
-    <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
+    <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll class="notch-ready">
       <div style="padding-left:15px; font-size:10px; color:grey">
          {{prettify(fromDate)}} - {{prettify(toDate)}} &nbsp;{{tzAbbr}}&nbsp; ({{'kTimelineOnlyDisplaying1' |
         translate:translationData}})
diff --git a/www/templates/wizard.html b/www/templates/wizard.html
index c929f877..c6dc957a 100644
--- a/www/templates/wizard.html
+++ b/www/templates/wizard.html
@@ -2,7 +2,7 @@
   <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
   </ion-nav-buttons>
-  <ion-content class="padding" overflow-scroll="false">
+  <ion-content class="notch-ready" overflow-scroll="false">
     <wizard on-finish="finishedWizard()">
       <!-- portal url -->
       <wz-step wz-title="1" canexit="exitPortal">
diff --git a/www/templates/zm-portal-login.html b/www/templates/zm-portal-login.html
index c3431cd4..fdddd042 100644
--- a/www/templates/zm-portal-login.html
+++ b/www/templates/zm-portal-login.html
@@ -1,5 +1,5 @@
 <ion-view view-title="{{$root.appName}}" hide-nav-bar="true" hide-back-button="true" cache-view="false">
-  <ion-content class="pin-background" scroll="false">
+  <ion-content class="pin-background notch-ready" scroll="false">
     <div style="margin-left:20px; margin-right:20px">
       <center>
         <br />