From 86aa23c0baca97771083ffbc06187f387ef91540 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 2 Nov 2015 21:07:42 -0500 Subject: [PATCH] refactor(searchbar): renamed all selectors, variables, and components from search-bar to searchbar references #419 --- demos/sink/pages/search-bar.ts | 2 +- demos/sink/pages/table-search.ts | 2 +- ionic/components/searchbar/modes/ios.scss | 120 ++++++++++++++++++ ionic/components/searchbar/modes/md.scss | 69 ++++++++++ .../searchbar/test/floating/main.html | 20 +++ ionic/components/toolbar/toolbar.ts | 2 +- .../templates/api_menu_version.template.html | 4 +- 7 files changed, 214 insertions(+), 5 deletions(-) create mode 100644 ionic/components/searchbar/modes/ios.scss create mode 100644 ionic/components/searchbar/modes/md.scss create mode 100644 ionic/components/searchbar/test/floating/main.html diff --git a/demos/sink/pages/search-bar.ts b/demos/sink/pages/search-bar.ts index 85d34da9a1..f53c5e253d 100644 --- a/demos/sink/pages/search-bar.ts +++ b/demos/sink/pages/search-bar.ts @@ -24,7 +24,7 @@ import {SinkPage} from '../sink-page';

- +
Query: {{form.controls.searchQuery.value}}
diff --git a/demos/sink/pages/table-search.ts b/demos/sink/pages/table-search.ts index 479b765112..45edf96110 100644 --- a/demos/sink/pages/table-search.ts +++ b/demos/sink/pages/table-search.ts @@ -19,7 +19,7 @@ function randomTitle() { - + diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss new file mode 100644 index 0000000000..adf565029a --- /dev/null +++ b/ionic/components/searchbar/modes/ios.scss @@ -0,0 +1,120 @@ + +// iOS Search Bar +// -------------------------------------------------- + +$searchbar-ios-padding: 0 8px !default; +$searchbar-ios-background-color: rgba(0, 0, 0, 0.2) !default; +$searchbar-ios-border-color: rgba(0, 0, 0, 0.05) !default; +$searchbar-ios-min-height: 44px !default; + +$searchbar-ios-input-search-icon-color: #767676 !default; +$searchbar-ios-input-search-icon-svg: "" !default; +$searchbar-ios-input-search-icon-size: 13px !default; + +$searchbar-ios-input-height: 28px !default; +$searchbar-ios-input-placeholder-color: #9D9D9D !default; +$searchbar-ios-input-text-color: #000 !default; +$searchbar-ios-input-background-color: #FFFFFF !default; +$searchbar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; +$searchbar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; + +$searchbar-ios-input-close-icon-color: #8F8E94 !default; +$searchbar-ios-input-close-icon-svg: "" !default; +$searchbar-ios-input-close-icon-size: 18px !default; + + +ion-searchbar { + padding: $searchbar-ios-padding; + background: $searchbar-ios-background-color; + border-bottom: 1px solid $searchbar-ios-border-color; + min-height: $searchbar-ios-min-height; +} + +.searchbar-input { + height: $searchbar-ios-input-height; + padding: 0 28px; + + font-size: 1.4rem; + font-weight: 400; + + border-radius: 5px; + color: $searchbar-ios-input-text-color; + background-color: $searchbar-ios-input-background-color; + + @include svg-background-image($searchbar-ios-input-search-icon-svg); + background-size: $searchbar-ios-input-search-icon-size; + background-repeat: no-repeat; + background-position: calc(50% - 40px); + + &::placeholder { + color: $searchbar-ios-input-placeholder-color; + } + + @include calc(padding-left, "50% - 28px"); + transition: $searchbar-ios-input-transition; +} + +.searchbar-close-icon { + width: 30px; + height: 100%; + + @include svg-background-image($searchbar-ios-input-close-icon-svg); + background-size: $searchbar-ios-input-close-icon-size; + background-repeat: no-repeat; + background-position: center; + position: absolute; + right: 0; + top: 0; +} + +.searchbar-cancel { + @extend button[clear]; + transition: $searchbar-ios-cancel-transition; + min-height: 30px; + + padding-left: 8px; + padding-right: 0; + margin-left: 0; + margin-right: -100%; +} + +.searchbar-input-container.left-align { + .searchbar-search-icon { + margin-left: 0; + } + .searchbar-input { + padding-left: 28px; + background-position: 8px; + } +} + +&.hairlines ion-searchbar { + border-bottom-width: 0.55px; +} + +ion-toolbar { + + ion-searchbar { + background: transparent; + border-bottom-width: 0; + + .searchbar-input { + background-color: #E5E5E5; + } + } + +} + +// Generate Default Search Bar Colors +// -------------------------------------------------- + +@each $color, $value in $colors { + + ion-searchbar[#{$color}] { + //background-color: $value; + + .searchbar-cancel { + color: $value; + } + } +} diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss new file mode 100644 index 0000000000..e7ae49ad40 --- /dev/null +++ b/ionic/components/searchbar/modes/md.scss @@ -0,0 +1,69 @@ + +// Material Design Search Bar +// -------------------------------------------------- + +$searchbar-md-padding: 8px !default; +$searchbar-md-background-color: inherit !default; + +$searchbar-md-input-search-icon-color: #5B5B5B !default; +$searchbar-md-input-search-icon-svg: "" !default; +$searchbar-md-input-search-icon-size: 20px !default; + +$searchbar-md-input-height: 28px !default; +$searchbar-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; +$searchbar-md-input-placeholder-color: #AEAEAE !default; +$searchbar-md-input-text-color: #141414 !default; +$searchbar-md-input-background-color: #FFFFFF !default; +$searchbar-md-input-border-radius: 2px !default; + +$searchbar-md-input-close-icon-color: #5B5B5B !default; +$searchbar-md-input-close-icon-svg: "" !default; +$searchbar-md-input-close-icon-size: 22px !default; + + +ion-searchbar { + padding: $searchbar-md-padding; + background: $searchbar-md-background-color; +} + +.searchbar-input { + padding: 8px 55px; + + height: $searchbar-md-input-height; + box-shadow: $searchbar-md-input-box-shadow; + + font-size: 1.6rem; + font-weight: 400; + + border-radius: $searchbar-md-input-border-radius; + color: $searchbar-md-input-text-color; + background-color: $searchbar-md-input-background-color; + + @include svg-background-image($searchbar-md-input-search-icon-svg); + background-size: $searchbar-md-input-search-icon-size; + background-repeat: no-repeat; + background-position: 16px center; + + &::placeholder { + color: $searchbar-md-input-placeholder-color; + } +} + +.searchbar-close-icon { + width: $searchbar-md-input-close-icon-size; + height: 100%; + padding: 0; + + @include svg-background-image($searchbar-md-input-close-icon-svg); + background-size: $searchbar-md-input-close-icon-size; + background-repeat: no-repeat; + background-position: center; + position: absolute; + right: 13px; + top: 0; + +} + +.searchbar-cancel { + display: none; +} diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html new file mode 100644 index 0000000000..da3e0c7174 --- /dev/null +++ b/ionic/components/searchbar/test/floating/main.html @@ -0,0 +1,20 @@ + +
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/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 78fdccde4f..31be90183b 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -60,7 +60,7 @@ export class ToolbarBase extends Ion { template: '
' + '' + - '' + + '' + '' + '' + '
' + diff --git a/scripts/docs/templates/api_menu_version.template.html b/scripts/docs/templates/api_menu_version.template.html index 9ed861b45e..f9a387b32f 100644 --- a/scripts/docs/templates/api_menu_version.template.html +++ b/scripts/docs/templates/api_menu_version.template.html @@ -425,12 +425,12 @@
  • - + SearchBar