Kaynağa Gözat

Merge pull request #64 from ckeditor/t/63

Other: Placeholder image looks better on wider editors. Closes #63.
Piotr Jasiun 8 yıl önce
ebeveyn
işleme
e4be863d3b

+ 3 - 3
packages/ckeditor5-upload/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' );
 	}
 }
 

+ 3 - 3
packages/ckeditor5-upload/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>]'
 		);

+ 1 - 1
packages/ckeditor5-upload/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>

+ 4 - 0
packages/ckeditor5-upload/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;