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

iOS toolbar buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 15:50:59 -06:00
parent 3fa93ac815
commit e7437b4ab2
6 changed files with 161 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,7 @@ export class Button {
) {
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
this._style = null; // outline/clear/solid
this._style = 'default'; // outline/clear/solid
this._shape = null; // round/fab
this._display = null; // block/full
this._colors = []; // primary/secondary
@@ -136,14 +136,13 @@ export class Button {
if (role) {
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._shape, assignCssClass); // button-round
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
let colorStyle = (this._style !== 'default' ? this._style + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});

11
ionic/components/button/modes/ios.scss
View File

@@ -98,9 +98,12 @@ $button-ios-small-padding: 0.9em !default;
// --------------------------------------------------
.button-outline {
border: 1px solid $button-ios-color;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: $button-ios-color;
color: $button-ios-color;
background-color: transparent;
border-radius: 4px;
&.activated {
opacity: 1;
@@ -118,8 +121,8 @@ $button-ios-small-padding: 0.9em !default;
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
background-color: transparent;
color: $fg-color;
background-color: transparent;
&.activated {
color: $background-ios-color;
@@ -158,13 +161,13 @@ $button-ios-small-padding: 0.9em !default;
&.activated {
opacity: 0.4;
background-color: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
}

19
ionic/components/button/test/button.spec.ts
View File

@@ -82,8 +82,21 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-solid')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-secondary')).toEqual(true);
expect(hasClass(b, 'button-solid-primary')).toEqual(true);
expect(hasClass(b, 'button-solid-secondary')).toEqual(true);
});
it('should auto add the default style', () => {
let b = mockButton();
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(true);
b = mockButton(['clear']);
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(false);
expect(hasClass(b, 'button-clear')).toEqual(true);
});
it('should read button color attributes', () => {
@@ -180,7 +193,7 @@ export function run() {
expect(b._role).toEqual('button');
expect(b._size).toEqual(null);
expect(b._colors.length).toEqual(0);
expect(b._style).toEqual(null);
expect(b._style).toEqual('default');
expect(b._display).toEqual(null);
});

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

@@ -22,6 +22,9 @@ $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default;
$navbar-ios-height: $toolbar-ios-height !default;
$bar-button-ios-color: $toolbar-ios-active-color !default;
$bar-button-ios-border-radius: 4px !default;
.toolbar {
padding: $toolbar-ios-padding;
@@ -90,7 +93,7 @@ ion-title {
}
// iOS Toolbar Buttons
// iOS Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
@@ -113,6 +116,10 @@ ion-buttons[right] {
order: map-get($toolbar-order-ios, buttons-right);
}
// iOS Toolbar Button Default
// --------------------------------------------------
.bar-button {
margin-top: 0;
margin-bottom: 0;
@@ -120,10 +127,101 @@ ion-buttons[right] {
min-height: 32px;
border: 0;
font-size: $toolbar-ios-button-font-size;
color: $toolbar-ios-active-color;
background-color: transparent;
border-radius: $bar-button-ios-border-radius;
}
@mixin ios-bar-button-default($color-name, $color-value) {
.bar-button-#{$color-name} {
$fg-color: color-shade($color-value);
color: $fg-color;
background-color: transparent;
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
&.activated {
opacity: 0.4;
}
}
}
// iOS Toolbar Button Outline
// --------------------------------------------------
.bar-button-outline {
border-width: 1px;
border-style: solid;
border-color: $bar-button-ios-color;
color: $bar-button-ios-color;
background-color: transparent;
&:hover:not(.disable-hover) {
opacity: 0.4;
}
&.activated {
color: inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
}
}
@mixin ios-bar-button-outline($color-name, $color-value) {
.bar-button-outline-#{$color-name} {
$fg-color: color-shade($color-value);
border-color: $fg-color;
color: $fg-color;
background-color: transparent;
&.activated {
color: inverse($fg-color);
background-color: $fg-color;
}
}
}
// iOS Toolbar Button Solid
// --------------------------------------------------
.bar-button-solid {
color: inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
&:hover:not(.disable-hover) {
opacity: 0.4;
color: inverse($bar-button-ios-color);
}
&.activated {
opacity: 0.4;
color: inverse($bar-button-ios-color);
background-color: color-shade($bar-button-ios-color);
}
}
@mixin ios-bar-button-solid($color-name, $color-value) {
.bar-button-solid-#{$color-name} {
color: inverse($color-value);
background-color: $color-value;
&.activated {
background-color: color-shade($color-value);
}
}
}
// iOS Toolbar Button Icon
// --------------------------------------------------
.bar-button-icon-left icon {
margin-left: -0.1em;
padding-right: 0.3em;
@@ -153,7 +251,7 @@ ion-buttons[right] {
}
// iOS Toolbar Back Button
// iOS Toolbar Back Button
// --------------------------------------------------
.back-button {
@@ -196,6 +294,11 @@ ion-segment-button[button] {
// iOS Toolbar Color Generation
// --------------------------------------------------
@include ios-bar-button-default(default, $bar-button-ios-color);
@each $color-name, $color-value in $colors-ios {
@include ios-toolbar-theme($color-name, $color-value);
@include ios-bar-button-default($color-name, $color-value);
@include ios-bar-button-outline($color-name, $color-value);
@include ios-bar-button-solid($color-name, $color-value);
}

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

@@ -74,7 +74,7 @@ ion-title {
}
// Material Design Toolbar Buttons
// Material Design Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
@@ -102,6 +102,12 @@ ion-buttons[right] {
}
// Material Design Toolbar Buttons
// --------------------------------------------------
// HI!
// Material Design Toolbar Back Button
// --------------------------------------------------

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

@@ -14,7 +14,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button>
<button secondary>
<icon more></icon>
</button>
</ion-buttons>
@@ -32,7 +32,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button class="activated">
<button secondary class="activated">
<icon more></icon>
</button>
</ion-buttons>
@@ -40,46 +40,6 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
<icon contact></icon>
</button>
<button solid>
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button solid secondary>
Help
<icon help-circle></icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid class="activated">
<icon contact></icon>
</button>
<button solid class="activated">
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button solid secondary class="activated">
Help
<icon help-circle></icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
@@ -120,31 +80,41 @@
<ion-toolbar>
<ion-buttons start>
<button>
Btn
<button solid>
<icon contact></icon>
</button>
<button solid>
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button secondary>
Btn
<button solid secondary>
Help
<icon help-circle></icon>
</button>
</ion-buttons>
<ion-title>ColorAttr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button class="activated">
Btn
<button solid class="activated">
<icon contact></icon>
</button>
<button solid class="activated">
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button secondary class="activated">
Btn
<button solid secondary class="activated">
Help
<icon help-circle></icon>
</button>
</ion-buttons>
<ion-title>ColorAttr.activated</ion-title>
</ion-toolbar>