Преглед на файлове

Merge branch 'master' into t/ckeditor5-table/69

Aleksander Nowodzinski преди 7 години
родител
ревизия
ba0bab354b

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

@@ -65,9 +65,9 @@
 	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
-	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
-	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
-	--ck-color-list-item-text-active: var(--ck-custom-white);
+	--ck-color-list-button-hover-background: var(--ck-custom-foreground);
+	--ck-color-list-button-on-background: hsl(208, 88%, 52%);
+	--ck-color-list-button-on-text: var(--ck-custom-white);
 
 	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 
@@ -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. ---------------------- */
 

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

@@ -131,9 +131,10 @@ The file containing custom variables will be named `custom.css` and it will look
 	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
-	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
-	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
-	--ck-color-list-item-text-active: var(--ck-custom-white);
+	--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
+	--ck-color-list-button-on-background: var(--ck-color-base-active);
+	--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+	--ck-color-list-button-on-text: var(--ck-color-base-background);
 
 	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 
@@ -157,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. ---------------------- */
 

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

@@ -59,9 +59,9 @@
 		/* -- Overrides the default .ck-list class colors ------------------------------------------- */
 
 		--ck-color-list-background: var(--ck-custom-background);
-		--ck-color-list-item-background-hover: var(--ck-custom-foreground);
-		--ck-color-list-item-background-active: hsl(208, 88%, 52%);
-		--ck-color-list-item-text-active: var(--ck-custom-white);
+		--ck-color-list-button-hover-background: var(--ck-custom-foreground);
+		--ck-color-list-button-on-background: hsl(208, 88%, 52%);
+		--ck-color-list-button-on-text: var(--ck-custom-white);
 
 		/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
 
@@ -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 ------------------------- */
 

+ 90 - 8
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -13,6 +13,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
 
 import { createDropdown, addListToDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
@@ -229,16 +230,76 @@ function renderDropdown() {
 
 	const collection = new Collection( { idProperty: 'label' } );
 
+	collection.add( {
+		type: 'switchbutton',
+		model: new Model( {
+			label: 'A switchable list item',
+			withText: true
+		} )
+	} );
+
+	collection.add( {
+		type: 'switchbutton',
+		model: new Model( {
+			label: 'On with an icon',
+			withText: true,
+			isOn: true,
+			icon: boldIcon
+		} )
+	} );
+
+	collection.add( {
+		type: 'switchbutton',
+		model: new Model( {
+			label: 'Disabled',
+			withText: true,
+			isEnabled: false
+		} )
+	} );
+
+	collection.add( { type: 'separator' } );
+
 	[ 'Arial', 'Tahoma', 'Georgia' ].forEach( font => {
-		collection.add( new Model( {
-			label: font,
-			style: `font-family: ${ font }`
-		} ) );
+		collection.add( {
+			type: 'button',
+			model: new Model( {
+				label: `${ font } (style attr)`,
+				style: `font-family: ${ font }`,
+				withText: true
+			} )
+		} );
+	} );
+
+	collection.add( { type: 'separator' } );
+
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'Bold',
+			withText: true,
+			icon: boldIcon
+		} )
+	} );
+
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'This item is on',
+			withText: true,
+			icon: boldIcon,
+			isOn: true
+		} )
 	} );
 
-	collection.add( new Model( {
-		isSeparator: true
-	} ), 2 );
+	collection.add( {
+		type: 'button',
+		model: new Model( {
+			label: 'Disabled',
+			withText: true,
+			icon: boldIcon,
+			isEnabled: false
+		} )
+	} );
 
 	ui.listDropdown.add( toolbar( [
 		listDropdown( {
@@ -314,7 +375,11 @@ function renderToolbar() {
 			withText: false,
 			icon: boldIcon
 		} ),
-		button()
+		button(),
+		switchbutton( {
+			label: 'Switchable',
+			withText: true
+		} )
 	] ) );
 
 	// --- Rounded ------------------------------------------------------------
@@ -416,6 +481,23 @@ function button( {
 	return button;
 }
 
+function switchbutton( {
+	label = 'Switch button',
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	keystroke = null,
+	tooltip,
+	tooltipPosition = 's',
+	icon
+} = {} ) {
+	const button = new SwitchButtonView();
+
+	button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );
+
+	return button;
+}
+
 function toolbar( children = [] ) {
 	const toolbar = new ToolbarView();
 

+ 4 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -8,4 +8,8 @@
 	& .ck-dropdown__button .ck-button__label {
 		width: 8em;
 	}
+
+	& .ck-dropdown__panel .ck-list__item {
+		min-width: 18em;
+	}
 }

+ 11 - 17
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

@@ -7,7 +7,7 @@
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 
-	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-size: 20px;
 	--ck-image-upload-icon-width: 2px;
 }
 
