Header bar tweaks

dist/css/ionic.css

@@ -19,7 +19,7 @@
  * Utility Mixins
  * --------------------------------------------------
  */
-/*!
+/*
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2061,7 +2061,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -4148,7 +4148,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -4207,7 +4207,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4222,7 +4222,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4695,7 +4695,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    text-shadow: 0px 0px 10px white; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }

dist/css/themes/ionic-ios7.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Button Mixins
  * --------------------------------------------------
@@ -138,7 +139,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -153,4 +154,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }

dist/js/ionic-angular.js

@@ -27,6 +27,11 @@ angular.module('ionic.ui', [
 angular.module('ionic', [
     'ionic.service',
     'ionic.ui',
+    
+    // Angular deps
+    'ngAnimate',
+    'ngTouch',
+    'ngSanitize'
 ]);
 ;
 angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
@@ -637,11 +642,26 @@ angular.module('ionic.ui.header', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<header class="bar bar-header" ng-transclude></header>',
+    template: '<header class="bar bar-header">\
+                <div class="buttons">\
+                  <button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+                <h1 class="title" ng-bind="title"></h1>\
+                <div class="buttons">\
+                  <button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+              </header>',
+
     scope: {
+      leftButtons: '=',
+      rightButtons: '=',
+      title: '=',
       type: '@',
-      alignTitle: '@',
+      alignTitle: '@'
     },
+
     link: function($scope, $element, $attr) {
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
@@ -652,6 +672,22 @@ angular.module('ionic.ui.header', ['ngAnimate'])
 
       $scope.headerBarView = hb;
 
+      $scope.$watch('leftButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('rightButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('title', function(val) {
+        // Resize the title since the title has changed
+        console.log('Title changed');
+        hb.align();
+      });
+
       $scope.$on('$destroy', function() {
         //
       });

dist/js/ionic.js

@@ -2943,7 +2943,6 @@ window.ionic = {
           title.style.left = margin + 'px';
           title.style.right = margin + 'px';
 
-          console.log(title.offsetWidth, title.scrollWidth);
           if(title.offsetWidth < title.scrollWidth) {
             title.style.textAlign = 'left';
             title.style.right = (rightWidth + 5) + 'px';

js/ext/angular/src/directive/ionicHeader.js

@@ -9,11 +9,26 @@ angular.module('ionic.ui.header', ['ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<header class="bar bar-header" ng-transclude></header>',
+    template: '<header class="bar bar-header">\
+                <div class="buttons">\
+                  <button ng-repeat="button in leftButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+                <h1 class="title" ng-bind="title"></h1>\
+                <div class="buttons">\
+                  <button ng-repeat="button in rightButtons" class="button" ng-class="button.type" ng-click="button.click($event, $index)" ng-bind-html="button.content">\
+                  </button>\
+                </div>\
+              </header>',
+
     scope: {
+      leftButtons: '=',
+      rightButtons: '=',
+      title: '=',
       type: '@',
-      alignTitle: '@',
+      alignTitle: '@'
     },
+
     link: function($scope, $element, $attr) {
       var hb = new ionic.views.HeaderBar({
         el: $element[0],
@@ -24,6 +39,22 @@ angular.module('ionic.ui.header', ['ngAnimate'])
 
       $scope.headerBarView = hb;
 
+      $scope.$watch('leftButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('rightButtons', function(val) {
+        // Resize the title since the buttons have changed
+        hb.align();
+      });
+
+      $scope.$watch('title', function(val) {
+        // Resize the title since the title has changed
+        console.log('Title changed');
+        hb.align();
+      });
+
       $scope.$on('$destroy', function() {
         //
       });

js/ext/angular/src/ionicAngular.js

@@ -27,4 +27,9 @@ angular.module('ionic.ui', [
 angular.module('ionic', [
     'ionic.service',
     'ionic.ui',
+    
+    // Angular deps
+    'ngAnimate',
+    'ngTouch',
+    'ngSanitize'
 ]);

js/ext/angular/test/header.html

@@ -9,16 +9,34 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
   </head>
-  <body>
+  <body ng-controller="TestCtrl">
-    <header-bar type="bar-primary" align-title="left">
+    <header-bar
-      <button class="button">Tap</button>
+      title="headerTitle"
-      <h1 class="title">A really really long title here here here here her</h1>
+      left-buttons="leftButtons"
-    </header-bar>
+      right-buttons="rightButtons"
+      type="bar-primary"></header-bar>
+
+    <content has-header="true">
+      <input type="text" ng-model="headerTitle">
+    </content>
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('headerTest', ['ionic']);
+      angular.module('headerTest', ['ionic'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.headerTitle = 'A really long title here';
+        $scope.leftButtons = [
+          { 
+            text: 'Hello',
+            click: function(e) {
+              console.log('Click button');
+            }
+          }
+        ]
+      });
       var midPoint = window.clientWidth / 2;
       var box = document.createElement('div');
       box.style.backgroundColor = 'red';

js/ext/angular/test/modal.html

@@ -6,15 +6,16 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
   </head>
   <body>
     <pane ng-controller="ModalCtrl">
-        <header-bar type="bar-positive">
+        <header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
-          <h1 class="title">Contacts</h1>
-          <button class="button button-icon" ng-click="openModal()"><i class="icon ion-compose"></i></button>
         </header-bar>
         <content has-header="true">
           <list>
@@ -53,8 +54,6 @@
       </div>
     </script>
 
-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       angular.module('modalTest', ['ionic'])
 
@@ -64,6 +63,15 @@
           { name: 'Barney Calhoun' },
           { name: 'Lamarr the Headcrab' },
         ];
+        $scope.contactsRightButtons = [
+          {
+            type: 'button-icon',
+            content: '<i class="icon ion-compose"></i>',
+            click: function(e) {
+              $scope.openModal();
+            }
+          }
+        ];
         $scope.openModal = function() {
           $scope.modal.show();
         };

js/views/headerBarView.js

@@ -79,7 +79,6 @@
           title.style.left = margin + 'px';
           title.style.right = margin + 'px';
 
-          console.log(title.offsetWidth, title.scrollWidth);
           if(title.offsetWidth < title.scrollWidth) {
             title.style.textAlign = 'left';
             title.style.right = (rightWidth + 5) + 'px';