From a81ba47465ba5409a84adce98a5198d90ed56131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Tue, 13 Apr 2021 09:01:19 +0200 Subject: [PATCH 1/2] Hide selection handle in nested widget if outer widget is hovered or selected --- .../ckeditor5-table/tests/manual/table.md | 2 ++ .../theme/ckeditor5-widget/widget.css | 8 +++--- packages/ckeditor5-widget/tests/widget.js | 27 ++++++++++++++++++- packages/ckeditor5-widget/theme/widget.css | 12 ++++----- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/ckeditor5-table/tests/manual/table.md b/packages/ckeditor5-table/tests/manual/table.md index 09a5edb1e03..fe2ed7f00d1 100644 --- a/packages/ckeditor5-table/tests/manual/table.md +++ b/packages/ckeditor5-table/tests/manual/table.md @@ -75,3 +75,5 @@ Nested tables: 4. Verify that it is possible to copy & paste nested table inside other table cell. * Copying & pasting a table only (in the clipboard there is only a table with no siblings) should merge content of this table with the nearest ancestor table. In other words: pasted table is not inserted as a table (as a widget) in table cell, but it is merged with the first found table ancestor. * Copying & pasting a table with any sibling (e.g. a paragraph) should paste exactly what has been copied. +5. Hover the outer table with the mouse cursor. Verify that the yellow border and selection handle on the inner table is not visible (they should be visible only for the hovered table). +6. Select the outer table. Verify that the blue selection handle on the inner table is not visible (it should be visible only for the selected table). diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css index de1a25b1c15..d3024e267a3 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css @@ -94,16 +94,16 @@ } } - /* Show the selection handler on mouse hover over the widget. */ - &:hover .ck-widget__selection-handle { + /* Show the selection handler on mouse hover over the widget, but not for nested widgets. */ + &:hover > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-widget-hover-border); } - /* Show the selection handler when the widget is selected. */ + /* Show the selection handler when the widget is selected, but not for nested widgets. */ &.ck-widget_selected, &.ck-widget_selected:hover { - & .ck-widget__selection-handle { + & > .ck-widget__selection-handle { opacity: 1; background-color: var(--ck-color-focus-border); diff --git a/packages/ckeditor5-widget/tests/widget.js b/packages/ckeditor5-widget/tests/widget.js index c5dd70576e7..4ba2819ee09 100644 --- a/packages/ckeditor5-widget/tests/widget.js +++ b/packages/ckeditor5-widget/tests/widget.js @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* global document */ +/* global document, window */ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; @@ -1538,5 +1538,30 @@ describe( 'Widget', () => { '' ); } ); + + it( 'should show the selection handle only for selected widget if widgets are nested', () => { + setModelData( model, '' ); + + // The top-outer widget. + const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 ); + + const target = view.domConverter.mapViewToDom( viewWidgetSelectionHandle ); + + const domEventDataMock = new DomEventData( view, { + target, + preventDefault: sinon.spy() + } ); + + viewDocument.fire( 'mousedown', domEventDataMock ); + + // Get all selection handles for all widgets nested inside the top-most one. + const selectionHandles = target.querySelectorAll( ':scope .ck-widget .ck-widget__selection-handle' ); + + for ( const selectionHandle of selectionHandles ) { + const opacity = window.getComputedStyle( selectionHandle ).getPropertyValue( 'opacity' ); + + expect( opacity ).to.equal( '0' ); + } + } ); } ); } ); diff --git a/packages/ckeditor5-widget/theme/widget.css b/packages/ckeditor5-widget/theme/widget.css index ec001d6f09f..fe0251d86df 100644 --- a/packages/ckeditor5-widget/theme/widget.css +++ b/packages/ckeditor5-widget/theme/widget.css @@ -31,15 +31,13 @@ } } - /* Show the selection handle on mouse hover over the widget. */ - &:hover { - & .ck-widget__selection-handle { - visibility: visible; - } + /* Show the selection handle on mouse hover over the widget, but not for nested widgets. */ + &:hover > .ck-widget__selection-handle { + visibility: visible; } - /* Show the selection handle when the widget is selected. */ - &.ck-widget_selected .ck-widget__selection-handle { + /* Show the selection handle when the widget is selected, but not for nested widgets. */ + &.ck-widget_selected > .ck-widget__selection-handle { visibility: visible; } } From 1687576f7d0e8377f30f93184239bab6f3c44396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Tue, 13 Apr 2021 09:52:49 +0200 Subject: [PATCH 2/2] Skip styling selection handle in blurred editor for nested widgets --- .../ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css index d3024e267a3..747d5d14938 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css +++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css @@ -153,8 +153,8 @@ outline-color: var(--ck-color-widget-blurred-border); &.ck-widget_with-selection-handle { - & .ck-widget__selection-handle, - & .ck-widget__selection-handle:hover { + & > .ck-widget__selection-handle, + & > .ck-widget__selection-handle:hover { background: var(--ck-color-widget-blurred-border); } }