Sfoglia il codice sorgente

Implemented BalloonPanelView#withArrow.

Aleksander Nowodzinski 8 anni fa
parent
commit
8eda2d0869

+ 16 - 6
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -74,6 +74,15 @@ export default class BalloonPanelView extends View {
 		 */
 		this.set( 'isVisible', false );
 
+		/**
+		 * Controls whether the balloon panel has an arrow.
+		 *
+		 * @observable
+		 * @default true
+		 * @member {Boolean} #withArrow
+		 */
+		this.set( 'withArrow', true );
+
 		/**
 		 * Max width of the balloon panel, as in CSS.
 		 *
@@ -94,8 +103,9 @@ export default class BalloonPanelView extends View {
 			attributes: {
 				class: [
 					'ck-balloon-panel',
-					bind.to( 'position', ( value ) => `ck-balloon-panel_arrow_${ value }` ),
-					bind.if( 'isVisible', 'ck-balloon-panel_visible' )
+					bind.to( 'position', ( value ) => `ck-balloon-panel_${ value }` ),
+					bind.if( 'isVisible', 'ck-balloon-panel_visible' ),
+					bind.if( 'withArrow', 'ck-balloon-panel_arrow' )
 				],
 
 				style: {
@@ -347,24 +357,24 @@ BalloonPanelView.defaultPositions = {
 	se: ( targetRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'se'
+		name: 'arrow_se'
 	} ),
 
 	sw: ( targetRect, balloonRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'sw'
+		name: 'arrow_sw'
 	} ),
 
 	ne: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'ne'
+		name: 'arrow_ne'
 	} ),
 
 	nw: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'nw'
+		name: 'arrow_nw'
 	} )
 };

+ 27 - 25
packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss

@@ -9,41 +9,43 @@
 
 	z-index: ck-z( 'modal' );
 
-	&:before,
-	&:after {
-		content: "";
-		position: absolute;
-	}
-
-	&:before {
-		z-index: ck-z();
-	}
-
-	&:after {
-		z-index: ck-z( 'default', 1 );
-	}
+	&.ck-balloon-panel_arrow {
+		&:before,
+		&:after {
+			content: "";
+			position: absolute;
+		}
 
-	&_arrow_s,
-	&_arrow_se,
-	&_arrow_sw {
 		&:before {
-			z-index: ck-z( 'default' );
+			z-index: ck-z();
 		}
 
 		&:after {
 			z-index: ck-z( 'default', 1 );
 		}
-	}
 
-	&_arrow_n,
-	&_arrow_ne,
-	&_arrow_nw {
-		&:before {
-			z-index: ck-z( 'default' );
+		&_s,
+		&_se,
+		&_sw {
+			&:before {
+				z-index: ck-z( 'default' );
+			}
+
+			&:after {
+				z-index: ck-z( 'default', 1 );
+			}
 		}
 
-		&:after {
-			z-index: ck-z( 'default', 1 );
+		&_n,
+		&_ne,
+		&_nw {
+			&:before {
+				z-index: ck-z( 'default' );
+			}
+
+			&:after {
+				z-index: ck-z( 'default', 1 );
+			}
 		}
 	}