refactor(toolbar): move border from toolbar to header/footer and incr…

…ease opacity This matches native iOS. Removed the `no-border-top` and `no-border-bottom` from toolbars since it is only added to `ion-header` and `ion-footer` now, and added `no-border` to each of those.
ionic-team · Nov 23, 2016 · b515f52 · biesbjerg · Nov 26, 2016 · b515f52
1 parent 91478ed
commit b515f52
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 18 deletions.
diff --git a/scripts/e2e/e2e.shared.css b/scripts/e2e/e2e.shared.css
@@ -259,3 +259,7 @@ e2e-popover-basic .text-seravek {
 e2e-popover-basic .text-times-new-roman {
   font-family: "Times New Roman";
 }
+
+.rainbow-content {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
diff --git a/src/components/tabs/test/basic/app-module.ts b/src/components/tabs/test/basic/app-module.ts
@@ -70,7 +70,7 @@ export class MyModal {
   template: `
     <ion-header>
       <ion-navbar>
-        <ion-title>Heart</ion-title>
+        <ion-title>Settings</ion-title>
       </ion-navbar>
     </ion-header>
 

diff --git a/src/components/toolbar/test/basic/app-module.ts b/src/components/toolbar/test/basic/app-module.ts
@@ -0,0 +1,34 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+
+}
+
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule { }
diff --git a/src/components/toolbar/test/basic/e2e.ts b/src/components/toolbar/test/basic/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/src/components/toolbar/test/basic/main.html b/src/components/toolbar/test/basic/main.html
@@ -0,0 +1,106 @@
+<ion-header>
+  <ion-navbar color="primary">
+    <ion-title>Toolbar</ion-title>
+  </ion-navbar>
+
+  <ion-toolbar color="primary">
+    <ion-buttons start>
+      <button ion-button icon-only>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button ion-button icon-only>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button ion-button icon-only color="secondary">
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Subheader</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen="true">
+  <ion-card color="secondary">
+    <ion-card-header>
+      Card Header
+    </ion-card-header>
+    <ion-card-content>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+      Some normal text in content.
+      <h3>h3 in content</h3>
+      <p>
+        Paragraph in content.
+      </p>
+      <p>
+        Another paragraph in content.
+      </p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="primary" class="rainbow-content">
+    <ion-card-header>
+      Card Header
+    </ion-card-header>
+    <ion-card-content>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+      Some normal text in content.
+      <h3>h3 in content</h3>
+      <p>
+        Paragraph in content.
+      </p>
+      <p>
+        Another paragraph in content.
+      </p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="primary">
+    <ion-card-header>
+      Card Header
+    </ion-card-header>
+    <ion-card-content>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+      Some normal text in content.
+      <h3>h3 in content</h3>
+      <p>
+        Paragraph in content.
+      </p>
+      <p>
+        Another paragraph in content.
+      </p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list>
+    <ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
+      {{ item }}
+    </ion-item>
+  </ion-list>
+
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons end>
+      <button ion-button icon-only #button2>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-searchbar>
+    </ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
@@ -39,30 +39,33 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 // --------------------------------------------------
 
 .toolbar-background-ios {
-  border-top-width: $hairlines-width;
-  border-bottom-width: $hairlines-width;
-  border-style: solid;
-  border-color: $toolbar-ios-border-color;
   background: $toolbar-ios-background;
 }
 
-// iOS Toolbar Borders
+
+// iOS Header / Footer Borders
 // --------------------------------------------------
 
-ion-header .toolbar-ios:first-child .toolbar-background,
-ion-menu > .toolbar-ios:first-child .toolbar-background,
-.toolbar-ios[no-border-top] .toolbar-background {
-  border-top-width: 0;
+.header-ios,
+.footer-ios {
+  border-style: solid;
+  border-color: $toolbar-ios-border-color;
 }
 
-ion-footer .toolbar-ios:last-child .toolbar-background,
-.toolbar-ios[no-border-bottom] .toolbar-background {
-  border-bottom-width: 0;
+.header-ios {
+  border-width: 0 0 $hairlines-width;
+}
+
+.footer-ios {
+  border-width: $hairlines-width 0 0;
+}
+
+.header-ios[no-border] {
+  border-top-width: 0;
 }
 
-.toolbar-ios[no-border] .toolbar-background {
+.footer-ios[no-border] {
   border-top-width: 0;
-  border-bottom-width: 0;
 }
 
 
@@ -81,6 +84,7 @@ ion-footer .toolbar-ios:last-child .toolbar-background,
   font-weight: $toolbar-ios-title-font-weight;
   text-align: $toolbar-ios-title-text-align;
   color: $toolbar-ios-title-text-color;
+  margin-top: 1px;
 
   pointer-events: auto;
 }
@@ -104,7 +108,6 @@ ion-footer .toolbar-ios:last-child .toolbar-background,
   .toolbar-ios-#{$color-name} {
 
     .toolbar-background-ios {
-      border-color: darken($color-base, 10%);
       background: $color-base;
     }
 

diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss
@@ -34,7 +34,7 @@ $item-ios-note-color:                  #f4f4f4 !default;
 // --------------------------------------------------
 
 $toolbar-ios-background:               $toolbar-background !default;
-$toolbar-ios-border-color:             $toolbar-border-color !default;
+$toolbar-ios-border-color:             rgba(255, 255, 255, 0.1) !default;
 $toolbar-ios-text-color:               $toolbar-text-color !default;
 $toolbar-ios-active-color:             $toolbar-active-color !default;
 $toolbar-ios-inactive-color:           $toolbar-inactive-color !default;

diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss
@@ -22,7 +22,7 @@ $content-ios-margin:                   $content-margin !default;
 
 $toolbar-ios-height:                   44px !default;
 $toolbar-ios-background:               $toolbar-background !default;
-$toolbar-ios-border-color:             $toolbar-border-color !default;
+$toolbar-ios-border-color:             rgba(0, 0, 0, .3) !default;
 $toolbar-ios-text-color:               $toolbar-text-color !default;
 $toolbar-ios-active-color:             $toolbar-active-color !default;
 $toolbar-ios-inactive-color:           $toolbar-inactive-color !default;