From 55a0257dbcc6d146c9caeb3798c2578e03881af7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 23 Aug 2016 17:16:55 -0400 Subject: [PATCH] refactor(colors): color should be added as an input instead of directly adding the color to the component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGES: Colors should be passed in the `color` input on components, not added individually as an attribute on the component. For example: ``` ``` Becomes ``` ``` Or to bind an expression to color: ``` ... ``` ```ts @Component({ templateUrl: 'build/pages/about/about.html' }) export class AboutPage { barColor: string; constructor(private nav: NavController, platform: Platform) { this.barColor = platform.is('android') ? 'primary' : 'light'; } } ``` Reason for this change: It was difficult to dynamically add colors to components, especially if the name of the color attribute was unknown in the template. This change keeps the css flat since we aren’t chaining color attributes on components and instead we assign a class to the component which includes the color’s name. This allows you to easily toggle a component between multiple colors. Speeds up performance because we are no longer reading through all of the attributes to grab the color ones. references #7467 closes #7087 closes #7401 closes #7523 --- demos/alert/main.html | 8 +- demos/button/main.html | 28 ++-- demos/checkbox/main.html | 14 +- demos/config/main.html | 2 +- demos/events/app.html | 6 +- demos/events/login.html | 6 +- demos/events/logout.html | 2 +- demos/icon/main.html | 28 ++-- demos/input/main.html | 10 +- demos/item-sliding/main.html | 14 +- demos/item/main.html | 28 ++-- demos/label/main.html | 20 +-- demos/list/main.html | 24 ++-- demos/local-storage/main.html | 4 +- demos/menu/app.html | 4 +- demos/menu/main.html | 6 +- demos/modal/main.html | 2 +- demos/modal/modal-content.html | 2 +- demos/nav-params/main.html | 2 +- demos/navigation/page.html | 2 +- demos/popover/main.html | 2 +- demos/range/main.html | 18 +-- demos/searchbar/main.html | 4 +- demos/segment/main.html | 8 +- demos/tabs/main.html | 12 +- demos/textarea/main.html | 8 +- demos/toggle/main.html | 12 +- demos/toolbar/main.html | 14 +- src/components.core.scss | 2 +- src/components.ios.scss | 5 +- src/components.md.scss | 5 +- src/components.ts | 1 + src/components.wp.scss | 5 +- src/components/alert/test/dismiss/index.ts | 2 +- src/components/app/app.ios.scss | 33 ----- src/components/app/app.md.scss | 32 ----- src/components/app/app.wp.scss | 32 ----- src/components/app/test/cordova/app.html | 2 +- src/components/app/test/cordova/page1.html | 6 +- src/components/app/test/cordova/page2.html | 2 +- .../app/test/gesture-collision/main.html | 6 +- .../app/test/gesture-collision/page1.html | 2 +- src/components/app/test/typography/main.html | 40 ------ src/components/badge/badge.ios.scss | 5 + src/components/badge/badge.md.scss | 5 + src/components/badge/badge.scss | 3 + src/components/badge/badge.ts | 51 +++---- src/components/badge/badge.wp.scss | 5 + src/components/badge/test/basic/e2e.ts | 4 + src/components/badge/test/basic/index.ts | 8 +- src/components/badge/test/basic/main.html | 28 ++-- src/components/button/button.ts | 135 +++++++----------- src/components/button/test/attributes/e2e.ts | 1 + .../button/test/attributes/index.ts | 64 +++++++++ .../button/test/attributes/main.html | 51 +++++++ src/components/button/test/basic/main.html | 20 +-- src/components/button/test/block/main.html | 8 +- src/components/button/test/button.spec.ts | 2 +- src/components/button/test/clear/main.html | 20 +-- src/components/button/test/dynamic/index.ts | 2 - src/components/button/test/dynamic/main.html | 12 +- src/components/button/test/fab/main.html | 10 +- src/components/button/test/full/main.html | 12 +- src/components/button/test/outline/main.html | 24 ++-- src/components/button/test/round/main.html | 16 +-- src/components/card/test/advanced/main.html | 2 +- src/components/checkbox/checkbox.ios.scss | 2 +- src/components/checkbox/checkbox.md.scss | 2 +- src/components/checkbox/checkbox.ts | 41 +++++- src/components/checkbox/checkbox.wp.scss | 2 +- src/components/checkbox/test/basic/index.ts | 1 + src/components/checkbox/test/basic/main.html | 6 +- src/components/icon/icon.ios.scss | 16 +++ src/components/icon/icon.md.scss | 16 +++ src/components/icon/icon.ts | 33 +++++ src/components/icon/icon.wp.scss | 16 +++ src/components/icon/test/basic/index.ts | 1 + src/components/icon/test/basic/main.html | 6 +- src/components/input/input.ts | 12 +- .../input/test/floating-labels/main.html | 6 +- .../input/test/input-focus/main.html | 2 +- src/components/item/item-sliding.ts | 2 +- src/components/item/item.ios.scss | 8 +- src/components/item/item.md.scss | 8 +- src/components/item/item.ts | 37 ++++- src/components/item/item.wp.scss | 8 +- src/components/item/test/dividers/main.html | 12 +- src/components/item/test/reorder/main.html | 2 +- src/components/item/test/text/main.html | 2 +- src/components/label/label.ios.scss | 5 +- src/components/label/label.md.scss | 5 +- src/components/label/label.ts | 33 +++++ src/components/label/label.wp.scss | 5 +- src/components/list/test/headers/main.html | 2 +- src/components/loading/test/basic/main.html | 10 +- src/components/menu/test/basic/main.html | 6 +- src/components/menu/test/basic/page1.html | 2 +- .../menu/test/disable-swipe/main.html | 4 +- .../menu/test/enable-disable/main.html | 6 +- src/components/menu/test/multiple/main.html | 4 +- src/components/menu/test/overlay/main.html | 4 +- src/components/menu/test/push/main.html | 4 +- src/components/menu/test/reveal/main.html | 4 +- src/components/modal/test/basic/index.ts | 8 +- src/components/nav/test/basic/index.ts | 2 +- src/components/nav/test/child-navs/index.ts | 2 +- src/components/nav/test/nested/index.ts | 6 +- src/components/navbar/navbar.ts | 40 +++++- src/components/popover/test/basic/main.html | 8 +- src/components/radio/radio-button.ts | 41 +++++- src/components/radio/radio.ios.scss | 8 +- src/components/radio/radio.md.scss | 8 +- src/components/radio/radio.wp.scss | 2 +- src/components/radio/test/basic/main.html | 2 +- src/components/radio/test/radio.spec.ts | 2 +- src/components/range/range.ios.scss | 2 +- src/components/range/range.md.scss | 2 +- src/components/range/range.ts | 41 +++++- src/components/range/range.wp.scss | 2 +- src/components/range/test/basic/main.html | 4 +- src/components/range/test/basic/page1.html | 12 +- src/components/searchbar/searchbar.ios.scss | 4 +- src/components/searchbar/searchbar.ts | 38 ++++- src/components/searchbar/searchbar.wp.scss | 2 +- src/components/searchbar/test/basic/main.html | 4 +- src/components/searchbar/test/nav/search.html | 2 +- src/components/searchbar/test/nav/tabs.html | 2 +- .../searchbar/test/toolbar/main.html | 6 +- src/components/segment/segment.ios.scss | 4 +- src/components/segment/segment.md.scss | 2 +- src/components/segment/segment.ts | 48 ++++++- src/components/segment/segment.wp.scss | 2 +- src/components/segment/test/basic/main.html | 16 +-- src/components/segment/test/nav/main.html | 4 +- src/components/spinner/spinner.ios.scss | 24 ++++ src/components/spinner/spinner.md.scss | 24 ++++ src/components/spinner/spinner.ts | 43 +++++- src/components/spinner/spinner.wp.scss | 24 ++++ src/components/spinner/test/colors/index.ts | 24 ++++ src/components/spinner/test/colors/main.html | 59 ++++++++ src/components/tabs/tabs.ios.scss | 2 +- src/components/tabs/tabs.md.scss | 2 +- src/components/tabs/tabs.ts | 33 +++++ src/components/tabs/tabs.wp.scss | 2 +- .../tabs/test/advanced/tab1page2.html | 2 +- src/components/tabs/test/basic/index.ts | 12 +- src/components/tabs/test/colors/main.html | 16 +-- src/components/tabs/test/ghost/index.ts | 2 +- .../tabs/test/tab-bar-scenarios/main.html | 2 +- src/components/toggle/test/basic/main.html | 4 +- src/components/toggle/toggle.ios.scss | 2 +- src/components/toggle/toggle.md.scss | 2 +- src/components/toggle/toggle.ts | 34 ++++- src/components/toggle/toggle.wp.scss | 2 +- src/components/toolbar/test/colors/e2e.ts | 0 src/components/toolbar/test/colors/main.html | 76 +++++----- .../toolbar/test/scenarios/main.html | 16 +-- src/components/toolbar/toolbar.ios.scss | 9 +- src/components/toolbar/toolbar.md.scss | 6 +- src/components/toolbar/toolbar.ts | 42 +++++- src/components/toolbar/toolbar.wp.scss | 12 +- src/components/typography/test/basic/e2e.ts | 0 .../test/basic}/index.ts | 11 +- .../typography/test/basic/main.html | 40 ++++++ src/components/typography/typography.ios.scss | 21 +++ src/components/typography/typography.md.scss | 22 +++ .../{app => typography}/typography.scss | 0 src/components/typography/typography.ts | 49 +++++++ src/components/typography/typography.wp.scss | 22 +++ src/config/directives.ts | 5 +- 170 files changed, 1559 insertions(+), 701 deletions(-) delete mode 100644 src/components/app/test/typography/main.html create mode 100644 src/components/badge/test/basic/e2e.ts create mode 100644 src/components/button/test/attributes/e2e.ts create mode 100644 src/components/button/test/attributes/index.ts create mode 100644 src/components/button/test/attributes/main.html create mode 100644 src/components/icon/icon.ios.scss create mode 100644 src/components/icon/icon.md.scss create mode 100644 src/components/icon/icon.wp.scss create mode 100644 src/components/spinner/spinner.ios.scss create mode 100644 src/components/spinner/spinner.md.scss create mode 100644 src/components/spinner/spinner.wp.scss create mode 100644 src/components/spinner/test/colors/index.ts create mode 100644 src/components/spinner/test/colors/main.html create mode 100644 src/components/toolbar/test/colors/e2e.ts create mode 100644 src/components/typography/test/basic/e2e.ts rename src/components/{app/test/typography => typography/test/basic}/index.ts (64%) create mode 100644 src/components/typography/test/basic/main.html create mode 100644 src/components/typography/typography.ios.scss create mode 100644 src/components/typography/typography.md.scss rename src/components/{app => typography}/typography.scss (100%) create mode 100644 src/components/typography/typography.ts create mode 100644 src/components/typography/typography.wp.scss diff --git a/demos/alert/main.html b/demos/alert/main.html index abda386063d..eda3fb7df89 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 6e7852e77d8..df99c733570 100644 --- a/demos/button/main.html +++ b/demos/button/main.html @@ -13,13 +13,13 @@

