Przeglądaj źródła

Changed placeholder loader markup.

dkonopka 7 lat temu
rodzic
commit
e4b343c4da

+ 1 - 9
packages/ckeditor5-image/src/imageupload/imageuploadprogress.js

@@ -226,18 +226,10 @@ function _createProgressBar( writer ) {
 // @param {module:engine/view/writer~Writer} writer
 // @returns {module:engine/view/uielement~UIElement}
 function _createPlaceholder( writer ) {
-	const placeholder = writer.createUIElement( 'div', { class: 'ck-upload-placeholder' } );
+	const placeholder = writer.createUIElement( 'div', { class: 'ck-upload-placeholder-loader' } );
 
 	writer.setCustomProperty( placeholderSymbol, true, placeholder );
 
-	placeholder.render = function( domDocument ) {
-		const domElement = this.toDomElement( domDocument );
-
-		domElement.innerHTML = '<div class="ck-upload-placeholder_loader"></div>';
-
-		return domElement;
-	};
-
 	return placeholder;
 }
 

+ 8 - 17
packages/ckeditor5-image/theme/imageuploadloader.css

@@ -7,29 +7,20 @@
 	--ck-upload-placeholder-loader-size: 24px;
 }
 
-/* Hide image when image upload is in progress. */
-.ck .ck-image-upload-placeholder img {
-	display: none;
-}
-
-.ck .ck-upload-placeholder {
+.ck .ck-upload-placeholder-loader {
+	position: absolute;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	height: 250px;
 	width: 100%;
-	
-	& .ck-upload-placeholder_loader {
-		display: block;
+	height: 100%;
+	top: 0;
+	left: 0;
+
+	&::before {
+		content: '';
 		position: relative;
 		width: var(--ck-upload-placeholder-loader-size);
 		height: var(--ck-upload-placeholder-loader-size);
-
-		&::before {
-			content: '';
-			position: absolute;
-			width: inherit;
-			height: inherit;
-		}
 	}
 }