Răsfoiți Sursa

Fixed classes naming.

Piotrek Koszuliński 6 ani în urmă
părinte
comite
d2767d24c6

+ 9 - 9
packages/ckeditor5-widget/src/widgetresizer/resizer.js

@@ -67,15 +67,15 @@ export default class Resizer {
 	 */
 	attach() {
 		const that = this;
-		const viewElement = this._options.viewElement;
+		const widgetElement = this._options.viewElement;
 		const writer = this._options.downcastWriter;
 
 		this._viewResizerWrapper = writer.createUIElement( 'div', {
-			class: 'ck ck-widget__resizer-wrapper'
+			class: 'ck ck-reset_all ck-widget__resizer'
 		}, function( domDocument ) {
 			const domElement = this.toDomElement( domDocument );
 
-			that._appendResizers( domElement );
+			that._appendHandles( domElement );
 			that._appendSizeUi( domElement );
 
 			that._domResizerWrapper = domElement;
@@ -84,8 +84,8 @@ export default class Resizer {
 		} );
 
 		// Append resizer wrapper to the widget's wrapper.
-		writer.insert( writer.createPositionAt( viewElement, 'end' ), this._viewResizerWrapper );
-		writer.addClass( [ 'ck-widget_with-resizer' ], viewElement );
+		writer.insert( writer.createPositionAt( widgetElement, 'end' ), this._viewResizerWrapper );
+		writer.addClass( 'ck-widget_with-resizer', widgetElement );
 	}
 
 	begin( domResizeHandle ) {
@@ -171,7 +171,7 @@ export default class Resizer {
 	}
 
 	static isResizeHandle( domElement ) {
-		return domElement.classList.contains( 'ck-widget__resizer' );
+		return domElement.classList.contains( 'ck-widget__resizer__handle' );
 	}
 
 	/**
@@ -278,14 +278,14 @@ export default class Resizer {
 	 * @private
 	 * @param {HTMLElement} domElement The resizer wrapper.
 	 */
-	_appendResizers( domElement ) {
+	_appendHandles( domElement ) {
 		const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
 		for ( const currentPosition of resizerPositions ) {
 			domElement.appendChild( ( new Template( {
 				tag: 'div',
 				attributes: {
-					class: `ck-widget__resizer ${ getResizerClass( currentPosition ) }`
+					class: `ck-widget__resizer__handle ${ getResizerClass( currentPosition ) }`
 				}
 			} ).render() ) );
 		}
@@ -369,7 +369,7 @@ class SizeView extends View {
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
 // @returns {String} A prefixed HTML class name for the resizer element
 function getResizerClass( resizerPosition ) {
-	return `ck-widget__resizer-${ resizerPosition }`;
+	return `ck-widget__resizer__handle-${ resizerPosition }`;
 }
 
 function extractCoordinates( event ) {

+ 3 - 3
packages/ckeditor5-widget/src/widgetresizer/resizerstate.js

@@ -153,8 +153,8 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
  * @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
  * @returns {String} A prefixed HTML class name for the resizer element
  */
-function getResizerClass( resizerPosition ) {
-	return `ck-widget__resizer-${ resizerPosition }`;
+function getResizerHandleClass( resizerPosition ) {
+	return `ck-widget__resizer__handle-${ resizerPosition }`;
 }
 
 /**
@@ -168,7 +168,7 @@ function getHandlePosition( domHandle ) {
 	const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
 	for ( const position of resizerPositions ) {
-		if ( domHandle.classList.contains( getResizerClass( position ) ) ) {
+		if ( domHandle.classList.contains( getResizerHandleClass( position ) ) ) {
 			return position;
 		}
 	}

+ 16 - 16
packages/ckeditor5-widget/theme/widget.css

@@ -18,15 +18,15 @@
 }
 
 .ck .ck-widget_with-resizer {
-	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 }
 
-.ck .ck-widget__resizer-wrapper {
+.ck .ck-widget__resizer {
 	display: none;
 	position: absolute;
 
-	/* The wrapper itself should not interfere with pointer device, only the handlers. */
+	/* The wrapper itself should not interfere with pointer device, only the handles. */
 	pointer-events: none;
 
 	left: 0;
@@ -36,12 +36,12 @@
 }
 
 .ck-focused .ck-widget_with-resizer.ck-widget_selected {
-	& > .ck-widget__resizer-wrapper {
+	& > .ck-widget__resizer {
 		display: block;
 	}
 }
 
-.ck .ck-widget__resizer {
+.ck .ck-widget__resizer__handle {
 	position: absolute;
 
 	/* Resizers are the only UI elements that should interfere with pointer device. */
@@ -53,43 +53,43 @@
 	border: var(--ck-resizer-border-width) solid #fff;
 	border-radius: var(--ck-resizer-border-radius);
 
-	&.ck-widget__resizer-top-left {
+	&.ck-widget__resizer__handle-top-left {
 		top: var( --ck-resizer-offset );
 		left: var( --ck-resizer-offset );
 		cursor: nwse-resize;
 	}
 
-	&.ck-widget__resizer-top-right {
+	&.ck-widget__resizer__handle-top-right {
 		top: var( --ck-resizer-offset );
 		right: var( --ck-resizer-offset );
 		cursor: nesw-resize;
 	}
 
-	&.ck-widget__resizer-bottom-right {
+	&.ck-widget__resizer__handle-bottom-right {
 		bottom: var( --ck-resizer-offset );
 		right: var( --ck-resizer-offset );
 		cursor: nwse-resize;
 	}
 
-	&.ck-widget__resizer-bottom-left {
+	&.ck-widget__resizer__handle-bottom-left {
 		bottom: var( --ck-resizer-offset );
 		left: var( --ck-resizer-offset );
 		cursor: nesw-resize;
 	}
 }
 
-.ck .ck-widget.ck-widget_with-selection-handler {
-	/* Make the widget wrapper a relative positioning container for the drag handler. */
+.ck .ck-widget.ck-widget_with-selection-handle {
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 
-	/* Show the selection handler on mouse hover over the widget. */
+	/* Show the selection handle on mouse hover over the widget. */
 	&:hover {
-		& .ck-widget__selection-handler {
+		& .ck-widget__selection-handle {
 			visibility: visible;
 		}
 	}
 
-	& .ck-widget__selection-handler {
+	& .ck-widget__selection-handle {
 		position: absolute;
 
 		& .ck-icon {
@@ -99,8 +99,8 @@
 		}
 	}
 
-	/* Show the selection handler when the widget is selected. */
-	&.ck-widget_selected .ck-widget__selection-handler {
+	/* Show the selection handle when the widget is selected. */
+	&.ck-widget_selected .ck-widget__selection-handle {
 		visibility: visible;
 	}
 }