Răsfoiți Sursa

Renamed .ck-widget__selectable to .ck-widget_selectable to match BEM standards. Moved widget selection handler styles to ckeditor5-theme-lark. Implemented a 2-state handler icon.

Aleksander Nowodzinski 7 ani în urmă
părinte
comite
c23a0ad1e3

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

@@ -202,5 +202,5 @@ function addSelectionHandler( editable, writer ) {
 
 
 	// Append the selection handler into the widget wrapper.
 	// Append the selection handler into the widget wrapper.
 	writer.insert( Position.createAt( editable ), selectionHandler );
 	writer.insert( Position.createAt( editable ), selectionHandler );
-	writer.addClass( [ 'ck-widget__selectable' ], editable );
+	writer.addClass( [ 'ck-widget_selectable' ], editable );
 }
 }

+ 1 - 1
packages/ckeditor5-widget/tests/utils.js

@@ -94,7 +94,7 @@ describe( 'widget utils', () => {
 		it( 'should add element a selection handler to widget if addSelectionHandler=true is passed', () => {
 		it( 'should add element a selection handler to widget if addSelectionHandler=true is passed', () => {
 			toWidget( element, writer, { addSelectionHandler: true } );
 			toWidget( element, writer, { addSelectionHandler: true } );
 
 
-			expect( element.hasClass( 'ck-widget__selectable' ) ).to.be.true;
+			expect( element.hasClass( 'ck-widget_selectable' ) ).to.be.true;
 
 
 			const selectionHandler = element.getChild( 0 );
 			const selectionHandler = element.getChild( 0 );
 			expect( selectionHandler ).to.be.instanceof( UIElement );
 			expect( selectionHandler ).to.be.instanceof( UIElement );

+ 1 - 1
packages/ckeditor5-widget/theme/icons/drag-handler.svg

@@ -1 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3v1H4v3H3V4a1 1 0 0 1 1-1h3zm6 0h3a1 1 0 0 1 1 1v3h-1V4h-3V3zM7 17H4a1 1 0 0 1-1-1v-3h1v3h3v1zm6 0v-1h3v-3h1v3a1 1 0 0 1-1 1h-3z" fill="#333" fill-rule="evenodd"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="evenodd"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14v14H1z"/></g></g></svg>

+ 29 - 5
packages/ckeditor5-widget/theme/widget.css

@@ -3,8 +3,32 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
+.ck .ck-widget.ck-widget_selectable {
+	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	position: relative;
+
+	& .ck-selection-handler {
+		visibility: hidden;
+		position: absolute;
+
+		& .ck-icon {
+			/* Make sure the icon in not a subject to fon-size/line-height to avoid
+			unnecessary spacing around it. */
+			display: block;
+		}
+	}
+
+	/* Show the selection handler on mouse hover over the widget. */
+	&:hover {
+		& .ck-selection-handler {
+			visibility: visible;
+		}
+	}
+
+	/* Show the selection handler when the widget is selected. */
+	&.ck-widget_selected {
+		& .ck-selection-handler {
+			visibility: visible;
+		}
+	}
+}