浏览代码

Implemented south-west position in TooltipView.

Aleksander Nowodzinski 5 年之前
父节点
当前提交
583bd780ea

+ 31 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css

@@ -49,7 +49,7 @@
 	}
 
 	/**
-	 * A class once applied displays the tooltip south of the element.
+	 * A class that displays the tooltip south of the element.
 	 *
 	 *       [element]
 	 *           ^
@@ -57,12 +57,14 @@
 	 *     |  Tooltip  |
 	 *     +-----------+
 	 */
-	&.ck-tooltip_s {
+	&.ck-tooltip_s,
+	&.ck-tooltip_sw {
 		bottom: calc(-1 * var(--ck-tooltip-arrow-size));
 		transform: translateY( 100% );
 
 		& .ck-tooltip__text::after {
-			top: calc(-1 * var(--ck-tooltip-arrow-size));
+			/* 1px addresses gliches in rendering causing gap between the triangle and the text */
+			top: calc(-1 * var(--ck-tooltip-arrow-size) + 1px);
 			transform: translateX( -50% );
 			border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
 			border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
@@ -70,7 +72,32 @@
 	}
 
 	/**
-	 * A class once applied displays the tooltip north of the element.
+	 * A class that displays the tooltip south-west of the element.
+	 *
+	 *        [element]
+	 *            ^
+	 *  +-----------+
+	 *  |  Tooltip  |
+	 *  +-----------+
+	 */
+
+	&.ck-tooltip_sw {
+		right: 50%;
+		left: auto;
+
+		& .ck-tooltip__text {
+			left: auto;
+			right: calc( -2 * var(--ck-tooltip-arrow-size));
+		}
+
+		& .ck-tooltip__text::after {
+			left: auto;
+			right: 0;
+		}
+	}
+
+	/**
+	 * A class that displays the tooltip north of the element.
 	 *
 	 *     +-----------+
 	 *     |  Tooltip  |

+ 8 - 2
packages/ckeditor5-ui/src/tooltip/tooltipview.js

@@ -32,7 +32,7 @@ export default class TooltipView extends View {
 		this.set( 'text', '' );
 
 		/**
-		 * The position of the tooltip (south or north).
+		 * The position of the tooltip (south, south-west, or north).
 		 *
 		 *		+-----------+
 		 *		|   north   |
@@ -46,9 +46,15 @@ export default class TooltipView extends View {
 		 *		|   south   |
 		 *		+-----------+
 		 *
+		 *		         [element]
+		 *		             ^
+		 *		+--------------+
+		 *		|  south west  |
+		 *		+--------------+
+		 *
 		 * @observable
 		 * @default 's'
-		 * @member {'s'|'n'} #position
+		 * @member {'s'|'sw'|'n'} #position
 		 */
 		this.set( 'position', 's' );