From 66f2de0c0336487d4269c5fbaff5e98368a05203 Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Tue, 7 Jan 2020 01:56:44 -0800 Subject: [PATCH 1/4] Improved style of image block placeholder during upload --- .../block-library/src/image/edit.native.js | 34 ++++++++++++------ .../src/image/styles.native.scss | 35 +++++++++++++++++-- 2 files changed, 57 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index b5a919515ac15..d2173fc5a9284 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -55,6 +55,11 @@ import { LINK_DESTINATION_NONE, } from './constants'; +const ICON_TYPE = { + PLACEHOLDER: 'placeholder', + RETRY: 'retry', + UPLOAD: 'upload', +}; const IMAGE_SIZE_THUMBNAIL = 'thumbnail'; const IMAGE_SIZE_MEDIUM = 'medium'; const IMAGE_SIZE_LARGE = 'large'; @@ -286,12 +291,18 @@ export class ImageEdit extends React.Component { } } - getIcon( isRetryIcon ) { - if ( isRetryIcon ) { - return ; + getIcon( iconType ) { + let iconStyle; + switch ( iconType ) { + case ICON_TYPE.RETRY: + return ; + case ICON_TYPE.PLACEHOLDER: + iconStyle = this.props.getStylesFromColorScheme( styles.iconPlaceholder, styles.iconPlaceholderDark ); + break; + case ICON_TYPE.UPLOAD: + iconStyle = this.props.getStylesFromColorScheme( styles.iconUpload, styles.iconUploadDark ); + break; } - - const iconStyle = this.props.getStylesFromColorScheme( styles.icon, styles.iconDark ); return ; } @@ -366,7 +377,7 @@ export class ImageEdit extends React.Component { @@ -407,12 +418,11 @@ export class ImageEdit extends React.Component { onMediaUploadStateReset={ this.mediaUploadStateReset } renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage } ) => { const opacity = isUploadInProgress ? 0.3 : 1; - const icon = this.getIcon( isUploadFailed ); const imageBorderOnSelectedStyle = isSelected && ! ( isUploadInProgress || isUploadFailed || this.state.isCaptionSelected ) ? styles.imageBorder : ''; const iconContainer = ( - { icon } + { this.getIcon( isUploadFailed ? ICON_TYPE.RETRY : ICON_TYPE.PLACEHOLDER ) } ); @@ -425,8 +435,12 @@ export class ImageEdit extends React.Component { alignSelf: imageWidthWithinContainer && alignToFlex[ align ] } } > { ! imageWidthWithinContainer && - - { this.getIcon( false ) } + + + + { this.getIcon( ICON_TYPE.UPLOAD ) } + } Date: Tue, 7 Jan 2020 02:57:01 -0800 Subject: [PATCH 2/4] Improved style of VIDEO block placeholder during upload --- .../block-library/src/video/edit.native.js | 30 ++++++++++++++----- .../block-library/src/video/style.native.scss | 16 +++++++++- 2 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index de12486e9075d..9fd536e90a09c 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -45,6 +45,12 @@ import SvgIcon from './icon'; import SvgIconRetry from './icon-retry'; import VideoCommonSettings from './edit-common-settings'; +const ICON_TYPE = { + PLACEHOLDER: 'placeholder', + RETRY: 'retry', + UPLOAD: 'upload', +}; + class VideoEdit extends React.Component { constructor( props ) { super( props ); @@ -147,13 +153,20 @@ class VideoEdit extends React.Component { } } - getIcon( isRetryIcon, isMediaPlaceholder ) { - if ( isRetryIcon ) { - return ; + getIcon( iconType ) { + let iconStyle; + switch ( iconType ) { + case ICON_TYPE.RETRY: + return ; + case ICON_TYPE.PLACEHOLDER: + iconStyle = this.props.getStylesFromColorScheme( style.icon, style.iconDark ); + break; + case ICON_TYPE.UPLOAD: + iconStyle = this.props.getStylesFromColorScheme( style.iconUploading, style.iconUploadingDark ); + break; } - const iconStyle = this.props.getStylesFromColorScheme( style.icon, style.iconDark ); - return ; + return ; } render() { @@ -188,7 +201,7 @@ class VideoEdit extends React.Component { @@ -218,7 +231,7 @@ class VideoEdit extends React.Component { onMediaUploadStateReset={ this.mediaUploadStateReset } renderContent={ ( { isUploadInProgress, isUploadFailed, retryMessage } ) => { const showVideo = isURL( src ) && ! isUploadInProgress && ! isUploadFailed; - const icon = this.getIcon( isUploadFailed, false ); + const icon = this.getIcon( isUploadFailed ? ICON_TYPE.RETRY : ICON_TYPE.UPLOAD ); const styleIconContainer = isUploadFailed ? style.modalIconRetry : style.modalIcon; const iconContainer = ( @@ -247,7 +260,8 @@ class VideoEdit extends React.Component { } { ! showVideo && - + { videoContainerHeight > 0 && iconContainer } { isUploadFailed && { retryMessage } } diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss index 5eb36be46605e..2796e324f2676 100644 --- a/packages/block-library/src/video/style.native.scss +++ b/packages/block-library/src/video/style.native.scss @@ -9,10 +9,18 @@ background-color: #000; } -.placeholder { +.placeholderContainer { flex: 1; justify-content: center; align-items: center; + background-color: $gray-light; +} + +.placeholderContainerDark { + flex: 1; + justify-content: center; + align-items: center; + background-color: $gray-90; } .placeholderIcon { @@ -68,3 +76,9 @@ width: 100%; height: 100%; } + +.iconUploadingDark { + fill: $gray-70; + width: 100%; + height: 100%; +} From 0c73a4a745bf3ffcc6285fc5ffe29a259b898205 Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Tue, 7 Jan 2020 13:23:24 -0800 Subject: [PATCH 3/4] Removing unreachable code. --- packages/block-library/src/image/edit.native.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index d2173fc5a9284..38842977210ad 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -420,9 +420,9 @@ export class ImageEdit extends React.Component { const opacity = isUploadInProgress ? 0.3 : 1; const imageBorderOnSelectedStyle = isSelected && ! ( isUploadInProgress || isUploadFailed || this.state.isCaptionSelected ) ? styles.imageBorder : ''; - const iconContainer = ( + const iconRetryContainer = ( - { this.getIcon( isUploadFailed ? ICON_TYPE.RETRY : ICON_TYPE.PLACEHOLDER ) } + { this.getIcon( ICON_TYPE.RETRY ) } ); @@ -435,7 +435,6 @@ export class ImageEdit extends React.Component { alignSelf: imageWidthWithinContainer && alignToFlex[ align ] } } > { ! imageWidthWithinContainer && - @@ -455,7 +454,7 @@ export class ImageEdit extends React.Component { > { isUploadFailed && - { iconContainer } + { iconRetryContainer } { retryMessage } } From f32aab37dcdaaeeaa1ae16dd1e8b8a87bab8b001 Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Thu, 9 Jan 2020 19:03:32 -0800 Subject: [PATCH 4/4] Removed redundant style props --- packages/block-library/src/image/styles.native.scss | 4 ---- packages/block-library/src/video/style.native.scss | 5 ----- 2 files changed, 9 deletions(-) diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 81ce63dedf191..89b3f1dc57627 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -62,8 +62,6 @@ .iconUploadDark { fill: $gray-70; - width: 100%; - height: 100%; } .imageContainerUpload { @@ -73,8 +71,6 @@ } .imageContainerUploadDark { - justify-content: center; - align-items: center; background-color: $gray-90; } diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss index 2796e324f2676..dc59037bc3d1d 100644 --- a/packages/block-library/src/video/style.native.scss +++ b/packages/block-library/src/video/style.native.scss @@ -17,9 +17,6 @@ } .placeholderContainerDark { - flex: 1; - justify-content: center; - align-items: center; background-color: $gray-90; } @@ -79,6 +76,4 @@ .iconUploadingDark { fill: $gray-70; - width: 100%; - height: 100%; }