From 3400cc02763ae216156ade382314e45a559d3237 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 13 Nov 2013 15:01:09 -0600 Subject: [PATCH] Default style for list items --- dist/css/ionic.css | 15 ++--- dist/js/ionic-angular.js | 14 +++-- js/ext/angular/src/directive/ionicContent.js | 10 +++- js/ext/angular/src/directive/ionicList.js | 4 +- js/ext/angular/test/modal.html | 61 ++++++++++++++------ scss/_items.scss | 5 +- scss/_variables.scss | 1 + test/input-text.html | 2 +- 8 files changed, 76 insertions(+), 36 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index f288c93925..d5c25cf239 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3190,14 +3190,8 @@ a.subdued‎ { border-color: #dddddd; background-color: white; font-size: 16px; + color: #666666; -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } - .item.active { - color: #444444; - background-color: white; - border-color: #444444; } - .item.active .item-content { - background-color: white; - color: #444444; } .item h2 { margin: 0 0 4px 0; font-size: 16px; } @@ -3229,6 +3223,13 @@ a.subdued‎ { z-index: 2; } .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading { color: inherit; } + .item.active { + color: #444444; + background-color: white; + border-color: #444444; } + .item.active .item-content { + background-color: white; + color: #444444; } .item-light.active { color: white; diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index bc3b81c618..066d602385 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -514,12 +514,16 @@ angular.module('ionic.ui.checkbox', []) angular.module('ionic.ui.content', []) +/** + * Panel is a simple 100% width and height, fixed panel. It's meant for content to be + * added to it, or animated around. + */ .directive('pane', function() { return { restrict: 'E', - replace: true, - transclude: true, - template: '
' + compile: function(element, attr) { + element.addClass('pane'); + } } }) @@ -701,9 +705,9 @@ angular.module('ionic.ui.list', ['ngAnimate']) } // Add the list item type class - $element.addClass($attr.type || 'item-slider'); + $element.addClass($attr.type || 'item-complex'); - if($attr.type !== 'item-slider') { + if($attr.type !== 'item-complex') { $scope.canSwipe = false; } diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 97d9796083..6a34354e9e 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -3,12 +3,16 @@ angular.module('ionic.ui.content', []) +/** + * Panel is a simple 100% width and height, fixed panel. It's meant for content to be + * added to it, or animated around. + */ .directive('pane', function() { return { restrict: 'E', - replace: true, - transclude: true, - template: '
' + compile: function(element, attr) { + element.addClass('pane'); + } } }) diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index 9a693ea1d9..4ee801715f 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -42,9 +42,9 @@ angular.module('ionic.ui.list', ['ngAnimate']) } // Add the list item type class - $element.addClass($attr.type || 'item-slider'); + $element.addClass($attr.type || 'item-complex'); - if($attr.type !== 'item-slider') { + if($attr.type !== 'item-complex') { $scope.canSwipe = false; } diff --git a/js/ext/angular/test/modal.html b/js/ext/angular/test/modal.html index a48cfbf7b9..fa4c249b4c 100644 --- a/js/ext/angular/test/modal.html +++ b/js/ext/angular/test/modal.html @@ -11,22 +11,44 @@ - -
- -
- + + +

Contacts

+ + + + + + {{contact.name}} + + + + @@ -37,6 +59,17 @@ angular.module('modalTest', ['ionic', 'ngAnimate']) .controller('ModalCtrl', function($scope, Modal) { + $scope.contacts = [ + { name: 'Gordon Freeman' }, + { name: 'Barney Calhoun' }, + { name: 'Lamar the Headcrab' }, + ]; + $scope.openModal = function() { + $scope.modal.show(); + }; + $scope.closeModal = function() { + $scope.modal.hide(); + }; Modal.fromTemplateUrl('modal.html', function(modal) { $scope.modal = modal; }, { @@ -44,12 +77,6 @@ animation: 'slide-in-up' }); - $scope.openModal = function() { - $scope.modal.show(); - }; - $scope.closeModal = function() { - $scope.modal.hide(); - }; }); diff --git a/scss/_items.scss b/scss/_items.scss index ab26ac3c4b..2715b13388 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -5,7 +5,6 @@ */ .item { - @include item-style-active($light, $dark, $dark); position: relative; z-index: 2; // Make sure the borders and stuff don't get hidden by children @@ -20,6 +19,8 @@ background-color: $list-bg; font-size: $list-font-size; + color: $light-color; + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; h2 { @@ -72,6 +73,8 @@ color: inherit; } } + + @include item-style-active($light, $dark, $dark); } // Different themes for list items diff --git a/scss/_variables.scss b/scss/_variables.scss index 84b32eeb99..faf984b9af 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -36,6 +36,7 @@ $headings-line-height: 1.1 !default; $base-background-color: #fff; $base-color: #000; +$light-color: #666666; $link-color: $positive !default; $link-hover-color: darken($link-color, 15%) !default; diff --git a/test/input-text.html b/test/input-text.html index d4d2c63b8d..1fc6ae0ffb 100644 --- a/test/input-text.html +++ b/test/input-text.html @@ -15,7 +15,7 @@

Text Inputs

-
+

Default Text Input, Not Inset, No Content Padding