Merge pull request #64 from ckeditor/t/63

Other: Placeholder image looks better on wider editors. Closes #63.

src/imageuploadprogress.js

@@ -73,7 +73,7 @@ export default class ImageUploadProgress extends Plugin {
 
 		// Show placeholder with infinite progress bar on the top while image is read from disk.
 		if ( status == 'reading' ) {
-			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );
+			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress', 'ck-image-upload-placeholder' );
 			const viewImg = viewFigure.getChild( 0 );
 			viewImg.setAttribute( 'src', placeholder );
 
@@ -87,7 +87,7 @@ export default class ImageUploadProgress extends Plugin {
 			if ( loader ) {
 				const progressBar = createProgressBar();
 
-				viewFigure.removeClass( 'ck-infinite-progress' );
+				viewFigure.removeClass( 'ck-infinite-progress', 'ck-image-upload-placeholder' );
 				viewFigure.appendChildren( progressBar );
 
 				// Update progress bar width when uploadedPercent is changed.
@@ -109,7 +109,7 @@ export default class ImageUploadProgress extends Plugin {
 			viewFigure.removeClass( 'ck-infinite-progress' );
 		}
 
-		viewFigure.removeClass( 'ck-appear' );
+		viewFigure.removeClass( 'ck-appear', 'ck-image-upload-placeholder' );
 	}
 }
 

tests/imageuploadprogress.js

@@ -77,7 +77,7 @@ describe( 'ImageUploadProgress', () => {
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		expect( getViewData( viewDocument ) ).to.equal(
-			'[<figure class="image ck-widget ck-appear ck-infinite-progress" contenteditable="false">' +
+			'[<figure class="image ck-widget ck-appear ck-infinite-progress ck-image-upload-placeholder" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]<p>foo</p>'
 		);
@@ -150,7 +150,7 @@ describe( 'ImageUploadProgress', () => {
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		expect( getViewData( viewDocument ) ).to.equal(
-			'[<figure class="image ck-widget ck-appear ck-infinite-progress" contenteditable="false">' +
+			'[<figure class="image ck-widget ck-appear ck-infinite-progress ck-image-upload-placeholder" contenteditable="false">' +
 				`<img src="${ base64Sample }"></img>` +
 			'</figure>]<p>foo</p>'
 		);
@@ -179,7 +179,7 @@ describe( 'ImageUploadProgress', () => {
 		} );
 
 		expect( getViewData( viewDocument ) ).to.equal(
-			'[<figure class="image ck-widget ck-appear ck-infinite-progress" contenteditable="false">' +
+			'[<figure class="image ck-widget ck-appear ck-infinite-progress ck-image-upload-placeholder" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 		);

theme/imageuploadprogress.scss

@@ -28,6 +28,10 @@ figure.image {
 		transition-timing-function: linear;
 	}
 
+	&.ck-image-upload-placeholder > img {
+		width: 100%;
+	}
+
 	// Upload progress bar.
 	.ck-progress-bar {
 		height: 2px;