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

Internal: improved resizer visuals.

Marek Lewandowski 6 лет назад
Родитель
Сommit
1b7aeebf2e

+ 5 - 13
packages/ckeditor5-widget/src/resizecontext.js

@@ -1,8 +1,7 @@
-import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import dragHandlerIcon from '../theme/icons/drag-handler.svg';
 import ResizerCentral from './resizercentral';
 import { getAbsoluteBoundaryPoint } from './utils';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
@@ -217,19 +216,12 @@ export default class ResizeContext {
 		const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
 		for ( const currentPosition of resizerPositions ) {
-			// Use the IconView from the UI library.
-			const icon = new IconView();
-			icon.set( 'content', dragHandlerIcon );
-			icon.extendTemplate( {
+			domElement.appendChild( ( new Template( {
+				tag: 'div',
 				attributes: {
-					'class': `ck-widget__resizer ${ this._getResizerClass( currentPosition ) }`
+					class: `ck-widget__resizer ${ this._getResizerClass( currentPosition ) }`
 				}
-			} );
-
-			// Make sure icon#element is rendered before passing to appendChild().
-			icon.render();
-
-			domElement.appendChild( icon.element );
+			} ).render() ) );
 		}
 	}
 

+ 1 - 1
packages/ckeditor5-widget/src/widgetresizer.js

@@ -70,7 +70,7 @@ export default class WidgetResizer extends Plugin {
 		this.listenTo( viewDocument, 'mousedown', ( event, domEventData ) => {
 			const target = domEventData.domTarget;
 
-			const resizeHandler = isResizeHandler( target ) || getAncestors( target ).filter( isResizeHandler )[ 0 ];
+			const resizeHandler = isResizeHandler( target ) ? target : getAncestors( target ).filter( isResizeHandler )[ 0 ];
 
 			if ( resizeHandler ) {
 				isActive = true;

+ 15 - 9
packages/ckeditor5-widget/theme/widget.css

@@ -22,6 +22,10 @@
 		top: 0;
 		bottom: 0;
 
+		--ck-resizer-size: 14px;
+		--ck-resizer-border-width: 2px;
+		--ck-resizer-offset: -2px;
+
 		& .ck-widget__resizer-shadow {
 			display: none;
 			position: absolute;
@@ -49,24 +53,26 @@
 		position: absolute;
 		/* Resizers are the only UI elements that should interfere with pointer device */
 		pointer-events: all;
-		/* background: red; */
+		width: var( --ck-resizer-size );
+		height: var( --ck-resizer-size );
 		background: var( --ck-color-focus-border );
+		outline: var( --ck-resizer-border-width ) solid white;
 
 		&.ck-widget__resizer-top-left {
-			top: -5px;
-			left: -5px;
+			top: var( --ck-resizer-offset );
+			left: var( --ck-resizer-offset );
 		}
 		&.ck-widget__resizer-top-right {
-			top: -5px;
-			right: -5px;
+			top: var( --ck-resizer-offset );
+			right: var( --ck-resizer-offset );
 		}
 		&.ck-widget__resizer-bottom-right {
-			bottom: -5px;
-			right: -5px;
+			bottom: var( --ck-resizer-offset );
+			right: var( --ck-resizer-offset );
 		}
 		&.ck-widget__resizer-bottom-left {
-			bottom: -5px;
-			left: -5px;
+			bottom: var( --ck-resizer-offset );
+			left: var( --ck-resizer-offset );
 		}
 
 		&.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right {