Colors

- + - + - + - +

Shapes

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

Shapes

Outlines

- + - + - + - +

Icons

- - -

Sizes

- + - + - + diff --git a/demos/checkbox/main.html b/demos/checkbox/main.html index 77bfed6c63c..d2f9c1b64dd 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 4ade64b254d..6c8cd00c3b4 100644 --- a/demos/config/main.html +++ b/demos/config/main.html @@ -57,7 +57,7 @@ });
-
diff --git a/demos/events/app.html b/demos/events/app.html index 258c7d8b9fc..43f2f016a98 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 78d37e20d62..2483b834aa4 100644 --- a/demos/events/logout.html +++ b/demos/events/logout.html @@ -18,6 +18,6 @@

Logout

- +
diff --git a/demos/icon/main.html b/demos/icon/main.html index f244c33580d..c587ed25edf 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 a6d42b1ced2..457eb69e110 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 2e301c141cc..28afdd708de 100644 --- a/demos/item-sliding/main.html +++ b/demos/item-sliding/main.html @@ -27,22 +27,22 @@

{{chat.name}}

- - - - - - - + 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 a982bfacce9..f306273a4e5 100644 --- a/demos/label/main.html +++ b/demos/label/main.html @@ -19,24 +19,24 @@ - Mobile + Mobile - - + + - Email + Email - Birthday + Birthday - Address + Address Notes diff --git a/demos/list/main.html b/demos/list/main.html index 9244d0b6165..74ae7c7b665 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 89c99d7b737..c7387e812e4 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 0b2b78b1b45..c208788fd6d 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 98c6d05e120..2c212cb329a 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 8aabd97ef49..fbbb45ad69e 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 fc83cddc430..8db541e896c 100644 --- a/demos/modal/modal-content.html +++ b/demos/modal/modal-content.html @@ -22,6 +22,6 @@
Parameters passed:

