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

fix(button): bar-button uses inner span as flexbox

Browse Source 
- Fixed block/full buttons, now there are display: block
- Fixes <ion-segment-button> warnings
This commit is contained in:
Manu Mtz.-Almeida
2016-02-09 01:53:34 +01:00
parent b0a8045af0
commit 38a3be438f
11 changed files with 81 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/button/button.ios.scss
View File

@ -97,7 +97,6 @@ $button-ios-small-icon-font-size: 1.3em !default;
margin-right: 0;
}
// iOS Full Button
// --------------------------------------------------
@ -105,11 +104,10 @@ $button-ios-small-icon-font-size: 1.3em !default;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-left: none;
border-right: none;
border-right-width: 0;
border-left-width: 0;
}
// iOS Outline Button
// --------------------------------------------------

19
ionic/components/button/button.md.scss
View File

@ -110,28 +110,25 @@ $button-md-small-icon-font-size: 1.4em !default;
font-size: $button-md-small-icon-font-size;
}
// Material Design Block Button
// --------------------------------------------------
.button-block {
margin-left: 0;
margin-right: 0;
}
// Material Design Full Button
// --------------------------------------------------
.button-full {
border-radius: 0;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
// Material Design Block Button
// --------------------------------------------------
.button-block {
margin-right: 0;
margin-left: 0;
}
// Material Design Outline Button
// --------------------------------------------------

22
ionic/components/button/button.scss
View File

@ -29,17 +29,18 @@ $button-round-border-radius: 64px !default;
@include appearance(none);
}
span.button-inner {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
.button-inner {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
a.button {
a.button, a[button] {
text-decoration: none;
}
@ -54,7 +55,7 @@ a.button {
// --------------------------------------------------
.button-block {
display: flex;
display: block;
clear: both;
width: 100%;
@ -68,6 +69,7 @@ a.button {
// --------------------------------------------------
.button-full {
display: block;
width: 100%;
}

15
ionic/components/nav/test/basic/index.ts
View File

@ -20,7 +20,7 @@ class MyCmpTest{}
<button><ion-icon name="star"></ion-icon></button>
</ion-buttons>
<ion-buttons end>
<button>S1</button>
<button>S1g</button>
</ion-buttons>
</ion-navbar>
<ion-content>
@ -74,7 +74,7 @@ class FirstPage {
setPages() {
let items = [
{page: PrimaryHeaderPage}
{ page: PrimaryHeaderPage }
];
this.nav.setPages(items);
@ -89,7 +89,7 @@ class FirstPage {
}
pushFullPage() {
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
}
pushAnother() {
@ -139,8 +139,8 @@ class FullPage {
setPages() {
let items = [
{page: FirstPage},
{page: PrimaryHeaderPage}
{ page: FirstPage },
{ page: PrimaryHeaderPage }
];
this.nav.setPages(items);
@ -190,6 +190,9 @@ class FullPage {
template: `
<ion-navbar *navbar primary>
<ion-title>Primary Color Page Header</ion-title>
<ion-buttons end>
<button>S1g</button>
</ion-buttons>
</ion-navbar>
<ion-content padding>
<p><button class="e2eFrom3To2" (click)="nav.pop()">Pop</button></p>
@ -218,7 +221,7 @@ class PrimaryHeaderPage {
}
pushFullPage() {
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
}
insert() {

10
ionic/components/nav/test/insert-views/index.ts
View File

@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic';
</ion-navbar>
<ion-content padding>
<button block (click)="pushPage()">Push Page</block>
<button block (click)="pushPage()">Push Page</button>
</ion-content>`,
})
class FirstPage {
constructor(nav: NavController) {
this.nav = nav;
}
pushPage(){
pushPage() {
this.nav.push(SecondPage)
}
}
@ -30,7 +30,7 @@ class FirstPage {
<ion-content padding>
<h1>Second page</h1>
<button block (click)="insertPage()">Insert Page</block>
<button block (click)="insertPage()">Insert Page</button>
</ion-content>
`
})
@ -38,7 +38,7 @@ class SecondPage {
constructor(nav: NavController) {
this.nav = nav;
}
insertPage(){
insertPage() {
this.nav.insert(1, InsertPage)
}
}
@ -55,7 +55,7 @@ class SecondPage {
`
})
class InsertPage {
constructor() {}
constructor() { }
}

8
ionic/components/navbar/navbar.ts
View File

@ -94,9 +94,11 @@ class ToolbarBackground {
template:
'<div class="toolbar-background"></div>' +
'<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
'<span class="back-button-text">' +
'<span class="back-default">{{_bbText}}</span>' +
'<span class="button-inner">' +
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
'<span class="back-button-text">' +
'<span class="back-default">{{_bbText}}</span>' +
'</span>' +
'</span>' +
'</button>' +
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +

46
ionic/components/toolbar/test/scenarios/main.html
View File

@ -1,4 +1,3 @@
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
@ -62,9 +61,9 @@
<ion-toolbar>
<ion-buttons start>
<button solid class="activated">
<a button solid class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</a>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
@ -126,14 +125,27 @@
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<a button href="#">Edit
<ion-icon name="create"></ion-icon>
</button>
</a>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
Go Back
</button>
</ion-buttons>
<ion-buttons end>
<a button href="#">
Edit
</a>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
@ -149,11 +161,11 @@
<ion-toolbar>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<button menuToggle right>
<ion-icon name="menu"></ion-icon>
@ -167,10 +179,10 @@
</button>
</ion-buttons>
<ion-segment secondary>
<ion-segment-button>
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
@ -178,13 +190,13 @@
<ion-toolbar>
<ion-segment>
<ion-segment-button>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
@ -195,4 +207,4 @@
.toolbar {
border-bottom: 1px solid black;
}
</style>
</style>

9
ionic/components/toolbar/toolbar-button.scss
View File

@ -5,11 +5,7 @@
.bar-button {
position: relative;
display: inline-flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
display: inline-block;
margin: 0;
padding: 0;
@ -19,6 +15,7 @@
text-align: center;
text-transform: none;
line-height: 1;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
@ -54,7 +51,7 @@
.back-button {
display: none;
&.show-back-button {
display: flex;
display: inline-block;
}
}

10
ionic/components/toolbar/toolbar.ios.scss
View File

@ -62,7 +62,6 @@ ion-navbar-section {
.toolbar-title {
font-size: $toolbar-ios-title-font-size;
font-weight: 600;
margin-top: 1px;
text-align: center;
pointer-events: auto;
color: $toolbar-ios-text-color;
@ -123,10 +122,8 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button {
margin-top: 0;
margin-bottom: 0;
padding: 0 5px;
min-height: 32px;
height: 32px;
border: 0;
font-size: $toolbar-ios-button-font-size;
border-radius: $bar-button-ios-border-radius;
@ -225,7 +222,6 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-icon-left ion-icon {
margin-left: -0.1em;
padding-right: 0.3em;
font-size: 1.4em;
line-height: 0.67;
@ -257,7 +253,6 @@ ion-buttons[right] {
.back-button {
margin: 0;
margin-top: 2px;
min-height: 3.2rem;
line-height: 1;
order: map-get($toolbar-order-ios, back-button);
@ -268,8 +263,9 @@ ion-buttons[right] {
.back-button-icon {
display: inherit;
margin: 0;
margin-top: -1px;
min-width: 18px;
font-size: 3.3rem;
font-size: 3.4rem;
}
.back-button-text {

3
ionic/components/toolbar/toolbar.md.scss
View File

@ -125,7 +125,7 @@ ion-buttons[right] {
margin-left: 0.2rem;
margin-right: 0.2rem;
padding: 0 5px;
min-height: 32px;
height: 32px;
border: 0;
font-size: $toolbar-md-button-font-size;
border-radius: $bar-button-md-border-radius;
@ -226,7 +226,6 @@ ion-buttons[right] {
// --------------------------------------------------
.bar-button-icon-left ion-icon {
margin-left: -0.1em;
padding-right: 0.3em;
font-size: 1.4em;
line-height: 0.67;

8
ionic/components/toolbar/toolbar.ts
View File

@ -9,7 +9,7 @@ import {Button} from '../button/button';
/**
* @private
*/
export class ToolbarBase extends Ion {
export class ToolbarBase extends Ion {
itemRefs = [];
titleRef = null;
titleCmp: any;
@ -155,9 +155,9 @@ export class ToolbarTitle extends Ion {
toolbar && toolbar.setTitleCmp(this);
navbar && navbar.setTitleCmp(this);
}
/**
* @private
*/
/**
* @private
*/
getTitleText() {
return this.getNativeElement().textContent;
}