From 80d054762c4d8b3fb8ca00be60e93b50ff17b5f9 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 13 Nov 2013 19:59:50 -0600 Subject: [PATCH] Header bar tweaks --- dist/css/ionic.css | 12 +++---- dist/css/themes/ionic-ios7.css | 5 +-- dist/js/ionic-angular.js | 40 +++++++++++++++++++-- dist/js/ionic.js | 1 - js/ext/angular/src/directive/ionicHeader.js | 35 ++++++++++++++++-- js/ext/angular/src/ionicAngular.js | 5 +++ js/ext/angular/test/header.html | 30 ++++++++++++---- js/ext/angular/test/modal.html | 24 ++++++++----- js/views/headerBarView.js | 1 - 9 files changed, 125 insertions(+), 28 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index d83f68b1ff..26bd0deae3 100644 --- a/dist/css/ionic.css +++ b/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; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index 41d2ed40e2..631acc5604 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/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; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 7d81d708c7..5612acf1c3 100644 --- a/dist/js/ionic-angular.js +++ b/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: '
', + template: '
\ +
\ + \ +
\ +

\ +
\ + \ +
\ +
', + 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() { // }); diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 29affd66a2..ce2ef5cd1c 100644 --- a/dist/js/ionic.js +++ b/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'; diff --git a/js/ext/angular/src/directive/ionicHeader.js b/js/ext/angular/src/directive/ionicHeader.js index ef72aa721f..d1cfc0c039 100644 --- a/js/ext/angular/src/directive/ionicHeader.js +++ b/js/ext/angular/src/directive/ionicHeader.js @@ -9,11 +9,26 @@ angular.module('ionic.ui.header', ['ngAnimate']) restrict: 'E', replace: true, transclude: true, - template: '
', + template: '
\ +
\ + \ +
\ +

\ +
\ + \ +
\ +
', + 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() { // }); diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js index 0a3f1360d3..b07fd098c7 100644 --- a/js/ext/angular/src/ionicAngular.js +++ b/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' ]); diff --git a/js/ext/angular/test/header.html b/js/ext/angular/test/header.html index 36b105b4ed..5f90530c6a 100644 --- a/js/ext/angular/test/header.html +++ b/js/ext/angular/test/header.html @@ -9,16 +9,34 @@ + - - - -

A really really long title here here here here her

- + + + + + + - - + + + + + + - -

Contacts

- + @@ -53,8 +54,6 @@ - -