ソースを参照

New placeholder image added. Adding CSS class when placeholder is visible.

Szymon Kupś 8 年 前
コミット
1d9539add4

+ 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-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' );
 	}
 }
 

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

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