Răsfoiți Sursa

Added styles for rich tooltips. Enabled tooltips in button component.

Aleksander Nowodzinski 9 ani în urmă
părinte
comite
20d52991da

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

@@ -68,12 +68,12 @@
 .ck-button,
 .ck-button,
 a.ck-button {
 a.ck-button {
 	display: inline-block;
 	display: inline-block;
-	overflow: hidden;
 	padding: ck-spacing( 'small' );
 	padding: ck-spacing( 'small' );
 
 
 	@include ck-button( 'background' );
 	@include ck-button( 'background' );
 	@include ck-unselectable();
 	@include ck-unselectable();
 	@include ck-rounded-corners();
 	@include ck-rounded-corners();
+	@include ck-tooltip_enabled();
 
 
 	@include ck-button-icon {
 	@include ck-button-icon {
 		float: left;
 		float: left;
@@ -120,6 +120,19 @@ a.ck-button {
 		}
 		}
 	}
 	}
 
 
+	&:hover {
+		@include ck-tooltip_visible();
+	}
+
+	// 1. Get rid of the focus outline around the tooltip when focused (but not :hover).
+	// 2. Don't display tooltips for disabled buttons, they're unavailable anyway.
+	// 3. Don't display tooltips for buttons with text; text explains the button anyway.
+	&:focus:not(:hover),
+	&.ck-disabled,
+	&.ck-button_with-text {
+		@include ck-tooltip_disabled();
+	}
+
 	.ck-button__label {
 	.ck-button__label {
 		display: none;
 		display: none;
 		float: left;
 		float: left;

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

@@ -4,30 +4,56 @@
 .ck-dropdown {
 .ck-dropdown {
 	display: inline-block;
 	display: inline-block;
 	position: relative;
 	position: relative;
-}
 
 
-.ck-dropdown__button {
-	&:after {
+	// A triangle displayed to indicate this is actually a dropdown.
+	&::after {
 		content: '';
 		content: '';
 		width: 0;
 		width: 0;
 		height: 0;
 		height: 0;
 		border-style: solid;
 		border-style: solid;
 		border-width: .4em .4em 0 .4em;
 		border-width: .4em .4em 0 .4em;
 		border-color: ck-color( 'text', 30 ) transparent;
 		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 {
+		@include ck-tooltip_enabled();
+
+		&:hover,
+		&:focus:hover {
+			@include ck-tooltip_visible();
+		}
+
+		// 1. Get rid of the focus outline around the tooltip when focused (but not :hover).
+		// 2. Don't display tooltips for disabled buttons, they're unavailable anyway.
+		&:focus:not(:hover),
+		&.ck-disabled {
+			@include ck-tooltip_disabled();
+		}
+
+		// 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 {
 .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' );
 	border: 1px solid ck-border-color( 'foreground' );
 	display: none;
 	display: none;
 	position: absolute;
 	position: absolute;
@@ -38,7 +64,7 @@
 
 
 	transform: translateY( 100% );
 	transform: translateY( 100% );
 	background: ck-color( 'background' );
 	background: ck-color( 'background' );
-	z-index: ck-z();
+	z-index: ck-z( 'modal' );
 
 
 	@include ck-rounded-corners();
 	@include ck-rounded-corners();
 	@include ck-dropshadow();
 	@include ck-dropshadow();

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

@@ -0,0 +1,151 @@
+// 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.
+		transition: opacity .2s ease-in-out;
+
+		// 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: 0px;
+		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
  * @see ck-font-size
  */
  */
 $ck-font-sizes: (
 $ck-font-sizes: (
+	-2: 0.7rem,
 	-1: 0.75rem,
 	-1: 0.75rem,
 	 0: 1rem,
 	 0: 1rem,
 	 1: 1.4rem,
 	 1: 1.4rem,

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

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