Merge pull request #264 from ckeditor/i/6112

Feature: Brought styles for various UI views: the compact toolbar, table form, table form row and header, table cell properties form, and table properties form (see ckeditor/ckeditor5/issues/6112).
ckeditor · Feb 3, 2020 · 339aec1 · 339aec1
2 parents 4e36147 + 7045120
commit 339aec1
Show file tree

Hide file tree

Showing 9 changed files with 208 additions and 4 deletions.
diff --git a/tests/manual/iconset.js b/tests/manual/iconset.js
@@ -9,10 +9,10 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
-import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
-import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
-import alignRight from '@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg';
-import alignJustify from '@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg';
+import alignLeft from '@ckeditor/ckeditor5-core/theme/icons/align-left.svg';
+import alignCenter from '@ckeditor/ckeditor5-core/theme/icons/align-center.svg';
+import alignRight from '@ckeditor/ckeditor5-core/theme/icons/align-right.svg';
+import alignJustify from '@ckeditor/ckeditor5-core/theme/icons/align-justify.svg';
 
 import bold from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italic from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
@@ -71,6 +71,8 @@ import table from '@ckeditor/ckeditor5-table/theme/icons/table.svg';
 import tableRow from '@ckeditor/ckeditor5-table/theme/icons/table-row.svg';
 import tableColumn from '@ckeditor/ckeditor5-table/theme/icons/table-column.svg';
 import tableMergeCell from '@ckeditor/ckeditor5-table/theme/icons/table-merge-cell.svg';
+import tableCellProperties from '@ckeditor/ckeditor5-table/theme/icons/table-cell-properties.svg';
+import tableProperties from '@ckeditor/ckeditor5-table/theme/icons/table-properties.svg';
 
 import undo from '@ckeditor/ckeditor5-undo/theme/icons/undo.svg';
 import redo from '@ckeditor/ckeditor5-undo/theme/icons/redo.svg';
@@ -119,6 +121,7 @@ const icons = {
 
 	// table
 	table, tableRow, tableColumn, tableMergeCell,
+	tableCellProperties, tableProperties,
 
 	// undo
 	undo, redo

diff --git a/tests/manual/theme.html b/tests/manual/theme.html
@@ -120,6 +120,9 @@ <h3>Toolbar: Item separators</h3>
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck ck-reset_all"></div>
 
+	<h3>Toolbar: Compact</h3>
+	<div id="toolbar-compact" class="ck ck-reset_all"></div>
+
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>

diff --git a/tests/manual/theme.js b/tests/manual/theme.js
@@ -80,6 +80,7 @@ const ui = testUtils.createTestUIView( {
 	'toolbarWrap': '#toolbar-wrap',
 	'toolbarSeparator': '#toolbar-separator',
 	'toolbarMultiRow': '#toolbar-multi-row',
+	'toolbarCompact': '#toolbar-compact',
 
 	'inputLabeled': '#input-labeled',
 	'inputReadOnly': '#input-read-only'
@@ -485,6 +486,28 @@ function renderToolbar() {
 			icon: boldIcon
 		} )
 	] ) );
+
+	// --- Compact ------------------------------------------------------------
+
+	const compactToolbar = toolbar( [
+		button( {
+			icon: boldIcon,
+			withText: false
+		} ),
+		button( {
+			icon: italicIcon,
+			withText: false,
+			isOn: true
+		} ),
+		button( {
+			icon: cancelIcon,
+			withText: false
+		} )
+	] );
+
+	compactToolbar.isCompact = true;
+
+	ui.toolbarCompact.add( compactToolbar );
 }
 
 function renderInput() {

diff --git a/theme/ckeditor5-table/form.css b/theme/ckeditor5-table/form.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-form {
+	padding: 0 0 var(--ck-spacing-large);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& .ck.ck-input-text {
+		min-width: 100%;
+		width: 0;
+	}
+
+	& .ck.ck-dropdown {
+		min-width: 100%;
+
+		& .ck-dropdown__button {
+			&:not(:focus) {
+				border: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck-button__label {
+				width: 100%;
+			}
+		}
+	}
+}
diff --git a/theme/ckeditor5-table/formheader.css b/theme/ckeditor5-table/formheader.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-table-form-header-height: 38px;
+}
+
+.ck.ck-form__header {
+	padding: 0 var(--ck-spacing-large);
+	height: var(--ck-table-form-header-height);
+	line-height: var(--ck-table-form-header-height);
+	border-bottom: 1px solid var(--ck-color-base-border);
+
+	& .ck-form__header__label {
+		font-weight: bold;
+	}
+}
diff --git a/theme/ckeditor5-table/formrow.css b/theme/ckeditor5-table/formrow.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-form__row {
+	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
+
+	/* Ignore labels that work as fieldset legends */
+	& > *:not(.ck-label) {
+		& + * {
+			margin-left: var(--ck-spacing-large);
+		}
+	}
+
+	& > .ck-label {
+		width: 100%;
+		min-width: 100%;
+	}
+
+	&.ck-table-form__action-row {
+		margin-top: var(--ck-spacing-large);
+
+		& .ck-button .ck-button__label {
+			color: var(--ck-color-text);
+		}
+	}
+}
diff --git a/theme/ckeditor5-table/tablecellproperties.css b/theme/ckeditor5-table/tablecellproperties.css
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-cell-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		& .ck-table-cell-properties-form__background,
+		& .ck-table-cell-properties-form__padding {
+			width: 50%;
+		}
+
+		&.ck-table-cell-properties-form__alignment-row {
+			& .ck.ck-toolbar {
+				background: none;
+			}
+		}
+	}
+}
diff --git a/theme/ckeditor5-table/tableproperties.css b/theme/ckeditor5-table/tableproperties.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-properties-form {
+	width: 320px;
+
+	& .ck-form__row {
+		&.ck-table-properties-form__dimensions-row,
+		&.ck-table-properties-form__alignment-row {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		&.ck-table-properties-form__dimensions-row {
+			& .ck-labeled-view > .ck-label {
+				font-size: 10px;
+			}
+
+			& .ck-table-properties-form__width {
+				margin-right: var(--ck-spacing-small);
+			}
+
+			& .ck-table-properties-form__dimension-operator {
+				margin: 0;
+				align-self: start;
+				display: inline-block;
+				height: var(--ck-ui-component-min-height);
+				line-height: var(--ck-ui-component-min-height);
+			}
+
+			& .ck-table-properties-form__height {
+				margin-left: var(--ck-spacing-small);
+			}
+		}
+
+		&.ck-table-properties-form__alignment-row {
+			& .ck.ck-toolbar {
+				background: none;
+
+				& .ck-toolbar__items > * {
+					width: 40px;
+				}
+			}
+		}
+	}
+}
diff --git a/theme/ckeditor5-ui/components/toolbar/toolbar.css b/theme/ckeditor5-ui/components/toolbar/toolbar.css
@@ -44,6 +44,33 @@
 		}
 	}
 
+	&.ck-toolbar_compact {
+		/* No spacing around items. */
+		padding: 0;
+
+		& .ck-toolbar__items > .ck {
+			/* No spacing between items. */
+			margin: 0;
+
+			/* No rounded corners on the right side of the first child. */
+			&:first-child {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			/* No rounded corners on the left side of the last child. */
+			&:last-child {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+
+			/* "Middle" children should have no rounded corners. */
+			&:not(:first-child):not(:last-child) {
+				border-radius: 0;
+			}
+		}
+	}
+
 	& > .ck-toolbar__items > *,
 	& > .ck.ck-toolbar__grouped-dropdown {
 		/* Make sure items wrapped to the next line have v-spacing */