Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile: Implemented media options sheet #13656

Merged
merged 24 commits into from
Feb 14, 2019
Merged

Mobile: Implemented media options sheet #13656

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
0f08be6
Implemented media options sheet
marecar3 Feb 4, 2019
65fbbb7
Fixed lint errors
marecar3 Feb 4, 2019
ab82cd2
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 5, 2019
a1294a9
Fixed color error
marecar3 Feb 5, 2019
fe66aa6
Change "Upload Image" label to "Select Image" label
marecar3 Feb 5, 2019
ee79341
Use proper style format
marecar3 Feb 5, 2019
5048cf4
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 5, 2019
c215079
Dismiss modal on back pressed
marecar3 Feb 5, 2019
9718879
Restyle action sheet for Android and iOS
marecar3 Feb 5, 2019
7f6e1ac
Execute the callbacks from the bottom sheet with a delay on iOS.
SergioEstevao Feb 6, 2019
7618c03
Merge branch 'master' into rnmobile/introduce_media_options_sheet
SergioEstevao Feb 6, 2019
e15230e
Merge branch 'master' into rnmobile/introduce_media_options_sheet
SergioEstevao Feb 6, 2019
9067b08
Avoid delay for iOS
marecar3 Feb 6, 2019
fcc482f
Revert "Avoid delay for iOS"
marecar3 Feb 6, 2019
c36a904
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 6, 2019
b5adc60
Avoid leaking of Modal view
marecar3 Feb 6, 2019
391a82d
Revert "Avoid leaking of Modal view"
marecar3 Feb 6, 2019
ecc150e
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 6, 2019
4cadc20
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 7, 2019
40744ed
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 8, 2019
4dd84e4
Use Picker instead of Bottom Sheet
marecar3 Feb 8, 2019
974c144
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 8, 2019
b0acd98
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 11, 2019
c81ec3e
Merge branch 'master' into rnmobile/introduce_media_options_sheet
marecar3 Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 71 additions & 27 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default class ImageEdit extends React.Component {

this.state = {
showSettings: false,
showMediaOptions: false,
progress: 0,
isUploadInProgress: false,
isUploadFailed: false,
Expand Down Expand Up @@ -133,40 +134,33 @@ export default class ImageEdit extends React.Component {
const { url, caption, height, width } = attributes;

const onMediaLibraryButtonPressed = () => {
this.setState( { showMediaOptions: false } );
requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
if ( mediaUrl ) {
setAttributes( { id: mediaId, url: mediaUrl } );
}
} );
};

if ( ! url ) {
const onMediaUploadButtonPressed = () => {
requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

const onMediaCaptureButtonPressed = () => {
requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};
const onMediaUploadButtonPressed = () => {
this.setState( { showMediaOptions: false } );
requestMediaPickFromDeviceLibrary( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

return (
<MediaPlaceholder
onUploadMediaPressed={ onMediaUploadButtonPressed }
onMediaLibraryPressed={ onMediaLibraryButtonPressed }
onCapturePhotoPressed={ onMediaCaptureButtonPressed }
/>
);
}
const onMediaCaptureButtonPressed = () => {
this.setState( { showMediaOptions: false } );
requestMediaPickFromDeviceCamera( ( mediaId, mediaUri ) => {
if ( mediaUri ) {
this.addMediaUploadListener( );
setAttributes( { url: mediaUri, id: mediaId } );
}
} );
};

const onImageSettingsButtonPressed = () => {
this.setState( { showSettings: true } );
Expand All @@ -176,12 +170,20 @@ export default class ImageEdit extends React.Component {
this.setState( { showSettings: false } );
};

const onMediaOptionsButtonPressed = () => {
this.setState( { showMediaOptions: true } );
};

const onMediaOptionsClose = () => {
this.setState( { showMediaOptions: false } );
};

const toolbarEditButton = (
<Toolbar>
<ToolbarButton
label={ __( 'Edit image' ) }
icon="edit"
onClick={ onMediaLibraryButtonPressed }
onClick={ onMediaOptionsButtonPressed }
/>
</Toolbar>
);
Expand Down Expand Up @@ -214,6 +216,47 @@ export default class ImageEdit extends React.Component {
</BottomSheet>
);

const getMediaOptions = () => (
<BottomSheet
isVisible={ this.state.showMediaOptions }
onClose={ onMediaOptionsClose }
hideHeader
>
<BottomSheet.Cell
label={ __( 'Choose from device' ) }
labelStyle={ { color: '#00aadc' } }
onPress={ onMediaUploadButtonPressed }
/>
<BottomSheet.Cell
label={ __( 'Take a Photo' ) }
labelStyle={ { color: '#00aadc' } }
onPress={ onMediaCaptureButtonPressed }
/>
<BottomSheet.Cell
label={ __( 'WordPress Media Library' ) }
labelStyle={ { color: '#00aadc' } }
onPress={ onMediaLibraryButtonPressed }
/>
<BottomSheet.Cell
label={ __( 'Dismiss' ) }
labelStyle={ { color: '#00aadc ', fontWeight: 'bold' } }
etoledom marked this conversation as resolved.
Show resolved Hide resolved
drawSeparator={ false }
onPress={ onMediaOptionsClose }
/>
</BottomSheet>
);

if ( ! url ) {
return (
<View style={ { flex: 1 } } >
{ getMediaOptions() }
<MediaPlaceholder
onMediaOptionsPressed={ onMediaOptionsButtonPressed }
/>
</View>
);
}

const showSpinner = this.state.isUploadInProgress;
const opacity = this.state.isUploadInProgress ? 0.3 : 1;
const progress = this.state.progress * 100;
Expand Down Expand Up @@ -252,6 +295,7 @@ export default class ImageEdit extends React.Component {
return (
<View style={ { flex: 1 } } >
{ getInspectorControls() }
{ getMediaOptions() }
<ImageBackground
style={ { width: finalWidth, height: finalHeight, opacity } }
resizeMethod="scale"
Expand Down
25 changes: 12 additions & 13 deletions packages/editor/src/components/media-placeholder/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
/**
* External dependencies
*/
import { View, Text, Button } from 'react-native';
import { View, Text, TouchableWithoutFeedback } from 'react-native';

import styles from './styles.scss';

import { __ } from '@wordpress/i18n';
import { Dashicon } from '@wordpress/components';

function MediaPlaceholder( props ) {
return (
<View style={ styles.emptyStateContainer }>
<Text style={ styles.emptyStateTitle }>
{ __( 'Image' ) }
</Text>
<Text style={ styles.emptyStateDescription }>
{ __( 'Upload a new image or select a file from your library.' ) }
</Text>
<View style={ styles.emptyStateButtonsContainer }>
<Button title={ __( 'Device Library' ) } onPress={ props.onUploadMediaPressed } />
<Button title={ __( 'Take photo' ) } onPress={ props.onCapturePhotoPressed } />
<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
<View style={ styles.emptyStateContainer }>
<Dashicon icon={ 'cover-image' } />
<Text style={ styles.emptyStateTitle }>
{ __( 'Image' ) }
</Text>
<Text style={ styles.emptyStateDescription }>
{ __( 'UPLOAD IMAGE' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe change this string to: "Select Image" ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @SergioEstevao , thanks for the comment.
You are right. I will fix that.

</Text>
</View>
<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
</View>
</TouchableWithoutFeedback>
);
}

Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/media-placeholder/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

.emptyStateDescription {
text-align: center;
color: #0087be;
}

.emptyStateButtonsContainer {
Expand Down