From 0824c3daf33a6f5f14a1668ca453ab0322e89547 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 2 Nov 2015 21:06:52 -0500 Subject: [PATCH] refactor(searchbar): moved search-bar files to searchbar references #419 --- demos/sink/index.ts | 2 +- ionic/components.ts | 2 +- ionic/components/search-bar/modes/ios.scss | 120 ------------------ ionic/components/search-bar/modes/md.scss | 69 ---------- .../search-bar/test/floating/main.html | 20 --- .../searchbar.scss} | 10 +- .../search-bar.ts => searchbar/searchbar.ts} | 14 +- .../test/basic/index.ts | 2 +- .../test/basic/main.html | 2 +- .../test/floating/e2e.ts | 2 +- .../test/floating/index.ts | 2 +- .../test/model/index.ts | 2 +- .../test/model/main.html | 2 +- .../test/toolbar/e2e.ts | 0 .../test/toolbar/index.ts | 2 +- .../test/toolbar/main.html | 6 +- ionic/config/directives.ts | 2 +- ionic/ionic.core.scss | 2 +- ionic/ionic.ios.scss | 2 +- ionic/ionic.md.scss | 2 +- scripts/snapshot/snapshot.config.js | 2 +- 21 files changed, 29 insertions(+), 238 deletions(-) delete mode 100644 ionic/components/search-bar/modes/ios.scss delete mode 100644 ionic/components/search-bar/modes/md.scss delete mode 100644 ionic/components/search-bar/test/floating/main.html rename ionic/components/{search-bar/search-bar.scss => searchbar/searchbar.scss} (78%) rename ionic/components/{search-bar/search-bar.ts => searchbar/searchbar.ts} (85%) rename ionic/components/{search-bar => searchbar}/test/basic/index.ts (93%) rename ionic/components/{search-bar => searchbar}/test/basic/main.html (83%) rename ionic/components/{search-bar => searchbar}/test/floating/e2e.ts (96%) rename ionic/components/{search-bar => searchbar}/test/floating/index.ts (89%) rename ionic/components/{search-bar => searchbar}/test/model/index.ts (93%) rename ionic/components/{search-bar => searchbar}/test/model/main.html (82%) rename ionic/components/{search-bar => searchbar}/test/toolbar/e2e.ts (100%) rename ionic/components/{search-bar => searchbar}/test/toolbar/index.ts (80%) rename ionic/components/{search-bar => searchbar}/test/toolbar/main.html (60%) diff --git a/demos/sink/index.ts b/demos/sink/index.ts index ec1128d33a..58a20a92f0 100644 --- a/demos/sink/index.ts +++ b/demos/sink/index.ts @@ -8,7 +8,7 @@ import {ListGroupPage} from './pages/list-group' import {CardPage} from './pages/card' import {FormPage} from './pages/form' import {SegmentPage} from './pages/segment' -import {SearchBarPage} from './pages/search-bar' +import {SearchBarPage} from './pages/searchbar' import {TableSearchPage} from './pages/table-search' import {IconsPage} from './pages/ionicons' import {TabsPage} from './pages/tabs' diff --git a/ionic/components.ts b/ionic/components.ts index 9fbd8f90c3..e665184ad4 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -31,7 +31,7 @@ export * from 'ionic/components/slides/slides' export * from 'ionic/components/radio/radio' export * from 'ionic/components/scroll/scroll' export * from 'ionic/components/scroll/pull-to-refresh' -export * from 'ionic/components/search-bar/search-bar' +export * from 'ionic/components/searchbar/searchbar' export * from 'ionic/components/segment/segment' export * from 'ionic/components/switch/switch' export * from 'ionic/components/tabs/tabs' diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss deleted file mode 100644 index 22837e8d8f..0000000000 --- a/ionic/components/search-bar/modes/ios.scss +++ /dev/null @@ -1,120 +0,0 @@ - -// iOS Search Bar -// -------------------------------------------------- - -$search-bar-ios-padding: 0 8px !default; -$search-bar-ios-background-color: rgba(0, 0, 0, 0.2) !default; -$search-bar-ios-border-color: rgba(0, 0, 0, 0.05) !default; -$search-bar-ios-min-height: 44px !default; - -$search-bar-ios-input-search-icon-color: #767676 !default; -$search-bar-ios-input-search-icon-svg: "" !default; -$search-bar-ios-input-search-icon-size: 13px !default; - -$search-bar-ios-input-height: 28px !default; -$search-bar-ios-input-placeholder-color: #9D9D9D !default; -$search-bar-ios-input-text-color: #000 !default; -$search-bar-ios-input-background-color: #FFFFFF !default; -$search-bar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; -$search-bar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; - -$search-bar-ios-input-close-icon-color: #8F8E94 !default; -$search-bar-ios-input-close-icon-svg: "" !default; -$search-bar-ios-input-close-icon-size: 18px !default; - - -ion-search-bar { - padding: $search-bar-ios-padding; - background: $search-bar-ios-background-color; - border-bottom: 1px solid $search-bar-ios-border-color; - min-height: $search-bar-ios-min-height; -} - -.search-bar-input { - height: $search-bar-ios-input-height; - padding: 0 28px; - - font-size: 1.4rem; - font-weight: 400; - - 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: calc(50% - 40px); - - &::placeholder { - color: $search-bar-ios-input-placeholder-color; - } - - @include calc(padding-left, "50% - 28px"); - transition: $search-bar-ios-input-transition; -} - -.search-bar-close-icon { - width: 30px; - height: 100%; - - @include svg-background-image($search-bar-ios-input-close-icon-svg); - background-size: $search-bar-ios-input-close-icon-size; - background-repeat: no-repeat; - background-position: center; - position: absolute; - right: 0; - top: 0; -} - -.search-bar-cancel { - @extend button[clear]; - transition: $search-bar-ios-cancel-transition; - min-height: 30px; - - padding-left: 8px; - padding-right: 0; - margin-left: 0; - margin-right: -100%; -} - -.search-bar-input-container.left-align { - .search-bar-search-icon { - margin-left: 0; - } - .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 deleted file mode 100644 index 094b4adfe2..0000000000 --- a/ionic/components/search-bar/modes/md.scss +++ /dev/null @@ -1,69 +0,0 @@ - -// Material Design Search Bar -// -------------------------------------------------- - -$search-bar-md-padding: 8px !default; -$search-bar-md-background-color: inherit !default; - -$search-bar-md-input-search-icon-color: #5B5B5B !default; -$search-bar-md-input-search-icon-svg: "" !default; -$search-bar-md-input-search-icon-size: 20px !default; - -$search-bar-md-input-height: 28px !default; -$search-bar-md-input-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; -$search-bar-md-input-placeholder-color: #AEAEAE !default; -$search-bar-md-input-text-color: #141414 !default; -$search-bar-md-input-background-color: #FFFFFF !default; -$search-bar-md-input-border-radius: 2px !default; - -$search-bar-md-input-close-icon-color: #5B5B5B !default; -$search-bar-md-input-close-icon-svg: "" !default; -$search-bar-md-input-close-icon-size: 22px !default; - - -ion-search-bar { - padding: $search-bar-md-padding; - background: $search-bar-md-background-color; -} - -.search-bar-input { - padding: 8px 55px; - - height: $search-bar-md-input-height; - box-shadow: $search-bar-md-input-box-shadow; - - font-size: 1.6rem; - font-weight: 400; - - 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: 16px center; - - &::placeholder { - color: $search-bar-md-input-placeholder-color; - } -} - -.search-bar-close-icon { - width: $search-bar-md-input-close-icon-size; - height: 100%; - padding: 0; - - @include svg-background-image($search-bar-md-input-close-icon-svg); - background-size: $search-bar-md-input-close-icon-size; - background-repeat: no-repeat; - background-position: center; - position: absolute; - right: 13px; - top: 0; - -} - -.search-bar-cancel { - display: none; -} diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html deleted file mode 100644 index 8239950769..0000000000 --- a/ionic/components/search-bar/test/floating/main.html +++ /dev/null @@ -1,20 +0,0 @@ - -
Search - Default
- - -
Search - Custom Placeholder
- - -
Search - Default Cancel Button
- - -
Search - Custom Cancel Button Danger
- - -
Search - Custom Cancel Action
- - -
- Clicked custom action with input = {{customCancelAction}} -
- diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/searchbar/searchbar.scss similarity index 78% rename from ionic/components/search-bar/search-bar.scss rename to ionic/components/searchbar/searchbar.scss index 86f63abbd1..69f572eeed 100644 --- a/ionic/components/search-bar/search-bar.scss +++ b/ionic/components/searchbar/searchbar.scss @@ -3,26 +3,26 @@ // -------------------------------------------------- -ion-search-bar { +ion-searchbar { position: relative; display: flex; align-items: center; width: 100%; } -.search-bar-icon { +.searchbar-icon { // Don't let them tap on the icon pointer-events: none; } -.search-bar-input-container { +.searchbar-input-container { position: relative; display: block; flex-shrink: 1; width: 100%; } -input[type="search"].search-bar-input { +input[type="search"].searchbar-input { display: block; width: 100%; height: 100%; @@ -32,7 +32,7 @@ input[type="search"].search-bar-input { @include appearance(none); } -.search-bar-close-icon { +.searchbar-close-icon { min-height: 0; padding: 0; margin: 0; diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/searchbar/searchbar.ts similarity index 85% rename from ionic/components/search-bar/search-bar.ts rename to ionic/components/searchbar/searchbar.ts index 4cfb868054..ebc2a2c7dc 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -11,11 +11,11 @@ import {ConfigComponent} from '../../config/decorators'; * * @usage * ```html - * + * * ``` */ @ConfigComponent({ - selector: 'ion-search-bar', + selector: 'ion-searchbar', defaultInputs: { 'showCancel': false, 'cancelText': 'Cancel', @@ -26,12 +26,12 @@ import {ConfigComponent} from '../../config/decorators'; } }, template: - '
' + + '
' + '' + - '' + + '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' + + '' + '
' + - '', + '', directives: [FORM_DIRECTIVES, NgIf, NgClass] }) @@ -62,7 +62,7 @@ export class SearchBar extends Ion { // Add the margin for iOS afterViewInit() { - this.cancelButton = this.elementRef.nativeElement.querySelector('.search-bar-cancel'); + this.cancelButton = this.elementRef.nativeElement.querySelector('.searchbar-cancel'); if (this.cancelButton) { this.cancelWidth = this.cancelButton.offsetWidth; diff --git a/ionic/components/search-bar/test/basic/index.ts b/ionic/components/searchbar/test/basic/index.ts similarity index 93% rename from ionic/components/search-bar/test/basic/index.ts rename to ionic/components/searchbar/test/basic/index.ts index a97b9719cd..bc41cd01bb 100644 --- a/ionic/components/search-bar/test/basic/index.ts +++ b/ionic/components/searchbar/test/basic/index.ts @@ -1,7 +1,7 @@ import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; import {App} from 'ionic/ionic'; -import {SearchPipe} from 'ionic/components/search-bar/search-bar'; +import {SearchPipe} from 'ionic/components/searchbar/searchbar'; function randomTitle() { diff --git a/ionic/components/search-bar/test/basic/main.html b/ionic/components/searchbar/test/basic/main.html similarity index 83% rename from ionic/components/search-bar/test/basic/main.html rename to ionic/components/searchbar/test/basic/main.html index c159ef0791..eccbaa96bf 100644 --- a/ionic/components/search-bar/test/basic/main.html +++ b/ionic/components/searchbar/test/basic/main.html @@ -4,7 +4,7 @@ - + {{item.title}} diff --git a/ionic/components/search-bar/test/floating/e2e.ts b/ionic/components/searchbar/test/floating/e2e.ts similarity index 96% rename from ionic/components/search-bar/test/floating/e2e.ts rename to ionic/components/searchbar/test/floating/e2e.ts index d94aca112f..681cfd92dc 100644 --- a/ionic/components/search-bar/test/floating/e2e.ts +++ b/ionic/components/searchbar/test/floating/e2e.ts @@ -21,5 +21,5 @@ it('custom cancel action should focus', function() { // TODO - this test will work on iOS but fail on Android // it('custom cancel action should alert', function() { -// element(by.css('.e2eCustomCancelActionFloatingSearchBar .search-bar-cancel')).click(); +// element(by.css('.e2eCustomCancelActionFloatingSearchBar .searchbar-cancel')).click(); // }); diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts similarity index 89% rename from ionic/components/search-bar/test/floating/index.ts rename to ionic/components/searchbar/test/floating/index.ts index 85f5c2bebc..7385039bcf 100644 --- a/ionic/components/search-bar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -1,7 +1,7 @@ import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; import {App} from 'ionic/ionic'; -import {SearchPipe} from 'ionic/components/search-bar/search-bar'; +import {SearchPipe} from 'ionic/components/searchbar/searchbar'; @App({ templateUrl: 'main.html', diff --git a/ionic/components/search-bar/test/model/index.ts b/ionic/components/searchbar/test/model/index.ts similarity index 93% rename from ionic/components/search-bar/test/model/index.ts rename to ionic/components/searchbar/test/model/index.ts index b8b38b879e..d861d01fe0 100644 --- a/ionic/components/search-bar/test/model/index.ts +++ b/ionic/components/searchbar/test/model/index.ts @@ -1,7 +1,7 @@ import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; import {App} from 'ionic/ionic'; -import {SearchPipe} from 'ionic/components/search-bar/search-bar'; +import {SearchPipe} from 'ionic/components/searchbar/searchbar'; function randomTitle() { diff --git a/ionic/components/search-bar/test/model/main.html b/ionic/components/searchbar/test/model/main.html similarity index 82% rename from ionic/components/search-bar/test/model/main.html rename to ionic/components/searchbar/test/model/main.html index 9e2242416d..cb97ef4658 100644 --- a/ionic/components/search-bar/test/model/main.html +++ b/ionic/components/searchbar/test/model/main.html @@ -4,7 +4,7 @@ - + {{item.title}} diff --git a/ionic/components/search-bar/test/toolbar/e2e.ts b/ionic/components/searchbar/test/toolbar/e2e.ts similarity index 100% rename from ionic/components/search-bar/test/toolbar/e2e.ts rename to ionic/components/searchbar/test/toolbar/e2e.ts diff --git a/ionic/components/search-bar/test/toolbar/index.ts b/ionic/components/searchbar/test/toolbar/index.ts similarity index 80% rename from ionic/components/search-bar/test/toolbar/index.ts rename to ionic/components/searchbar/test/toolbar/index.ts index f089ae40df..03ae53d915 100644 --- a/ionic/components/search-bar/test/toolbar/index.ts +++ b/ionic/components/searchbar/test/toolbar/index.ts @@ -1,7 +1,7 @@ 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'; +import {SearchPipe} from 'ionic/components/searchbar/searchbar'; @App({ templateUrl: 'main.html' diff --git a/ionic/components/search-bar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html similarity index 60% rename from ionic/components/search-bar/test/toolbar/main.html rename to ionic/components/searchbar/test/toolbar/main.html index b63e17bf6b..04e8f2686b 100644 --- a/ionic/components/search-bar/test/toolbar/main.html +++ b/ionic/components/searchbar/test/toolbar/main.html @@ -5,17 +5,17 @@
Search - Default Toolbar
- +
Search - Primary Toolbar
- +
Search - Danger Toolbar
- + diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index a06d8cd281..a3d0fcc543 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -24,7 +24,7 @@ import {TextInput, TextInputElement} from '../components/text-input/text-input'; import {Label} from '../components/text-input/label'; import {Segment, SegmentButton, SegmentControlValueAccessor} from '../components/segment/segment'; import {RadioGroup, RadioButton} from '../components/radio/radio'; -import {SearchBar} from '../components/search-bar/search-bar'; +import {SearchBar} from '../components/searchbar/searchbar'; import {Nav} from '../components/nav/nav'; import {NavPush, NavPop} from '../components/nav/nav-push'; import {NavRouter} from '../components/nav/nav-router'; diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 572b2d07be..a380b39f64 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -42,7 +42,7 @@ "components/scroll/scroll", "components/scroll/pull-to-refresh", "components/scroll/scroll", - "components/search-bar/search-bar", + "components/searchbar/searchbar", "components/segment/segment", "components/switch/switch", "components/tabs/tabs"; diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss index a27a1a9d4d..1ebdd65bb0 100644 --- a/ionic/ionic.ios.scss +++ b/ionic/ionic.ios.scss @@ -17,7 +17,7 @@ "components/popup/modes/ios", "components/checkbox/modes/ios", "components/radio/modes/ios", - "components/search-bar/modes/ios", + "components/searchbar/modes/ios", "components/segment/modes/ios", "components/switch/modes/ios", "components/tabs/modes/ios"; diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss index 7b6f427dee..fdeb5abe9d 100644 --- a/ionic/ionic.md.scss +++ b/ionic/ionic.md.scss @@ -16,7 +16,7 @@ "components/navbar/modes/md", "components/popup/modes/md", "components/radio/modes/md", - "components/search-bar/modes/md", + "components/searchbar/modes/md", "components/segment/modes/md", "components/switch/modes/md", "components/tabs/modes/md", diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js index be9207c0b9..2ef708315b 100644 --- a/scripts/snapshot/snapshot.config.js +++ b/scripts/snapshot/snapshot.config.js @@ -9,7 +9,7 @@ exports.config = { //domain: 'localhost:8080', specs: 'dist/e2e/**/*e2e.js', - //specs: 'dist/e2e/search-bar/**/*e2e.js', + //specs: 'dist/e2e/searchbar/**/*e2e.js', sleepBetweenSpecs: 300,