Procházet zdrojové kódy

Added section about fake panels to manual test.

Oskar Wróbel před 6 roky
rodič
revize
731ea81b58

+ 17 - 3
packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.html

@@ -4,7 +4,7 @@
 	<p>Line of text, line of text, line of text, line of text.</p>
 	<p>Line of text, line of text, line of text, line of text.</p>
 	<p>Line of text, line of text, line of text, line of text.</p>
-	<p>Line of text, line of text, line of text, line of text.</p>
+	<p>Line of text, line of [select] text, line of text, line of text.</p>
 	<p>Line of text, line of text, line of text, line of text.</p>
 	<p>Line of text, line of text, line of text, line of text.</p>
 	<p>Line of text, line of text, line of text, line of text.</p>
@@ -21,11 +21,25 @@
 		max-width: 70%;
 	}
 
-	.highlight {
-		background: yellow;
+	.highlight.yellow {
+		background: hsla(55, 100%, 50%, 0.75);
+	}
+
+	.highlight.blue {
+		background: hsla(249, 100%, 50%, 0.75);
+	}
+
+	.highlight.pink {
+		background: hsla(313, 100%, 50%, 0.75);
+	}
+
+	.highlight.green {
+		background: hsla(114, 100%, 50%, 0.75);
 	}
 
 	.ck p.custom-view {
+		width: 300px;
+		text-align: center;
 		font-size: 14px;
 		padding: 10px 10px 9px;
 	}

+ 14 - 9
packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.js

@@ -25,8 +25,10 @@ class CustomStackHighlight {
 	init() {
 		this.editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
 			model: 'highlight',
-			view: () => {
-				return { classes: 'highlight' };
+			view: data => {
+				const color = data.markerName.split( ':' )[ 2 ];
+
+				return { classes: 'highlight ' + color };
 			}
 		} );
 
@@ -51,7 +53,7 @@ class CustomStackHighlight {
 
 		this.editor.plugins.get( ContextualBalloon ).add( {
 			view,
-			stackId: 'custom',
+			stackId: 'custom-' + marker.name.split( ':' )[ 1 ],
 			position: {
 				target: this._getMarkerDomElement( marker )
 			}
@@ -65,9 +67,9 @@ class CustomStackHighlight {
 
 	_getMarkerDomElement( marker ) {
 		const editing = this.editor.editing;
-		const viewElement = Array.from( editing.mapper.markerNameToElements( marker.name ).values() )[ 0 ];
+		const viewRange = editing.mapper.toViewRange( marker.getRange() );
 
-		return editing.view.domConverter.mapViewToDom( viewElement );
+		return editing.view.domConverter.viewRangeToDom( viewRange );
 	}
 }
 
@@ -84,11 +86,14 @@ ClassicEditor
 			const root = editor.model.document.getRoot();
 
 			[
-				{ id: 1, start: [ 1, 5 ], end: [ 1, 26 ] },
-				{ id: 2, start: [ 5, 5 ], end: [ 5, 26 ] },
-				{ id: 3, start: [ 10, 5 ], end: [ 10, 26 ] }
+				{ id: 1, start: [ 1, 5 ], end: [ 1, 26 ], color: 'yellow' },
+				{ id: 2, start: [ 1, 2 ], end: [ 1, 33 ], color: 'green' },
+				{ id: 3, start: [ 5, 20 ], end: [ 5, 35 ], color: 'blue' },
+				{ id: 4, start: [ 5, 15 ], end: [ 5, 40 ], color: 'pink' },
+				{ id: 5, start: [ 5, 10 ], end: [ 5, 45 ], color: 'yellow' },
+				{ id: 6, start: [ 5, 5 ], end: [ 5, 50 ], color: 'green' },
 			].forEach( data => {
-				writer.addMarker( `highlight:${ data.id }`, {
+				writer.addMarker( `highlight:${ data.id }:${ data.color }`, {
 					range: writer.createRange(
 						writer.createPositionFromPath( root, data.start ),
 						writer.createPositionFromPath( root, data.end )

+ 9 - 1
packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.md

@@ -8,4 +8,12 @@
 ## Multiple stacks
 
 1. Select some highlighted text - "View in separate stack." should show up.
-2. Switch stacks by clicking navigation buttons - you should switch between toolbar and custom view.
+2. Switch stacks by clicking navigation buttons. You should switch between toolbar and custom views. Toolbar view should be displayed without information about number of stacks (only left and right arrows).
+
+## Fake panels - min
+
+1. Put the selection before the highlight, start moving selection by right arrow. You should see additional layer under the balloon only when at least 2 stacks are added to the balloon.
+
+## Fake panels - max
+
+1. Select text `[select]` from the lower highlight. You should see `1 of 5` status of pagination but only 3 additional layers under the balloon should be visible.