No parameters passed.

- + diff --git a/demos/nav-params/main.html b/demos/nav-params/main.html index a8988f3cb91..c8e0f73c99b 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 126a0bca444..05d551f9f24 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 c8136ca781b..9cfb39d4c25 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 bf4518510d1..e81bd7fa9fb 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 1d171fa6413..a19137bea9d 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 2b8f4bda487..2fd5298d744 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 2709fbf15a1..1359b1b6c8d 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 a19f94f68fb..29eb460d20d 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 9e7dac405aa..cd27cf67b3b 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 23939327f43..1ecb886885b 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 dd287aa0ba8..be011c30f17 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 b6c8e9b1b7c..7627cf82f5c 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 e98f53a9ada..5203c1d7f15 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 6c4a40543ea..b971fd310aa 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 a44f87cee18..63716f86315 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 c25afde9726..20098d88db3 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 589e6b890ba..89801e9a8a6 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 46e2e9c88df..ff42609d7c6 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 c9ad5560bb8..6316d55e974 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 62ffada1158..69a5f933eae 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 f6f3ac5ece5..ee70532ca01 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 015e05ce620..00000000000 --- 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 372290a4483..a461fbe4f6a 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 655e9af92f6..3341091005c 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 b31c533a9c2..d327f72d7ef 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 8017b91b343..e6e3c624e90 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); - } + ) { } /** - * @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); - } - } + _updateColor(newColor: string) { + this._setElementColor(this._color, false); + this._setElementColor(newColor, true); + this._color = newColor; } /** - * @private + * @internal */ - private _setClass(color: string) { - this._renderer.setElementClass(this._elementRef.nativeElement, 'badge-' + color, true); + _setElementColor(color: string, isAdd: boolean) { + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `badge-${color}`, isAdd); + } } } diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index 95de6fa411b..2dca9eed3c4 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 00000000000..94ed4bf5a5b --- /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 7b73dae881c..50abaadae3e 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 3a39f838e89..15e9d99c284 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 ca047753ef7..d5b5832a183 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); -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/; + className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : ''); -const TEXT = 1; -const ICON = 2; + if (color !== null && color !== '') { + this._renderer.setElementClass(this._elementRef.nativeElement, `${className}-${color}`, isAdd); + } + } + } +} diff --git a/src/components/button/test/attributes/e2e.ts b/src/components/button/test/attributes/e2e.ts new file mode 100644 index 00000000000..8b137891791 --- /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 00000000000..b5f895acfc8 --- /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 00000000000..9b31e5c9dda --- /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 9a98681e86d..25b65cb603f 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 1789705e5cd..8e71b845ad0 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 96d9f184c53..bcaf1c66d36 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 a2bc09c2af3..ed46bce976f 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 a8a07f64155..0a3df894a20 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 12039a6d04e..d3dd7f5988e 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 ce3489abb5d..b2f30c33e94 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 e607201be8b..0fc256fde66 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 bb1bade8cd2..3435e06bbdc 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 35657ce3083..1f426ef0e86 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 14b5fdc22d5..0465de6a6f1 100644 --- a/src/components/card/test/advanced/main.html +++ b/src/components/card/test/advanced/main.html @@ -78,7 +78,7 @@

