[RNMobile] Show the media edit icon only if the block is selected (#1…

…9961) * Only shows the media edit icon if the block is selected Also, matches the style of the native gallery block buttons * Fix lint
WordPress · Jan 31, 2020 · 63d56f1 · 63d56f1
1 parent f63053c
commit 63d56f1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -396,9 +396,11 @@ export class ImageEdit extends React.Component {
 
 		const editImageComponent = ( { open, mediaOptions } ) => (
 			<TouchableWithoutFeedback onPress={ open }>
-				<View style={ styles.edit }>
-					{ mediaOptions() }
-					<Icon icon={ SvgIconCustomize } { ...styles.iconCustomise } />
+				<View style={ styles.editContainer }>
+					<View style={ styles.edit }>
+						{ mediaOptions() }
+						<Icon size={ 16 } icon={ SvgIconCustomize } { ...styles.iconCustomise } />
+					</View>
 				</View>
 			</TouchableWithoutFeedback>
 		);
@@ -492,7 +494,8 @@ export class ImageEdit extends React.Component {
 												<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
 											</View>
 										) }
-										{ ! isUploadInProgress &&
+										{ isSelected &&
+											! isUploadInProgress &&
 											! isUploadFailed &&
 											finalWidth &&
 											finalHeight &&

diff --git a/packages/block-library/src/image/icon-customize.native.js b/packages/block-library/src/image/icon-customize.native.js
@@ -4,7 +4,7 @@
 import { Path, SVG } from '@wordpress/components';
 
 export default (
-	<SVG xmlns="http://www.w3.org/2000/svg">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
@@ -84,10 +84,18 @@
 	align-items: center;
 }
 
-.edit {
+.editContainer {
 	width: 44px;
 	height: 44px;
-	background-color: $dark-opacity-500;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.edit {
+	width: 30px;
+	height: 30px;
+	background-color: $gray-dark;
 	border-radius: 22px;
 	position: absolute;
 	top: 5px;
@@ -97,6 +105,6 @@
 .iconCustomise {
 	fill: #fff;
 	position: absolute;
-	top: 10px;
-	left: 10px;
+	top: 7px;
+	left: 7px;
 }