浏览代码

Merge pull request #104 from ckeditor/t/103

Other: Refactored tooltip styles to allow tooltips which are no longer pseudo-elements. Closes #103.
Oskar Wróbel 8 年之前
父节点
当前提交
af5e8ce8d2

+ 2 - 0
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -66,6 +66,8 @@
 		</div>
 	</div>
 
+	<h3>Button: Tooltip</h3>
+	<div id="button-tooltip" class="ck-reset_all"></div>
 <hr/>
 
 <h2>Dropdown</h2>

+ 20 - 1
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -61,6 +61,7 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive1': '#button-responsive-1',
 	'buttonResponsive2': '#button-responsive-2',
 	'buttonResponsive3': '#button-responsive-3',
+	'buttonTooltip': '#button-tooltip',
 
 	dropdown: '#dropdown',
 
@@ -193,6 +194,22 @@ function renderButton() {
 
 		ui[ `buttonResponsive${ i }` ].add( notextButton );
 	}
+
+	// --- Tooltip ------------------------------------------------------------
+
+	ui.buttonTooltip.add( button( {
+		label: 'This button has a tooltip (south)',
+		withText: true,
+		tooltip: 'The content of the tooltip',
+	} ) );
+
+	ui.buttonTooltip.add( button( {
+		label: 'This one too – north',
+		withText: true,
+		keystroke: 'Ctrl+N',
+		tooltip: true,
+		tooltipPosition: 'n'
+	} ) );
 }
 
 function renderDropdown() {
@@ -332,12 +349,14 @@ function button( {
 	isEnabled = true,
 	isOn = false,
 	withText = true,
+	keystroke = null,
 	tooltip,
+	tooltipPosition = 's',
 	icon
 } = {} ) {
 	const button = new ButtonView();
 
-	button.set( { label, isEnabled, isOn, withText, icon, tooltip } );
+	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
 
 	return button;
 }

+ 58 - 54
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -3,71 +3,75 @@
 
 $ck-tooltip-arrow-size: 5px;
 
-[data-ck-tooltip] {
-	@include ck-tooltip__elements {
-		left: 50%;
+.ck-tooltip {
+	left: 50%;
 
-		// For the transition to work, the tooltip must be controlled
-		// using visibility+opacity. A delay prevents a "tooltip avalanche"
-		// i.e. when scanning the toolbar with mouse cursor.
-		transition: opacity .2s ease-in-out .2s;
-	}
+	&__text {
+		@include ck-rounded-corners();
 
-	@include ck-tooltip__main {
-		border-radius: $ck-border-radius;
 		color: ck-color( 'background' );
 		font-size: ck-font-size( -2 );
-		background: ck-color( 'text' );
 		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-	}
+		background: ck-color( 'text' );
+		position: relative;
+		left: -50%;
+		line-height: 1.5;
 
-	@include ck-tooltip__arrow {
-		border-style: solid;
+		&::after {
+			border-style: solid;
+			left: 50%;
+		}
 	}
-}
 
-/**
- * A class once applied displays the tooltip south of the element.
- *
- *       [element]
- *           ^
- *     +-----------+
- *     |  Tooltip  |
- *     +-----------+
- */
-.ck-tooltip_s {
-	@include ck-tooltip__main {
-		bottom: -$ck-tooltip-arrow-size + 1;
-		transform: translate( -50%, 100% );
-	}
+	/**
+	 * A class once applied displays the tooltip south of the element.
+	 *
+	 *       [element]
+	 *           ^
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 */
+	&.ck-tooltip_s {
+		bottom: - $ck-tooltip-arrow-size;
+		transform: translateY( 100% );
 
-	@include ck-tooltip__arrow {
-		bottom: 0;
-		transform: translate( -50%, 100% );
-		border-color: transparent transparent ck-color( 'text' ) transparent;
-		border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
-	}
-}
+		.ck-tooltip__text::after {
+			top: -$ck-tooltip-arrow-size;
+			transform: translateX( -50% );
+			border-color: transparent transparent ck-color( 'text' ) transparent;
+			border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
 
-/**
- * A class once applied displays the tooltip north of the element.
- *
- *     +-----------+
- *     |  Tooltip  |
- *     +-----------+
- *           V
- *       [element]
- */
-.ck-tooltip_n {
-	@include ck-tooltip__main {
-		top: -$ck-tooltip-arrow-size + 1;
-		transform: translate( -50%, -100% );
+		}
 	}
 
-	@include ck-tooltip__arrow {
-		top: 0;
-		transform: translate( -50%, -100% );
-		border-color: ck-color( 'text' ) transparent transparent transparent;
-		border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
+	/**
+	 * A class once applied displays the tooltip north of the element.
+	 *
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 *           V
+	 *       [element]
+	 */
+	&.ck-tooltip_n {
+		top: -$ck-tooltip-arrow-size;
+		transform: translateY( -100% );
+
+		.ck-tooltip__text::after {
+			bottom: -$ck-tooltip-arrow-size;
+			transform: translateX( -50% );
+			border-color: ck-color( 'text' ) transparent transparent transparent;
+			border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
+		}
 	}
 }
+
+.ck-tooltip,
+.ck-tooltip__text::after {
+	// For the transition to work, the tooltip must be controlled
+	// using visibility+opacity. A delay prevents a "tooltip avalanche"
+	// i.e. when scanning the toolbar with mouse cursor.
+	transition: opacity .2s ease-in-out .2s;
+}
+