浏览代码

Code refactoring in styles. Use a single fake caret per-widget.

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

+ 40 - 18
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -13,6 +13,16 @@
 	--ck-color-widget-type-around-button-icon: var(--ck-color-base-background);
 }
 
+@define-mixin ck-widget-type-around-button-visible {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+@define-mixin ck-widget-type-around-button-hidden {
+	opacity: 0;
+	pointer-events: none;
+}
+
 .ck .ck-widget {
 	/*
 	 * Styles of the type around buttons
@@ -22,11 +32,10 @@
 		height: var(--ck-widget-type-around-button-size);
 		background: var(--ck-color-widget-type-around-button);
 		border-radius: 100px;
-
-		pointer-events: none;
-		opacity: 0;
 		transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
 
+		@mixin ck-widget-type-around-button-hidden;
+
 		& svg {
 			width: 10px;
 			height: 8px;
@@ -77,8 +86,7 @@
 	&.ck-widget_selected,
 	&:hover {
 		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			pointer-events: auto;
-			opacity: 1;
+			@mixin ck-widget-type-around-button-visible;
 		}
 	}
 
@@ -115,35 +123,50 @@
 		margin-left: 20px;
 	}
 
-	& .ck-widget__type-around__line {
+	/*
+	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
+	 */
+	& .ck-widget__type-around__fake-caret {
 		pointer-events: none;
 		height: 1px;
-		animation: ck-widget-type-around-line-pulse linear 1s infinite normal forwards;
+		animation: ck-widget-type-around-fake-caret-pulse linear 1s infinite normal forwards;
+
+		/*
+		 * The semit-transparent-outline+background combo improves the contrast
+		 * when the background underneath the fake caret is dark.
+		 */
 		outline: solid 1px hsla(0, 0%, 100%, .5);
 		background: var(--ck-color-base-text);
 	}
 
+	/*
+	 * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
+	 * Despite the widget being physically selected in the model, its outline should disappear.
+	 */
 	&.ck-widget_selected,
 	&.ck-widget.ck-widget_selected:hover {
-		&.ck-widget_type-around_active_before,
-		&.ck-widget_type-around_active_after {
+		&.ck-widget_type-around_show-fake-caret_before,
+		&.ck-widget_type-around_show-fake-caret_after {
 			outline-color: transparent;
 		}
 	}
 
-	&.ck-widget_type-around_active_before,
-	&.ck-widget_type-around_active_after {
+	/*
+	 * Styles of the type around buttons when the "fake caret" is blinking (e.g. upon keyboard navigation).
+	 * In this state, the type around buttons would collide with the fake carets so they should disappear.
+	 */
+	&.ck-widget_type-around_show-fake-caret_before,
+	&.ck-widget_type-around_show-fake-caret_after {
 		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			pointer-events: none;
-			opacity: 0;
+			@mixin ck-widget-type-around-button-hidden;
 		}
 	}
 
 	/*
 	 * Fake horizontal caret integration with the selection handle. When the caret is visible, simply
-	 * hide the handle because it makes no sense and intersects with the caret.
+	 * hide the handle because it intersects with the caret (and does not make much sense anyway).
 	 */
-	&.ck-widget_type-around_active_before.ck-widget_with-selection-handle > .ck-widget__selection-handle {
+	&.ck-widget_type-around_show-fake-caret_before.ck-widget_with-selection-handle > .ck-widget__selection-handle {
 		display: none;
 	}
 }
@@ -159,8 +182,7 @@
 		&.ck-widget_selected,
 		&:hover {
 			& > .ck-widget__type-around > .ck-widget__type-around__button {
-				pointer-events: none;
-				opacity: 0;
+				@mixin ck-widget-type-around-button-hidden;
 			}
 		}
 	}
@@ -207,7 +229,7 @@
 	}
 }
 
-@keyframes ck-widget-type-around-line-pulse {
+@keyframes ck-widget-type-around-fake-caret-pulse {
 	0% {
 		opacity: 1;
 	}

+ 13 - 16
packages/ckeditor5-widget/src/widgettypearound/widgettypearound.js

@@ -265,7 +265,7 @@ export default class WidgetTypeAround extends Plugin {
 		} );
 
 		function positionToWidgetCssClass( position ) {
-			return `ck-widget_type-around_active_${ position }`;
+			return `ck-widget_type-around_show-fake-caret_${ position }`;
 		}
 	}
 
@@ -413,7 +413,7 @@ function injectUIIntoWidget( viewWriter, buttonTitles, widgetViewElement ) {
 		const wrapperDomElement = this.toDomElement( domDocument );
 
 		injectButtons( wrapperDomElement, buttonTitles );
-		injectLines( wrapperDomElement );
+		injectFakeCaret( wrapperDomElement );
 
 		return wrapperDomElement;
 	} );
@@ -450,19 +450,16 @@ function injectButtons( wrapperDomElement, buttonTitles ) {
 }
 
 // @param {HTMLElement} wrapperDomElement
-function injectLines( wrapperDomElement ) {
-	for ( const position of POSSIBLE_INSERTION_POSITIONS ) {
-		const lineTemplate = new Template( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-widget__type-around__line',
-					`ck-widget__type-around__line_${ position }`
-				]
-			}
-		} );
+function injectFakeCaret( wrapperDomElement ) {
+	const caretTemplate = new Template( {
+		tag: 'div',
+		attributes: {
+			class: [
+				'ck',
+				'ck-widget__type-around__fake-caret'
+			]
+		}
+	} );
 
-		wrapperDomElement.appendChild( lineTemplate.render() );
-	}
+	wrapperDomElement.appendChild( caretTemplate.render() );
 }

+ 14 - 11
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -54,26 +54,29 @@
 		}
 	}
 
-	& .ck-widget__type-around__line {
+	/*
+	 * Styles for the horizontal "fake caret" which is displayed when the user navigates using the keyboard.
+	 */
+	& .ck-widget__type-around__fake-caret {
 		display: none;
 		position: absolute;
 		left: 0;
 		right: 0;
-
-		&.ck-widget__type-around__line_before {
-			top: -1px;
-		}
-
-		&.ck-widget__type-around__line_after {
-			bottom: -1px;
-		}
 	}
 
-	&.ck-widget_type-around_active_before > .ck-widget__type-around > .ck-widget__type-around__line_before {
+	/*
+	 * Styles for the horizontal "fake caret" when it should be displayed before the widget (backward keyboard navigation).
+	 */
+	&.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		top: -1px;
 		display: block;
 	}
 
-	&.ck-widget_type-around_active_after > .ck-widget__type-around > .ck-widget__type-around__line_after {
+	/*
+	 * Styles for the horizontal "fake caret" when it should be displayed after the widget (forward keyboard navigation).
+	 */
+	&.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+		bottom: -1px;
 		display: block;
 	}
 }