Browse Source

Aligning the package to the new default theme.

Aleksander Nowodzinski 8 years ago
parent
commit
d999ad24eb

+ 7 - 4
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -5,9 +5,9 @@
 			line-height: 3em;
 		}
 
-		*[id^="icon"] .ck-icon + .ck-icon,
-		*[id^="button"] .ck-button + .ck-button,
-		*[id^="dropdown"] .ck-dropdown + .ck-dropdown {
+		*[id*="icon"] .ck-icon + .ck-icon,
+		*[id*="button"] .ck-button + .ck-button,
+		*[id*="dropdown"] .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 		}
 
@@ -73,7 +73,10 @@
 <h2>Dropdown</h2>
 
 	<h3>ListDropdown</h3>
-	<div id="dropdown" class="ck-reset_all"></div>
+	<div id="list-dropdown" class="ck-reset_all"></div>
+
+	<h3>ButtonDropdown</h3>
+	<div id="button-dropdown" class="ck-reset_all"></div>
 
 <hr/>
 

+ 57 - 9
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -14,6 +14,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 createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
+import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
@@ -60,7 +61,8 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
 
-	dropdown: '#dropdown',
+	listDropdown: '#list-dropdown',
+	buttonDropdown: '#button-dropdown',
 
 	'toolbarText': '#toolbar-text',
 	'toolbarButton': '#toolbar-button',
@@ -221,20 +223,52 @@ function renderDropdown() {
 		} ) );
 	} );
 
-	const itemListModel = new Model( {
+	ui.listDropdown.add( listDropdown( {
+		label: 'Normal state',
+		isEnabled: true,
 		items: collection
-	} );
+	} ) );
+
+	ui.listDropdown.add( listDropdown( {
+		label: 'Disabled',
+		isEnabled: false,
+		items: collection
+	} ) );
 
