Merge pull request #64 from ckeditor/t/63

Piotr Jasiun · web-flow · commit edb5e81d61a5 · 2017-10-02T15:16:06.000+02:00
Other: Placeholder image looks better on wider editors. Closes #63.
diff --git a/src/imageuploadprogress.js b/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' );
 	}
 }
 
diff --git a/tests/imageuploadprogress.js b/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>]'
 		);
diff --git a/theme/icons/image_placeholder.svg b/theme/icons/image_placeholder.svg
@@ -1 +1 @@
-<svg width="800" height="380" viewBox="0 0 800 380" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="#F7F7F7" width="800" height="380" rx="4"/><text font-family="Roboto-Regular, Roboto" font-size="36" fill="#A1B0C2"><tspan x="253.188" y="200">Uploading image…</tspan></text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 250"><g fill="none" fill-rule="evenodd"><rect width="700" height="250" fill="#F7F7F7" rx="4"/><text fill="#5F6F77" font-family="Arial,sans-serif" font-size="24"><tspan x="247.9" y="135">Uploading image…</tspan></text></g></svg>
diff --git a/theme/imageuploadprogress.scss b/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;

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export default class ImageUploadProgress extends Plugin {`
`73`	`73`
`74`	`74`	`// Show placeholder with infinite progress bar on the top while image is read from disk.`
`75`	`75`	`if ( status == 'reading' ) {`
`76`		`- viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );`
	`76`	`+ viewFigure.addClass( 'ck-appear', 'ck-infinite-progress', 'ck-image-upload-placeholder' );`
`77`	`77`	`const viewImg = viewFigure.getChild( 0 );`
`78`	`78`	`viewImg.setAttribute( 'src', placeholder );`
`79`	`79`
`@@ -87,7 +87,7 @@ export default class ImageUploadProgress extends Plugin {`
`87`	`87`	`if ( loader ) {`
`88`	`88`	`const progressBar = createProgressBar();`
`89`	`89`
`90`		`- viewFigure.removeClass( 'ck-infinite-progress' );`
	`90`	`+ viewFigure.removeClass( 'ck-infinite-progress', 'ck-image-upload-placeholder' );`
`91`	`91`	`viewFigure.appendChildren( progressBar );`
`92`	`92`
`93`	`93`	`// Update progress bar width when uploadedPercent is changed.`
`@@ -109,7 +109,7 @@ export default class ImageUploadProgress extends Plugin {`
`109`	`109`	`viewFigure.removeClass( 'ck-infinite-progress' );`
`110`	`110`	`}`
`111`	`111`
`112`		`- viewFigure.removeClass( 'ck-appear' );`
	`112`	`+ viewFigure.removeClass( 'ck-appear', 'ck-image-upload-placeholder' );`
`113`	`113`	`}`
`114`	`114`	`}`
`115`	`115`