diff --git a/demos/alert/main.html b/demos/alert/main.html index abda386063..eda3fb7df8 100644 --- a/demos/alert/main.html +++ b/demos/alert/main.html @@ -10,9 +10,9 @@ - - - - + + + + diff --git a/demos/button/main.html b/demos/button/main.html index 6e7852e77d..df99c73357 100644 --- a/demos/button/main.html +++ b/demos/button/main.html @@ -13,13 +13,13 @@ - + - + - + - +

Shapes

@@ -33,36 +33,36 @@

Outlines

- + - + - + - +

Icons

- - -

Sizes

- + - + - + diff --git a/demos/checkbox/main.html b/demos/checkbox/main.html index 77bfed6c63..d2f9c1b64d 100644 --- a/demos/checkbox/main.html +++ b/demos/checkbox/main.html @@ -17,7 +17,7 @@ - + Daenerys Targaryen @@ -27,12 +27,12 @@ - + Tyrion Lannister - + Sansa Stark @@ -42,7 +42,7 @@ - + Cersei Lannister @@ -57,17 +57,17 @@ - + Hodor - + Catelyn Stark - + Bronn diff --git a/demos/config/main.html b/demos/config/main.html index 4ade64b254..6c8cd00c3b 100644 --- a/demos/config/main.html +++ b/demos/config/main.html @@ -57,7 +57,7 @@ ionicBootstrap(MyApp, [], { });
-
diff --git a/demos/events/app.html b/demos/events/app.html index 258c7d8b9f..43f2f016a9 100644 --- a/demos/events/app.html +++ b/demos/events/app.html @@ -1,7 +1,7 @@ - + Left Menu @@ -13,7 +13,7 @@ Logged in as Administrator - + diff --git a/demos/events/logout.html b/demos/events/logout.html index 78d37e20d6..2483b834aa 100644 --- a/demos/events/logout.html +++ b/demos/events/logout.html @@ -18,6 +18,6 @@
- +
diff --git a/demos/icon/main.html b/demos/icon/main.html index f244c33580..c587ed25ed 100644 --- a/demos/icon/main.html +++ b/demos/icon/main.html @@ -10,50 +10,50 @@ - + - - + + - + - + - + - + - + - + - - + + - + - + - + diff --git a/demos/input/main.html b/demos/input/main.html index a6d42b1ced..457eb69e11 100644 --- a/demos/input/main.html +++ b/demos/input/main.html @@ -11,12 +11,12 @@ - Inline Label + Inline Label - Fixed Label + Fixed Label @@ -25,17 +25,17 @@ - Stacked Label + Stacked Label - Stacked Label + Stacked Label - Floating Label + Floating Label diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html index 2e301c141c..28afdd708d 100644 --- a/demos/item-sliding/main.html +++ b/demos/item-sliding/main.html @@ -27,22 +27,22 @@ - - - - - - - + Other Settings - + @@ -61,11 +61,11 @@ - Always + Always - Only while phone is locked + Only while phone is locked @@ -76,22 +76,22 @@ - + Ionic View - + Ionic Creator - + Hubstruck - + Barkpark diff --git a/demos/label/main.html b/demos/label/main.html index a982bfacce..f306273a4e 100644 --- a/demos/label/main.html +++ b/demos/label/main.html @@ -19,24 +19,24 @@ - Mobile + Mobile - - + + - Email + Email - Birthday + Birthday - Address + Address - Notes + Notes diff --git a/demos/list/main.html b/demos/list/main.html index 9244d0b616..74ae7c7b66 100644 --- a/demos/list/main.html +++ b/demos/list/main.html @@ -15,30 +15,30 @@ - + Airplane Mode - + @@ -50,11 +50,11 @@ - Always + Always - Only while phone is locked + Only while phone is locked @@ -65,22 +65,22 @@ - + Ionic View - + Ionic Creator - + Hubstruck - + Barkpark diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html index 89c99d7b73..c7387e812e 100644 --- a/demos/local-storage/main.html +++ b/demos/local-storage/main.html @@ -33,7 +33,7 @@
- @@ -54,7 +54,7 @@
- diff --git a/demos/menu/app.html b/demos/menu/app.html index 0b2b78b1b4..c208788fd6 100644 --- a/demos/menu/app.html +++ b/demos/menu/app.html @@ -1,7 +1,7 @@ - + Menu 1 @@ -20,7 +20,7 @@ - + Menu 2 diff --git a/demos/menu/main.html b/demos/menu/main.html index 98c6d05e12..2c212cb329 100644 --- a/demos/menu/main.html +++ b/demos/menu/main.html @@ -14,13 +14,13 @@ -

