From 6fb1cc685f8fabd68525a106d66329371109a3a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 2 Oct 2017 11:28:50 +0200
Subject: [PATCH 1/5] New placeholder image added. Adding CSS class when
 placeholder is visible.

---
 src/imageuploadprogress.js        | 6 +++---
 theme/icons/image_placeholder.svg | 9 ++++++++-
 theme/imageuploadprogress.scss    | 4 ++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/imageuploadprogress.js b/src/imageuploadprogress.js
index c1de3ef..a1f54f9 100644
--- 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-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-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-placeholder' );
 	}
 }
 
diff --git a/theme/icons/image_placeholder.svg b/theme/icons/image_placeholder.svg
index e52f737..c1979d8 100644
--- a/theme/icons/image_placeholder.svg
+++ b/theme/icons/image_placeholder.svg
@@ -1 +1,8 @@
-<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>
\ No newline at end of file
+<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="#A1B0C2" font-family="Roboto-Regular, Roboto" font-size="24">
+      <tspan x="252.1" y="135">Uploading image…</tspan>
+    </text>
+  </g>
+</svg>
diff --git a/theme/imageuploadprogress.scss b/theme/imageuploadprogress.scss
index 0afc351..63675eb 100644
--- a/theme/imageuploadprogress.scss
+++ b/theme/imageuploadprogress.scss
@@ -28,6 +28,10 @@ figure.image {
 		transition-timing-function: linear;
 	}
 
+	&.ck-placeholder > img {
+		width: 100%;
+	}
+
 	// Upload progress bar.
 	.ck-progress-bar {
 		height: 2px;

From 75d516aac263f2275587f4d99b92fb738f3e3462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 2 Oct 2017 12:41:46 +0200
Subject: [PATCH 2/5] Upadated ImageUploadProgress tests.

---
 tests/imageuploadprogress.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/imageuploadprogress.js b/tests/imageuploadprogress.js
index b730208..1335fb1 100644
--- 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-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-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-placeholder" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 		);

From 8ab9ffe79cc98e3c01587af212accba0dd1a87bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 2 Oct 2017 13:02:51 +0200
Subject: [PATCH 3/5] Added optimized placeholder image.

---
 theme/icons/image_placeholder.svg | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/theme/icons/image_placeholder.svg b/theme/icons/image_placeholder.svg
index c1979d8..8941b70 100644
--- a/theme/icons/image_placeholder.svg
+++ b/theme/icons/image_placeholder.svg
@@ -1,8 +1 @@
-<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="#A1B0C2" font-family="Roboto-Regular, Roboto" font-size="24">
-      <tspan x="252.1" y="135">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="#A1B0C2" font-family="Roboto-Regular, Roboto" font-size="24"><tspan x="252.1" y="135">Uploading image…</tspan></text></g></svg>

From d18ea91351e997919fcccb3fb178abb41add0833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 2 Oct 2017 13:28:32 +0200
Subject: [PATCH 4/5] Renamed ck-placeholder CSS class to
 ck-image-upload-placeholder.

---
 src/imageuploadprogress.js     | 6 +++---
 tests/imageuploadprogress.js   | 6 +++---
 theme/imageuploadprogress.scss | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/imageuploadprogress.js b/src/imageuploadprogress.js
index a1f54f9..0e2b8fa 100644
--- 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', 'ck-placeholder' );
+			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', 'ck-placeholder' );
+				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', 'ck-placeholder' );
+		viewFigure.removeClass( 'ck-appear', 'ck-image-upload-placeholder' );
 	}
 }
 
diff --git a/tests/imageuploadprogress.js b/tests/imageuploadprogress.js
index 1335fb1..06f5d17 100644
--- 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 ck-placeholder" 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 ck-placeholder" 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 ck-placeholder" 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/imageuploadprogress.scss b/theme/imageuploadprogress.scss
index 63675eb..1a626ad 100644
--- a/theme/imageuploadprogress.scss
+++ b/theme/imageuploadprogress.scss
@@ -28,7 +28,7 @@ figure.image {
 		transition-timing-function: linear;
 	}
 
-	&.ck-placeholder > img {
+	&.ck-image-upload-placeholder > img {
 		width: 100%;
 	}
 

From 070106a2e3993c0a60f3f11e9691f71710a8c1f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Kup=C5=9B?= <szymonkups@gmail.com>
Date: Mon, 2 Oct 2017 15:01:10 +0200
Subject: [PATCH 5/5] Fixed placeholder image font and contrast.

---
 theme/icons/image_placeholder.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/icons/image_placeholder.svg b/theme/icons/image_placeholder.svg
index 8941b70..fcbd5bb 100644
--- a/theme/icons/image_placeholder.svg
+++ b/theme/icons/image_placeholder.svg
@@ -1 +1 @@
-<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="#A1B0C2" font-family="Roboto-Regular, Roboto" font-size="24"><tspan x="252.1" y="135">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>