瀏覽代碼

Added some space to the table cell form. Attached the form to the edited cell.

Aleksander Nowodzinski 5 年之前
父節點
當前提交
d8cb84069b

+ 8 - 6
packages/ckeditor5-table/src/tablecellpropertiesui.js

@@ -14,7 +14,7 @@ import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsid
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 import TableCellPropertiesView from './ui/tablecellpropertiesview';
 import tableCellProperties from './../theme/icons/table-cell-properties.svg';
-import { repositionContextualBalloon, getBalloonPositionData } from './ui/utils';
+import { repositionContextualBalloon, getBalloonCellPositionData } from './ui/utils';
 import { findAncestor } from './commands/utils';
 
 const DEFAULT_BORDER_STYLE = 'none';
@@ -235,7 +235,7 @@ export default class TableCellPropertiesUI extends Plugin {
 		if ( !this._isViewInBalloon ) {
 			this._balloon.add( {
 				view: this.view,
-				position: getBalloonPositionData( editor )
+				position: getBalloonCellPositionData( editor )
 			} );
 		}
 
@@ -310,8 +310,10 @@ function unifyQuadDirectionPropertyValue( value ) {
 		return;
 	}
 
-	// Unify width to one value. If different values are set default to top (or right, etc).
-	value = value.top || value.right || value.bottom || value.left;
-
-	return value;
+	// Unify to one value. If different values are set default to top (or right, etc).
+	for ( const prop in value ) {
+		if ( value[ prop ] && value[ prop ] !== 'none' ) {
+			return value[ prop ];
+		}
+	}
 }

+ 3 - 3
packages/ckeditor5-table/src/ui/tablecellpropertiesview.js

@@ -172,16 +172,16 @@ export default class TableCellPropertiesView extends View {
 								this.borderStyleDropdown,
 							]
 						},
+						this.borderColorInput,
 						this.borderWidthInput,
-						this.borderColorInput
 					]
 				} ),
 
 				// Background & Padding
 				createFormRowDefinition( {
 					children: [
-						this.paddingInput,
 						this.backgroundInput,
+						this.paddingInput,
 					]
 				} ),
 
@@ -198,7 +198,7 @@ export default class TableCellPropertiesView extends View {
 
 				// Action buttons
 				createFormRowDefinition( {
-					className: 'ck-table-cell-properties-form__action-row',
+					className: 'ck-table-form__action-row',
 					children: [
 						this.saveButtonView,
 						this.cancelButtonView

+ 11 - 5
packages/ckeditor5-table/src/ui/utils.js

@@ -9,6 +9,7 @@
 
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import { getTableWidgetAncestor } from '../utils';
+import { findAncestor } from '../commands/utils';
 
 /**
  * A helper utility that positions the
@@ -21,7 +22,7 @@ export function repositionContextualBalloon( editor ) {
 	const balloon = editor.plugins.get( 'ContextualBalloon' );
 
 	if ( getTableWidgetAncestor( editor.editing.view.document.selection ) ) {
-		const position = getBalloonPositionData( editor );
+		const position = getBalloonCellPositionData( editor );
 
 		balloon.updatePosition( position );
 	}
@@ -30,18 +31,23 @@ export function repositionContextualBalloon( editor ) {
 /**
  * Returns the positioning options that control the geometry of the
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
- * to the selected element in the editor content.
+ * to the selected table cell in the editor content.
  *
  * @param {module:core/editor/editor~Editor} editor The editor instance.
  * @returns {module:utils/dom/position~Options}
  */
-export function getBalloonPositionData( editor ) {
+export function getBalloonCellPositionData( editor ) {
+	const model = editor.model;
+	const document = model.document;
+	const selection = document.selection;
 	const editingView = editor.editing.view;
+	const firstPosition = selection.getFirstPosition();
+	const modelTableCell = findAncestor( 'tableCell', firstPosition );
+	const viewTableCell = editor.editing.mapper.toViewElement( modelTableCell );
 	const defaultPositions = BalloonPanelView.defaultPositions;
-	const modelWidget = getTableWidgetAncestor( editor.editing.view.document.selection );
 
 	return {
-		target: editingView.domConverter.viewToDom( modelWidget ),
+		target: editingView.domConverter.viewToDom( viewTableCell ),
 		positions: [
 			defaultPositions.northArrowSouth,
 			defaultPositions.northArrowSouthWest,

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

@@ -55,7 +55,9 @@
 			}
 		}
 
-		&.ck-table-cell-properties-form__action-row {
+		&.ck-table-form__action-row {
+			margin-top: var(--ck-spacing-large);
+
 			& .ck-button-save,
 			& .ck-button-cancel {
 				justify-content: center;

+ 3 - 9
packages/ckeditor5-table/theme/tablecellproperties.css

@@ -4,7 +4,7 @@
  */
 
 .ck.ck-table-cell-properties-form {
-	width: 280px;
+	width: 320px;
 
 	& .ck-form__row {
 		&.ck-table-cell-properties-form__border-row {
@@ -36,18 +36,12 @@
 			}
 
 			& .ck-table-cell-properties-form__border-width {
-				width: 55px;
-				min-width: 55px;
+				width: 70px;
+				min-width: 70px;
 				flex-grow: 0;
 			}
 		}
 
-		& .ck-table-cell-properties-form__padding {
-			width: 135px;
-			min-width: 135px;
-			flex-grow: 0;
-		}
-
 		&.ck-table-cell-properties-form__alignment-row {
 			flex-wrap: wrap;