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

Merge branch 'item-buttons'

Browse Source
This commit is contained in:
Brandy Carney
2016-01-05 17:09:25 -05:00
parent 95501a1e86 a59378c9b0
commit 08575ee167
11 changed files with 228 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ionic/components/app/typography.scss
View File

@@ -97,3 +97,41 @@ sup {
sub {
bottom: -0.25em;
}
// Text Alignment
// --------------------------------------------------
[text-left] {
text-align: left;
}
[text-center] {
text-align: center;
}
[text-right] {
text-align: right;
}
[text-justify] {
text-align: justify;
}
[text-nowrap] {
white-space: nowrap;
}
// Text Transformation
// --------------------------------------------------
[text-uppercase] {
text-transform: uppercase;
}
[text-lowercase] {
text-transform: lowercase;
}
[text-capitalize] {
text-transform: capitalize;
}

11
ionic/components/button/button.ts
View File

@@ -37,7 +37,8 @@ export class Button {
constructor(
config: Config,
private _elementRef: ElementRef,
private _renderer: Renderer
private _renderer: Renderer,
@Attribute('ion-item') ionItem: string
) {
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
@@ -48,6 +49,7 @@ export class Button {
this._colors = []; // primary/secondary
this._icon = null; // left/right/only
this._disabled = false; // disabled
this.isItem = (ionItem === '');
let element = _elementRef.nativeElement;
@@ -92,6 +94,13 @@ export class Button {
}
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
}
/**
* @private
*/

90
ionic/components/card/test/advanced/main.html
View File

@@ -19,16 +19,20 @@
</p>
</ion-card-content>
<ion-item>
<button clear item-left>
<icon star></icon>
Star
</button>
<button clear item-right class="activated">
<icon share></icon>
Share.activated
</button>
</ion-item>
<ion-row no-padding>
<ion-col>
<button clear small>
<icon star></icon>
Star
</button>
</ion-col>
<ion-col text-right>
<button clear small class="activated">
<icon share></icon>
Share.activated
</button>
</ion-col>
</ion-row>
</ion-card>
@@ -51,19 +55,24 @@
<p>Hello. I am a paragraph.</p>
</ion-card-content>
<ion-item>
<button clear item-left danger class="activated">
<icon star></icon>
Favorite.activated
</button>
<button clear item-left danger>
<icon musical-notes></icon>
Listen
</button>
<ion-note item-right>
Right Note
</ion-note>
</ion-item>
<ion-row center no-padding>
<ion-col width-75>
<button clear small danger class="activated">
<icon star></icon>
Favorite.activated
</button>
<button clear small danger>
<icon musical-notes></icon>
Listen
</button>
</ion-col>
<ion-col text-right>
<button clear small>
<icon share></icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
<ion-card>
@@ -76,20 +85,27 @@
This card was breaking the border radius.
</ion-card-content>
<ion-item>
<button clear item-left dark>
<icon star></icon>
Favorite
</button>
<button clear item-right dark>
<icon musical-notes></icon>
Listen
</button>
<button clear item-right dark>
<icon share-alt></icon>
Share
</button>
</ion-item>
<ion-row text-center no-padding>
<ion-col>
<button clear small dark>
<icon star></icon>
Favorite
</button>
</ion-col>
<ion-col>
<button clear small dark>
<icon musical-notes></icon>
Listen
</button>
</ion-col>
<ion-col>
<button clear small dark>
<icon share-alt></icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>

7
ionic/components/grid/test/alignment/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}

71
ionic/components/grid/test/alignment/main.html Normal file
View File

@@ -0,0 +1,71 @@
<ion-toolbar><ion-title>Grid Alignment</ion-title></ion-toolbar>
<ion-content class="alignment-demo">
<ion-row>
<ion-col>
ion-col
</ion-col>
<ion-col text-right>
ion-col[text-right]
</ion-col>
</ion-row>
<ion-row text-center>
<ion-col>
ion-row[text-center]
</ion-col>
<ion-col>
ion-row[text-center]
</ion-col>
<ion-col>
ion-row[text-center]
</ion-col>
</ion-row>
<ion-row>
<ion-col text-left>
ion-col[text-left]
</ion-col>
<ion-col text-left>
ion-col[text-left]
</ion-col>
<ion-col text-right>
ion-col[text-right]
</ion-col>
<ion-col text-right>
ion-col[text-right]
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button small>Button 1</button>
</ion-col>
<ion-col width-50 text-center>
<button small>Button 2</button>
<button small>Button 3</button>
</ion-col>
<ion-col text-right>
<button small>Button 4</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button small>Button 1</button>
<button small>Button 2</button>
</ion-col>
<ion-col text-right>
<button small>Button 3</button>
<button small>Button 4</button>
</ion-col>
</ion-row>
</ion-content>
<style>
.alignment-demo ion-row {
border: 1px solid #ddd;
margin: 10px 0;
}
</style>

7
ionic/components/icon/icon.ts
View File

@@ -48,6 +48,13 @@ export class Icon {
this.mode = config.get('iconMode');
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
}
/**
* @private
*/

49
ionic/components/item/item.ios.scss
View File

@@ -83,30 +83,26 @@ $item-ios-sliding-content-bg: $list-ios-background-color !default;
border-bottom: 1px solid $list-ios-border-color;
}
&.hairlines .item-inner {
border-bottom-width: 0.55px;
}
ion-item-content {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
}
&.hairlines .item-inner {
border-bottom-width: 0.55px;
}
// iOS Item Media
// --------------------------------------------------
[item-left] {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
margin-left: 0;
margin-right: $item-ios-padding-right;
}
[item-right] {
margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
icon[item-left],
icon[item-right] {
margin-top: $item-ios-padding-icon-top;
margin-bottom: $item-ios-padding-icon-bottom;
margin-left: ($item-ios-padding-left / 2);
margin-right: ($item-ios-padding-right / 2);
}
ion-avatar[item-left],
@@ -119,38 +115,17 @@ ion-thumbnail[item-right] {
margin: ($item-ios-padding-right / 2);
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
.item-button {
padding: 0 0.5em;
font-size: 1.3rem;
min-height: 25px;
margin-top: 9px;
}
[item-left].button-icon-only,
[item-right].button-icon-only,
[item-left].button-icon-only icon,
[item-right].button-icon-only icon,
[item-left][clear],
[item-right][clear] {
.button-icon-only icon,
.button-icon-only {
padding: 0 1px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
ion-avatar {
min-width: $item-ios-avatar-size;
min-height: $item-ios-avatar-size;
@@ -231,6 +206,6 @@ ion-item-sliding {
// todo
}
}
}

29
ionic/components/item/item.md.scss
View File

@@ -96,40 +96,17 @@ icon[item-right] {
margin-left: 0;
}
button[item-left],
button[item-right],
[button][item-left],
[button][item-right] {
.item-button {
padding: 0 0.6em;
min-height: 26px;
font-size: 1.2rem;
}
[item-left].button-icon-only,
[item-right].button-icon-only,
[item-left].button-icon-only icon,
[item-right].button-icon-only icon {
.button-icon-only icon,
.button-icon-only {
padding: 0 1px;
}
[item-left][clear],
[item-right][clear] {
padding: 0 8px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
margin-bottom: 1px;
margin-left: 0;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
margin-right: 0;
margin-bottom: 1px;
}
[text-wrap] ion-item-content {
font-size: $item-md-body-text-font-size;
line-height: $item-md-body-text-line-height;

26
ionic/components/item/item.ts
View File

@@ -1,4 +1,7 @@
import {Component} from 'angular2/core';
import {Component, ContentChildren} from 'angular2/core';
import {Button} from '../button/button';
import {Icon} from '../icon/icon';
/**
@@ -47,7 +50,7 @@ import {Component} from 'angular2/core';
template:
'<ng-content select="[item-left]"></ng-content>' +
'<div class="item-inner">' +
'<ng-content select="ion-item-content"></ng-content>' +
'<ng-content select="ion-item-content,[item-content]"></ng-content>' +
'<ion-item-content cnt>' +
'<ng-content></ng-content>'+
'</ion-item-content>' +
@@ -57,4 +60,21 @@ import {Component} from 'angular2/core';
'class': 'item'
}
})
export class Item {}
export class Item {
@ContentChildren(Button)
set _buttons(buttons) {
buttons.toArray().forEach(button => {
if (!button.isItem) {
button.addClass('item-button');
}
});
}
@ContentChildren(Icon)
set _icons(icons) {
icons.toArray().forEach(icon => {
icon.addClass('item-icon');
});
}
}

2
ionic/components/item/test/buttons/main.html
View File

@@ -87,5 +87,5 @@
and a <a href="#" (click)="testClick($event)">link</a>.
<button outline item-right (click)="testClick($event)">View</button>
</ion-item>
</ion-content>

15
ionic/util/util.scss
View File

@@ -1,17 +1,5 @@
@import "../globals.core";
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-transition {
transition: none !important;
}
@@ -61,6 +49,9 @@ $content-padding: 16px !default;
padding-left: $content-padding;
}
[no-padding] {
padding: 0;
}
// Focus Outline
// --------------------------------------------------