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

fix(action-sheet): fix button positioning, backdrop opacity

Browse Source
This commit is contained in:
Brandy Carney
2017-08-10 13:37:52 -04:00
committed by mhartington
parent 7331bf499f
commit 4ce01761bb
5 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -61,6 +61,18 @@ $action-sheet-ios-button-text-color: #007aff !default;
/// @prop - Fill color of the action sheet button icon
$action-sheet-ios-button-icon-fill-color: $action-sheet-ios-button-text-color !default;
/// @prop - Font size of the action sheet button icon
$action-sheet-ios-button-icon-font-size: 1.4em !default;
/// @prop - Padding right of the action sheet button icon
$action-sheet-ios-button-icon-padding-right: 0.1em !default;
/// @prop - Height of the action sheet button icon
$action-sheet-ios-button-icon-height: .7em !default;
/// @prop - Margin top of the action sheet button icon
$action-sheet-ios-button-icon-margin-top: -10px !default;
/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 2rem !default;
@ -138,8 +150,12 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
background: $action-sheet-ios-button-background;
}
.action-sheet-ios .action-sheet-button {
.action-sheet-ios .action-sheet-button .action-sheet-icon {
fill: $action-sheet-ios-button-icon-fill-color;
font-size: $action-sheet-ios-button-icon-font-size;
padding-right: $action-sheet-ios-button-icon-padding-right;
height: $action-sheet-ios-button-icon-height;
margin-top: $action-sheet-ios-button-icon-margin-top;
}
.action-sheet-ios .action-sheet-button:last-child {

2
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -179,10 +179,12 @@ export class ActionSheet {
: null}
{buttons.map(b =>
<button class={this.buttonClass(b)} onClick={() => this.click(b)}>
<span class="button-inner">
{b.icon
? <ion-icon name={b.icon} class="action-sheet-icon" />
: null}
{b.text}
</span>
</button>
)}
</div>

4
packages/core/src/components/action-sheet/animations/ios.enter.ts
View File

@ -1,7 +1,7 @@
import { Animation } from '../../../index';
/**
* iOS Loading Enter Animation
* iOS Action Sheet Animation
*/
export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation();
@ -12,7 +12,7 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.26);
backdropAnimation.fromTo('opacity', 0.01, 0.4);
wrapperAnimation.fromTo('translateY', '100%', '0%');

4
packages/core/src/components/action-sheet/animations/ios.leave.ts
View File

@ -1,7 +1,7 @@
import { Animation } from '../../../index';
/**
* iOS Loading Leave Animation
* iOS Action Sheet Leave Animation
*/
export default function(Animation: Animation, baseElm: HTMLElement) {
const baseAnimation = new Animation();
@ -12,7 +12,7 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0);
backdropAnimation.fromTo('opacity', 0.4, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');

53
packages/core/src/components/action-sheet/test/basic.html
View File

@ -18,12 +18,15 @@
<ion-content padding>
<ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
<ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button>
<ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button>
</ion-content>
</ion-app>
<script>
function presentActionSheet1() {
console.log('presenting');
var mode = Ionic.mode;
Ionic.controller('action-sheet', {
title: "Albums",
@ -48,9 +51,57 @@
}
}, {
text: 'Favorite',
icon: mode !== 'ios' ? 'heart' : null,
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
icon: mode !== 'ios' ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}]
})
.then(actionSheet => {
actionSheet.present()
});
}
function presentActionSheet2() {
Ionic.controller('action-sheet', {
buttons: [{
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
}, {
text: 'Destructive',
role: 'destructive',
handler: () => {
console.log('Destructive clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
})
.then(actionSheet => {
actionSheet.present()
});
}
function presentActionSheet3() {
Ionic.controller('action-sheet', {
buttons: [{
text: 'Open Alert',
handler: () => {
console.log('Open Alert clicked');
}
}, {
text: 'Cancel',
role: 'cancel',