diff --git a/ionic/components.ts b/ionic/components.ts index 3d7cd58ef2..9fbd8f90c3 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -24,7 +24,7 @@ export * from 'ionic/components/nav/nav-controller' export * from 'ionic/components/nav/view-controller' export * from 'ionic/components/nav/nav-push' export * from 'ionic/components/nav/nav-router' -export * from 'ionic/components/nav-bar/nav-bar' +export * from 'ionic/components/navbar/navbar' export * from 'ionic/components/overlay/overlay' export * from 'ionic/components/popup/popup' export * from 'ionic/components/slides/slides' diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts index 48e5da262e..ea9bff80ad 100644 --- a/ionic/components/menu/menu-toggle.ts +++ b/ionic/components/menu/menu-toggle.ts @@ -3,7 +3,7 @@ import {Directive, ElementRef, Optional} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; import {ViewController} from '../nav/view-controller'; -import {Navbar} from '../nav-bar/nav-bar'; +import {Navbar} from '../navbar/navbar'; /** diff --git a/ionic/components/nav-bar/modes/ios.scss b/ionic/components/navbar/modes/ios.scss similarity index 100% rename from ionic/components/nav-bar/modes/ios.scss rename to ionic/components/navbar/modes/ios.scss diff --git a/ionic/components/nav-bar/modes/md.scss b/ionic/components/navbar/modes/md.scss similarity index 100% rename from ionic/components/nav-bar/modes/md.scss rename to ionic/components/navbar/modes/md.scss diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/navbar/navbar.scss similarity index 100% rename from ionic/components/nav-bar/nav-bar.scss rename to ionic/components/navbar/navbar.scss diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/navbar/navbar.ts similarity index 100% rename from ionic/components/nav-bar/nav-bar.ts rename to ionic/components/navbar/navbar.ts diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index 192b513c1c..22837e8d8f 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -30,21 +30,6 @@ ion-search-bar { min-height: $search-bar-ios-min-height; } -.search-bar-search-icon { - width: $search-bar-ios-input-search-icon-size + 1; - height: $search-bar-ios-input-search-icon-size + 1; - - @include svg-background-image($search-bar-ios-input-search-icon-svg); - background-size: $search-bar-ios-input-search-icon-size; - background-repeat: no-repeat; - position: absolute; - left: 10px; - top: 8px; - - @include calc(margin-left, "50% - 60px"); - transition: $search-bar-ios-input-transition; -} - .search-bar-input { height: $search-bar-ios-input-height; padding: 0 28px; @@ -55,8 +40,11 @@ ion-search-bar { border-radius: 5px; color: $search-bar-ios-input-text-color; background-color: $search-bar-ios-input-background-color; + + @include svg-background-image($search-bar-ios-input-search-icon-svg); + background-size: $search-bar-ios-input-search-icon-size; background-repeat: no-repeat; - background-position: 8px center; + background-position: calc(50% - 40px); &::placeholder { color: $search-bar-ios-input-placeholder-color; @@ -96,9 +84,37 @@ ion-search-bar { } .search-bar-input { padding-left: 28px; + background-position: 8px; } } &.hairlines ion-search-bar { border-bottom-width: 0.55px; } + +ion-toolbar { + + ion-search-bar { + background: transparent; + border-bottom-width: 0; + + .search-bar-input { + background-color: #E5E5E5; + } + } + +} + +// Generate Default Search Bar Colors +// -------------------------------------------------- + +@each $color, $value in $colors { + + ion-search-bar[#{$color}] { + //background-color: $value; + + .search-bar-cancel { + color: $value; + } + } +} diff --git a/ionic/components/search-bar/modes/md.scss b/ionic/components/search-bar/modes/md.scss index 1539ad7a2d..094b4adfe2 100644 --- a/ionic/components/search-bar/modes/md.scss +++ b/ionic/components/search-bar/modes/md.scss @@ -26,18 +26,6 @@ ion-search-bar { background: $search-bar-md-background-color; } -.search-bar-search-icon { - width: $search-bar-md-input-search-icon-size + 1; - height: $search-bar-md-input-search-icon-size + 1; - - @include svg-background-image($search-bar-md-input-search-icon-svg); - background-size: $search-bar-md-input-search-icon-size; - background-repeat: no-repeat; - position: absolute; - left: 13px; - top: 13px; -} - .search-bar-input { padding: 8px 55px; @@ -50,8 +38,11 @@ ion-search-bar { border-radius: $search-bar-md-input-border-radius; color: $search-bar-md-input-text-color; background-color: $search-bar-md-input-background-color; + + @include svg-background-image($search-bar-md-input-search-icon-svg); + background-size: $search-bar-md-input-search-icon-size; background-repeat: no-repeat; - background-position: 8px center; + background-position: 16px center; &::placeholder { color: $search-bar-md-input-placeholder-color; diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index fb0c581460..4cfb868054 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -20,19 +20,18 @@ import {ConfigComponent} from '../../config/decorators'; 'showCancel': false, 'cancelText': 'Cancel', 'placeholder': 'Search', - 'cancelAction': function(event, model) { + 'cancelAction': function(event, query) { // The cancel button now works on its own to blur the input console.log('Default Cancel'); } }, template: '
' + - '', + '', directives: [FORM_DIRECTIVES, NgIf, NgClass] }) diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts index d76585b913..85f5c2bebc 100644 --- a/ionic/components/search-bar/test/floating/index.ts +++ b/ionic/components/search-bar/test/floating/index.ts @@ -20,7 +20,8 @@ class IonicApp { } - myCancelAction(event, model) { - console.log("TODO get app property"); + myCancelAction(event, query) { + console.log("Clicked cancel action with", query); + this.clickedCustomAction = true; } } diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html index c30254b08c..8239950769 100644 --- a/ionic/components/search-bar/test/floating/main.html +++ b/ionic/components/search-bar/test/floating/main.html @@ -3,13 +3,13 @@