浏览代码

Merge pull request #60 from ckeditor/t/56

t/56: Added styles for rich tooltips. Enabled tooltips in button component.
Oskar Wróbel 9 年之前
父节点
当前提交
ead33a3ab4

+ 10 - 1
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -72,12 +72,12 @@
 .ck-button,
 a.ck-button {
 	display: inline-block;
-	overflow: hidden;
 	padding: ck-spacing( 'small' );
 
 	@include ck-button( 'background' );
 	@include ck-unselectable();
 	@include ck-rounded-corners();
+	@include ck-tooltip_enabled();
 
 	@include ck-button-icon {
 		float: left;
@@ -124,6 +124,15 @@ a.ck-button {
 		}
 	}
 
+	&:hover {
+		@include ck-tooltip_visible();
+	}
+
+	// Get rid of the focus outline around the tooltip when focused (but not :hover).
+	&:focus:not(:hover) {
+		@include ck-tooltip_disabled();
+	}
+
 	.ck-button__label {
 		display: none;
 		float: left;

+ 24 - 12
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -4,30 +4,42 @@
 .ck-dropdown {
 	display: inline-block;
 	position: relative;
-}
 
-.ck-dropdown__button {
-	&:after {
+	// A triangle displayed to indicate this is actually a dropdown.
+	&::after {
 		content: '';
 		width: 0;
 		height: 0;
 		border-style: solid;
 		border-width: .4em .4em 0 .4em;
 		border-color: ck-color( 'text', 30 ) transparent;
-		position: relative;
-		top: .9em;
-		margin-left: ck-spacing( 'medium' );
+		pointer-events: none;
+
+		position: absolute;
+		top: 50%;
+		right: ck-spacing();
+		z-index: ck-z();
+		transform: translate( 0, -50% );
 	}
 
-	// #23
-	.ck-button__label {
-		width: 7em;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	.ck-button.ck-dropdown__button {
+		// A space to accommodate the triangle.
+		padding-right: 2 * ck-spacing();
+
+		// #23
+		.ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 }
 
 .ck-dropdown__panel {
+	// This is to get rid of flickering when the tooltip is shown under the panel,
+	// which looks like the panel moves vertically a pixel down and up.
+	-webkit-backface-visibility: hidden;
+
 	border: 1px solid ck-border-color( 'foreground' );
 	display: none;
 	position: absolute;
@@ -38,7 +50,7 @@
 
 	transform: translateY( 100% );
 	background: ck-color( 'background' );
-	z-index: ck-z();
+	z-index: ck-z( 'modal' );
 
 	@include ck-rounded-corners();
 	@include ck-drop-shadow();

+ 10 - 0
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -21,6 +21,16 @@
 		&.ck-on {
 			@include ck-button-colors( 'foreground', -10 );
 		}
+
+		// Tooltip tweaks:
+		//    1. Don't display tooltips for disabled buttons in the toolbar,
+		//       they're unavailable anyway.
+		//    2. Don't display tooltips for buttons with text; text explains
+		//       the button anyway.
+		&.ck-button_with-text:not(.ck-dropdown__button),
+		&.ck-disabled {
+			@include ck-tooltip_disabled();
+		}
 	}
 
 	.ck-dropdown__button {

+ 152 - 0
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -0,0 +1,152 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+$ck-tooltip-arrow-size: 5px;
+
+/**
+ * Applies styles to the main part of the tooltip.
+ */
+@mixin ck-tooltip__main {
+	&::after {
+		@content;
+	}
+}
+
+/**
+ * Applies styles to the arrow part of the tooltip.
+ */
+@mixin ck-tooltip__arrow {
+	&::before {
+		@content;
+	}
+}
+
+/**
+ * Applies styles to both arrow and main part of the tooltip.
+ */
+@mixin ck-tooltip__elements {
+	@include ck-tooltip__main {
+		@content;
+	}
+
+	@include ck-tooltip__arrow {
+		@content;
+	}
+}
+
+/**
+ * Enables the tooltip, which is the tooltip is in DOM but
+ * not yet displayed.
+ */
+@mixin ck-tooltip_enabled {
+	@include ck-tooltip__elements {
+		display: block;
+	}
+}
+
+/**
+ * Disables the tooltip making it disappear from DOM.
+ */
+@mixin ck-tooltip_disabled {
+	@include ck-tooltip__elements {
+		display: none;
+	}
+}
+
+/**
+ * Shows the tooltip, which is already in DOM.
+ * Requires `ck-tooltip_enabled` first.
+ */
+@mixin ck-tooltip_visible {
+	@include ck-tooltip__elements {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
+[data-ck-tooltip] {
+	@include ck-tooltip__elements {
+		// Tooltip is hidden by default.
+		visibility: hidden;
+		opacity: 0;
+		display: none;
+
+		position: absolute;
+		left: 50%;
+		z-index: ck-z( 'modal' );
+
+		// Without this, hovering the tooltip could keep it visible.
+		pointer-events: none;
+
+		// 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;
+
+		// This is to get rid of flickering when transitioning opacity in Chrome.
+		// It's weird but it works.
+		-webkit-backface-visibility: hidden;
+	}
+
+	@include ck-tooltip__main {
+		content: attr(data-ck-tooltip);
+		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' );
+	}
+
+	@include ck-tooltip__arrow {
+		content: "";
+		width: 0;
+		height: 0;
+		border-style: solid;
+	}
+}
+
+/**
+ * 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% );
+	}
+
+	@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;
+	}
+}
+
+/**
+ * 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;
+	}
+}

+ 1 - 0
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -23,6 +23,7 @@ $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
  * @see ck-font-size
  */
 $ck-font-sizes: (
+	-2: 0.7rem,
 	-1: 0.75rem,
 	 0: 1rem,
 	 1: 1.4rem,

+ 1 - 0
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -12,6 +12,7 @@
 
 @import 'components/reset';
 @import 'components/icon';
+@import 'components/tooltip';
 @import 'components/button';
 @import 'components/toolbar';
 @import 'components/dropdown';