Active Menu: {{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}

+

Active Menu: {{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}

This page has two menus with different id's, but only one is active at a time.

- + - + diff --git a/demos/modal/main.html b/demos/modal/main.html index 8aabd97ef4..fbbb45ad69 100644 --- a/demos/modal/main.html +++ b/demos/modal/main.html @@ -31,7 +31,7 @@
- +
diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html index fc83cddc43..8db541e896 100644 --- a/demos/modal/modal-content.html +++ b/demos/modal/modal-content.html @@ -22,6 +22,6 @@

No parameters passed.

- + diff --git a/demos/nav-params/main.html b/demos/nav-params/main.html index a8988f3cb9..c8e0f73c99 100644 --- a/demos/nav-params/main.html +++ b/demos/nav-params/main.html @@ -25,7 +25,7 @@
- +
diff --git a/demos/navigation/page.html b/demos/navigation/page.html index 126a0bca44..05d551f9f2 100644 --- a/demos/navigation/page.html +++ b/demos/navigation/page.html @@ -10,6 +10,6 @@ - + diff --git a/demos/popover/main.html b/demos/popover/main.html index c8136ca781..9cfb39d4c2 100644 --- a/demos/popover/main.html +++ b/demos/popover/main.html @@ -1,6 +1,6 @@ - + Popover @@ -59,11 +59,11 @@ Weather: {{ weather == 'sunny' ? '96' : '77' }}° - + - + Sunny diff --git a/demos/tabs/main.html b/demos/tabs/main.html index bf4518510d..e81bd7fa9f 100644 --- a/demos/tabs/main.html +++ b/demos/tabs/main.html @@ -17,7 +17,7 @@ - + @@ -25,7 +25,7 @@ - + @@ -33,7 +33,7 @@ - + @@ -41,7 +41,7 @@ - + @@ -49,7 +49,7 @@ - + @@ -65,7 +65,7 @@ - + diff --git a/demos/textarea/main.html b/demos/textarea/main.html index 1d171fa641..a19137bea9 100644 --- a/demos/textarea/main.html +++ b/demos/textarea/main.html @@ -12,12 +12,12 @@ - Inline Label + Inline Label - Fixed Label + Fixed Label @@ -26,12 +26,12 @@ - Stacked Label + Stacked Label - Floating Label + Floating Label diff --git a/demos/toggle/main.html b/demos/toggle/main.html index 2b8f4bda48..2fd5298d74 100644 --- a/demos/toggle/main.html +++ b/demos/toggle/main.html @@ -23,7 +23,7 @@ Éowyn - + @@ -33,17 +33,17 @@ Gimli - + Saruman - + Gandalf - + @@ -58,12 +58,12 @@ Gollum - + Galadriel - + diff --git a/demos/toolbar/main.html b/demos/toolbar/main.html index 2709fbf15a..1359b1b6c8 100644 --- a/demos/toolbar/main.html +++ b/demos/toolbar/main.html @@ -32,15 +32,15 @@ - - - @@ -55,7 +55,7 @@ Solid - @@ -69,7 +69,7 @@ - @@ -97,7 +97,7 @@ - + Featured @@ -125,7 +125,7 @@ - + diff --git a/src/components.core.scss b/src/components.core.scss index a19f94f68f..29eb460d20 100644 --- a/src/components.core.scss +++ b/src/components.core.scss @@ -7,7 +7,6 @@ @import "components/app/normalize", "components/app/structure", - "components/app/typography", "util/util"; @@ -27,6 +26,7 @@ "components/show-hide-when/show-hide-when", "components/slides/slides", "components/spinner/spinner", + "components/typography/typography", "components/virtual-scroll/virtual-scroll"; diff --git a/src/components.ios.scss b/src/components.ios.scss index 9e7dac405a..cd27cf67b3 100644 --- a/src/components.ios.scss +++ b/src/components.ios.scss @@ -15,6 +15,7 @@ "components/chip/chip.ios", "components/content/content.ios", "components/datetime/datetime.ios", + "components/icon/icon.ios", "components/input/input.ios", "components/item/item.ios", "components/label/label.ios", @@ -29,10 +30,12 @@ "components/searchbar/searchbar.ios", "components/segment/segment.ios", "components/select/select.ios", + "components/spinner/spinner.ios", "components/tabs/tabs.ios", "components/toggle/toggle.ios", "components/toast/toast.ios", - "components/toolbar/toolbar.ios"; + "components/toolbar/toolbar.ios", + "components/typography/typography.ios"; // iOS Platform diff --git a/src/components.md.scss b/src/components.md.scss index 23939327f4..1ecb886885 100644 --- a/src/components.md.scss +++ b/src/components.md.scss @@ -15,6 +15,7 @@ "components/chip/chip.md", "components/content/content.md", "components/datetime/datetime.md", + "components/icon/icon.md", "components/input/input.md", "components/item/item.md", "components/label/label.md", @@ -29,10 +30,12 @@ "components/searchbar/searchbar.md", "components/segment/segment.md", "components/select/select.md", + "components/spinner/spinner.md", "components/tabs/tabs.md", "components/toggle/toggle.md", "components/toast/toast.md", - "components/toolbar/toolbar.md"; + "components/toolbar/toolbar.md", + "components/typography/typography.md"; // Material Design w/ iOS Platform diff --git a/src/components.ts b/src/components.ts index dd287aa0ba..be011c30f1 100644 --- a/src/components.ts +++ b/src/components.ts @@ -60,4 +60,5 @@ export { Toast, ToastController } from './components/toast/toast'; export { ToastOptions } from './components/toast/toast-options'; export { Toggle } from './components/toggle/toggle'; export { Toolbar, ToolbarBase, Header, Footer } from './components/toolbar/toolbar'; +export { Typography } from './components/typography/typography'; export { VirtualScroll } from './components/virtual-scroll/virtual-scroll'; diff --git a/src/components.wp.scss b/src/components.wp.scss index b6c8e9b1b7..7627cf82f5 100644 --- a/src/components.wp.scss +++ b/src/components.wp.scss @@ -15,6 +15,7 @@ "components/chip/chip.wp", "components/content/content.wp", "components/datetime/datetime.wp", + "components/icon/icon.wp", "components/input/input.wp", "components/item/item.wp", "components/label/label.wp", @@ -29,10 +30,12 @@ "components/searchbar/searchbar.wp", "components/segment/segment.wp", "components/select/select.wp", + "components/spinner/spinner.wp", "components/tabs/tabs.wp", "components/toggle/toggle.wp", "components/toast/toast.wp", - "components/toolbar/toolbar.wp"; + "components/toolbar/toolbar.wp", + "components/typography/typography.wp"; // Windows w/ iOS Platform diff --git a/src/components/alert/test/dismiss/index.ts b/src/components/alert/test/dismiss/index.ts index e98f53a9ad..5203c1d7f1 100644 --- a/src/components/alert/test/dismiss/index.ts +++ b/src/components/alert/test/dismiss/index.ts @@ -58,7 +58,7 @@ export class E2EPage {
-
diff --git a/src/components/app/app.ios.scss b/src/components/app/app.ios.scss index 6c4a40543e..b971fd310a 100644 --- a/src/components/app/app.ios.scss +++ b/src/components/app/app.ios.scss @@ -7,15 +7,6 @@ ion-content { color: $text-ios-color; } -p { - color: $paragraph-ios-color; -} - - -a { - color: $link-ios-color; -} - hr { background-color: rgba(0, 0, 0, .12); } @@ -23,27 +14,3 @@ hr { &.hairlines hr { height: $hairlines-width; } - -@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - h1, - h2, - h3, - h4, - h5, - h6, - p, - span, - a:not([button]), - small, - b, - i, - strong, - em, - sub, - sup, - ion-icon { - &[#{$color-name}] { - color: $color-base; - } - } -} diff --git a/src/components/app/app.md.scss b/src/components/app/app.md.scss index a44f87cee1..63716f8631 100644 --- a/src/components/app/app.md.scss +++ b/src/components/app/app.md.scss @@ -7,38 +7,6 @@ ion-content { color: $text-md-color; } -p { - color: $paragraph-md-color; -} - -a { - color: $link-md-color; -} - hr { background-color: rgba(0, 0, 0, .08); } - -@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - h1, - h2, - h3, - h4, - h5, - h6, - p, - span, - a:not([button]), - small, - b, - i, - strong, - em, - sub, - sup, - ion-icon { - &[#{$color-name}] { - color: $color-base; - } - } -} diff --git a/src/components/app/app.wp.scss b/src/components/app/app.wp.scss index c25afde972..20098d88db 100644 --- a/src/components/app/app.wp.scss +++ b/src/components/app/app.wp.scss @@ -7,38 +7,6 @@ ion-content { color: $text-wp-color; } -p { - color: $paragraph-wp-color; -} - -a { - color: $link-wp-color; -} - hr { background-color: rgba(0, 0, 0, .08); } - -@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - h1, - h2, - h3, - h4, - h5, - h6, - p, - span, - a:not([button]), - small, - b, - i, - strong, - em, - sub, - sup, - ion-icon { - &[#{$color-name}] { - color: $color-base; - } - } -} diff --git a/src/components/app/test/cordova/app.html b/src/components/app/test/cordova/app.html index 589e6b890b..89801e9a8a 100644 --- a/src/components/app/test/cordova/app.html +++ b/src/components/app/test/cordova/app.html @@ -1,7 +1,7 @@ - + Left Menu diff --git a/src/components/app/test/cordova/page1.html b/src/components/app/test/cordova/page1.html index 46e2e9c88d..ff42609d7c 100644 --- a/src/components/app/test/cordova/page1.html +++ b/src/components/app/test/cordova/page1.html @@ -1,7 +1,7 @@ - - + + All Favorites @@ -30,7 +30,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
- +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
diff --git a/src/components/app/test/cordova/page2.html b/src/components/app/test/cordova/page2.html index c9ad5560bb..6316d55e97 100644 --- a/src/components/app/test/cordova/page2.html +++ b/src/components/app/test/cordova/page2.html @@ -28,6 +28,6 @@ - + diff --git a/src/components/app/test/gesture-collision/main.html b/src/components/app/test/gesture-collision/main.html index 62ffada115..69a5f933ea 100644 --- a/src/components/app/test/gesture-collision/main.html +++ b/src/components/app/test/gesture-collision/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -74,7 +74,7 @@ - + Footer @@ -85,7 +85,7 @@ - + Right Menu diff --git a/src/components/app/test/gesture-collision/page1.html b/src/components/app/test/gesture-collision/page1.html index f6f3ac5ece..ee70532ca0 100644 --- a/src/components/app/test/gesture-collision/page1.html +++ b/src/components/app/test/gesture-collision/page1.html @@ -10,7 +10,7 @@ Menu - diff --git a/src/components/app/test/typography/main.html b/src/components/app/test/typography/main.html deleted file mode 100644 index 015e05ce62..0000000000 --- a/src/components/app/test/typography/main.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - Typography - - - - - - - -

H1: The quick brown fox jumps over the lazy dog

- -

H2: The quick brown fox jumps over the lazy dog

- -

H3: The quick brown fox jumps over the lazy dog

- -

H4: The quick brown fox jumps over the lazy dog

- -
H5: The quick brown fox jumps over the lazy dog
- -
H6: The quick brown fox jumps over the lazy dog
- -

- I saw a werewolf with a Chinese menu in his hand. - Walking through the streets of Soho in the rain. - He was looking for a place called Lee Ho Fook's. - Gonna get a big dish of beef chow mein. -

- -

- He's the hairy-handed gent who ran amuck in Kent. - Lately he's been overheard in Mayfair. - Better stay away from him. - He'll rip your lungs out, Jim. - I'd like to meet his tailor. - -

- - diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss index 372290a448..a461fbe4f6 100644 --- a/src/components/badge/badge.ios.scss +++ b/src/components/badge/badge.ios.scss @@ -3,8 +3,13 @@ // iOS Badge // -------------------------------------------------- +/// @prop - Border radius of the badge $badge-ios-border-radius: 10px !default; + +/// @prop - Background color of the badge $badge-ios-background-color: color($colors-ios, primary) !default; + +/// @prop - Text color of the badge $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default; diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss index 655e9af92f..3341091005 100644 --- a/src/components/badge/badge.md.scss +++ b/src/components/badge/badge.md.scss @@ -3,8 +3,13 @@ // Material Design Badge // -------------------------------------------------- +/// @prop - Border radius of the badge $badge-md-border-radius: 4px !default; + +/// @prop - Background color of the badge $badge-md-background-color: color($colors-md, primary) !default; + +/// @prop - Text color of the badge $badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default; diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index b31c533a9c..d327f72d7e 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -3,7 +3,10 @@ // Badge // -------------------------------------------------- +/// @prop - Font size of the badge $badge-font-size: 1.3rem !default; + +/// @prop - Font weight of the badge $badge-font-weight: bold !default; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index 8017b91b34..e6e3c624e9 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Renderer, Attribute } from '@angular/core'; +import { Directive, ElementRef, Input, Renderer } from '@angular/core'; import { Config } from '../../config/config'; @@ -9,46 +9,47 @@ import { Config } from '../../config/config'; * @description * Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on. * @see {@link /docs/v2/components/#badges Badges Component Docs} - */ @Directive({ selector: 'ion-badge' }) export class Badge { + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } constructor( config: Config, private _elementRef: ElementRef, private _renderer: Renderer - ) { - let element = _elementRef.nativeElement; + ) { } - this._readAttrs(element); + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; } /** - * @private + * @internal */ - private _readAttrs(element: HTMLElement) { - let elementAttrs = element.attributes; - let attrName: string; - - for (let i = 0, l = elementAttrs.length; i < l; i++) { - if (elementAttrs[i].value !== '') continue; - - attrName = elementAttrs[i].name; - - // Ignore attributes item-left, item-right - if (attrName.indexOf('item') === -1) { - this._setClass(attrName); - } + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `badge-${color}`, isAdd); } } - - /** - * @private - */ - private _setClass(color: string) { - this._renderer.setElementClass(this._elementRef.nativeElement, 'badge-' + color, true); - } } diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index 95de6fa411..2dca9eed3c 100644 --- a/src/components/badge/badge.wp.scss +++ b/src/components/badge/badge.wp.scss @@ -3,8 +3,13 @@ // Windows Badge // -------------------------------------------------- +/// @prop - Border radius of the badge $badge-wp-border-radius: 0 !default; + +/// @prop - Background color of the badge $badge-wp-background-color: color($colors-wp, primary) !default; + +/// @prop - Text color of the badge $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-background-color) !default; diff --git a/src/components/badge/test/basic/e2e.ts b/src/components/badge/test/basic/e2e.ts new file mode 100644 index 0000000000..94ed4bf5a5 --- /dev/null +++ b/src/components/badge/test/basic/e2e.ts @@ -0,0 +1,4 @@ + +it('should toggle color', function() { + element(by.css('.e2eBadgeToggleColor')).click(); +}); \ No newline at end of file diff --git a/src/components/badge/test/basic/index.ts b/src/components/badge/test/basic/index.ts index 7b73dae881..50abaadae3 100644 --- a/src/components/badge/test/basic/index.ts +++ b/src/components/badge/test/basic/index.ts @@ -5,7 +5,13 @@ import { ionicBootstrap } from '../../../../../src'; @Component({ templateUrl: 'main.html' }) -class E2EPage {} +class E2EPage { + dynamicColor: string = 'secondary'; + + toggleColor() { + this.dynamicColor = (this.dynamicColor == 'secondary' ? 'danger' : 'secondary'); + } +} @Component({ template: '' diff --git a/src/components/badge/test/basic/main.html b/src/components/badge/test/basic/main.html index 3a39f838e8..15e9d99c28 100644 --- a/src/components/badge/test/basic/main.html +++ b/src/components/badge/test/basic/main.html @@ -19,24 +19,28 @@ Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 + @@ -49,24 +53,28 @@ Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 + diff --git a/src/components/button/button.ts b/src/components/button/button.ts index ca047753ef..d5b5832a18 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,8 +1,7 @@ -import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Optional, Renderer, ViewEncapsulation } from '@angular/core'; +import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core'; import { Config } from '../../config/config'; import { isTrueProperty } from '../../util/util'; -import { Toolbar } from '../toolbar/toolbar'; /** @@ -37,13 +36,13 @@ import { Toolbar } from '../toolbar/toolbar'; * * * - * + * * - * + * * - * + * * - * + * * * * @@ -98,12 +97,12 @@ import { Toolbar } from '../toolbar/toolbar'; }) export class Button { private _role: string = 'button'; // bar-button + private _mt: boolean = false; // menutoggle private _size: string = null; // large/small/default private _style: string = 'default'; // outline/clear/solid private _shape: string = null; // round/fab private _display: string = null; // block/full - private _colors: Array = []; // primary/secondary - private _icon: string = null; // left/right/only + private _color: string = null; // primary/secondary private _disabled: boolean = false; // disabled private _init: boolean; @@ -163,6 +162,14 @@ export class Button { this._attr('_shape', 'round', val); } + /** + * @input {string} A floating action button. + */ + @Input() + set fab(val: boolean) { + this._attr('_shape', 'fab', val); + } + /** * @input {string} A button that fills its parent container with a border-radius. */ @@ -180,6 +187,9 @@ export class Button { } _attr(type: string, attrName: string, attrValue: boolean) { + if (type === '_style') { + this._setColor(this._color, isTrueProperty(attrValue)); + } this._setClass(this[type], false); if (isTrueProperty(attrValue)) { this[type] = attrName; @@ -187,9 +197,7 @@ export class Button { } else { // Special handling for '_style' which defaults to 'default'. this[type] = (type === '_style' ? 'default' : null); - } - if (type === '_style') { - this._setColor(attrName, isTrueProperty(attrValue)); + this._setClass(this[type], true); } } @@ -197,16 +205,12 @@ export class Button { * @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc). */ @Input() - set color(val: string|string[]) { - // Clear the colors for all styles including the default one. - this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false); - // Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc). - this._colors = (val instanceof Array ? val : [val]); - // Set the colors for the currently effective style. - this._setColor(this._style, true); + set color(val: string) { + this._updateColor(val); } constructor( + @Attribute('menuToggle') menuToggle: string, @Attribute('ion-button') ionButton: string, config: Config, private _elementRef: ElementRef, @@ -226,7 +230,11 @@ export class Button { this.setRole(ionButton); } - this._readAttrs(element); + // menuToggle can be added with or without a string + // but if the attribute isn't added it will be null + if (menuToggle !== null) { + this._mt = true; + } } /** @@ -238,10 +246,12 @@ export class Button { } /** - * @private + * @internal */ - ngAfterContentChecked() { - this._assignCss(true); + _updateColor(newColor: string) { + this._setColor(this._color, false); + this._setColor(newColor, true); + this._color = newColor; } /** @@ -260,86 +270,51 @@ export class Button { this._assignCss(true); } - /** - * @private - */ - private _readAttrs(element: HTMLElement) { - let elementAttrs = element.attributes; - let attrName: string; - for (let i = 0, l = elementAttrs.length; i < l; i++) { - if (elementAttrs[i].value !== '') continue; - - attrName = elementAttrs[i].name; - - if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) { - this._style = attrName; - - } else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) { - this._display = attrName; - - } else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) { - this._shape = attrName; - - } else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) { - this._size = attrName; - - } else if (!(IGNORE_ATTRS.test(attrName))) { - this._colors.push(attrName); - } - } - } - /** * @private */ private _assignCss(assignCssClass: boolean) { let role = this._role; if (role) { - this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button + this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button + + this._setClass('menutoggle', this._mt); // menutoggle this._setClass(this._style, assignCssClass); // button-clear this._setClass(this._shape, assignCssClass); // button-round this._setClass(this._display, assignCssClass); // button-full this._setClass(this._size, assignCssClass); // button-small - this._setClass(this._icon, assignCssClass); // button-icon-left - this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary + this._setColor(this._color, assignCssClass); // button-secondary, bar-button-secondary } } - + /** - * @private + * @internal */ - private _setClass(type: string, assignCssClass: boolean) { + _setClass(type: string, assignCssClass: boolean) { if (type && this._init) { this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass); } } /** - * @private + * @internal */ - private _setColor(type: string|string[], assignCssClass: boolean) { - if (type && this._init) { - // Support array to allow removal of many styles at once. - let styles = (type instanceof Array ? type : [type]); - styles.forEach(styleName => { - // If the role is not a bar-button, don't apply the solid style - styleName = (this._role !== 'bar-button' && styleName === 'solid' ? 'default' : styleName); - let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : ''); - this._colors.forEach(colorName => { - this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary - }); - }); + _setColor(color: string, isAdd: boolean) { + if (color && this._init) { + // The class should begin with the button role + // button, bar-button + let className = this._role; + + // If the role is not a bar-button, don't apply the solid style + let style = this._style; + style = (this._role !== 'bar-button' && style === 'solid' ? 'default' : style); + + className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : ''); + + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `${className}-${color}`, isAdd); + } } - } - + } } - -const BUTTON_SIZE_ATTRS = ['large', 'small', 'default']; -const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid']; -const BUTTON_SHAPE_ATTRS = ['round', 'fab']; -const BUTTON_DISPLAY_ATTRS = ['block', 'full']; -const IGNORE_ATTRS = /_ng|button|left|right/; - -const TEXT = 1; -const ICON = 2; diff --git a/src/components/button/test/attributes/e2e.ts b/src/components/button/test/attributes/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/button/test/attributes/e2e.ts @@ -0,0 +1 @@ + diff --git a/src/components/button/test/attributes/index.ts b/src/components/button/test/attributes/index.ts new file mode 100644 index 0000000000..b5f895acfc --- /dev/null +++ b/src/components/button/test/attributes/index.ts @@ -0,0 +1,64 @@ +import { Component } from '@angular/core'; +import { App, ionicBootstrap } from '../../../../../src'; + + +@Component({ + templateUrl: 'main.html' +}) +class E2EPage { + isFull: boolean = true; + isBlock: boolean = true; + isBarClear: boolean = true; + + // Styles + isSolid: boolean = true; + isOutline: boolean = true; + isClear: boolean = true; + + // Colors + isSecondary: string = 'secondary'; + isDanger: string = 'danger'; + isDark: string = 'dark'; + + constructor(app: App) { + + } + + toggleBlock() { + this.isFull = !this.isFull; + this.isBlock = !this.isBlock; + } + + // Toggles solid, outline, and clear buttons + toggleStyles() { + this.isSolid = !this.isSolid; + this.isOutline = !this.isOutline; + this.isClear = !this.isClear; + } + + // Toggles the colors on the buttons (secondary, danger, dark) + toggleColors() { + this.isSecondary = (this.isSecondary === 'secondary' ? '' : 'secondary'); + this.isDanger = (this.isDanger === 'danger' ? '' : 'danger'); + this.isDark = (this.isDark === 'dark' ? '' : 'dark'); + } + + toggleBarClear() { + this.isBarClear = !this.isBarClear; + } + + removeColors() { + this.isSecondary = null; + this.isDanger = null; + this.isDark = null; + } +} + +@Component({ + template: '' +}) +class E2EApp { + rootPage = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/button/test/attributes/main.html b/src/components/button/test/attributes/main.html new file mode 100644 index 0000000000..9b31e5c9dd --- /dev/null +++ b/src/components/button/test/attributes/main.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + +
Button Displays
+ + + + +
Button Styles (Click to Toggle)
+ + + + +
Button Sizes
+ + + + +
Button Colors (Click to Toggle)
+ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/button/test/basic/main.html b/src/components/button/test/basic/main.html index 9a98681e86..25b65cb603 100644 --- a/src/components/button/test/basic/main.html +++ b/src/components/button/test/basic/main.html @@ -15,28 +15,28 @@

- - + +

- - + +

- - + +

- - + +

- - + +

diff --git a/src/components/button/test/block/main.html b/src/components/button/test/block/main.html index 1789705e5c..8e71b845ad 100644 --- a/src/components/button/test/block/main.html +++ b/src/components/button/test/block/main.html @@ -20,13 +20,13 @@

- a[ion-button][block][outline][secondary] - + a[ion-button][block][outline][secondary] +

- a[ion-button][block][clear][dark] - + a[ion-button][block][clear][dark] +

diff --git a/src/components/button/test/button.spec.ts b/src/components/button/test/button.spec.ts index 96d9f184c5..bcaf1c66d3 100644 --- a/src/components/button/test/button.spec.ts +++ b/src/components/button/test/button.spec.ts @@ -211,7 +211,7 @@ export function run() { nativeElement.classList[shouldAdd ? 'add' : 'remove'](className); } }; - let b = new Button(ionButton, config, elementRef, renderer, null); + let b = new Button(null, ionButton, config, elementRef, renderer, null); b._init = true; return b; } diff --git a/src/components/button/test/clear/main.html b/src/components/button/test/clear/main.html index a2bc09c2af..ed46bce976 100644 --- a/src/components/button/test/clear/main.html +++ b/src/components/button/test/clear/main.html @@ -15,28 +15,28 @@

- - + +

- - + +

- - + +

- - + +

- - + +

diff --git a/src/components/button/test/dynamic/index.ts b/src/components/button/test/dynamic/index.ts index a8a07f6415..0a3df894a2 100644 --- a/src/components/button/test/dynamic/index.ts +++ b/src/components/button/test/dynamic/index.ts @@ -32,7 +32,6 @@ class E2EPage { this.isClicked = false; this.myColor1 = 'primary'; this.myColor2 = 'primary'; - this.multiColor = ['primary']; } reset() { @@ -45,7 +44,6 @@ class E2EPage { this.isClicked = false; this.myColor1 = 'custom1'; this.myColor2 = 'custom2'; - this.multiColor = ['primary', 'secondary']; } toggle() { diff --git a/src/components/button/test/dynamic/main.html b/src/components/button/test/dynamic/main.html index 12039a6d04..d3dd7f5988 100644 --- a/src/components/button/test/dynamic/main.html +++ b/src/components/button/test/dynamic/main.html @@ -2,7 +2,7 @@ - + Default Buttons @@ -21,14 +21,10 @@ - - - -

- +
- - + + diff --git a/src/components/button/test/fab/main.html b/src/components/button/test/fab/main.html index ce3489abb5..b2f30c33e9 100644 --- a/src/components/button/test/fab/main.html +++ b/src/components/button/test/fab/main.html @@ -3,23 +3,23 @@ - - - - - diff --git a/src/components/button/test/full/main.html b/src/components/button/test/full/main.html index e607201be8..0fc256fde6 100644 --- a/src/components/button/test/full/main.html +++ b/src/components/button/test/full/main.html @@ -26,18 +26,18 @@

- a[ion-button][full][outline][secondary] - + a[ion-button][full][outline][secondary] +

- a[ion-button][full][clear][light] - + a[ion-button][full][clear][light] +

- a[ion-button][full][clear][dark] - + a[ion-button][full][clear][dark] +

diff --git a/src/components/button/test/outline/main.html b/src/components/button/test/outline/main.html index bb1bade8cd..3435e06bbd 100644 --- a/src/components/button/test/outline/main.html +++ b/src/components/button/test/outline/main.html @@ -15,28 +15,28 @@

- - + +

- - + +

- - + +

- - + +

- - + +

@@ -48,11 +48,11 @@

- +

- +

diff --git a/src/components/button/test/round/main.html b/src/components/button/test/round/main.html index 35657ce308..1f426ef0e8 100644 --- a/src/components/button/test/round/main.html +++ b/src/components/button/test/round/main.html @@ -10,16 +10,16 @@ - - - - + + + + - - - - + + + + diff --git a/src/components/card/test/advanced/main.html b/src/components/card/test/advanced/main.html index 14b5fdc22d..0465de6a6f 100644 --- a/src/components/card/test/advanced/main.html +++ b/src/components/card/test/advanced/main.html @@ -78,7 +78,7 @@ - diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 6f0c6943bc..afdc0bb13b 100644 --- a/src/components/checkbox/checkbox.ios.scss +++ b/src/components/checkbox/checkbox.ios.scss @@ -105,7 +105,7 @@ ion-checkbox { @mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) { - ion-checkbox[#{$color-name}] .checkbox-checked { + .checkbox-#{$color-name} .checkbox-checked { border-color: $color-base; background-color: $color-base; diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss index 0d91d9c12c..52c20c473f 100644 --- a/src/components/checkbox/checkbox.md.scss +++ b/src/components/checkbox/checkbox.md.scss @@ -122,7 +122,7 @@ ion-checkbox + .item-inner ion-label { @mixin checkbox-theme-md($color-name, $color-base, $color-contrast) { - ion-checkbox[#{$color-name}] .checkbox-checked { + .checkbox-#{$color-name} .checkbox-checked { border-color: $color-base; background-color: $color-base; diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 4ce1a2f32e..8921be553b 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -1,9 +1,9 @@ -import { AfterContentInit, Component, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Provider, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Provider, Renderer, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Form } from '../../util/form'; -import { Item } from '../item/item'; import { isTrueProperty } from '../../util/util'; +import { Item } from '../item/item'; export const CHECKBOX_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true}); @@ -75,11 +75,26 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr private _labelId: string; private _fn: Function; + /** internal */ + private _color: string; + /** * @private */ id: string; + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @output {Checkbox} expression to evaluate when the checkbox value changes */ @@ -87,7 +102,9 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr constructor( private _form: Form, - @Optional() private _item: Item + @Optional() private _item: Item, + private _elementRef: ElementRef, + private _renderer: Renderer ) { _form.register(this); @@ -98,6 +115,24 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr } } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `checkbox-${color}`, isAdd); + } + } + /** * @private */ diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss index d155dc5c93..b3d28adb5a 100644 --- a/src/components/checkbox/checkbox.wp.scss +++ b/src/components/checkbox/checkbox.wp.scss @@ -115,7 +115,7 @@ ion-checkbox + .item-inner ion-label { @mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) { - ion-checkbox[#{$color-name}] .checkbox-checked { + .checkbox-#{$color-name} .checkbox-checked { border-color: $color-base; background-color: $color-base; diff --git a/src/components/checkbox/test/basic/index.ts b/src/components/checkbox/test/basic/index.ts index eedbdf934d..3aca511ad3 100644 --- a/src/components/checkbox/test/basic/index.ts +++ b/src/components/checkbox/test/basic/index.ts @@ -14,6 +14,7 @@ class E2EPage { strawberryValue: boolean; standAloneChecked: boolean; formResults: string; + dangerColor: string = 'danger'; constructor() { this.fruitsForm = new FormGroup({ diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html index 8466f8cad4..6f19e34aac 100644 --- a/src/components/checkbox/test/basic/main.html +++ b/src/components/checkbox/test/basic/main.html @@ -35,17 +35,17 @@ Kiwi, (ionChange) Secondary color - + Strawberry, (ionChange) [checked]="true" - + Checkbox right, checked, really long text that should ellipsis - + - * + * * * diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index bc76aebc7b..b08fe8f6e7 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -225,7 +225,13 @@ ion-item-divider { // -------------------------------------------------- @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - ion-item-divider[#{$color-name}] { + // If there is text with a color it should use this color + // and override whatever item sets it to + .item .text-#{$color-name} { + color: $color-base; + } + + .item-#{$color-name} { color: $color-contrast; background-color: $color-base; } diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 0c6e71e607..290cfdb728 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -216,7 +216,13 @@ ion-item-divider { // -------------------------------------------------- @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - ion-item-divider[#{$color-name}] { + // If there is text with a color it should use this color + // and override whatever item sets it to + .item .text-#{$color-name} { + color: $color-base; + } + + .item-#{$color-name} { color: $color-contrast; background-color: $color-base; } diff --git a/src/components/item/item.ts b/src/components/item/item.ts index 0540f27dd4..74750d6048 100644 --- a/src/components/item/item.ts +++ b/src/components/item/item.ts @@ -257,7 +257,7 @@ import { Label } from '../label/label'; * Item * * - * + * * * * @@ -307,6 +307,21 @@ export class Item { */ labelId: string = null; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + constructor(form: Form, private _renderer: Renderer, private _elementRef: ElementRef) { this.id = form.nextId().toString(); } @@ -403,6 +418,26 @@ export class Item { this._renderer.setElementStyle(this._elementRef.nativeElement, property, value); } + /** + * @internal + */ + _updateColor(newColor: string, colorClass?: string) { + this._setElementColor(this._color, false, colorClass); + this._setElementColor(newColor, true, colorClass); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean, colorClass?: string) { + colorClass = colorClass || 'item'; // item-radio + + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `${colorClass}-${color}`, isAdd); + } + } + /** * @private */ diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index 4d5fd9979f..07fc46c176 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -205,7 +205,13 @@ ion-item-divider { // -------------------------------------------------- @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - ion-item-divider[#{$color-name}] { + // If there is text with a color it should use this color + // and override whatever item sets it to + .item .text-#{$color-name} { + color: $color-base; + } + + .item-#{$color-name} { color: $color-contrast; background-color: $color-base; } diff --git a/src/components/item/test/dividers/main.html b/src/components/item/test/dividers/main.html index 4513b63f25..ddc7f76160 100644 --- a/src/components/item/test/dividers/main.html +++ b/src/components/item/test/dividers/main.html @@ -28,11 +28,11 @@ - + - Dark @@ -48,12 +48,12 @@ - + Light - @@ -64,7 +64,7 @@ - + Primary @@ -77,7 +77,7 @@ - Secondary + Secondary diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index 77b38d4152..b2173350ea 100644 --- a/src/components/item/test/reorder/main.html +++ b/src/components/item/test/reorder/main.html @@ -1,5 +1,5 @@ - + Item Reorder - - - - - + + + + + diff --git a/src/components/menu/test/basic/main.html b/src/components/menu/test/basic/main.html index aa07376973..c807ae3212 100644 --- a/src/components/menu/test/basic/main.html +++ b/src/components/menu/test/basic/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -70,7 +70,7 @@ - + Footer @@ -81,7 +81,7 @@ - + Right Menu diff --git a/src/components/menu/test/basic/page1.html b/src/components/menu/test/basic/page1.html index 32b0b05ad0..9f14c9ad3e 100644 --- a/src/components/menu/test/basic/page1.html +++ b/src/components/menu/test/basic/page1.html @@ -22,7 +22,7 @@ - diff --git a/src/components/menu/test/disable-swipe/main.html b/src/components/menu/test/disable-swipe/main.html index 09bf203a8c..ccf7afd6ae 100644 --- a/src/components/menu/test/disable-swipe/main.html +++ b/src/components/menu/test/disable-swipe/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -21,7 +21,7 @@ - + Right Menu diff --git a/src/components/menu/test/enable-disable/main.html b/src/components/menu/test/enable-disable/main.html index c8ee431dcb..35b7f8df17 100644 --- a/src/components/menu/test/enable-disable/main.html +++ b/src/components/menu/test/enable-disable/main.html @@ -1,7 +1,7 @@ - + Menu 1 @@ -29,7 +29,7 @@ - + Menu 2 @@ -56,7 +56,7 @@ - + Menu 3 diff --git a/src/components/menu/test/multiple/main.html b/src/components/menu/test/multiple/main.html index 2064d057d4..ace2c5772d 100644 --- a/src/components/menu/test/multiple/main.html +++ b/src/components/menu/test/multiple/main.html @@ -1,7 +1,7 @@ - + Menu 1 @@ -20,7 +20,7 @@ - + Menu 2 diff --git a/src/components/menu/test/overlay/main.html b/src/components/menu/test/overlay/main.html index 3c41e4b2c7..41c508450e 100644 --- a/src/components/menu/test/overlay/main.html +++ b/src/components/menu/test/overlay/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -25,7 +25,7 @@ - + Right Menu diff --git a/src/components/menu/test/push/main.html b/src/components/menu/test/push/main.html index 44c5e4df00..d23a7fe9dd 100644 --- a/src/components/menu/test/push/main.html +++ b/src/components/menu/test/push/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -25,7 +25,7 @@ - + Right Menu diff --git a/src/components/menu/test/reveal/main.html b/src/components/menu/test/reveal/main.html index c9c6224692..711c727f61 100644 --- a/src/components/menu/test/reveal/main.html +++ b/src/components/menu/test/reveal/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -22,7 +22,7 @@ - + Right Menu diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/index.ts index 5e5397fa75..b45199ae39 100644 --- a/src/components/modal/test/basic/index.ts +++ b/src/components/modal/test/basic/index.ts @@ -233,7 +233,7 @@ class ModalPassData { @Component({ template: ` - + Toolbar 1 @@ -243,7 +243,7 @@ class ModalPassData { - @@ -257,7 +257,7 @@ class ModalPassData {

Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
- @@ -280,7 +280,7 @@ class ToolbarModal { @Component({ template: ` - + diff --git a/src/components/nav/test/basic/index.ts b/src/components/nav/test/basic/index.ts index 8e23c6699b..5bcfcfd92b 100644 --- a/src/components/nav/test/basic/index.ts +++ b/src/components/nav/test/basic/index.ts @@ -206,7 +206,7 @@ class FullPage { @Component({ template: ` - + Primary Color Page Header diff --git a/src/components/nav/test/child-navs/index.ts b/src/components/nav/test/child-navs/index.ts index 11d0e81b26..50e4a2cdf8 100644 --- a/src/components/nav/test/child-navs/index.ts +++ b/src/components/nav/test/child-navs/index.ts @@ -21,7 +21,7 @@ ionicBootstrap(E2EApp); - diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts index 83521b634c..2310c9b254 100644 --- a/src/components/nav/test/nested/index.ts +++ b/src/components/nav/test/nested/index.ts @@ -33,7 +33,7 @@ export class Login { template: ` - + Account Menu @@ -92,7 +92,7 @@ export class Account { @Component({ template: ` - + @@ -129,7 +129,7 @@ export class Dashboard { @Component({ template: ` - + diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts index 1c0be949a1..3044aab26d 100644 --- a/src/components/navbar/navbar.ts +++ b/src/components/navbar/navbar.ts @@ -1,4 +1,4 @@ -import { Component, Directive, ElementRef, forwardRef, Inject, Input, Optional } from '@angular/core'; +import { Component, Directive, ElementRef, forwardRef, Inject, Input, Optional, Renderer } from '@angular/core'; import { App } from '../app/app'; import { Config } from '../../config/config'; @@ -131,6 +131,21 @@ export class Navbar extends ToolbarBase { private _bgRef: ElementRef; private _sbPadding: boolean; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @input {boolean} whether the back button should be shown or not */ @@ -145,10 +160,11 @@ export class Navbar extends ToolbarBase { constructor( private _app: App, @Optional() viewCtrl: ViewController, - elementRef: ElementRef, + private _elementRef: ElementRef, + private _renderer: Renderer, config: Config ) { - super(elementRef); + super(_elementRef); viewCtrl && viewCtrl.setNavbar(this); @@ -225,6 +241,24 @@ export class Navbar extends ToolbarBase { this._hidden = isHidden; } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `toolbar-${color}`, isAdd); + } + } + } diff --git a/src/components/popover/test/basic/main.html b/src/components/popover/test/basic/main.html index 8eaa497bff..5b80c42471 100644 --- a/src/components/popover/test/basic/main.html +++ b/src/components/popover/test/basic/main.html @@ -1,6 +1,6 @@ - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts index bfa9d912c8..061de7b34a 100644 --- a/src/components/radio/radio-button.ts +++ b/src/components/radio/radio-button.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, ViewEncapsulation } from '@angular/core'; +import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core'; import { Form } from '../../util/form'; import { isBlank, isCheckedProperty, isPresent, isTrueProperty } from '../../util/util'; @@ -72,6 +72,21 @@ export class RadioButton implements OnDestroy, OnInit { */ id: string; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @output {any} expression to be evaluated when selected */ @@ -79,6 +94,8 @@ export class RadioButton implements OnDestroy, OnInit { constructor( private _form: Form, + private _elementRef: ElementRef, + private _renderer: Renderer, @Optional() private _item: Item, @Optional() private _group: RadioGroup ) { @@ -169,4 +186,26 @@ export class RadioButton implements OnDestroy, OnInit { this._form.deregister(this); this._group && this._group.remove(this); } + + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `radio-${color}`, isAdd); + + if (this._item) { + this._item._updateColor(color, 'item-radio'); + } + } + } } diff --git a/src/components/radio/radio.ios.scss b/src/components/radio/radio.ios.scss index 785b52c511..0060d18dd5 100644 --- a/src/components/radio/radio.ios.scss +++ b/src/components/radio/radio.ios.scss @@ -97,7 +97,13 @@ ion-radio { @mixin radio-theme-ios($color-name, $color-base) { - ion-radio[#{$color-name}] .radio-checked { + .item-radio-#{$color-name}.item-radio-checked { + ion-label { + color: $color-base; + } + } + + .radio-#{$color-name} .radio-checked { color: $color-base; .radio-inner { diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss index 91ef7360da..521baa12cd 100644 --- a/src/components/radio/radio.md.scss +++ b/src/components/radio/radio.md.scss @@ -124,7 +124,13 @@ ion-radio { @mixin radio-theme-md($color-name, $color-base, $color-contrast) { - ion-radio[#{$color-name}] { + .item-radio-#{$color-name}.item-radio-checked { + ion-label { + color: $color-base; + } + } + + .radio-#{$color-name} { .radio-checked { border-color: $color-base; diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss index 5afe8f91e2..979a06dece 100644 --- a/src/components/radio/radio.wp.scss +++ b/src/components/radio/radio.wp.scss @@ -121,7 +121,7 @@ ion-radio { @mixin radio-theme-wp($color-name, $color-base) { - ion-radio[#{$color-name}] { + .radio-#{$color-name} { .radio-checked { border-color: $color-base; diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html index 0530154fe9..0b769b49f3 100644 --- a/src/components/radio/test/basic/main.html +++ b/src/components/radio/test/basic/main.html @@ -35,7 +35,7 @@ Cherry (secondary color) - + diff --git a/src/components/radio/test/radio.spec.ts b/src/components/radio/test/radio.spec.ts index eebb722bf0..39b2f51d16 100644 --- a/src/components/radio/test/radio.spec.ts +++ b/src/components/radio/test/radio.spec.ts @@ -111,7 +111,7 @@ export function run() { let form: Form; function createRadioButton(shouldIncludeGroup = true) { - return new RadioButton(form, null, shouldIncludeGroup ? rg : null); + return new RadioButton(form, null, null, null, shouldIncludeGroup ? rg : null); } function mockRenderer(): any { diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss index 77c890b4a2..8ffcf51e6d 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -178,7 +178,7 @@ ion-range { @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { - ion-range[#{$color-name}] { + .range-#{$color-name} { .range-bar-active, .range-tick-active { background: $color-base; diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss index af1c3a6633..3035b099f5 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -239,7 +239,7 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob { @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { - ion-range[#{$color-name}] { + .range-#{$color-name} { @include md-range-min(); .range-bar-active, diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 11285e458b..9d314bc608 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -145,11 +145,11 @@ export class RangeKnob implements OnInit { * ```html * * - * + * * * * - * + * * -200 * 200 * @@ -164,7 +164,7 @@ export class RangeKnob implements OnInit { * * * step=100, snaps, {{singleValue4}} - * + * * * * @@ -226,6 +226,22 @@ export class Range implements AfterViewInit, ControlValueAccessor, OnDestroy { */ value: any; + + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + @ViewChild('bar') private _bar: ElementRef; @ViewChild('slider') private _slider: ElementRef; @ViewChildren(RangeKnob) private _knobs: QueryList; @@ -331,6 +347,7 @@ export class Range implements AfterViewInit, ControlValueAccessor, OnDestroy { constructor( private _form: Form, @Optional() private _item: Item, + private _elementRef: ElementRef, private _renderer: Renderer ) { _form.register(this); @@ -584,6 +601,24 @@ export class Range implements AfterViewInit, ControlValueAccessor, OnDestroy { return (value - this._min) / (this._max - this._min); } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `range-${color}`, isAdd); + } + } + /** * @private */ diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index ef916b6726..c032ca7480 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -172,7 +172,7 @@ ion-range { @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - ion-range[#{$color-name}] { + .range-#{$color-name} { .range-bar-active, .range-tick-active, .range-knob, diff --git a/src/components/range/test/basic/main.html b/src/components/range/test/basic/main.html index 5eb2d113f7..c06e38449f 100644 --- a/src/components/range/test/basic/main.html +++ b/src/components/range/test/basic/main.html @@ -1,7 +1,7 @@ - + Left Menu @@ -67,7 +67,7 @@ - + Right Menu diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html index e00b9c858d..c2304d2c95 100644 --- a/src/components/range/test/basic/page1.html +++ b/src/components/range/test/basic/page1.html @@ -19,7 +19,7 @@ - + @@ -29,7 +29,7 @@ init=150, min=-200, max=200 - + -200 200 @@ -45,7 +45,7 @@ disabled - + @@ -53,12 +53,12 @@ step=100, snaps, {{singleValue4}} - + dual, {{dualValue | json}} - + @@ -68,7 +68,7 @@ pin, {{singleValue}} - + diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss index c8f1f4ba7a..a49c7f69ed 100644 --- a/src/components/searchbar/searchbar.ios.scss +++ b/src/components/searchbar/searchbar.ios.scss @@ -218,7 +218,7 @@ ion-searchbar { @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { $fg-color: rgba($color-contrast, .5); - ion-searchbar[#{$color-name}] { + .searchbar-#{$color-name} { .searchbar-ios-cancel { color: $color-base; @@ -228,7 +228,7 @@ ion-searchbar { } } - .toolbar[#{$color-name}] ion-searchbar { + .toolbar-#{$color-name} ion-searchbar { .searchbar-search-icon { @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color); } diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index f915a04f91..86b28f74a6 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -1,4 +1,4 @@ -import { Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgControl, NgModel } from '@angular/forms'; import { Config } from '../../config/config'; @@ -30,7 +30,7 @@ import { Debouncer } from '../../util/debouncer'; selector: 'ion-searchbar', template: '
' + - '' + '
' + @@ -54,6 +54,21 @@ export class Searchbar { private _searchbarInput: ElementRef; private _debouncer: Debouncer = new Debouncer(250); + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @input {string} Set the the cancel button text. Default: `"Cancel"`. */ @@ -133,6 +148,7 @@ export class Searchbar { constructor( private _elementRef: ElementRef, private _config: Config, + private _renderer: Renderer, @Optional() ngControl: NgControl ) { // If the user passed a ngControl we need to set the valueAccessor @@ -345,6 +361,24 @@ export class Searchbar { this._isActive = false; } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `searchbar-${color}`, isAdd); + } + } + /** * @private * Write a new value to the element. diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss index 84810d46b2..9ca9872d41 100644 --- a/src/components/searchbar/searchbar.wp.scss +++ b/src/components/searchbar/searchbar.wp.scss @@ -158,7 +158,7 @@ ion-searchbar { @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { - ion-searchbar[#{$color-name}].searchbar-has-focus .searchbar-input-container { + .searchbar-#{$color-name}.searchbar-has-focus .searchbar-input-container { border-color: $color-base; } diff --git a/src/components/searchbar/test/basic/main.html b/src/components/searchbar/test/basic/main.html index f999ece531..02309d5824 100644 --- a/src/components/searchbar/test/basic/main.html +++ b/src/components/searchbar/test/basic/main.html @@ -21,10 +21,10 @@

Search - Custom Cancel Button Danger
- +
Search - Value passed
- +

diff --git a/src/components/searchbar/test/nav/search.html b/src/components/searchbar/test/nav/search.html index 02b9989023..8aa8be3a5b 100644 --- a/src/components/searchbar/test/nav/search.html +++ b/src/components/searchbar/test/nav/search.html @@ -5,7 +5,7 @@ - + diff --git a/src/components/searchbar/test/nav/tabs.html b/src/components/searchbar/test/nav/tabs.html index 56025517d4..701e1f0afe 100644 --- a/src/components/searchbar/test/nav/tabs.html +++ b/src/components/searchbar/test/nav/tabs.html @@ -1,4 +1,4 @@ - + diff --git a/src/components/searchbar/test/toolbar/main.html b/src/components/searchbar/test/toolbar/main.html index 3e02a862d6..7cc261e1fe 100644 --- a/src/components/searchbar/test/toolbar/main.html +++ b/src/components/searchbar/test/toolbar/main.html @@ -15,17 +15,17 @@

Search - Primary Toolbar
- +
Search - Dark Toolbar
- +
Search - Light Toolbar
- + diff --git a/src/components/segment/segment.ios.scss b/src/components/segment/segment.ios.scss index 6aeeee5ce3..656db700fd 100644 --- a/src/components/segment/segment.ios.scss +++ b/src/components/segment/segment.ios.scss @@ -126,7 +126,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; @mixin ios-segment-button($color-name, $color-base, $color-contrast) { - ion-segment[#{$color-name}] { + .segment-#{$color-name} { .segment-button { border-color: $color-base; @@ -162,7 +162,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; @include ios-segment-button($color-name, $color-base, $color-contrast); - .toolbar[#{$color-name}] .segment-button.segment-activated { + .toolbar-#{$color-name} .segment-button.segment-activated { color: $color-base; } } diff --git a/src/components/segment/segment.md.scss b/src/components/segment/segment.md.scss index 911234dd81..dca6bbe4aa 100644 --- a/src/components/segment/segment.md.scss +++ b/src/components/segment/segment.md.scss @@ -81,7 +81,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d @mixin md-segment-button($color-name, $color-base, $color-contrast) { - ion-segment[#{$color-name}] .segment-button { + .segment-#{$color-name} .segment-button { color: $color-base; &.activated, diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts index 942ad4700f..690753cf02 100644 --- a/src/components/segment/segment.ts +++ b/src/components/segment/segment.ts @@ -14,7 +14,7 @@ import { isPresent, isTrueProperty } from '../../util/util'; * ```html * * - * + * * * * @@ -24,7 +24,7 @@ import { isPresent, isTrueProperty } from '../../util/util'; * * * - * + * * * Friends * @@ -130,7 +130,7 @@ export class SegmentButton { * * * - * + * * * * @@ -143,7 +143,7 @@ export class SegmentButton { * * * - * + * * * Friends * @@ -154,7 +154,7 @@ export class SegmentButton { * * *
- * + * * * Standard * @@ -185,6 +185,20 @@ export class Segment { */ value: string; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } /** * @output {Any} expression to evaluate when a segment button has been changed @@ -197,7 +211,11 @@ export class Segment { */ @ContentChildren(SegmentButton) _buttons: QueryList; - constructor(@Optional() ngControl: NgControl) { + constructor( + private _elementRef: ElementRef, + private _renderer: Renderer, + @Optional() ngControl: NgControl + ) { if (ngControl) { ngControl.valueAccessor = this; } @@ -222,6 +240,24 @@ export class Segment { } } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `segment-${color}`, isAdd); + } + } + /** * @private * Write a new value to the element. diff --git a/src/components/segment/segment.wp.scss b/src/components/segment/segment.wp.scss index cac4eac425..2c3fa2fd5a 100644 --- a/src/components/segment/segment.wp.scss +++ b/src/components/segment/segment.wp.scss @@ -70,7 +70,7 @@ ion-segment { @mixin wp-segment-button($color-name, $color-base) { - ion-segment[#{$color-name}] .segment-button { + .segment-#{$color-name} .segment-button { color: $color-base; &.activated, diff --git a/src/components/segment/test/basic/main.html b/src/components/segment/test/basic/main.html index ad0ad19ba0..1373fad6f8 100644 --- a/src/components/segment/test/basic/main.html +++ b/src/components/segment/test/basic/main.html @@ -17,7 +17,7 @@ - + @@ -37,7 +37,7 @@

Map mode: formControlName

- + Active @@ -70,7 +70,7 @@

Model style: NgModel

- + Model A @@ -96,15 +96,15 @@ - + - - + + Primary @@ -118,7 +118,7 @@ - + Default @@ -132,7 +132,7 @@ - + Default diff --git a/src/components/segment/test/nav/main.html b/src/components/segment/test/nav/main.html index 1a121be072..8787cb60ad 100644 --- a/src/components/segment/test/nav/main.html +++ b/src/components/segment/test/nav/main.html @@ -30,10 +30,10 @@ - + - + diff --git a/src/components/spinner/spinner.ios.scss b/src/components/spinner/spinner.ios.scss new file mode 100644 index 0000000000..ab927cbc61 --- /dev/null +++ b/src/components/spinner/spinner.ios.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// iOS Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/spinner.md.scss b/src/components/spinner/spinner.md.scss new file mode 100644 index 0000000000..dd60fb8cd2 --- /dev/null +++ b/src/components/spinner/spinner.md.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// Material Design Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index eb6350f8c6..5e55df0830 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core'; import { NgFor, NgStyle } from '@angular/common'; import { Config } from '../../config/config'; @@ -108,7 +108,6 @@ import { Config } from '../../config/config'; `, directives: [NgFor, NgStyle], host: { - '[class]': '_applied', '[class.spinner-paused]': 'paused' }, changeDetection: ChangeDetectionStrategy.OnPush, @@ -122,6 +121,21 @@ export class Spinner { private _init: boolean; private _applied: string; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @input {string} SVG spinner name. */ @@ -153,7 +167,11 @@ export class Spinner { */ @Input() paused: boolean = false; - constructor(private _config: Config) {} + constructor( + private _config: Config, + private _elementRef: ElementRef, + private _renderer: Renderer + ) {} /** * @private @@ -188,6 +206,7 @@ export class Spinner { } } + this._renderer.setElementClass(this._elementRef.nativeElement, this._applied, true); } } } @@ -199,6 +218,24 @@ export class Spinner { return data; } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `spinner-${color}`, isAdd); + } + } + } const SPINNERS: any = { diff --git a/src/components/spinner/spinner.wp.scss b/src/components/spinner/spinner.wp.scss new file mode 100644 index 0000000000..6d96edefdb --- /dev/null +++ b/src/components/spinner/spinner.wp.scss @@ -0,0 +1,24 @@ +@import "./spinner"; + +// Windows Spinner +// -------------------------------------------------- + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .spinner-#{$color-name} { + + &.spinner-ios line, + &.spinner-ios-small line, + &.spinner-crescent circle { + stroke: $color-base; + } + + &.spinner-bubbles circle, + &.spinner-circles circle, + &.spinner-dots circle { + fill: $color-base; + } + + } + +} diff --git a/src/components/spinner/test/colors/index.ts b/src/components/spinner/test/colors/index.ts new file mode 100644 index 0000000000..c196220921 --- /dev/null +++ b/src/components/spinner/test/colors/index.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { ionicBootstrap } from '../../../../../src'; + + +@Component({ + templateUrl: 'main.html' +}) +class E2EPage { + paused: boolean = false; + + toggleState() { + this.paused = !this.paused; + } +} + + +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/spinner/test/colors/main.html b/src/components/spinner/test/colors/main.html new file mode 100644 index 0000000000..a278502c11 --- /dev/null +++ b/src/components/spinner/test/colors/main.html @@ -0,0 +1,59 @@ + + + + Spinners + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Platform Default + +
ios + +
ios-small + +
bubbles + +
circles + +
crescent + +
dots + +
+ + + + diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss index df49e7f2f4..fe802f5430 100644 --- a/src/components/tabs/tabs.ios.scss +++ b/src/components/tabs/tabs.ios.scss @@ -133,7 +133,7 @@ ion-tabs[tabsPlacement=top] ion-tabbar { @mixin tabbar-ios($color-name, $color-base, $color-contrast) { - ion-tabs[#{$color-name}] ion-tabbar { + .tabs-#{$color-name} ion-tabbar { border-color: darken($color-base, 10%); background-color: $color-base; diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss index 18a2375846..f8608ff7a6 100644 --- a/src/components/tabs/tabs.md.scss +++ b/src/components/tabs/tabs.md.scss @@ -167,7 +167,7 @@ ion-tabbar { @mixin tabbar-md($color-name, $color-base, $color-contrast) { - ion-tabs[#{$color-name}] ion-tabbar { + .tabs-#{$color-name} ion-tabbar { background-color: $color-base; .tab-button { diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 1a15743514..ff53ed58f9 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -181,6 +181,21 @@ export class Tabs extends Ion { */ subPages: boolean; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab. */ @@ -387,6 +402,24 @@ export class Tabs extends Ion { this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val); } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `tabs-${color}`, isAdd); + } + } + /** * @private */ diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss index 8c66b6e90e..9f3bdb6333 100644 --- a/src/components/tabs/tabs.wp.scss +++ b/src/components/tabs/tabs.wp.scss @@ -116,7 +116,7 @@ ion-tabbar { @mixin tabbar-wp($color-name, $color-base, $color-contrast) { - ion-tabs[#{$color-name}] ion-tabbar { + .tabs-#{$color-name} ion-tabbar { background-color: $color-base; .tab-button { diff --git a/src/components/tabs/test/advanced/tab1page2.html b/src/components/tabs/test/advanced/tab1page2.html index c465a60a72..eb0669aa0f 100644 --- a/src/components/tabs/test/advanced/tab1page2.html +++ b/src/components/tabs/test/advanced/tab1page2.html @@ -1,6 +1,6 @@ - + Tabs 1, Page 2 diff --git a/src/components/tabs/test/basic/index.ts b/src/components/tabs/test/basic/index.ts index 22d2a899ab..01167fb135 100644 --- a/src/components/tabs/test/basic/index.ts +++ b/src/components/tabs/test/basic/index.ts @@ -28,15 +28,15 @@ import { ionicBootstrap, App, AlertController, ModalController, ViewController, Toggle {{i}} - + - - @@ -127,8 +127,8 @@ export class Tab1 {

{{session.location}} {{session.location}} {{session.location}}

- - + + @@ -220,7 +220,7 @@ export class Tab3 { template: ` - + Menu diff --git a/src/components/tabs/test/colors/main.html b/src/components/tabs/test/colors/main.html index 422d36b96c..e1b72ef9e1 100644 --- a/src/components/tabs/test/colors/main.html +++ b/src/components/tabs/test/colors/main.html @@ -8,7 +8,7 @@ - + @@ -16,7 +16,7 @@ - + @@ -24,7 +24,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -40,7 +40,7 @@ - + @@ -48,7 +48,7 @@ - + @@ -56,7 +56,7 @@ - + @@ -64,7 +64,7 @@ - + diff --git a/src/components/tabs/test/ghost/index.ts b/src/components/tabs/test/ghost/index.ts index 793e55387e..e544c65de8 100644 --- a/src/components/tabs/test/ghost/index.ts +++ b/src/components/tabs/test/ghost/index.ts @@ -80,7 +80,7 @@ class QuesaritoPage {} template: ` - + Secret Menu diff --git a/src/components/tabs/test/tab-bar-scenarios/main.html b/src/components/tabs/test/tab-bar-scenarios/main.html index 3248617afe..5d9ba43820 100644 --- a/src/components/tabs/test/tab-bar-scenarios/main.html +++ b/src/components/tabs/test/tab-bar-scenarios/main.html @@ -56,7 +56,7 @@ - + diff --git a/src/components/toggle/test/basic/main.html b/src/components/toggle/test/basic/main.html index 2be8c5416d..5c8768542d 100644 --- a/src/components/toggle/test/basic/main.html +++ b/src/components/toggle/test/basic/main.html @@ -45,12 +45,12 @@ Kiwi, (ionChange) Secondary color - + Strawberry, (ionChange) [checked]="true" - + diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index fc9a46f3ed..12a6a71eda 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -179,7 +179,7 @@ ion-toggle { @mixin ios-toggle-theme($color-name, $color-base) { - ion-toggle[#{$color-name}] .toggle-checked { + .toggle-#{$color-name} .toggle-checked { background-color: $color-base; } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 5f021a79d8..108b998983 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -131,7 +131,7 @@ ion-toggle { @mixin toggle-theme-md($color-name, $color-base) { - ion-toggle[#{$color-name}] { + .toggle-#{$color-name} { .toggle-checked { background-color: lighten($color-base, 25%); diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts index d038b69b4c..2a1a85d889 100644 --- a/src/components/toggle/toggle.ts +++ b/src/components/toggle/toggle.ts @@ -77,7 +77,6 @@ export class Toggle implements AfterContentInit, ControlValueAccessor, OnDestroy private _labelId: string; private _activated: boolean = false; private _startX: number; - private _msPrv: number = 0; private _fn: Function; private _events: UIEventManager = new UIEventManager(); @@ -86,6 +85,21 @@ export class Toggle implements AfterContentInit, ControlValueAccessor, OnDestroy */ id: string; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + /** * @output {Toggle} expression to evaluate when the toggle value changes */ @@ -220,6 +234,24 @@ export class Toggle implements AfterContentInit, ControlValueAccessor, OnDestroy this._disabled = isTrueProperty(val); this._item && this._item.setCssClass('item-toggle-disabled', this._disabled); } + + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `toggle-${color}`, isAdd); + } + } /** * @private diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index 4e4000c1df..4fdc1c9547 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -136,7 +136,7 @@ ion-toggle { @mixin toggle-theme-wp($color-name, $color-base, $color-contrast) { - ion-toggle[#{$color-name}] { + .toggle-#{$color-name} { .toggle-checked { border-color: $color-base; diff --git a/src/components/toolbar/test/colors/e2e.ts b/src/components/toolbar/test/colors/e2e.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/components/toolbar/test/colors/main.html b/src/components/toolbar/test/colors/main.html index a5f7dbe452..473a33340a 100644 --- a/src/components/toolbar/test/colors/main.html +++ b/src/components/toolbar/test/colors/main.html @@ -9,138 +9,138 @@ - - - Default - + - - - Primary - + - - - Primary.activated - + - - Secondary - - + - - Secondary Activated - - + - - - Dark - + - - - Dark.activated - + - - @@ -148,27 +148,27 @@ Danger - + - Danger - + - - @@ -176,12 +176,12 @@ Light - + - @@ -190,7 +190,7 @@ - diff --git a/src/components/toolbar/test/scenarios/main.html b/src/components/toolbar/test/scenarios/main.html index 2286621d75..d0978f5a3c 100644 --- a/src/components/toolbar/test/scenarios/main.html +++ b/src/components/toolbar/test/scenarios/main.html @@ -14,7 +14,7 @@ - @@ -31,7 +31,7 @@ - @@ -48,7 +48,7 @@ - @@ -67,7 +67,7 @@ Solid - @@ -86,7 +86,7 @@ Solid Activated - @@ -104,7 +104,7 @@ - @@ -122,7 +122,7 @@ - @@ -189,7 +189,7 @@ - + Something diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 949036d1cf..48f96deda5 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -110,7 +110,7 @@ ion-title { } @mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) { - .toolbar[#{$color-name}] { + .toolbar-#{$color-name} { .toolbar-background { border-color: darken($color-base, 10%); @@ -118,6 +118,7 @@ ion-title { } .toolbar-title, + .bar-button-clear, .bar-button-default { color: $color-contrast; } @@ -166,7 +167,8 @@ ion-buttons[right] { @mixin ios-bar-button-default($color-name, $color-base, $color-contrast) { - .bar-button-#{$color-name} { + .bar-button-#{$color-name}, + .bar-button-clear-#{$color-name} { color: $color-base; background-color: transparent; @@ -205,7 +207,7 @@ ion-buttons[right] { @mixin ios-bar-button-outline($color-name, $color-base, $color-contrast) { .bar-button-outline-#{$color-name} { - $fg-color: color-shade($color-base); + $fg-color: $color-base; border-color: $fg-color; color: $fg-color; background-color: transparent; @@ -350,6 +352,7 @@ ion-buttons[right] { // -------------------------------------------------- @include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios)); +@include ios-bar-button-default(clear, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios)); @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { @include ios-toolbar-theme($color-name, $color-base, $color-contrast); diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss index a25bf66325..b65ed61e01 100644 --- a/src/components/toolbar/toolbar.md.scss +++ b/src/components/toolbar/toolbar.md.scss @@ -106,19 +106,21 @@ ion-footer[no-shadow]::before, } @mixin md-toolbar-theme($color-name, $color-base, $color-contrast) { - .toolbar[#{$color-name}] { + .toolbar-#{$color-name} { $fg-color: color-contrast($colors-md, $color-base, md); .toolbar-background { background: $color-base; } + .bar-button-clear, .bar-button-default, .bar-button-outline, .toolbar-title { color: $fg-color; } + .bar-button-clear, .bar-button-default, .bar-button-outline { ion-button-effect { @@ -196,6 +198,7 @@ ion-buttons[right] { @mixin md-bar-button-default($color-name, $color-base, $color-contrast) { + .bar-button-clear-#{$color-name}, .bar-button-#{$color-name} { color: $color-base; background-color: transparent; @@ -373,6 +376,7 @@ ion-buttons[right] { // -------------------------------------------------- @include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md)); +@include md-bar-button-default(clear, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md)); @each $color-name, $color-base, $color-contrast in get-colors($colors-md) { @include md-toolbar-theme($color-name, $color-base, $color-contrast); diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index 8463d3b939..87b9371889 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Optional, QueryList, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Input, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core'; import { Config } from '../../config/config'; import { Ion } from '../ion'; @@ -285,23 +285,57 @@ export class ToolbarBase extends Ion { export class Toolbar extends ToolbarBase { private _sbPadding: boolean; + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + constructor( @Optional() viewCtrl: ViewController, @Optional() header: Header, @Optional() footer: Footer, config: Config, - elementRef: ElementRef + private _elementRef: ElementRef, + private _renderer: Renderer ) { - super(elementRef); + super(_elementRef); if (viewCtrl && (header || footer)) { // only toolbars within headers and footer are view toolbars // toolbars within the content are not view toolbars, since they // are apart of the content, and could be anywhere within the content - viewCtrl.setToolbarRef(elementRef); + viewCtrl.setToolbarRef(_elementRef); } this._sbPadding = config.getBoolean('statusbarPadding'); } + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `toolbar-${color}`, isAdd); + } + } + } diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss index 3e5e4a2dfe..3593212e38 100644 --- a/src/components/toolbar/toolbar.wp.scss +++ b/src/components/toolbar/toolbar.wp.scss @@ -68,26 +68,20 @@ $navbar-wp-height: $toolbar-wp-height !default; } @mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) { - .toolbar[#{$color-name}] { + .toolbar-#{$color-name} { $fg-color: $color-contrast; .toolbar-background { background: $color-base; } + .bar-button-clear, .bar-button-default, .bar-button-outline, .toolbar-title { color: $fg-color; } - .bar-button-default, - .bar-button-outline { - ion-button-effect { - background-color: $fg-color; - } - } - .bar-button-outline { border-color: $fg-color; } @@ -158,6 +152,7 @@ ion-buttons[right] { @mixin wp-bar-button-default($color-name, $color-base, $color-contrast) { + .bar-button-clear-#{$color-name}, .bar-button-#{$color-name} { color: $color-base; background-color: transparent; @@ -329,6 +324,7 @@ ion-buttons[right] { // -------------------------------------------------- @include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp)); +@include wp-bar-button-default(clear, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp)); @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { @include wp-toolbar-theme($color-name, $color-base, $color-contrast); diff --git a/src/components/typography/test/basic/e2e.ts b/src/components/typography/test/basic/e2e.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/components/app/test/typography/index.ts b/src/components/typography/test/basic/index.ts similarity index 64% rename from src/components/app/test/typography/index.ts rename to src/components/typography/test/basic/index.ts index 94fefa17b5..1e198402b1 100644 --- a/src/components/app/test/typography/index.ts +++ b/src/components/typography/test/basic/index.ts @@ -5,10 +5,19 @@ import { ionicBootstrap, App } from '../../../../../src'; @Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { + dynamicColor: string = "secondary"; + constructor(app: App) { app.setTitle('Basic Buttons'); } } +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + ionicBootstrap(E2EApp); diff --git a/src/components/typography/test/basic/main.html b/src/components/typography/test/basic/main.html new file mode 100644 index 0000000000..72b2fa85b6 --- /dev/null +++ b/src/components/typography/test/basic/main.html @@ -0,0 +1,40 @@ + + + + Typography + + + + + + + +

H1: The quick brown fox jumps over the lazy dog

+ +

H2: The quick brown fox jumps over the lazy dog

+ +

H3: The quick brown fox jumps over the lazy dog

+ +

H4: The quick brown fox jumps over the lazy dog

+ +
H5: The quick brown fox jumps over the lazy dog
+ +
H6: The quick brown fox jumps over the lazy dog
+ +

+ I saw a werewolf with a Chinese menu in his hand. + Walking through the streets of Soho in the rain. + He was looking for a place called Lee Ho Fook's. + Gonna get a big dish of beef chow mein. +

+ +

+ He's the hairy-handed gent who ran amuck in Kent. + Lately he's been overheard in Mayfair. + Better stay away from him. + He'll rip your lungs out, Jim. + I'd like to meet his tailor. + +

+ + diff --git a/src/components/typography/typography.ios.scss b/src/components/typography/typography.ios.scss new file mode 100644 index 0000000000..9141ccad29 --- /dev/null +++ b/src/components/typography/typography.ios.scss @@ -0,0 +1,21 @@ +@import "./typography"; + +// iOS Typography +// -------------------------------------------------- + +p { + color: $paragraph-ios-color; +} + +a { + color: $link-ios-color; +} + + +@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) { + + .text-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/typography/typography.md.scss b/src/components/typography/typography.md.scss new file mode 100644 index 0000000000..193c1d3ed1 --- /dev/null +++ b/src/components/typography/typography.md.scss @@ -0,0 +1,22 @@ +@import "./typography"; + +// Material Design Typography +// -------------------------------------------------- + + +p { + color: $paragraph-md-color; +} + +a { + color: $link-md-color; +} + + +@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { + + .text-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/components/app/typography.scss b/src/components/typography/typography.scss similarity index 100% rename from src/components/app/typography.scss rename to src/components/typography/typography.scss diff --git a/src/components/typography/typography.ts b/src/components/typography/typography.ts new file mode 100644 index 0000000000..92783ec31a --- /dev/null +++ b/src/components/typography/typography.ts @@ -0,0 +1,49 @@ +import { Directive, ElementRef, Input, Renderer } from '@angular/core'; + + +/** + * @private + * Select all of the HTML text elements with the color attribute to apply the text-color class. + */ +@Directive({ + selector: 'h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color], p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]' +}) +export class Typography { + /** @internal */ + _color: string; + + /** + * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`. + */ + @Input() + get color(): string { + return this._color; + } + + set color(value: string) { + this._updateColor(value); + } + + constructor( + private _elementRef: ElementRef, + private _renderer: Renderer + ) { } + + /** + * @internal + */ + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; + } + + /** + * @internal + */ + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `text-${color}`, isAdd); + } + } +} diff --git a/src/components/typography/typography.wp.scss b/src/components/typography/typography.wp.scss new file mode 100644 index 0000000000..58bbcb02d6 --- /dev/null +++ b/src/components/typography/typography.wp.scss @@ -0,0 +1,22 @@ +@import "./typography"; + +// Windows Typography +// -------------------------------------------------- + + +p { + color: $paragraph-wp-color; +} + +a { + color: $link-wp-color; +} + + +@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { + + .text-#{$color-name} { + color: $color-base; + } + +} diff --git a/src/config/directives.ts b/src/config/directives.ts index 9d342e306f..18e38598f0 100644 --- a/src/config/directives.ts +++ b/src/config/directives.ts @@ -45,6 +45,7 @@ import { NavPop } from '../components/nav/nav-pop'; import { NavPush } from '../components/nav/nav-push'; import { NavbarTemplate, Navbar } from '../components/navbar/navbar'; import { ShowWhen, HideWhen } from '../components/show-hide-when/show-hide-when'; +import { Typography } from '../components/typography/typography'; /** * @private @@ -115,6 +116,7 @@ import { ShowWhen, HideWhen } from '../components/show-hide-when/show-hide-when' * - IdRef * - ShowWhen * - HideWhen + * - Typography */ export const IONIC_DIRECTIVES: any[] = [ // Angular @@ -195,5 +197,6 @@ export const IONIC_DIRECTIVES: any[] = [ NavPop, ShowWhen, - HideWhen + HideWhen, + Typography ];