-	ui.dropdown.add( dropdown( {
+	ui.buttonDropdown.add( buttonDropdown( {
 		label: 'Normal state',
 		isEnabled: true,
-		content: itemListModel
+		buttons: [
+			button( {
+				withText: false,
+				label: 'foo',
+				icon: boldIcon
+			} ),
+			button( {
+				withText: false,
+				label: 'foo',
+				icon: italicIcon
+			} )
+		]
 	} ) );
 
-	ui.dropdown.add( dropdown( {
+	ui.buttonDropdown.add( buttonDropdown( {
 		label: 'Disabled',
 		isEnabled: false,
-		content: itemListModel
+		buttons: [
+			button( {
+				withText: false,
+				isEnabled: false,
+				label: 'foo',
+				icon: boldIcon
+			} ),
+			button( {
+				withText: false,
+				isEnabled: false,
+				label: 'foo',
+				icon: italicIcon
+			} )
+		]
 	} ) );
 }
 
@@ -255,7 +289,7 @@ function renderToolbar() {
 			label: 'Button with an icon',
 			icon: boldIcon
 		} ),
-		dropdown(),
+		listDropdown(),
 		button()
 	] ) );
 
@@ -366,7 +400,7 @@ function toolbar( children = [] ) {
 	return toolbar;
 }
 
-function dropdown( {
+function listDropdown( {
 	label = 'Dropdown',
 	isEnabled = true,
 	isOn = false,
@@ -379,6 +413,20 @@ function dropdown( {
 	return dropdown;
 }
 
+function buttonDropdown( {
+	label = 'Button dropdown',
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	isVertical = true,
+	buttons = []
+} = {} ) {
+	const model = new Model( { label, isEnabled, buttons, isVertical, isOn, withText } );
+	const dropdown = createButtonDropdown( model, {} );
+
+	return dropdown;
+}
+
 function toolbarSeparator() {
 	return new ToolbarSeparatorView();
 }

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

@@ -20,7 +20,7 @@ a.ck-button {
 	white-space: nowrap;
 	cursor: default;
 	vertical-align: middle;
-	padding: var(--ck-spacing-small);
+	padding: var(--ck-spacing-tiny);
 	text-align: center;
 
 	/* Enable font size inheritance, which allows fluid UI scaling. */
@@ -44,7 +44,7 @@ a.ck-button {
 	}
 
 	&.ck-button_with-text {
-		padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
 
 		@mixin ck-button-icon {
 			margin-left: calc(-1 * var(--ck-spacing-small));

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

@@ -12,15 +12,12 @@
 	font-size: inherit;
 
 	/* A triangle displayed to indicate this is actually a dropdown. */
-	&::after {
-		border-style: solid;
-		border-width: .4em .35em 0 .35em;
-		border-color: var(--ck-color-dropdown-symbol) transparent;
-		right: var(--ck-spacing-standard);
+	& .ck-dropdown__icon {
+		right: var(--ck-spacing-medium);
 	}
 
-	&.ck-disabled::after {
-		border-color: var(--ck-color-dropdown-symbol-disabled) transparent;
+	&.ck-disabled .ck-dropdown__icon {
+		@mixin ck-disabled;
 	}
 
 	& .ck-button.ck-dropdown__button {

+ 4 - 13
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -31,10 +31,10 @@
 	}
 
 	& > .ck-button,
-	& .ck-buttondropdown .ck-dropdown__button {
+	& .ck-dropdown__button {
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
-			background: var(--ck-color-editor-toolbar-background);
+			background: transparent;
 		}
 
 		&.ck-on {
@@ -42,15 +42,6 @@
 		}
 	}
 
-	/* Exclude main button dropdown button */
-	& .ck-dropdown:not(.ck-buttondropdown) .ck-dropdown__button {
-		border-width: 1px;
-
-		&:not(:hover):not(:focus):not(.ck-on) {
-			background: var(--ck-color-editor-dropdown-background);
-		}
-	}
-
 	@nest .ck-toolbar-container & {
 		background: var(--ck-color-editor-toolbar-background);
 	}
@@ -59,12 +50,12 @@
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
 	&::after {
-		border-bottom-color: var(--ck-color-editor-toolbar-background);
+		border-bottom-color: var(--ck-color-base-foreground);
 	}
 }
 
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
 	&::after {
-		border-top-color: var(--ck-color-editor-toolbar-background);
+		border-top-color: var(--ck-color-base-foreground);
 	}
 }

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

@@ -8,7 +8,7 @@
 .ck-toolbar {
 	@mixin ck-rounded-corners;
 
-	padding: 0 var(--ck-spacing-small) var(--ck-spacing-small);
+	padding: 0 var(--ck-spacing-small);
 	border: 1px solid var(--ck-color-toolbar-border);
 
 	& > * {
@@ -17,6 +17,7 @@
 
 		/* Make sure items wrapped to the next line have v-spacing */
 		margin-top: var(--ck-spacing-small);
+		margin-bottom: var(--ck-spacing-small);
 	}
 
 	&.ck-toolbar_vertical {
@@ -39,9 +40,10 @@
 }
 
 .ck-toolbar__separator {
+	align-self: stretch;
 	width: 1px;
-	height: calc(1em + 2 * var(--ck-spacing-medium));
-	vertical-align: middle;
+	margin-top: 0;
+	margin-bottom: 0;
 	background: var(--ck-color-toolbar-border);
 }
 

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

@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
+	--ck-color-base-foreground: 								hsl(0, 0%, 98%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
 	--ck-color-base-border: 									hsl(0, 0%, 75%);
 	--ck-color-base-action: 									hsl(104, 44%, 48%);
@@ -96,7 +96,7 @@
 	/* -- Editor -------------------------------------------------------------------------------- */
 
 	--ck-color-editor-border: 									var(--ck-color-base-border);
-	--ck-color-editor-toolbar-background: 						var(--ck-color-base-foreground);
+	--ck-color-editor-toolbar-background: 						linear-gradient(0, var(--ck-color-base-foreground), var(--ck-color-base-background));
 
 	--ck-color-editor-toolbar-button-on-background: 			hsl(0, 0%, 87%);
 	--ck-color-editor-toolbar-button-on-border: 				transparent;

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css

@@ -7,5 +7,5 @@
  * Default border-radius value.
  */
 :root{
-	--ck-border-radius: 2px;
+	--ck-border-radius: 1px;
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

@@ -9,5 +9,5 @@
 	--ck-spacing-standard: 					var(--ck-spacing-unit);
 	--ck-spacing-medium: 					calc(var(--ck-spacing-unit) * 0.8);
 	--ck-spacing-small: 					calc(var(--ck-spacing-unit) * 0.5);
-	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.25);
+	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit) * 0.3);
 }