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

toolbar button updates

Browse Source
This commit is contained in:
Adam Bradley
2015-09-02 20:44:28 -05:00
parent 97aa0a836a
commit 63b7c14492
14 changed files with 244 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,14 +6,21 @@
button,
[button] {
icon {
font-size: 1.4em;
background: none;
border: none;
pointer-events: none;
}
&.icon-left icon {
margin-left: -0.2em;
padding-right: 0.4em;
margin-left: -0.3em;
padding-right: 0.3em;
}
&.icon-right icon {
margin-right: -0.2em;
padding-left: 0.3em;
padding-left: 0.4em;
}
&.icon-only {
@@ -21,16 +28,11 @@ button,
min-width: 0.9em;
icon {
padding: 0 0.9em;
padding: 0 0.5em;
font-size: 1.8em;
}
}
icon {
background: none;
border: none;
pointer-events: none;
}
&[small] icon {
margin-left: 0;
margin-right: 0;

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

@@ -3,7 +3,7 @@
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0 !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
$button-height: 2.8em !default;
$button-border-radius: 4px !default;

2
ionic/components/button/modes/material.scss
View File

@@ -4,7 +4,7 @@
$button-md-font-size: 1.4rem !default;
$button-md-min-height: 3.6rem !default;
$button-md-padding: 0 1.2em !default;
$button-md-padding: 0 1.1em !default;
$button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default;
$button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
$button-md-border-radius: 2px !default;

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

@@ -63,8 +63,10 @@ export class Icon {
this.name = this.md;
} else if (!this.name) {
// looping through native dom attributes, eww
// https://github.com/angular/angular/issues/3961
for (let i = 0, l = ele.attributes.length; i < l; i++) {
if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) {
if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
this.name = ele.attributes[i].name;
break;
}

1
ionic/components/nav-bar/modes/ios.scss
View File

@@ -23,6 +23,7 @@ $navbar-ios-height: 4.4rem !default;
}
.back-button-icon {
display: inherit;
font-size: 3.2rem;
padding-right: 7px;
}

18
ionic/components/radio/test/basic/main.html
View File

@@ -30,15 +30,17 @@
</ion-radio-group>
<p>
<code>fruits.dirty: {{fruitsForm.controls.fruits.dirty}}</code><br>
<code>fruits.value: {{fruitsForm.controls.fruits.value}}</code><br>
</p>
</form>
<button (click)="setApple()" outline small>Select Apple</button>
<button (click)="setBanana()" outline small>Select Banana</button>
<button id="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
<p aria-hidden="true" class="align-center">
<button (click)="setApple()" outline small>Select Apple</button>
<button (click)="setBanana()" outline small>Select Banana</button>
<button id="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
</p>
<p>
<code>fruits.dirty: {{fruitsForm.controls.fruits.dirty}}</code><br>
<code>fruits.value: {{fruitsForm.controls.fruits.value}}</code><br>
</p>
</ion-content>

8
ionic/components/toolbar/modes/ios.scss
View File

@@ -52,11 +52,9 @@ $toolbar-ios-title-font-size: 1.7rem !default;
button,
[button] {
font-size: $toolbar-ios-button-font-size;
}
[icon] {
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 0;
min-height: 32px;
}
.back-button-icon {

10
ionic/components/toolbar/modes/material.scss
View File

@@ -2,7 +2,7 @@
// Material Design Toolbar
// --------------------------------------------------
$toolbar-md-height: 5.6rem !default;
$toolbar-md-height: 5.6rem !default;
$toolbar-md-title-font-size: 2rem !default;
$toolbar-md-button-font-size: 1.4rem !default;
@@ -25,8 +25,12 @@ $toolbar-md-button-font-size: 1.4rem !default;
}
button,
[button] {
font-size: $toolbar-md-button-font-size;
[button],
button.activated,
[button].activated {
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}

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

@@ -1,13 +1,16 @@
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
<button aside-toggle>
<icon menu></icon>
</button>
<ion-title>aside-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button>
<icon menu></icon>
<icon settings></icon>
</button>
<button>
<icon heart></icon>
@@ -22,40 +25,219 @@
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="hover"><icon menu></icon></button><button class="hover"><icon heart></icon></button></ion-nav-items><ion-nav-items secondary><button class="hover"><icon more-horizontal></icon></button></ion-nav-items><ion-title>Defaults.hover</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="hover">
<icon settings></icon>
</button>
<button class="hover">
<icon heart></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button class="hover">
<icon more-horizontal></icon>
</button>
</ion-nav-items>
<ion-title>Defaults.hover</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="activated"><icon menu></icon></button><button class="activated"><icon heart></icon></button></ion-nav-items><ion-nav-items secondary><button class="activated"><icon more-horizontal></icon></button></ion-nav-items><ion-title>Defaults.activated</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="activated">
<icon settings></icon>
</button>
<button class="activated">
<icon heart></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button class="activated">
<icon more-horizontal></icon>
</button>
</ion-nav-items>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear><icon flag></icon></button><button clear><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary>Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button clear>
<icon flag></icon>
</button>
<button clear>
<icon settings></icon>
Clear
</button>
</ion-nav-items>
<ion-title>Clear</ion-title>
<ion-nav-items secondary>
<button clear secondary>
Help
<icon help-circle></icon>
</button>
</ion-nav-items>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="hover"><icon flag></icon></button><button clear class="hover"><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="hover">Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button clear class="hover">
<icon flag></icon>
</button>
<button clear class="hover">
<icon settings></icon>
Clear
</button>
</ion-nav-items>
<ion-title>Clear</ion-title>
<ion-nav-items secondary>
<button clear secondary class="hover">
Help
<icon help-circle></icon>
</button>
</ion-nav-items>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="activated"><icon flag></icon></button><button clear class="activated"><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="activated">Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button clear class="activated">
<icon flag></icon>
</button>
<button clear class="activated">
<icon settings></icon>
Clear
</button>
</ion-nav-items>
<ion-title>Clear</ion-title>
<ion-nav-items secondary>
<button clear secondary class="activated">
Help
<icon help-circle></icon>
</button>
</ion-nav-items>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline><icon menu></icon></button primary><button outline><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon flag></icon></button></ion-nav-items><ion-title>Outline</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button outline>
<icon settings></icon>
</button>
<button outline>
<icon star></icon>
Star
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline>
<icon flag></icon>
</button>
</ion-nav-items>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="hover"><icon menu></icon></button primary><button outline class="hover"><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="hover"><icon flag></icon></button></ion-nav-items><ion-title>Outline.hover</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button outline class="hover">
<icon settings></icon>
</button primary>
<button outline class="hover">
<icon star></icon>
Star
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline class="hover">
<icon flag></icon>
</button>
</ion-nav-items>
<ion-title>Outline.hover</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="activated"><icon menu></icon></button primary><button outline class="activated"><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="activated"><icon flag></icon></button></ion-nav-items><ion-title>Outline.activated</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button outline class="activated">
<icon settings></icon>
</button>
<button outline class="activated">
<icon star></icon>
Star
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline class="activated">
<icon flag></icon>
</button>
</ion-nav-items>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>ColorAttr</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button>
Btn
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary>
Btn
</button>
</ion-nav-items>
<ion-title>ColorAttr</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="hover">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="hover">Btn</button></ion-nav-items><ion-title>ColorAttr.hover</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="hover">
Btn
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary class="hover">
Btn
</button>
</ion-nav-items>
<ion-title>ColorAttr.hover</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="activated">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="activated">Btn</button></ion-nav-items><ion-title>ColorAttr.activated</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button class="activated">
Btn
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button secondary class="activated">
Btn
</button>
</ion-nav-items>
<ion-title>ColorAttr.activated</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon menu></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button>Edit<icon create></icon></button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
<ion-toolbar>
<ion-nav-items primary>
<button>
<icon settings></icon>
Clear
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button>
Edit
<icon create></icon>
</button>
</ion-nav-items>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>

44
ionic/components/toolbar/toolbar-buttons.scss
View File

@@ -1,44 +0,0 @@
// Toolbar Buttons
// --------------------------------------------------
.toolbar ion-nav-items {
display: block;
button,
[button] {
margin: 0 4px;
padding: 0 5px;
min-width: 2.8rem;
min-height: 2.8rem;
box-shadow: none;
&.icon-only icon {
padding: 0 0.4rem;
}
&.icon-left icon {
margin-left: -0.2rem;
}
&.icon-right icon {
margin-right: -0.2rem;
}
&[clear] {
padding: 0 3px;
icon {
margin-right: 0;
margin-left: 0;
}
}
}
icon {
font-size: 2.2rem;
}
}

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

@@ -79,20 +79,24 @@ ion-title {
.toolbar [aside-toggle] {
margin: 0;
padding: 0;
min-height: 32px;
min-width: 32px;
min-width: 48px;
order: map-get($toolbar-order, 'aside-toggle');
box-shadow: none;
}
.toolbar [aside-toggle] icon {
padding: 0 0.9em;
padding: 0 14px;
}
.toolbar-item {
transform: translateZ(0px);
}
ion-nav-items {
display: block;
margin: 0 0.2rem;
}
.toolbar-primary-item {
order: map-get($toolbar-order, primary);
}

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

@@ -110,6 +110,7 @@ export class ToolbarBase extends Ion {
@View({
template: `
<div class="toolbar-inner">
<ng-content select="[aside-toggle]"></ng-content>
<div class="toolbar-title">
<div class="toolbar-inner-title">
<ng-content select="ion-title"></ng-content>

4
ionic/gestures/gesture.ts
View File

@@ -43,14 +43,14 @@ export class Gesture {
}
unlisten() {
this.hammertime.destroy();
this.hammertime = null;
for (let type in this._callbacks) {
for (let i = 0; i < this._callbacks[type].length; i++) {
//this.element.removeEventListener(type, this._callbacks[type][i]);
this.hammertime.off(type, this._callbacks[type]);
}
}
this.hammertime.destroy();
this.hammertime = null;
this._callbacks = {}
}

1
ionic/ionic.core.scss
View File

@@ -13,7 +13,6 @@
// Core Components
@import
"components/toolbar/toolbar",
"components/toolbar/toolbar-buttons",
"components/action-menu/action-menu",
"components/aside/aside",
"components/badge/badge",