8
0
Просмотр исходного кода

CSS classes name refactoring in widgets.

Szymon Kupś 8 лет назад
Родитель
Сommit
bf17442537

+ 3 - 10
packages/ckeditor5-image/src/widget/utils.js

@@ -19,13 +19,6 @@ const labelSymbol = Symbol( 'label' );
  */
 export const WIDGET_CLASS_NAME = 'ck-widget';
 
-/**
- * CSS class added to each nested edtiable.
- *
- * @type {String}
- */
-export const NESTED_EDITABLE_CLASS_NAME = 'ck-nested-editable';
-
 /**
  * CSS class added to currently selected widget element.
  *
@@ -107,14 +100,14 @@ export function getLabel( element ) {
  */
 export function toWidgetEditable( elementName, viewDocument ) {
 	const editable = new ViewEditableElement( elementName, { contenteditable: true } );
-	editable.addClass( NESTED_EDITABLE_CLASS_NAME );
+	editable.addClass( 'ck-editable' );
 	editable.document = viewDocument;
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
-			editable.addClass( 'focused' );
+			editable.addClass( 'ck-editable_focused' );
 		} else {
-			editable.removeClass( 'focused' );
+			editable.removeClass( 'ck-editable_focused' );
 		}
 	} );
 

+ 9 - 9
packages/ckeditor5-image/tests/imagecaption/imagecaptionengine.js

@@ -101,7 +101,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-nested-editable" contenteditable="true">Foo bar baz.</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true">Foo bar baz.</figcaption>' +
 					'</figure>'
 				);
 			} );
@@ -214,7 +214,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar baz</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar baz</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -227,7 +227,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -248,7 +248,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -277,7 +277,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">[]</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">[]</figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -294,7 +294,7 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -310,11 +310,11 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true">foo bar</figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true">foo bar</figcaption>' +
 				'</figure>' +
 				'[<figure class="image ck-widget ck-widget_selected" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-nested-editable" contenteditable="true"></figcaption>' +
+					'<figcaption class="ck-editable" contenteditable="true"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -346,7 +346,7 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-nested-editable" contenteditable="true">{foo bar baz}</figcaption>' +
+						'<figcaption class="ck-editable" contenteditable="true">{foo bar baz}</figcaption>' +
 					'</figure>'
 				);
 			} );

+ 4 - 5
packages/ckeditor5-image/tests/widget/utils.js

@@ -11,8 +11,7 @@ import {
 	setLabel,
 	getLabel,
 	toWidgetEditable,
-	WIDGET_CLASS_NAME,
-	NESTED_EDITABLE_CLASS_NAME
+	WIDGET_CLASS_NAME
 } from '../../src/widget/utils';
 
 describe( 'widget utils', () => {
@@ -100,15 +99,15 @@ describe( 'widget utils', () => {
 		} );
 
 		it( 'should add proper class', () => {
-			expect( element.hasClass( NESTED_EDITABLE_CLASS_NAME ) ).to.be.true;
+			expect( element.hasClass( 'ck-editable' ) ).to.be.true;
 		} );
 
 		it( 'should add proper class when element is focused', () => {
 			element.isFocused = true;
-			expect( element.hasClass( 'focused' ) ).to.be.true;
+			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.true;
 
 			element.isFocused = false;
-			expect( element.hasClass( 'focused' ) ).to.be.false;
+			expect( element.hasClass( 'ck-editable_focused' ) ).to.be.false;
 		} );
 	} );
 } );

+ 1 - 1
packages/ckeditor5-image/theme/imagecaption/theme.scss

@@ -4,7 +4,7 @@
 @import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
 
 .ck-widget.image {
-	figcaption.ck-nested-editable {
+	figcaption.ck-editable {
 		background-color: ck-color( 'foreground' );
 		padding: 10px;
 		font-size: .8em;

+ 6 - 7
packages/ckeditor5-image/theme/widget/theme.scss

@@ -21,18 +21,17 @@
 		outline: 2px solid yellow;
 	}
 
-	.ck-nested-editable {
+	.ck-editable {
 		// The `:focus` styles is applied before `.focused` class inside editables.
 		// These styles show different border for a blink of an eye.
 		&:focus {
+			&.ck-editable_focused {
+				@include ck-focus-ring( 'outline' );
+				@include ck-box-shadow( $ck-inner-shadow );
+				background-color: ck-color( 'background' );;
+			}
 			outline: none;
 			box-shadow: none;
 		}
-
-		&.focused {
-			@include ck-focus-ring( 'outline' );
-			@include ck-box-shadow( $ck-inner-shadow );
-			background-color: ck-color( 'background' );;
-		}
 	}
 }