diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index c075d761e1..a89c3bfb1d 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -634,7 +634,8 @@ address { .bar .title + .buttons { position: absolute; top: 5px; - right: 5px; } + right: 5px; + bottom: 5px; } .bar-default .button { color: #333333; @@ -772,10 +773,13 @@ address { box-shadow: none; font-size: 17px; } +.bar [class^="icon-"], +.bar [class*=" icon-"] { + font-size: 24px; } + .bar .button-icon { border: 1px solid transparent; - background-color: transparent; - font-size: 24px; } + background-color: transparent; } .bar-header { top: 0; } @@ -1123,7 +1127,8 @@ a.list-item { border: 1px solid #dddddd; z-index: 2; margin-top: -1px; - padding: 15px; + padding: 15px 45px 15px 15px; + font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .list-item-content i { @@ -1139,14 +1144,36 @@ a.list-item { .list-icon-left .list-item-content i { left: 7.5px; } -.list-icon-right .list-item-content { - padding-right: 45px; } - .list-icon-right .list-item-content i { - right: 7.5px; } +.list-icon-right .list-item-content i { + right: 7.5px; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: 11px; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; } + +a.list-icon-right .list-item-content:after, +button.list-icon-right .list-item-content:after { + display: none; } + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; @@ -1163,7 +1190,7 @@ a.list-item { .list-thumbnail .list-item-content { padding-left: 95px; min-height: 80px; } - .list-thumbnail .list-item-content img { + .list-thumbnail .list-item-content .thumbnail { position: absolute; top: 0; left: 0; @@ -1274,16 +1301,10 @@ a.list-item { * List refreser elements */ .list-refresher { + background-color: red; height: 0; overflow: hidden; } -.list-refresher-content { - padding: 20px; - text-align: center; } - -.list-refreshing { - -webkit-transition: height 0.2s ease-in-out; } - form { margin: 0 0 1.42857; } diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a2e27239f6..8bd21cc1dd 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1743,7 +1743,8 @@ address { .bar .title + .buttons { position: absolute; top: 5px; - right: 5px; } + right: 5px; + bottom: 5px; } .bar-default .button { color: #333333; @@ -1881,10 +1882,13 @@ address { box-shadow: none; font-size: 17px; } +.bar [class^="icon-"], +.bar [class*=" icon-"] { + font-size: 24px; } + .bar .button-icon { border: 1px solid transparent; - background-color: transparent; - font-size: 24px; } + background-color: transparent; } .bar-header { top: 0; } @@ -2266,7 +2270,8 @@ a.list-item { border: 1px solid #dddddd; z-index: 2; margin-top: -1px; - padding: 15px; + padding: 15px 45px 15px 15px; + font-size: 16px; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } .list-item-content i { @@ -2282,14 +2287,36 @@ a.list-item { .list-icon-left .list-item-content i { left: 7.5px; } -.list-icon-right .list-item-content { - padding-right: 45px; } - .list-icon-right .list-item-content i { - right: 7.5px; } +.list-icon-right .list-item-content i { + right: 7.5px; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: 11px; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; } + +a.list-icon-right .list-item-content:after, +button.list-icon-right .list-item-content:after { + display: none; } + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; @@ -2306,7 +2333,7 @@ a.list-item { .list-thumbnail .list-item-content { padding-left: 95px; min-height: 80px; } - .list-thumbnail .list-item-content img { + .list-thumbnail .list-item-content .thumbnail { position: absolute; top: 0; left: 0; @@ -2417,16 +2444,10 @@ a.list-item { * List refreser elements */ .list-refresher { + background-color: red; height: 0; overflow: hidden; } -.list-refresher-content { - padding: 20px; - text-align: center; } - -.list-refreshing { - -webkit-transition: height 0.2s ease-in-out; } - form { margin: 0 0 1.42857; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 8edec6c3fb..32913ffd52 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -367,7 +367,7 @@ angular.module('ionic.ui.content', []) (function() { 'use strict'; -angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) +angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate']) .directive('listItem', function() { return { @@ -384,7 +384,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) canSwipe: '@', buttons: '=', }, - template: '
  • \ + template: '
  • \
    \ \
    \ @@ -413,15 +413,6 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) }; }) -.directive('listRefresher', function() { - return { - restrict: 'E', - replace: true, - transclude: true, - template: '
    ' - } -}) - .directive('list', function() { return { restrict: 'E', @@ -431,10 +422,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) scope: { isEditing: '=', deleteIcon: '@', - reorderIcon: '@', - onRefreshOpening: '&', - onRefreshHolding: '&', - onRefresh: '&', + reorderIcon: '@' }, // So we can require being under this @@ -453,12 +441,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) compile: function(element, attr, transclude) { return function($scope, $element, $attr) { - var lv = new ionic.views.List({ - el: $element[0], - onRefreshOpening: function(ratio) { $scope.onRefreshOpening({ratio: ratio}) }, - onRefreshHolding: function() { $scope.onRefreshHolding(); }, - onRefresh: function() { $scope.onRefresh(); } - }); + var lv = new ionic.views.List({el: $element[0]}); if(attr.animation) { $element.addClass(attr.animation); diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 01ac2a557b..07b742e7d6 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -3746,10 +3746,6 @@ ionic.controllers.TabBarController.prototype = { return this.selectedController; }, - getSelectedIndex: function() { - return this.selectedIndex; - }, - // Add a tab addController: function(controller) { this.controllers.push(controller); diff --git a/js/controllers/tabBarController.js b/js/controllers/tabBarController.js index 589c70f72d..f0e1355d24 100644 --- a/js/controllers/tabBarController.js +++ b/js/controllers/tabBarController.js @@ -97,10 +97,6 @@ ionic.controllers.TabBarController.prototype = { return this.selectedController; }, - getSelectedIndex: function() { - return this.selectedIndex; - }, - // Add a tab addController: function(controller) { this.controllers.push(controller); diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index bfd8ba8992..e7b656eded 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -1,7 +1,7 @@ (function() { 'use strict'; -angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) +angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate']) .directive('listItem', function() { return { @@ -18,7 +18,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) canSwipe: '@', buttons: '=', }, - template: '
  • \ + template: '
  • \
    \ \
    \ @@ -47,15 +47,6 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) }; }) -.directive('listRefresher', function() { - return { - restrict: 'E', - replace: true, - transclude: true, - template: '
    ' - } -}) - .directive('list', function() { return { restrict: 'E', @@ -65,10 +56,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) scope: { isEditing: '=', deleteIcon: '@', - reorderIcon: '@', - onRefreshOpening: '&', - onRefreshHolding: '&', - onRefresh: '&', + reorderIcon: '@' }, // So we can require being under this @@ -87,12 +75,7 @@ angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate']) compile: function(element, attr, transclude) { return function($scope, $element, $attr) { - var lv = new ionic.views.List({ - el: $element[0], - onRefreshOpening: function(ratio) { $scope.onRefreshOpening({ratio: ratio}) }, - onRefreshHolding: function() { $scope.onRefreshHolding(); }, - onRefresh: function() { $scope.onRefresh(); } - }); + var lv = new ionic.views.List({el: $element[0]}); if(attr.animation) { $element.addClass(attr.animation); diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss index 727ba97d55..53861dba82 100644 --- a/scss/ionic-ios7/ionic-ios7.scss +++ b/scss/ionic-ios7/ionic-ios7.scss @@ -16,7 +16,7 @@ "../ionic/tabs", "../ionic/menu", "../ionic/modal", - "../ionic/listview", + "../ionic/list", // Forms "../ionic/form", diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index d2707eb77b..5d2bb7ea12 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -117,6 +117,7 @@ position: absolute; top: 5px; right: 5px; + bottom: 5px; } } @@ -175,12 +176,16 @@ } } -.bar .button-icon { - border: 1px solid transparent; - background-color: transparent; +.bar [class^="icon-"], +.bar [class*=" icon-"] { font-size: 24px; } +.bar .button-icon { + border: $button-border-width solid transparent; + background-color: transparent; +} + // Header at top .bar-header { top: 0; diff --git a/scss/ionic/_listview.scss b/scss/ionic/_list.scss similarity index 87% rename from scss/ionic/_listview.scss rename to scss/ionic/_list.scss index 9cc9ba3adb..6cded346e4 100644 --- a/scss/ionic/_listview.scss +++ b/scss/ionic/_list.scss @@ -110,7 +110,8 @@ a.list-item { z-index: 2; margin-top: $list-item-border-width * -1; - padding: $list-item-padding; + padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding; + font-size: $list-font-size; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } @@ -132,18 +133,44 @@ a.list-item { } } -.list-icon-right .list-item-content { - padding-right: ($list-item-padding * 3); - - i { - right: $list-item-padding / 2; - } +.list-icon-right .list-item-content i { + right: $list-item-padding / 2; } .list-icon-left.list-icon-right .list-item-content i:last-child { left: auto; } +a .list-item-content:after, +button .list-item-content:after { + position: absolute; + top: 0; + right: $list-item-padding - 4; + display: flex; + height: 100%; + color: #ccc; + content: "\e0fc"; // icon-chevron-right + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-size: 16px; + font-family: 'ionicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; + align-items: center; +} + +// do not show the default right arrow when they want their own right side icon +a.list-icon-right, +button.list-icon-right { + .list-item-content:after { + display: none; + } +} + + .list-thumbnail h2 { overflow: hidden; margin: 0 0 8px 0; @@ -163,7 +190,7 @@ a.list-item { padding-left: $list-thumbnail-width + $list-item-padding; min-height: $list-thumbnail-width; - img { + .thumbnail { position: absolute; top: 0; left: 0; @@ -304,13 +331,9 @@ a.list-item { * List refreser elements */ .list-refresher { + background-color: red; height: 0; overflow: hidden; } -.list-refresher-content { - padding: 20px; - text-align: center; -} .list-refreshing { - -webkit-transition: height 0.2s ease-in-out; } diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss index d90de00573..f8cde9d8da 100644 --- a/scss/ionic/_mixins.scss +++ b/scss/ionic/_mixins.scss @@ -131,17 +131,6 @@ clear: both; } } - -// Webkit-style focus -// ------------------ -@mixin tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - // Center-align a block level element // ---------------------------------- @mixin center-block() { diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index 533998369c..1b0301b9b9 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -213,7 +213,7 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%); // Buttons // ------------------------------- -$button-bar-button-line-height: 15px !default; +$button-bar-button-line-height: 15px !default; $button-color: #222; $button-padding: 8px 12px; @@ -337,6 +337,8 @@ $tabs-dark-border-color: $button-dark-border; // Lists // ------------------------------- +$list-font-size: 16px; + $list-header-bg: transparent; $list-header-color: #222; $list-header-padding: 5px 15px; diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss index 37eb3c0673..199c1a3482 100644 --- a/scss/ionic/ionic-scoped.scss +++ b/scss/ionic/ionic-scoped.scss @@ -22,7 +22,7 @@ "tabs", "menu", "modal", - "listview", + "list", // Forms "form", diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index 2410c37aa5..a1bfaaf104 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -21,7 +21,7 @@ "menu", "modal", "popup", - "listview", + "list", // Forms "form", diff --git a/test/headers.html b/test/headers.html index 178c64e4c7..c6ce158f1f 100644 --- a/test/headers.html +++ b/test/headers.html @@ -5,8 +5,7 @@ - - +