浏览代码

Used LabeledView in the cell properties form.

Aleksander Nowodzinski 5 年之前
父节点
当前提交
69a168fda0

+ 4 - 4
packages/ckeditor5-table/src/tablecellpropertiesui.js

@@ -209,10 +209,10 @@ export default class TableCellPropertiesUI extends Plugin {
 
 		const view = this.view;
 
-		view.borderWidthInput.inputView.element.value = '';
-		view.borderColorInput.inputView.element.value = '';
-		view.paddingInput.inputView.element.value = '';
-		view.backgroundInput.inputView.element.value = '';
+		view.borderWidthInput.view.element.value =
+			view.borderColorInput.view.element.value =
+			view.paddingInput.view.element.value =
+			view.backgroundInput.view.element.value = '';
 
 		view.set( {
 			borderWidth,

+ 37 - 53
packages/ckeditor5-table/src/ui/tablecellpropertiesview.js

@@ -17,10 +17,10 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 
-import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
-import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
+import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
+import { labeledInputCreator, labeledDropdownCreator } from '@ckeditor/ckeditor5-ui/src/labeledview/creators';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
-import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
@@ -247,18 +247,23 @@ export default class TableCellPropertiesView extends View {
 
 		// -- Style ---------------------------------------------------
 
-		const borderStyleDropdown = createDropdown( locale );
-		borderStyleDropdown.buttonView.set( {
+		const borderStyleDropdown = this.borderStyleDropdown = new LabeledView( locale, labeledDropdownCreator );
+		borderStyleDropdown.set( {
+			label: t( 'Style' ),
+			class: 'ck-table-cell-properties-form__border-style'
+		} );
+
+		borderStyleDropdown.view.buttonView.set( {
 			isOn: false,
 			withText: true,
 			tooltip: t( 'Style' )
 		} );
 
-		borderStyleDropdown.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
+		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
 			return this._borderStyleLabels[ value ];
 		} );
 
-		borderStyleDropdown.on( 'execute', evt => {
+		borderStyleDropdown.view.on( 'execute', evt => {
 			const value = evt.source._borderStyleValue;
 
 			// Update the UI.
@@ -270,63 +275,39 @@ export default class TableCellPropertiesView extends View {
 			} );
 		} );
 
-		addListToDropdown( borderStyleDropdown, this._getBorderStyleDefinitions() );
-
-		const borderStyleLabel = new LabelView( locale );
-		borderStyleLabel.text = t( 'Style' );
-
-		// TODO: This should become a new component or be integrated into LabeledInputView.
-		this.borderStyleDropdown = new View( locale );
-		this.borderStyleDropdown.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-labeled-dropdown',
-					'ck-table-cell-properties-form__border-style'
-				],
-			},
-			children: [
-				borderStyleLabel,
-				borderStyleDropdown,
-			]
-		} );
-
-		this.borderStyleDropdown.focus = () => {
-			borderStyleDropdown.focus();
-		};
+		addListToDropdown( borderStyleDropdown.view, this._getBorderStyleDefinitions() );
 
 		// -- Width ---------------------------------------------------
 
-		const borderWidthInput = this.borderWidthInput = new LabeledInputView( locale, InputTextView );
+		const borderWidthInput = this.borderWidthInput = new LabeledView( locale, labeledInputCreator );
 
 		borderWidthInput.set( {
 			label: t( 'Width' ),
 			class: 'ck-table-cell-properties-form__border-width',
 		} );
 
-		borderWidthInput.bind( 'value' ).to( this, 'borderWidth' );
-		borderWidthInput.bind( 'isReadOnly' ).to( this, 'borderStyle', value => {
-			return value === 'none';
+		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
+		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
+			return value !== 'none';
 		} );
-		borderWidthInput.inputView.on( 'input', () => {
+		borderWidthInput.view.on( 'input', () => {
 			this.fire( 'update', {
-				borderWidth: borderWidthInput.inputView.element.value
+				borderWidth: borderWidthInput.view.element.value
 			} );
 		} );
 
 		// -- Color ---------------------------------------------------
 
-		const borderColorInput = this.borderColorInput = new LabeledInputView( locale, InputTextView );
+		const borderColorInput = this.borderColorInput = new LabeledView( locale, labeledInputCreator );
 		borderColorInput.label = t( 'Color' );
-		borderColorInput.bind( 'value' ).to( this, 'borderColor' );
-		borderColorInput.bind( 'isReadOnly' ).to( this, 'borderStyle', value => {
-			return value === 'none';
+		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
+			return value !== 'none';
 		} );
 
-		borderColorInput.inputView.on( 'input', () => {
+		borderColorInput.view.on( 'input', () => {
 			this.fire( 'update', {
-				borderColor: borderColorInput.inputView.element.value
+				borderColor: borderColorInput.view.element.value
 			} );
 		} );
 	}
@@ -337,14 +318,17 @@ export default class TableCellPropertiesView extends View {
 	_createBackgroundField() {
 		const locale = this.locale;
 		const t = this.t;
-		const backgroundInput = this.backgroundInput = new LabeledInputView( locale, InputTextView );
+		const backgroundInput = this.backgroundInput = new LabeledView( locale, labeledInputCreator );
 
-		backgroundInput.label = t( 'Background' );
-		backgroundInput.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.set( {
+			label: t( 'Background' ),
+			class: 'ck-table-cell-properties-form__background',
+		} );
 
-		backgroundInput.inputView.on( 'input', () => {
+		backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.view.on( 'input', () => {
 			this.fire( 'update', {
-				backgroundColor: backgroundInput.inputView.element.value
+				backgroundColor: backgroundInput.view.element.value
 			} );
 		} );
 	}
@@ -355,17 +339,17 @@ export default class TableCellPropertiesView extends View {
 	_createPaddingField() {
 		const locale = this.locale;
 		const t = this.t;
-		const paddingInput = this.paddingInput = new LabeledInputView( locale, InputTextView );
+		const paddingInput = this.paddingInput = new LabeledView( locale, labeledInputCreator );
 
 		paddingInput.set( {
 			label: t( 'Padding' ),
 			class: 'ck-table-cell-properties-form__padding',
 		} );
 
-		paddingInput.bind( 'value' ).to( this, 'padding' );
-		paddingInput.inputView.on( 'input', () => {
+		paddingInput.view.bind( 'value' ).to( this, 'padding' );
+		paddingInput.view.on( 'input', () => {
 			this.fire( 'update', {
-				padding: paddingInput.inputView.element.value
+				padding: paddingInput.view.element.value
 			} );
 		} );
 	}

+ 1 - 1
packages/ckeditor5-table/theme/form.css

@@ -33,7 +33,7 @@
 			}
 
 			& .ck-button__label {
-				width: 4em;
+				width: 100%;
 			}
 		}
 	}

+ 13 - 8
packages/ckeditor5-table/theme/tablecellproperties.css

@@ -15,33 +15,38 @@
 				min-width: 100%;
 			}
 
-			& .ck-labeled-input,
-			& .ck-labeled-dropdown {
+			& .ck-labeled-view {
 				display: flex;
 				flex-direction: column-reverse;
 				align-items: center;
 
-				& .ck-label {
+				& > .ck-label {
 					font-size: 10px;
 				}
-			}
 
-			& .ck-labeled-dropdown {
-				flex-grow: 0;
+				& .ck.ck-dropdown {
+					flex-grow: 0;
+				}
 			}
 
 			& .ck-table-cell-properties-form__border-style {
 				width: 80px;
 				min-width: 80px;
+				flex-grow: 0;
 			}
 
 			& .ck-table-cell-properties-form__border-width {
-				width: 70px;
-				min-width: 70px;
+				width: 80px;
+				min-width: 80px;
 				flex-grow: 0;
 			}
 		}
 
+		& .ck-table-cell-properties-form__background,
+		& .ck-table-cell-properties-form__padding {
+			width: 50%;
+		}
+
 		&.ck-table-cell-properties-form__alignment-row {
 			flex-wrap: wrap;