Changed Layout to pure ionic

Changed Layout to pure ionic to give more power to Ionic Framework and make life easier for us.
Reinsys · Sep 4, 2015 · 15e7ac7 · 15e7ac7
1 parent 8bde7e3
commit 15e7ac7
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 78 deletions.
diff --git a/IonicProjectStarter/www/css/index/.ignore/index_main.less b/IonicProjectStarter/www/css/index/.ignore/index_main.less
@@ -16,4 +16,8 @@
 @import "ionic-group.less";
 @import "uib_row_2.less";
 @import "styles/row-height-2 -- row_height.less";
-@import "uib_row_1.less";
+@import "uib_row_1.less";
+@import "uib_row_1.less";
+@import "uib_row_2.less";
+@import "uib_row_1.less";
+@import "uib_row_2.less";
diff --git a/IonicProjectStarter/www/css/index/index_main.less b/IonicProjectStarter/www/css/index/index_main.less
@@ -16,4 +16,8 @@
 @import "ionic-group.less";
 @import "uib_row_2.less";
 @import "styles/row-height-2 -- row_height.less";
-@import "uib_row_1.less";
+@import "uib_row_1.less";
+@import "uib_row_1.less";
+@import "uib_row_2.less";
+@import "uib_row_1.less";
+@import "uib_row_2.less";
diff --git a/IonicProjectStarter/www/index.html b/IonicProjectStarter/www/index.html
@@ -33,6 +33,7 @@
                 @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                 @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                 /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
+
         </style>
 
         <link rel="stylesheet" href="css/app.css">
@@ -57,10 +58,10 @@
         <!-- normalizes device and document ready events, see file for details -->
         <script type="application/javascript" src="lib/jquery.min.js"></script>
         <script type="application/javascript" src="marginal/marginal-position.js"></script>
-        <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script> 
-        <!-- Only include ng-cordova-mocks.min.js in development. Remove in production. -->
-		<!--<script src="lib/ngcordova/dist/ng-cordova-mocks.min.js"></script>-->
-        <script src="lib/ngcordova/dist/ng-cordova.min.js"></script>
+        <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
+        <!-- Only include ng-cordova-mocks.min.js in development -->
+        <script src="lib/ng-cordova-mocks.min.js"></script>
+        <script src="lib/ng-cordova.min.js"></script>
         <script src="cordova.js"></script>
         <script src="xhr.js"></script>
         <script type="application/javascript" src="js/index_init_services.js"></script>
@@ -73,32 +74,40 @@
         <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
         <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
         <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
-        <div class="upage" id="mainpage">
-            <div class="upage-outer fixed-header-footer">
-                <div class="upage-content ac0 content-area vertical-col left" id="page_32_96">
-                    <ui-view name=""></ui-view>
-                    <div id="template" class="hidden"></div>                            
-                </div>
-                <ion-header-bar class="bar inner-element uib_w_1 bar-positive bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
-                    <div class="buttons widget-container content-area horiz-area wrapping-col">
-                        <button class="button widget uib_w_2 d-margins" data-uib="ionic/button" data-ver="0" ng-click="display.goToPath('/index')">Home</button>
-                    </div>
-                    <h1 class="title">{{title}}</h1>
-                    <div class="buttons widget-container content-area horiz-area wrapping-col">
-                        <button class="button widget uib_w_3 d-margins" data-uib="ionic/button" data-ver="0" ng-click="navBack()">Back</button>
-                    </div>
+
+        <ion-side-menus enable-menu-with-back-views="true">
+            <ion-side-menu side="left">
+                <ion-header-bar>
+                    <h1 class="title">Navigation</h1>
                 </ion-header-bar>
-                <ion-footer-bar class="bar inner-element uib_w_4 bar-positive bar-footer" data-uib="ionic/footer" data-ver="0">
-                    <div class="buttons widget-container content-area horiz-area wrapping-col">
-                        <button class="button widget uib_w_5 d-margins" data-uib="ionic/button" data-ver="0" ng-click="display.goToPath('/search')">Search</button>
-                    </div>
-                    <h1 class="title">Powered by Reinsys.com</h1>
-                    <div class="buttons widget-container content-area horiz-area wrapping-col">
+                <ion-content has-header="true" class="widget">
+                    <ion-list class="widget" data-uib="ionic/list">
+                        <ion-item class="item widget" href="#/" ng-click="toggleLeft()" data-uib="ionic/list_item">Home</ion-item>
+                    </ion-list>
+                    <ion-list class="widget" data-uib="ionic/list">
+                        <ion-item class="item widget" ng-click="display.alert('Developing innovative solutions for everyone!', 'Reinsys.com')" data-uib="ionic/list_item">About</ion-item>
+                    </ion-list>
+                </ion-content>
 
