From 3a7addf7b0d7fc99d8651275fdff69a12bd3c310 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 20 Jun 2016 12:01:21 -0500 Subject: [PATCH] feat(toolbar): control toolbar borders on top/bottom Toolbars can be stacked up vertically in ``, ``, and `` elements. However, toolbars also come with borders on both the top and bottom of the toolbar. To give developers full control of the design, Ionic also includes the `no-border-bottom` and `no-border-top` attributes. For example, sometimes two vertically stacked toolbars may have different background colors, in this case it might be best to leave a border between them. However, if they have the same background color, the app may look best without a border between them. The main point here is, it's entirely up to the app's design to decide when and when not to show borders between toolbars, and to do so then each toolbar can individually set `no-border-bottom` and `no-border-top` attributes. --- src/animations/animation.ts | 2 +- src/components/app/test/cordova/page1.html | 2 +- src/components/app/test/cordova/page2.html | 6 +-- src/components/app/z-index.scss | 2 +- src/components/modal/test/basic/index.ts | 2 +- src/components/nav/test/basic/index.ts | 25 ++++++++- src/components/searchbar/test/nav/search.html | 4 +- src/components/segment/test/basic/main.html | 8 +-- src/components/segment/test/nav/main.html | 4 +- src/components/segment/test/swipe/main.html | 4 +- .../select/test/single-value/index.ts | 8 +-- src/components/tabs/test/colors/styles.css | 1 + .../tabs/test/tab-bar-scenarios/styles.css | 1 + src/components/toast/test/basic/main.html | 4 +- src/components/toolbar/toolbar.ios.scss | 54 +++++++++---------- src/components/toolbar/toolbar.ts | 36 ++++++++++--- 16 files changed, 98 insertions(+), 65 deletions(-) diff --git a/src/animations/animation.ts b/src/animations/animation.ts index 6983520032..19e1ed9066 100644 --- a/src/animations/animation.ts +++ b/src/animations/animation.ts @@ -68,7 +68,7 @@ export class Animation { var i: number; if (ele) { - if (Array.isArray(ele)) { + if (ele.length) { for (i = 0; i < ele.length; i++) { this._addEle(ele[i]); } diff --git a/src/components/app/test/cordova/page1.html b/src/components/app/test/cordova/page1.html index 762332f954..db1f9c2f3a 100644 --- a/src/components/app/test/cordova/page1.html +++ b/src/components/app/test/cordova/page1.html @@ -18,7 +18,7 @@ - + I'm a toolbar diff --git a/src/components/app/test/cordova/page2.html b/src/components/app/test/cordova/page2.html index 1aa9f46a50..fb8435250a 100644 --- a/src/components/app/test/cordova/page2.html +++ b/src/components/app/test/cordova/page2.html @@ -1,6 +1,6 @@ - + Page 2 - - I'm a toolbar + + Hello, I am a sub header, with no border on top diff --git a/src/components/app/z-index.scss b/src/components/app/z-index.scss index 2eb5408762..6e919f5239 100644 --- a/src/components/app/z-index.scss +++ b/src/components/app/z-index.scss @@ -15,7 +15,7 @@ $z-index-refresher: 0; $z-index-page-container: 0; $z-index-selected-tab: 1; $z-index-toolbar: 10; -$z-index-toolbar-background: 0; +$z-index-toolbar-background: -1; $z-index-backdrop: 2; $z-index-overlay-wrapper: 10; diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/index.ts index d7b055cf10..b126e7d30e 100644 --- a/src/components/modal/test/basic/index.ts +++ b/src/components/modal/test/basic/index.ts @@ -188,7 +188,7 @@ class ModalPassData { Toolbar 1 - + Toolbar 2 diff --git a/src/components/nav/test/basic/index.ts b/src/components/nav/test/basic/index.ts index e9fe791646..e1b9f07736 100644 --- a/src/components/nav/test/basic/index.ts +++ b/src/components/nav/test/basic/index.ts @@ -209,6 +209,9 @@ class FullPage { + + I'm a sub header! + @@ -227,8 +230,11 @@ class FullPage { - - Footer + + I'm a sub footer! + + + Footer ` @@ -281,6 +287,11 @@ class PrimaryHeaderPage { + + + I'm a sub header in the content! + + @@ -296,7 +307,17 @@ class PrimaryHeaderPage { + + + + I'm a sub footer in the content! + + + + And I'm a sub footer in the content too! + + diff --git a/src/components/searchbar/test/nav/search.html b/src/components/searchbar/test/nav/search.html index 36fc981e3f..02b9989023 100644 --- a/src/components/searchbar/test/nav/search.html +++ b/src/components/searchbar/test/nav/search.html @@ -1,10 +1,10 @@ - + Searchbar - + diff --git a/src/components/segment/test/basic/main.html b/src/components/segment/test/basic/main.html index 131bde130c..95084d7881 100644 --- a/src/components/segment/test/basic/main.html +++ b/src/components/segment/test/basic/main.html @@ -1,6 +1,6 @@ - + Friends @@ -11,7 +11,7 @@ - + - - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt. diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 7395bbd0d0..3607b58242 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -38,43 +38,37 @@ $navbar-ios-height: $toolbar-ios-height !default; } -// iOS Header Toolbar -// -------------------------------------------------- - -ion-header { - border: 0; - border-bottom-width: 1px; - border-style: solid; - border-color: $toolbar-ios-border-color; -} - -&.hairlines ion-header { - border-bottom-width: $hairlines-width; -} - - -// iOS Footer Toolbar -// -------------------------------------------------- - -ion-footer { - border: 0; - border-top-width: 1px; - border-style: solid; - border-color: $toolbar-ios-border-color; -} - -&.hairlines ion-footer { - border-top-width: $hairlines-width; -} - - // iOS Toolbar Background // -------------------------------------------------- .toolbar-background { + border-top-width: 1px; + border-bottom-width: 1px; + border-style: solid; + border-color: $toolbar-ios-border-color; background: $toolbar-ios-background; } +&.hairlines .toolbar-background { + border-top-width: $hairlines-width; + border-bottom-width: $hairlines-width; +} + + +// iOS Toolbar Borders +// -------------------------------------------------- + +ion-header .toolbar:first-child .toolbar-background, +ion-menu > .toolbar:first-child .toolbar-background, +.toolbar[no-border-top] .toolbar-background { + border-top-width: 0; +} + +ion-footer .toolbar:last-child .toolbar-background, +.toolbar[no-border-bottom] .toolbar-background { + border-bottom-width: 0; +} + // iOS Toolbar Content // -------------------------------------------------- diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index f985b0a441..4078936d37 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -116,14 +116,25 @@ export class ToolbarBase extends Ion { * | `left` | Positions element to the left of all other elements. | * | `right` | Positions element to the right of all other elements. | * - * See [usage](#usage) below for some examples. + * + * ### Multiple Toolbars + * Toolbars can be stacked up vertically in ``, ``, and + * `` elements. However, toolbars also come with borders on both + * the top and bottom of the toolbar. To give developers full control of the + * design, Ionic also includes the `no-border-bottom` and `no-border-top` attributes. + * For example, sometimes two vertically stacked toolbars may have different + * background colors, in this case it might be best to leave a border between them. + * However, if they have the same background color, the app may look best without + * a border between them. The main point here is, it's entirely up to the app's design + * to decide when and when not to show borders between toolbars, and to do so then + * each toolbar can individually set `no-border-bottom` and `no-border-top` attributes. * * * @usage * ```html * * - * + * * *