Merge pull request #205 from ckeditor/t/204

Feature: Added upload complete icon. Closes #204.

src/imageupload/imageuploadprogress.js

@@ -7,13 +7,17 @@
  * @module image/imageupload/imageuploadprogress
  */
 
+/* globals setTimeout */
+
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
+import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 
 import '../../theme/imageuploadprogress.css';
+import '../../theme/imageuploadicon.css';
 
 /**
  * The image upload progress plugin.
@@ -100,6 +104,10 @@ export default class ImageUploadProgress extends Plugin {
 			return;
 		}
 
+		if ( status == 'complete' && fileRepository.loaders.get( uploadId ) ) {
+			_showCompleteIcon( viewFigure, viewWriter, editor.editing.view );
+		}
+
 		// Clean up.
 		_hideProgressBar( viewFigure, viewWriter );
 		_hidePlaceholder( viewFigure, viewWriter );
@@ -193,6 +201,21 @@ function _hideProgressBar( viewFigure, writer ) {
 	}
 }
 
+// Shows complete icon and hides after a certain amount of time.
+//
+// @param {module:engine/view/containerelement~ContainerElement} viewFigure
+// @param {module:engine/view/writer~Writer} writer
+// @param {module:engine/view/view~View} view
+function _showCompleteIcon( viewFigure, writer, view ) {
+	const completeIcon = new UIElement( 'div', { class: 'ck-image-upload-complete-icon' } );
+
+	writer.insert( ViewPosition.createAt( viewFigure, 'end' ), completeIcon );
+
+	setTimeout( () => {
+		view.change( writer => writer.remove( ViewRange.createOn( completeIcon ) ) );
+	}, 3000 );
+}
+
 // Create progress bar element using {@link module:engine/view/uielement~UIElement}.
 //
 // @private

tests/imageupload/imageuploadprogress.js

@@ -179,12 +179,23 @@ describe( 'ImageUploadProgress', () => {
 		nativeReaderMock.mockSuccess( base64Sample );
 	} );
 
-	it( 'should convert image\'s "complete" uploadStatus attribute', done => {
+	it( 'should convert image\'s "complete" uploadStatus attribute and display temporary icon', done => {
+		const clock = testUtils.sinon.useFakeTimers();
+
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
+				expect( getViewData( view ) ).to.equal(
+					'[<figure class="ck-widget image" contenteditable="false">' +
+						'<img src="image.png"></img>' +
+						'<div class="ck-image-upload-complete-icon"></div>' +
+					'</figure>]<p>foo</p>'
+				);
+
+				clock.tick( 3000 );
+
 				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img src="image.png"></img>' +
@@ -227,7 +238,7 @@ describe( 'ImageUploadProgress', () => {
 		);
 	} );
 
-	it( 'should not show progress bar if there is no loader with given uploadId', () => {
+	it( 'should not show progress bar and complete icon if there is no loader with given uploadId', () => {
 		setModelData( model, '<image uploadId="123" uploadStatus="reading"></image>' );
 
 		const image = document.getRoot().getChild( 0 );

theme/imageuploadicon.css

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-image-upload-complete-icon {
+	display: block;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	border-radius: 50%;
+
+	&::after {
+		content: "";
+		position: absolute;
+	}
+}