Kaynağa Gözat

Changed naming of element from `finish` to `complete-icon`.

Damian Konopka 7 yıl önce
ebeveyn
işleme
86c86d1b6e

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

@@ -207,7 +207,7 @@ function _hideProgressBar( viewFigure, writer ) {
 // @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-finish' } );
+	const completeIcon = new UIElement( 'div', { class: 'ck-image-upload-complete-icon' } );
 
 	writer.insert( ViewPosition.createAt( viewFigure, 'end' ), completeIcon );
 

+ 1 - 1
packages/ckeditor5-image/tests/imageupload/imageuploadprogress.js

@@ -190,7 +190,7 @@ describe( 'ImageUploadProgress', () => {
 				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img src="image.png"></img>' +
-						'<div class="ck-image-upload-finish"></div>' +
+						'<div class="ck-image-upload-complete-icon"></div>' +
 					'</figure>]<p>foo</p>'
 				);
 

+ 14 - 14
packages/ckeditor5-image/theme/imageuploadicon.css

@@ -4,23 +4,23 @@
  */
 
 :root {
-	--ck-upload-icon-size: 1.5em;
-	--ck-upload-icon-width: 2px;
+	--ck-image-upload-icon-size: 1.5em;
+	--ck-image-upload-icon-width: 2px;
 
-	--ck-color-upload-icon: hsl(0, 0%, 100%);
-	--ck-color-upload-icon-background: hsl(120, 100%, 27%);
+	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
+	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 }
 
-.ck-image-upload-finish {
+.ck-image-upload-complete-icon {
 	display: block;
 	position: absolute;
 	opacity: 0;
 	top: 10px;
 	right: 10px;
-	width: var(--ck-upload-icon-size);
-	height: var(--ck-upload-icon-size);
+	width: var(--ck-image-upload-icon-size);
+	height: var(--ck-image-upload-icon-size);
 	border-radius: 50%;
-	background: var(--ck-color-upload-icon-background);
+	background: var(--ck-color-image-upload-icon-background);
 	animation-name: ck-fade-in, ck-fade-out;
 	animation-fill-mode: forwards, forwards;
 	animation-duration: 500ms, 500ms;
@@ -38,12 +38,12 @@
 		top: 50%;
 
 		/* Because of border transformation we need to "hard code" left position. */
-		left: calc( var(--ck-upload-icon-size) / 3.5 );
+		left: calc( var(--ck-image-upload-icon-size) / 3.5 );
 
 		transform: scaleX(-1) rotate(135deg);
 		transform-origin: left top;
-		border-top: var(--ck-upload-icon-width) solid var(--ck-color-upload-icon);
-		border-right: var(--ck-upload-icon-width) solid var(--ck-color-upload-icon);
+		border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+		border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
 		animation-name: ck-check-icon;
 		animation-duration: 500ms;
 		animation-delay: 500ms;
@@ -60,14 +60,14 @@
 	}
 
 	33.3333% {
-		width: calc( var(--ck-upload-icon-size) / 5 );
+		width: calc( var(--ck-image-upload-icon-size) / 5 );
 		height: 0;
 	}
 
 	100% {
 		opacity: 1;
-		height: calc( var(--ck-upload-icon-size) / 3 );
-		width: calc( var(--ck-upload-icon-size) / 5 );
+		height: calc( var(--ck-image-upload-icon-size) / 3 );
+		width: calc( var(--ck-image-upload-icon-size) / 5 );
 	}
 }