-                    </div>
-                </ion-footer-bar>
-            </div>
-        </div>
+            </ion-side-menu>
+            <ion-side-menu-content>
+                <ion-nav-bar>
+                    <ion-nav-back-button class="button-clear">
+                        <i class="ion-arrow-left-c"></i> Back
+                    </ion-nav-back-button>
+                    <ion-nav-buttons side="left">
+                        <!-- Toggle left side menu -->
+                        <button menu-toggle="left" class="button button-icon icon widget ion ion-navicon" data-uib="ionic/button"></button>
+                    </ion-nav-buttons>
+                    <ion-nav-buttons side="right">
+                        <!-- Toggle left side menu -->
+                        <button class="button button-icon icon widget ion ion-search" data-uib="ionic/button" ng-click="display.goToPath('/search')"></button>
+                    </ion-nav-buttons>
+                </ion-nav-bar>
+                <ion-nav-view name="index"></ion-nav-view>
+            </ion-side-menu-content>
+        </ion-side-menus>
+        <div id="template" class="hidden"></div>
     </body>
 
 </html>
diff --git a/IonicProjectStarter/www/js/controllers.js b/IonicProjectStarter/www/js/controllers.js
@@ -1,11 +1,14 @@
-app.controller('AppController', function($scope, display) {  
+app.controller('AppController', function($scope, display, $ionicHistory, $ionicSideMenuDelegate, $ionicPlatform, $rootScope) {  
     $scope.display = display;
-    $scope.navBack = function() {
-        window.history.back();
-    }; 
+    $ionicPlatform.onHardwareBackButton(function(event){
+        $ionicHistory.goBack();
+    });
+    $scope.toggleLeft = function(){
+        $ionicSideMenuDelegate.toggleLeft();
+    }
 });
-app.controller('IndexController', function($scope, display) {
-    $scope.$parent.title = 'Home';    
+app.controller('IndexController', function($rootScope, $scope, display) {
+    $rootScope.title = 'Home';    
 
 });
 app.controller('SearchController', function($scope, display){    

diff --git a/IonicProjectStarter/www/js/index_init_services.js b/IonicProjectStarter/www/js/index_init_services.js
@@ -5,31 +5,40 @@
    thus you can reformat dates or names, remove or add entries, etc.
    -------------- */
 
-var app = angular.module('myApp',['ionic', 'ngCordova']);
+var app = angular.module('myApp',['ionic','ngCordova']);
 app.config(['$controllerProvider', function($controllerProvider) {
 	$controllerProvider.allowGlobals();
 }]);
 app.config(function($stateProvider, $urlRouterProvider) {
   $stateProvider
   .state('index', {
-    url: '/index',
-    templateProvider : function(display){/*use display service to load the intel xdk template by page id*/
-        return display.getPageTemplate('page-index').then(function(template){
-            return template;
-        });      
-    },
-    controller: 'IndexController'
+    url: '/',
+      views : {
+          index:{
+            templateProvider : function(display){/*use display service to load the intel xdk template by page id*/
+                return display.getPageTemplate('page-index').then(function(template){
+                    return template;
+                });  
+
+            },
+            controller: 'IndexController'
+          }
+      }
   })
   .state('search', {
     url: '/search',
-    templateProvider : function(display){
-        return display.getPageTemplate('page-search').then(function(template){
-            return template;
-        }); 
-    },
-    controller: 'SearchController'    
+       views : {
+          index:{
+            templateProvider : function(display){
+                return display.getPageTemplate('page-search').then(function(template){
+                    return template;
+                }); 
+            },
+            controller: 'SearchController'    
+          }
+       }
   })
 
-  $urlRouterProvider.otherwise("/index");
+  $urlRouterProvider.otherwise("/");
 
 });
diff --git a/IonicProjectStarter/www/js/services.js b/IonicProjectStarter/www/js/services.js
@@ -1,4 +1,4 @@
-app.factory('display', ['$filter','$q','$ionicPopup', function($filter, $q, $ionicPopup) {
+app.factory('display', ['$filter','$q','$ionicPopup', function($filter, $q, $ionicPopup, $ionicPlatform, $cordovaLocalNotification) {
     return {
         alert : function(message, title, button, callback){
             if(!callback) var callback = function(){return;}
@@ -17,6 +17,23 @@ app.factory('display', ['$filter','$q','$ionicPopup', function($filter, $q, $ion
                });
                alertPopup.then(callback);
         },
+        sendNotification : function(notification){
+            /*requires $cordovaLocalNotification add the plugin from cordova directory*/
+            $ionicPlatform.ready(function() {
+                /*
+                Sample notification
+                {
+                    id: 1,
+                    title: "Production Jour fixe",
+                    text: "Duration 1h",
+                    firstAt: alarmTime,
+                    every: "hour",
+                    data: { meetingId:"123" }
+                }
+                */
+                $cordovaLocalNotification.schedule(notification);
+            });
+        },
         goToPath : function(pathLink){
             var path = "index.html#" + pathLink;
             window.location = path;

diff --git a/IonicProjectStarter/www/js/views_init_services.js b/IonicProjectStarter/www/js/views_init_services.js
@@ -0,0 +1,11 @@
+/* --------------
+ initialization 
+  the xdkFilter argument can be set to a function that
+   receives the data of the service method and can return alternate data
+   thus you can reformat dates or names, remove or add entries, etc.
+   -------------- */
+
+angular.module('myApp',['ionic']).config(['$controllerProvider', function($controllerProvider) {
+	$controllerProvider.allowGlobals();
+}]);
+
diff --git a/IonicProjectStarter/www/lib/ng-cordova-mocks.min.js b/IonicProjectStarter/www/lib/ng-cordova-mocks.min.js
diff --git a/IonicProjectStarter/www/lib/ng-cordova.min.js b/IonicProjectStarter/www/lib/ng-cordova.min.js
diff --git a/IonicProjectStarter/www/views.html b/IonicProjectStarter/www/views.html
@@ -12,38 +12,73 @@
     <script src="xhr.js"></script>
     <script src="xdk/init-dev.js"></script>
     <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
-    <script type="application/javascript" src="js/views_init_services.js"></script>
+    <script type="application/javascript" src="lib/jquery.min.js"></script>
+    <script type="application/javascript" src="marginal/marginal-position.js"></script>
   </head>
 
   <body ng-app="myApp">
-    <div class="upage vertical-col left" id="page-index">
-      <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
-        <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
-          <div class="widget-container content-area vertical-col">
-
-            <ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
-              <ion-item class="item item-body widget uib_w_5 d-margins" data-uib="ionic/list_item_body" data-ver="0">
-                <img class="full-image" ng-src="images/Strabburg.jpg" src="images/Strabburg.jpg">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor justo et ipsum tempor commodo. Nam eget metus nisl. Sed quis leo enim. Etiam suscipit nec ipsum ac tristique.</p>
-              </ion-item>
-            </ion-list><span class="uib_shim"></span>
+
+    <div class="upage vertical-col left hidden" id="page-search">
+      <ion-view view-title="Search Page">
+        <ion-content>
+          <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
+            <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
+              <div class="widget-container content-area vertical-col">
+                <label class="item item-input widget uib_w_21 d-margins" data-uib="ionic/input" data-ver="0">
+                  <i class="icon ion-ios7-search ion placeholder-icon"></i>
+                  <input type="search" placeholder="Search">
+                </label>
+                <ion-list class="widget uib_w_28 d-margins" data-uib="ionic/list" data-ver="0">
+                  <ion-item class="item widget uib_w_29" data-uib="ionic/list_item" data-ver="0">List item 1</ion-item>
+                  <ion-item class="item widget uib_w_30" data-uib="ionic/list_item" data-ver="0">List item 2</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 3</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 4</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 5</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 6</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 7</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 8</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 9</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 10</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 11</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 12</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 13</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 14</ion-item>
+                  <ion-item class="item widget uib_w_31" data-uib="ionic/list_item" data-ver="0">List item 15</ion-item>
+                </ion-list>
+              </div>
+            </div>
+            <span class="uib_shim"></span>
           </div>
-        </div>
-        <span class="uib_shim"></span>
-      </div>
+        </ion-content>
+      </ion-view>
     </div>
-    <div class="upage vertical-col left hidden" id="page-search">
-      <div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
-        <div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
-          <div class="widget-container content-area vertical-col">
-            <label class="item item-input widget uib_w_8 d-margins" data-uib="ionic/input" data-ver="0">
-              <i class="icon ion-android-search ion placeholder-icon"></i>
-              <input type="search" placeholder="Placeholder">
-            </label><span class="uib_shim"></span>
+    <div class="upage vertical-col left hidden" id="page-index">
+      <ion-view view-title="Home Page">
+        <ion-content>
+          <div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
+            <div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
+              <div class="widget-container content-area vertical-col">
+
+                <ion-list class="widget uib_w_23 d-margins" data-uib="ionic/list" data-ver="0">
+                  <ion-item class="item item-body widget uib_w_27 d-margins" data-uib="ionic/list_item_body" data-ver="0">
+                    <img class="full-image" src="images/Strabburg.jpg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor justo et ipsum tempor commodo. Nam eget metus nisl. Sed quis leo enim. Etiam suscipit nec ipsum ac tristique.</p>
+                  </ion-item>
+                </ion-list><span class="uib_shim"></span>
+              </div>
+            </div>
+            <span class="uib_shim"></span>
+          </div>
+        </ion-content>
+
+        <ion-footer-bar class="bar inner-element uib_w_4 bar-light bar-footer" data-uib="ionic/footer" data-ver="0">
+          <div class="buttons widget-container content-area horiz-area wrapping-col">
+          </div>
+          <h1 class="title">Powered by Reinsys</h1>
+          <div class="buttons widget-container content-area horiz-area wrapping-col">
           </div>
-        </div>
-        <span class="uib_shim"></span>
-      </div>
+        </ion-footer-bar>
+      </ion-view>
     </div>
 
   </body>