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

fix(action-sheet): add scrolling for options

Browse Source
This commit is contained in:
Brandy Carney
2017-10-06 05:45:49 -04:00
committed by Brandy Carney
parent 4f571c2da1
commit 17cdce101e
7 changed files with 258 additions and 30 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

@ -19,6 +19,9 @@ $action-sheet-ios-padding-bottom: $action-sheet-ios-paddin
/// @prop - Padding start of the action sheet
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
/// @prop - Top margin of the action sheet button group
$action-sheet-ios-group-margin-top: 10px !default;
/// @prop - Bottom margin of the action sheet button group
$action-sheet-ios-group-margin-bottom: 10px !default;
@ -105,6 +108,10 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
@include text-align($action-sheet-ios-text-align);
}
.action-sheet-ios .action-sheet-wrapper {
@include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
}
.action-sheet-ios .action-sheet-container {
@include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
}
@ -113,9 +120,16 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
@include border-radius($action-sheet-ios-border-radius);
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
overflow: hidden;
background: $action-sheet-ios-background;
// scss-lint:disable VendorPrefix
-webkit-overflow-scrolling: touch;
// Prevents borders from going outside of the container
-webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
}
.action-sheet-ios .action-sheet-group:first-child {
@include margin($action-sheet-ios-group-margin-top, null, null, null);
}
.action-sheet-ios .action-sheet-group:last-child {

22
packages/core/src/components/action-sheet/action-sheet.md.scss
View File

@ -10,8 +10,11 @@ $action-sheet-md-text-align: start !default;
/// @prop - Background color of the action sheet
$action-sheet-md-background: #fafafa !default;
/// @prop - Bottom margin of the action sheet button group
$action-sheet-md-group-margin-bottom: 8px !default;
/// @prop - Padding top of the action sheet
$action-sheet-md-padding-top: .8rem !default;
/// @prop - Padding bottom of the action sheet
$action-sheet-md-padding-bottom: .8rem !default;
/// @prop - Color of the action sheet title
$action-sheet-md-title-color: #757575 !default;
@ -82,11 +85,6 @@ $action-sheet-md-icon-margin-bottom: 0 !default;
/// @prop - Margin start of the icon in the action sheet button
$action-sheet-md-icon-margin-start: 0 !default;
.action-sheet-md .action-sheet-container {
@include padding(.8rem, 0);
background: $action-sheet-md-background;
}
.action-sheet-md .action-sheet-title,
.action-sheet-md .action-sheet-sub-title {
@ -131,7 +129,15 @@ $action-sheet-md-icon-margin-start: 0 !default;
}
.action-sheet-md .action-sheet-group {
overflow: hidden;
background: $action-sheet-md-background;
}
.action-sheet-md .action-sheet-group:first-child {
@include padding($action-sheet-md-padding-top, null, null, null);
}
.action-sheet-md .action-sheet-group:last-child {
@include padding(null, null, $action-sheet-md-padding-bottom, null);
}
.action-sheet-md .action-sheet-group .button-inner {

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

@ -4,10 +4,11 @@
// --------------------------------------------------
/// @prop - Width of the action sheet
$action-sheet-width: 100% !default;
$action-sheet-width: 100% !default;
/// @prop - Maximum width of the action sheet
$action-sheet-max-width: 500px !default;
$action-sheet-max-width: 500px !default;
ion-action-sheet {
@include position(0, null, null, 0);
@ -21,7 +22,7 @@ ion-action-sheet {
}
.action-sheet-wrapper {
@include position(null, 0, 0, 0);
@include position(0, 0, 0, 0);
@include margin(auto);
@include transform(translate3d(0, 100%, 0));
@ -31,12 +32,35 @@ ion-action-sheet {
width: $action-sheet-width;
max-width: $action-sheet-max-width;
pointer-events: none;
}
.action-sheet-button {
width: $action-sheet-width;
}
ion-action-sheet-controller {
display: none;
.action-sheet-container {
display: flex;
flex-flow: column;
justify-content: flex-end;
height: 100%;
max-height: 100%;
}
.action-sheet-group {
overflow: scroll;
flex-shrink: 2;
pointer-events: all;
}
.action-sheet-group-cancel {
overflow: hidden;
flex-shrink: 0;
}

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

@ -199,7 +199,7 @@ export class ActionSheet {
)}
</div>
{cancelButton
? <div class='action-sheet-group'>
? <div class='action-sheet-group action-sheet-group-cancel'>
<button
class={this.buttonClass(cancelButton)}
onClick={() => this.click(cancelButton)}

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

@ -10,6 +10,12 @@ $action-sheet-wp-text-align: start !default;
/// @prop - Background color of the action sheet
$action-sheet-wp-background: #fff !default;
/// @prop - Padding top of the action sheet
$action-sheet-wp-padding-top: .8rem !default;
/// @prop - Padding bottom of the action sheet
$action-sheet-wp-padding-bottom: .8rem !default;
/// @prop - Box shadow color of the action sheet
$action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default;
@ -134,12 +140,18 @@ $action-sheet-wp-icon-margin-start: 0 !default;
vertical-align: $action-sheet-wp-icon-vertical-align;
}
.action-sheet-wp .action-sheet-container {
@include padding(.8rem, 0);
.action-sheet-wp .action-sheet-group {
background: $action-sheet-wp-background;
}
.action-sheet-wp .action-sheet-group:first-child {
@include padding($action-sheet-wp-padding-top, null, null, null);
}
.action-sheet-wp .action-sheet-group:last-child {
@include padding(null, null, $action-sheet-wp-padding-bottom, null);
}
.action-sheet-wp .action-sheet-group .button-inner {
justify-content: flex-start;
}

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

@ -19,15 +19,19 @@
<ion-content padding>
<ion-action-sheet-controller></ion-action-sheet-controller>
<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-button block onclick="presentBasic()">Basic</ion-button>
<ion-button block onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button block onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button block onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button block onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button block onclick="presentCancelOnly()">Cancel Only</ion-button>
</ion-content>
</ion-app>
<script>
function presentActionSheet1() {
function presentBasic() {
var mode = Ionic.mode;
var actionSheetController = document.querySelector('ion-action-sheet-controller');
@ -72,7 +76,7 @@
});
}
function presentActionSheet2() {
function presentNoBackdropDismiss() {
var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [{
@ -99,7 +103,7 @@
});
}
function presentActionSheet3() {
function presentAlert() {
var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [{
@ -119,6 +123,179 @@
actionSheet.present()
});
}
function presentScroll() {
var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [
{
text: 'Add Reaction',
handler: () => {
console.log('Add Reaction clicked');
}
}, {
text: 'Copy Text',
handler: () => {
console.log('Copy Text clicked');
}
}, {
text: 'Share Text',
handler: () => {
console.log('Share Text clicked');
}
}, {
text: 'Copy Link to Message',
handler: () => {
console.log('Copy Link to Message clicked');
}
}, {
text: 'Remind Me',
handler: () => {
console.log('Remind Me clicked');
}
}, {
text: 'Pin File',
handler: () => {
console.log('Pin File clicked');
}
}, {
text: 'Star File',
handler: () => {
console.log('Star File clicked');
}
}, {
text: 'Mark Unread',
handler: () => {
console.log('Mark Unread clicked');
}
}, {
text: 'Edit Title',
handler: () => {
console.log('Edit Title clicked');
}
}, {
text: 'Save Image',
handler: () => {
console.log('Save Image clicked');
}
}, {
text: 'Copy Image',
handler: () => {
console.log('Copy Image clicked');
}
}, {
text: 'Delete File',
role: 'destructive',
handler: () => {
console.log('Delete File clicked');
}
}, {
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
handler: () => {
console.log('Cancel clicked');
}
}
]
})
.then(actionSheet => {
actionSheet.present()
});
}
function presentScrollNoCancel() {
var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [
{
text: 'Add Reaction',
handler: () => {
console.log('Add Reaction clicked');
}
}, {
text: 'Copy Text',
handler: () => {
console.log('Copy Text clicked');
}
}, {
text: 'Share Text',
handler: () => {
console.log('Share Text clicked');
}
}, {
text: 'Copy Link to Message',
handler: () => {
console.log('Copy Link to Message clicked');
}
}, {
text: 'Remind Me',
handler: () => {
console.log('Remind Me clicked');
}
}, {
text: 'Pin File',
handler: () => {
console.log('Pin File clicked');
}
}, {
text: 'Star File',
handler: () => {
console.log('Star File clicked');
}
}, {
text: 'Mark Unread',
handler: () => {
console.log('Mark Unread clicked');
}
}, {
text: 'Edit Title',
handler: () => {
console.log('Edit Title clicked');
}
}, {
text: 'Save Image',
handler: () => {
console.log('Save Image clicked');
}
}, {
text: 'Copy Image',
handler: () => {
console.log('Copy Image clicked');
}
}, {
text: 'Delete File',
role: 'destructive',
handler: () => {
console.log('Delete File clicked');
}
}
]
})
.then(actionSheet => {
actionSheet.present()
});
}
function presentCancelOnly() {
var actionSheetController = document.querySelector('ion-action-sheet-controller');
actionSheetController.create({
buttons: [
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
handler: () => {
console.log('Cancel clicked');
}
}
]
})
.then(actionSheet => {
actionSheet.present()
});
}
</script>
</body>

5
packages/core/src/components/select/select.tsx
View File

@ -193,11 +193,6 @@ export class Select {
resetInterface(ev: Event): string {
let selectInterface = this.interface;
if (selectInterface === 'action-sheet' && this.options.length > 6) {
console.warn('Interface cannot be "' + selectInterface + '" with more than 6 options. Using the "alert" interface instead.');
selectInterface = 'alert';
}
if ((selectInterface === 'action-sheet' || selectInterface === 'popover') && this.multiple) {
console.warn('Interface cannot be "' + selectInterface + '" with a multi-value select. Using the "alert" interface instead.');
selectInterface = 'alert';