@@ -20,6 +20,9 @@
 	animation-fill-mode: forwards, forwards;
 	animation-duration: 500ms, 500ms;
 
+	/* To make animation scalable. */
+	font-size: var(--ck-image-upload-icon-size);
+
 	/* Hide completed upload icon after 3 seconds. */
 	animation-delay: 0ms, 3000ms;
 
@@ -42,6 +45,9 @@
 		animation-duration: 500ms;
 		animation-delay: 500ms;
 		animation-fill-mode: forwards;
+
+		/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
+		box-sizing: border-box;
 	}
 }
 
@@ -68,28 +74,16 @@
 @keyframes ck-upload-complete-icon-check {
 	0% {
 		opacity: 1;
-		height: 0;
 		width: 0;
+		height: 0;
 	}
 	33% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-
+		width: 0.3em;
 		height: 0;
 	}
 	100% {
-		/*
-		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be:
-		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
-		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
-		 */
-		width: 0.25em;
-		height: 0.416em;
-
 		opacity: 1;
+		width: 0.3em;
+		height: 0.45em;
 	}
 }

+ 1 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css

@@ -77,6 +77,7 @@ a.ck.ck-button {
 		color: var(--ck-color-button-cancel);
 	}
 
+	/* Allow icon coloring using the text "color" property. */
 	& .ck-button__icon {
 		& use,
 		& use * {

+ 66 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_disabled.css";
+
+/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
+of the component, floating–point numbers have been used which, for the default font size
+(see: --ck-font-size-base), will generate simple integers. */
+:root {
+	/* 34px at 13px font-size */
+	--ck-switch-button-toggle-width: 2.6153846154em;
+	/* 14px at 13px font-size */
+	--ck-switch-button-toggle-inner-size: 1.0769230769em;
+	--ck-switch-button-toggle-spacing: 1px;
+}
+
+.ck.ck-button.ck-switchbutton {
+	& .ck-button__label {
+		/* Separate the label from the switch */
+		margin-right: calc(2*var(--ck-spacing-large));
+	}
+
+	&.ck-disabled .ck-button__toggle {
+		@mixin ck-disabled;
+	}
+
+	& .ck-button__toggle {
+		@mixin ck-rounded-corners;
+
+		/* Make sure the toggle is always to the right as far as possible. */
+		margin-left: auto;
+
+		/* Gently animate the background color of the toggle switch */
+		transition: background 500ms ease;
+
+		width: var(--ck-switch-button-toggle-width);
+		background: var(--ck-color-switch-button-off-background);
+
+		& .ck-button__toggle__inner {
+			@mixin ck-rounded-corners {
+				border-radius: calc(.5*var(--ck-border-radius));
+			}
+
+			/* Leave some tiny bit of space around the inner part of the switch */
+			margin: var(--ck-switch-button-toggle-spacing);
+			width: var(--ck-switch-button-toggle-inner-size);
+			height: var(--ck-switch-button-toggle-inner-size);
+			background: var(--ck-color-switch-button-inner-background);
+
+			/* Gently animate the inner part of the toggle switch */
+			transition: transform 300ms ease;
+		}
+	}
+
+	&.ck-on .ck-button__toggle {
+		background: var(--ck-color-switch-button-on-background);
+
+		& .ck-button__toggle__inner {
+			/* Move the toggle switch to the right. It will be animated. */
+			transform: translateX(calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2*var(--ck-switch-button-toggle-spacing)));
+		}
+	}
+}

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -18,6 +18,9 @@
 	& .ck-dropdown__arrow {
 		right: var(--ck-spacing-standard);
 		width: var(--ck-dropdown-arrow-size);
+
+		/* A space to accommodate the triangle. */
+		margin-left: var(--ck-spacing-small);
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {
@@ -25,9 +28,6 @@
 	}
 
 	& .ck-button.ck-dropdown__button {
-		/* A space to accommodate the triangle. */
-		padding-right: calc(2.5 * var(--ck-spacing-standard));
-
 		&:not(.ck-button_with-text) {
 			/* Make sure dropdowns with just an icon have the right inner spacing */
 			padding-left: var(--ck-spacing-small);

+ 0 - 7
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css

@@ -11,11 +11,4 @@
 	@mixin ck-rounded-corners {
 		border-top-left-radius: 0;
 	}
-
-	/* Using absolute units to make sure each element has the same height and padding.
-	https://github.com/ckeditor/ckeditor5-heading/issues/63 */
-	& > .ck-list__item {
-		line-height: calc(.8*var(--ck-line-height-base)*var(--ck-font-size-base));
-		padding: calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
-	}
 }

+ 2 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -20,7 +20,8 @@
 	}
 
 	& > .ck-splitbutton__arrow {
-		/* It's a text-less button but still, it should not be square. */
+		/* It's a text-less button and since the icon is positioned absolutely in such situation,
+		it must get some arbitrary min-width. */
 		min-width: unset;
 
 		/* Don't round the arrow button on the right side */

+ 50 - 18
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -15,33 +15,65 @@
 }
 
 .ck.ck-list__item {
-	padding: var(--ck-spacing-medium);
 	cursor: default;
 	min-width: 12em;
 
-	&:hover,
-	&:focus {
-		background: var(--ck-color-list-item-background-hover);
-	}
+	& .ck-button {
+		min-height: unset;
+		width: 100%;
+		text-align: left;
+		border-radius: 0;
+		border: 0;
 
-	&:focus {
-		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		/* List items should have the same height. Use absolute units to make sure it is so
+		   because e.g. different heading styles may have different height
+		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+		padding:
+			calc(.2*var(--ck-line-height-base)*var(--ck-font-size-base))
+			calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
 
-		outline: none;
-	}
+		& .ck-button__label {
+			/* https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+			line-height: calc(1.2*var(--ck-line-height-base)*var(--ck-font-size-base));
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&.ck-on {
+			background: var(--ck-color-list-button-on-background);
+			color: var(--ck-color-list-button-on-text);
 
-	&.ck-disabled {
-		@mixin ck-disabled;
+			&:hover:not(ck-disabled),
+			&:focus {
+				background: var(--ck-color-list-button-on-background-focus);
+			}
+
+			&:active {
+				box-shadow: none;
+			}
+		}
+
+		&:hover:not(.ck-disabled),
+		&:focus {
+			background: var(--ck-color-list-button-hover-background);
+		}
 	}
-}
 
-.ck.ck-list__item_active {
-	background: var(--ck-color-list-item-background-active);
-	color: var(--ck-color-list-item-text-active);
+	/* It's unnecessary to change the background/text of a switch toggle; it has different ways
+	of conveying its state (like the switcher) */
+	& .ck-switchbutton {
+		&.ck-on {
+			background: var(--ck-color-list-background);
+			color: inherit;
 
-	&:hover,
-	&:focus {
-		background: var(--ck-color-list-item-background-active-focus);
+			&:hover:not(ck-disabled),
+			&:focus {
+				background: var(--ck-color-list-button-hover-background);
+				color: inherit;
+			}
+		}
 	}
 }
 

+ 8 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -45,6 +45,10 @@
 	--ck-color-button-save: 									hsl(120, 100%, 27%);
 	--ck-color-button-cancel: 									hsl(15, 100%, 43%);
 
+	--ck-color-switch-button-off-background:					hsl(0, 0%, 69%);
+	--ck-color-switch-button-on-background:						var(--ck-color-button-action-background);
+	--ck-color-switch-button-inner-background:					var(--ck-color-base-background);
+
 	/* -- Dropdown ------------------------------------------------------------------------------ */
 
 	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
@@ -62,10 +66,10 @@
 	/* -- List ---------------------------------------------------------------------------------- */
 
 	--ck-color-list-background: 								var(--ck-color-base-background);
-	--ck-color-list-item-background-hover: 						var(--ck-color-base-foreground);
-	--ck-color-list-item-background-active: 					var(--ck-color-base-active);
-	--ck-color-list-item-background-active-focus: 				var(--ck-color-base-active-focus);
-	--ck-color-list-item-text-active:							var(--ck-color-base-background);
+	--ck-color-list-button-hover-background: 					var(--ck-color-base-foreground);
+	--ck-color-list-button-on-background: 						var(--ck-color-base-active);
+	--ck-color-list-button-on-background-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-button-on-text:								var(--ck-color-base-background);
 
 	/* -- Panel --------------------------------------------------------------------------------- */
 

+ 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);
+		}
 	}
 }