Преглед изворни кода

Add padding and background UI stubs.

Maciej Gołaszewski пре 6 година
родитељ
комит
6cb1ce3c8f
2 измењених фајлова са 78 додато и 0 уклоњено
  1. 69 0
      packages/ckeditor5-table/src/tablestyle.js
  2. 9 0
      packages/ckeditor5-table/src/tableui.js

+ 69 - 0
packages/ckeditor5-table/src/tablestyle.js

@@ -202,6 +202,75 @@ export default class TableStyle extends Plugin {
 
 			return button;
 		} );
+
+		editor.ui.componentFactory.add( 'backgroundColor', locale => {
+			const button = new ButtonView( locale );
+
+			button.set( {
+				label: 'Background color',
+				icon: false,
+				tooltip: true,
+				withText: true
+			} );
+
+			button.on( 'execute', () => {
+				const model = editor.model;
+				const document = model.document;
+				const selection = document.selection;
+				const firstPosition = selection.getFirstPosition();
+
+				const tableCell = findAncestor( 'tableCell', firstPosition );
+
+				const backgroundColor = tableCell.getAttribute( 'background-color' );
+
+				// eslint-disable-next-line no-undef,no-alert
+				const newColor = prompt( 'Set new background color:', backgroundColor || '' );
+
+				editor.model.change( writer => {
+					writer.setAttribute( 'background-color', newColor, tableCell );
+				} );
+			} );
+
+			return button;
+		} );
+
+		editor.ui.componentFactory.add( 'padding', locale => {
+			const button = new ButtonView( locale );
+
+			button.set( {
+				label: 'Cell padding',
+				icon: false,
+				tooltip: true,
+				withText: true
+			} );
+
+			button.on( 'execute', () => {
+				const model = editor.model;
+				const document = model.document;
+				const selection = document.selection;
+				const firstPosition = selection.getFirstPosition();
+
+				const tableCell = findAncestor( 'tableCell', firstPosition );
+
+				const padding = tableCell.getAttribute( 'padding' );
+
+				let currentPadding;
+
+				if ( padding ) {
+					// Unify width to one value. If different values are set default to top (or right, etc).
+					currentPadding = padding.top || padding.right || padding.bottom || padding.left;
+				}
+
+				// eslint-disable-next-line no-undef,no-alert
+				const newPadding = prompt( 'Set new padding:', currentPadding || '' );
+
+				editor.model.change( writer => {
+					writer.setAttribute( 'padding', newPadding, tableCell );
+				} );
+			} );
+
+			return button;
+		} );
 	}
 }
 

+ 9 - 0
packages/ckeditor5-table/src/tableui.js

@@ -205,6 +205,15 @@ export default class TableUI extends Plugin {
 				{
 					type: 'ui',
 					name: 'borderStyle'
+				},
+				{ type: 'separator' },
+				{
+					type: 'ui',
+					name: 'backgroundColor'
+				},
+				{
+					type: 'ui',
+					name: 'padding'
 				}
 			];