Sfoglia il codice sorgente

Add widget selection handle to the side card.

Maciej Gołaszewski 5 anni fa
parent
commit
64f56c67ab

+ 7 - 4
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.html

@@ -1,7 +1,5 @@
 <style>
 	.ck-content .side-card {
-		background: hsl(0, 0%, 45%);
-		border: 1px solid hsl(0, 0%, 80%);
 		padding: 0.5em;
 		border-radius: 8px;
 		width: 300px;
@@ -10,6 +8,11 @@
 		float: right;
 	}
 
+	.ck-content .side-card.ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
+		transform: translateY(calc(-100% - 7px));
+		left: calc(0px - var(--ck-widget-outline-thickness) - 1px)
+	}
+
 	.ck-content .side-card-title {
 		margin-bottom: 0.5em;
 		font-size: 1.2em;
@@ -20,8 +23,8 @@
 	}
 
 	.ck-content .side-card-alternate {
-		background: hsl(48, 100%, 87%);
-		border: 1px solid hsl(47, 100%, 62%);
+		background: hsl(48, 100%, 93%);
+		border: 1px solid hsl(47, 100%, 75%);
 	}
 
 	.ck-content .side-card-alternate .side-card-title {

+ 1 - 1
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.js

@@ -173,7 +173,7 @@ const downcastSideCard = ( editor, { asWidget } ) => {
 
 			writer.insert( writer.createPositionAt( sideCardView, 'end' ), actionsView );
 
-			toWidget( sideCardView, writer, { widgetLabel: 'Side card' } );
+			toWidget( sideCardView, writer, { widgetLabel: 'Side card', hasSelectionHandle: true } );
 		}
 
 		return sideCardView;

+ 1 - 1
packages/ckeditor5-engine/docs/framework/guides/deep-dive/element-reconversion.md

@@ -265,7 +265,7 @@ const downcastSideCard = ( editor, { asWidget } ) => {
 
 			writer.insert( writer.createPositionAt( sideCardView, 'end' ), actionsView );
 
-			toWidget( sideCardView, writer, { widgetLabel: 'Side card' } );
+			toWidget( sideCardView, writer, { widgetLabel: 'Side card', hasSelectionHandle: true  } );
 		}
 
 		return sideCardView;