Card With An Inset Picture

- diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 6f0c6943bcd..afdc0bb13bb 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 0d91d9c12c0..52c20c473f4 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 4ce1a2f32e9..8921be553bf 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 d155dc5c939..b3d28adb5a4 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 eedbdf934d3..3aca511ad30 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 8466f8cad48..6f19e34aac9 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 bc76aebc7b7..b08fe8f6e79 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 0c6e71e6074..290cfdb7280 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 0540f27dd4a..74750d6048f 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 4d5fd9979f2..07fc46c176a 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 4513b63f25a..ddc7f761605 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 @@

H2 Title Text

 - + Light - @@ -64,7 +64,7 @@

H3 Title Text

 - + Primary @@ -77,7 +77,7 @@

H4 Title Text

 - Secondary + Secondary diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index 77b38d41520..b2173350ead 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 aa07376973f..c807ae32120 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 32b0b05ad02..9f14c9ad3ec 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 09bf203a8c7..ccf7afd6aee 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 c8ee431dcb6..35b7f8df176 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 2064d057d45..ace2c5772d4 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 3c41e4b2c7a..41c508450e3 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 44c5e4df00a..d23a7fe9dd3 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 c9c62246927..711c727f611 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 5e5397fa75e..b45199ae39a 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 8e23c6699be..5bcfcfd92bb 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 11d0e81b260..50e4a2cdf89 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 83521b634c3..2310c9b2544 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 1c0be949a13..3044aab26dc 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 8eaa497bffe..5b80c424714 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 bfa9d912c89..061de7b34aa 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 785b52c5118..0060d18dd55 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 91ef7360daa..521baa12cdc 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 5afe8f91e2c..979a06deceb 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 0530154fe91..0b769b49f3a 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 eebb722bf02..39b2f51d16b 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 77c890b4a28..8ffcf51e6d6 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 af1c3a66338..3035b099f5a 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 11285e458b1..9d314bc608d 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 ef916b67265..c032ca74800 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 5eb2d113f71..c06e38449f9 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 e00b9c858d5..c2304d2c957 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 c8f1f4ba7af..a49c7f69ed9 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 f915a04f91d..86b28f74a6c 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 84810d46b29..9ca9872d416 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 f999ece5316..02309d58241 100644 --- a/src/components/searchbar/test/basic/main.html +++ b/src/components/searchbar/test/basic/main.html @@ -21,10 +21,10 @@
