Merge pull request #182 from ckeditor/t/ckeditor5-ui/402

Feature: Added theme styles for the switch button (see ckeditor/ckeditor5-ui#402). Also: * Defined styles of the `.ck-button` in `.ck-list`, * Simplified the `.ck-list` styles as `.ck-list__item` became just a container, * Aligned several components' styles to the new architecture of the lists and buttons (including `flex`), * Extended the theme manual test with various use-cases of switch buttons and buttons in the list (dropdown).
ckeditor · Jun 25, 2018 · 90ab35e · 90ab35e
2 parents 5d2d51f + 161408e
commit 90ab35e
Show file tree

Hide file tree

Showing 12 changed files with 234 additions and 50 deletions.
diff --git a/docs/_snippets/examples/custom.css b/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. --------------------------------- */
 

diff --git a/docs/framework/guides/theme-customization.md b/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. --------------------------------- */
 

diff --git a/tests/manual/inverted.html b/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 ---------------------------------- */
 

diff --git a/tests/manual/theme.js b/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();
 

diff --git a/theme/ckeditor5-heading/heading.css b/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;
+	}
 }
diff --git a/theme/ckeditor5-ui/components/button/button.css b/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 * {

diff --git a/theme/ckeditor5-ui/components/button/switchbutton.css b/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)));
+		}
+	}
+}
diff --git a/theme/ckeditor5-ui/components/dropdown/dropdown.css b/theme/ckeditor5-ui/components/dropdown/dropdown.css
@@ -18,16 +18,16 @@
 	& .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 {
 		@mixin ck-disabled;
 	}
 
 	& .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);

diff --git a/theme/ckeditor5-ui/components/dropdown/listdropdown.css b/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));
-	}
 }
diff --git a/theme/ckeditor5-ui/components/dropdown/splitbutton.css b/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 */

diff --git a/theme/ckeditor5-ui/components/list/list.css b/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;
+			}
+		}
 	}
 }