8
0
Просмотр исходного кода

Merge pull request #184 from ckeditor/t/ckeditor5-widget/40

Feature: Implemented styles for the widget selection handler (see ckeditor/ckeditor5-widget#40). 

Also fixed a regression after ckeditor/ckeditor5#936 which made the widget use wrong outline styles when the editable is blurred. Minor code refactoring in the widget styles.

BREAKING CHANGE: Several `--ck-color-widget-*` custom properties have been renamed to match the project's naming standards.
Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
92aa19aaaa

+ 3 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -91,9 +91,9 @@
 
 	/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
 
-	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
-	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
-	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+	--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+	--ck-color-widget-hover-border: hsl(43, 100%, 68%);
+	--ck-color-widget-editable-focus-background: var(--ck-custom-white);
 
 	/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
 

+ 3 - 3
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -158,9 +158,9 @@ The file containing custom variables will be named `custom.css` and it will look
 
 	/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
 
-	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
-	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
-	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+	--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+	--ck-color-widget-hover-border: hsl(43, 100%, 68%);
+	--ck-color-widget-editable-focus-background: var(--ck-custom-white);
 
 	/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
 

+ 3 - 3
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -85,9 +85,9 @@
 
 		/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
 
-		--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
-		--ck-color-widget-border-hover: hsl(43, 100%, 68%);
-		--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+		--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+		--ck-color-widget-hover-border: hsl(43, 100%, 68%);
+		--ck-color-widget-editable-focus-background: var(--ck-custom-white);
 
 		/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
 

+ 95 - 9
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -8,26 +8,32 @@
 
 :root {
 	--ck-widget-outline-thickness: 3px;
-	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
-	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
-	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
+	--ck-widget-handler-icon-size: 16px;
+	--ck-widget-handler-animation-duration: 200ms;
+	--ck-widget-handler-animation-curve: ease;
+
+	--ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+	--ck-color-widget-hover-border: hsl(43, 100%, 62%);
+	--ck-color-widget-editable-focus-background: var(--ck-color-base-background);
+	--ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
 }
 
 .ck .ck-widget {
 	margin: var(--ck-spacing-standard) 0;
 	padding: 0;
 
+	outline-width: var(--ck-widget-outline-thickness);
+	outline-style: solid;
+	outline-color: transparent;
+	transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
 		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
 	}
 
-	@nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
-		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-blurred);
-	}
-
 	&:hover {
-		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
+		outline-color: var(--ck-color-widget-hover-border);
 	}
 }
 
@@ -41,6 +47,86 @@
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-inner-shadow);
 
-		background-color: var(--ck-color-widget-editable-focused-background);
+		background-color: var(--ck-color-widget-editable-focus-background);
+	}
+}
+
+.ck .ck-widget.ck-widget_selectable {
+	& .ck-widget__selection-handler {
+		padding: 4px;
+		box-sizing: border-box;
+
+		/* Background and opacity will be animated as the handler shows up or the widget gets selected. */
+		background-color: transparent;
+		opacity: 0;
+
+		/* Transition:
+		   * background-color for the .ck-widget_selected state change,
+		   * visibility for hiding the handler,
+		   * opacity for the proper look of the icon when the handler disappears. */
+		transition:
+			background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
+			visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
+			opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
+
+		/* Make only top corners round. */
+		border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
+
+		/* Place the drag handler outside the widget wrapper. */
+		transform: translateY(-100%);
+		left: calc(0px - var(--ck-widget-outline-thickness));
+
+		/* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
+		&:hover .ck-icon .ck-icon__selected-indicator {
+			opacity: 1;
+		}
+
+		& .ck-icon {
+			/* Make sure the dimensions of the icon are independent of the fon-size of the content. */
+			width: var(--ck-widget-handler-icon-size);
+			height: var(--ck-widget-handler-icon-size);
+			color: var(--ck-color-widget-drag-handler-icon-color);
+
+			/* The "selected" part of the icon is invisible by default */
+			& .ck-icon__selected-indicator {
+				opacity: 0;
+
+				/* Note: The animation is longer on purpose. Simply feels better. */
+				transition: opacity 300ms var(--ck-widget-handler-animation-curve);
+			}
+		}
+	}
+
+	/* Show the selection handler when the widget is selected. */
+	&.ck-widget_selected,
+	&.ck-widget_selected:hover {
+		& .ck-widget__selection-handler {
+			opacity: 1;
+			background-color: var(--ck-color-focus-border);
+
+			/* When the widget is selected, notify the user using the proper look of the icon. */
+			& .ck-icon .ck-icon__selected-indicator {
+				opacity: 1;
+			}
+		}
+	}
+
+	/* Show the selection handler on mouse hover over the widget. */
+	&:hover .ck-widget__selection-handler {
+		opacity: 1;
+		background-color: var(--ck-color-widget-hover-border);
+	}
+}
+
+/* Style the widget when it's selected but the editable it belongs to lost focus. */
+.ck-editor__editable.ck-blurred .ck-widget {
+	&.ck-widget_selected,
+	&.ck-widget_selected:hover {
+		outline-color: var(--ck-color-widget-blurred-border);
+
+		& .ck-widget__selection-handler,
+		& .ck-widget__selection-handler:hover {
+			background: var(--ck-color-widget-blurred-border);
+		}
 	}
 }