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 @@
Search - Custom Placeholder
- +
Search - Default Cancel Button
-
Search - Custom Cancel Button
- +
Search - Custom Cancel Button Danger
+
Search - Custom Cancel Action
diff --git a/ionic/components/search-bar/test/toolbar/e2e.ts b/ionic/components/search-bar/test/toolbar/e2e.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ionic/components/search-bar/test/toolbar/index.ts b/ionic/components/search-bar/test/toolbar/index.ts new file mode 100644 index 0000000000..f089ae40df --- /dev/null +++ b/ionic/components/search-bar/test/toolbar/index.ts @@ -0,0 +1,15 @@ +import {App, NavController} from 'ionic/ionic'; +import {Page, Config, IonicApp} from 'ionic/ionic'; +import {NavParams, NavController, ViewController} from 'ionic/ionic'; +import {SearchPipe} from 'ionic/components/search-bar/search-bar'; + +@App({ + templateUrl: 'main.html' +}) +class IonicApp { + toolbarSearch: string; + + constructor() { + + } +} diff --git a/ionic/components/search-bar/test/toolbar/main.html b/ionic/components/search-bar/test/toolbar/main.html new file mode 100644 index 0000000000..b63e17bf6b --- /dev/null +++ b/ionic/components/search-bar/test/toolbar/main.html @@ -0,0 +1,21 @@ + + Test + + + +
Search - Default Toolbar
+ + + + +
Search - Primary Toolbar
+ + + + +
Search - Danger Toolbar
+ + + + +
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss index 485b318599..ed544b7d4b 100644 --- a/ionic/components/segment/modes/ios.scss +++ b/ionic/components/segment/modes/ios.scss @@ -13,6 +13,13 @@ $segment-button-ios-text-color: inverse($segment-button-ios-bg-col $segment-button-ios-activated-transition: 100ms all linear !default; $segment-button-ios-hover-opacity: 0.16 !default; +$segment-button-ios-toolbar-button-max-width: 100px !default; + + +ion-segment { + display: flex; + align-items: center; +} .ion-segment { @@ -63,6 +70,17 @@ $segment-button-ios-hover-opacity: 0.16 !default; } +ion-toolbar { + .ion-segment { + justify-content: center; + + button, + [button] { + max-width: $segment-button-ios-toolbar-button-max-width; + } + } +} + // Generate Default Button Colors // -------------------------------------------------- diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss index 28bb466222..f35081371b 100644 --- a/ionic/components/segment/modes/md.scss +++ b/ionic/components/segment/modes/md.scss @@ -34,6 +34,13 @@ $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !de } } +ion-toolbar { + .ion-segment { + width: 95%; + margin: 0 auto; + } +} + // Generate Default Button Colors // -------------------------------------------------- diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index 454970a783..a3ef84d259 100644 --- a/ionic/components/segment/segment.scss +++ b/ionic/components/segment/segment.scss @@ -7,6 +7,7 @@ $segment-button-padding: 0 16px !default; ion-segment { display: block; + width: 100%; } .ion-segment { diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index 3b4d5cc857..f692f8f488 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -1,14 +1,12 @@ - - - - Friends - - - Enemies - - - + + + Friends + + + Enemies + + @@ -17,16 +15,14 @@ - - - - Something - - - Else - - - + + + Something + + + Else + + @@ -87,17 +83,15 @@ - - - - Paid - - - Free - - - Top Grossing - - - + + + Paid + + + Free + + + Top Grossing + + diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index ef799906d8..78fdccde4f 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -3,7 +3,7 @@ import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef, import {Ion} from '../ion'; import {Config} from '../../config/config'; import {MenuToggle} from '../menu/menu-toggle'; -import {Navbar} from '../nav-bar/nav-bar'; +import {Navbar} from '../navbar/navbar'; /** @@ -60,7 +60,7 @@ export class ToolbarBase extends Ion { template: '
' + '' + - '' + + '' + '' + '' + '
' + diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index 71595081c7..a06d8cd281 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -28,7 +28,7 @@ import {SearchBar} from '../components/search-bar/search-bar'; import {Nav} from '../components/nav/nav'; import {NavPush, NavPop} from '../components/nav/nav-push'; import {NavRouter} from '../components/nav/nav-router'; -import {NavbarTemplate, Navbar} from '../components/nav-bar/nav-bar'; +import {NavbarTemplate, Navbar} from '../components/navbar/navbar'; import {IdRef} from '../components/app/id'; import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when'; diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index c8bf1d9991..572b2d07be 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -35,7 +35,7 @@ "components/menu/menu", "components/menu/menu-types", "components/modal/modal", - "components/nav-bar/nav-bar", + "components/navbar/navbar", "components/popup/popup", "components/slides/slides", "components/radio/radio", diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss index 42aae80932..a27a1a9d4d 100644 --- a/ionic/ionic.ios.scss +++ b/ionic/ionic.ios.scss @@ -13,7 +13,7 @@ "components/content/modes/ios", "components/list/modes/ios", "components/text-input/modes/ios", - "components/nav-bar/modes/ios", + "components/navbar/modes/ios", "components/popup/modes/ios", "components/checkbox/modes/ios", "components/radio/modes/ios", diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss index b0f5a63cd5..7b6f427dee 100644 --- a/ionic/ionic.md.scss +++ b/ionic/ionic.md.scss @@ -13,7 +13,7 @@ "components/card/modes/md", "components/checkbox/modes/md", "components/text-input/modes/md", - "components/nav-bar/modes/md", + "components/navbar/modes/md", "components/popup/modes/md", "components/radio/modes/md", "components/search-bar/modes/md", diff --git a/scripts/docs/templates/api_menu_version.template.html b/scripts/docs/templates/api_menu_version.template.html index c6f4c2a3c1..9ed861b45e 100644 --- a/scripts/docs/templates/api_menu_version.template.html +++ b/scripts/docs/templates/api_menu_version.template.html @@ -330,17 +330,17 @@