javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(toolbar): move border from toolbar to header/footer and increase opacity

Browse Source 
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.
This commit is contained in:
Brandy Carney
2016-11-23 18:54:05 -05:00
committed by Adam Bradley
parent 91478edd9f
commit b515f5251b
8 changed files with 167 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/e2e/e2e.shared.css
View File

@ -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);
}

2
src/components/tabs/test/basic/app-module.ts
View File

@ -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>

34
src/components/toolbar/test/basic/app-module.ts Normal file
View File

@ -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 { }

1
src/components/toolbar/test/basic/e2e.ts Normal file
View File

@ -0,0 +1 @@

106
src/components/toolbar/test/basic/main.html Normal file
View File

@ -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>

35
src/components/toolbar/toolbar.ios.scss
View File

@ -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 {
.header-ios,
.footer-ios {
border-style: solid;
border-color: $toolbar-ios-border-color;
}
.header-ios {
border-width: 0 0 $hairlines-width;
}
.footer-ios {
border-width: $hairlines-width 0 0;
}
.header-ios[no-border] {
border-top-width: 0;
}
ion-footer .toolbar-ios:last-child .toolbar-background,
.toolbar-ios[no-border-bottom] .toolbar-background {
border-bottom-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;
}

2
src/themes/ionic.theme.dark.ios.scss
View File

@ -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;

2
src/themes/ionic.theme.default.ios.scss
View File

@ -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;