Search - No Cancel Button

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 02b9989023c..8aa8be3a5bd 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 56025517d48..701e1f0afe1 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 3e02a862d6a..7cc261e1fe5 100644 --- a/src/components/searchbar/test/toolbar/main.html +++ b/src/components/searchbar/test/toolbar/main.html @@ -15,17 +15,17 @@

Search - Default Toolbar
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 6aeeee5ce3e..656db700fde 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 911234dd818..dca6bbe4aa5 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 942ad4700f4..690753cf024 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 cac4eac4251..2c3fa2fd5a1 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 ad0ad19ba0c..1373fad6f82 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 @@

Map mode: formControlName

Model style: NgModel

- + Model A @@ -96,15 +96,15 @@

Model style: NgModel

 - + - - + + Primary @@ -118,7 +118,7 @@

Model style: NgModel

 - + Default @@ -132,7 +132,7 @@

Model style: NgModel

 - + Default diff --git a/src/components/segment/test/nav/main.html b/src/components/segment/test/nav/main.html index 1a121be0726..8787cb60ada 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 00000000000..ab927cbc61a --- /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 00000000000..dd60fb8cd2b --- /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 eb6350f8c63..5e55df08302 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 00000000000..6d96edefdb4 --- /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 00000000000..c196220921f --- /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 00000000000..a278502c112 --- /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 df49e7f2f40..fe802f54300 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 18a23758465..f8608ff7a64 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 1a157435142..ff53ed58f96 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 8c66b6e90e9..9f3bdb63333 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 c465a60a72e..eb0669aa0f2 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 22d2a899ab3..01167fb1351 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 422d36b96c8..e1b72ef9e13 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 793e55387e9..e544c65de8d 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 3248617afee..5d9ba43820e 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 2be8c5416d1..5c8768542da 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 fc9a46f3ed5..12a6a71eda6 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 5f021a79d89..108b9989838 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 d038b69b4c8..2a1a85d889c 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 4e4000c1df6..4fdc1c95473 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 00000000000..e69de29bb2d diff --git a/src/components/toolbar/test/colors/main.html b/src/components/toolbar/test/colors/main.html index a5f7dbe4523..473a33340ad 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 2286621d750..d0978f5a3c4 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 949036d1cf1..48f96deda53 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 a25bf663257..b65ed61e016 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 8463d3b939a..87b93718891 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 3e5e4a2dfe0..3593212e389 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 00000000000..e69de29bb2d 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 94fefa17b51..1e198402b12 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 00000000000..72b2fa85b6e --- /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 00000000000..9141ccad290 --- /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 00000000000..193c1d3ed10 --- /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 00000000000..92783ec31aa --- /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 00000000000..58bbcb02d62 --- /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 9d342e306f9..18e38598f02 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 ];