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

Integrated WidgetTypeAround feature with the widget resize UI.

Aleksander Nowodzinski 5 лет назад
Родитель
Сommit
09b57f856c

+ 9 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -167,6 +167,15 @@
 		&.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle {
 		&.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle {
 			opacity: 0
 			opacity: 0
 		}
 		}
+
+		/*
+		 * Fake horizontal caret integration with the resize UI. When the caret is visible, simply
+		 * hide the resize UI because it creates too much noise. It can be visible when the user
+		 * hovers the widget, though.
+		 */
+		&.ck-widget_selected.ck-widget_with-resizer:not(:hover) > .ck-widget__resizer {
+			opacity: 0
+		}
 	}
 	}
 }
 }
 
 

+ 10 - 1
packages/ckeditor5-widget/tests/manual/type-around.js

@@ -11,6 +11,7 @@ import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalli
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
 import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
 import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
 import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
 import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
@@ -98,7 +99,15 @@ document.querySelector( '#toggleReadOnly' ).addEventListener( 'click', () => {
 
 
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, HorizontalLine, InlineWidget, MediaEmbed, TableProperties, TableCellProperties ],
+		plugins: [
+			ArticlePluginSet,
+			HorizontalLine,
+			InlineWidget,
+			MediaEmbed,
+			TableProperties,
+			TableCellProperties,
+			ImageResize
+		],
 		toolbar: [
 		toolbar: [
 			'heading',
 			'heading',
 			'|',
 			'|',