Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit 19fc8e9

Browse files
oleqoleq
authored
Merge pull request #236 from ckeditor/i/6189
Feature: Added width and height fields to the table cell properties view. Closes ckeditor/ckeditor5#6189.
2 parents be0d759 + 58f09f7 commit 19fc8e9

File tree

8 files changed

+266
-20
lines changed

8 files changed

+266
-20
lines changed

‎src/tablecellproperties/tablecellpropertiesui.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ export default class TableCellPropertiesUI extends Plugin {
157157
view.on( 'change:borderWidth', this._getPropertyChangeCallback( 'tableCellBorderWidth' ) );
158158
view.on( 'change:padding', this._getPropertyChangeCallback( 'tableCellPadding' ) );
159159
view.on( 'change:backgroundColor', this._getPropertyChangeCallback( 'tableCellBackgroundColor' ) );
160+
view.on( 'change:width', this._getPropertyChangeCallback( 'tableCellWidth' ) );
161+
view.on( 'change:height', this._getPropertyChangeCallback( 'tableCellHeight' ) );
160162
view.on( 'change:horizontalAlignment', this._getPropertyChangeCallback( 'tableCellHorizontalAlignment' ) );
161163
view.on( 'change:verticalAlignment', this._getPropertyChangeCallback( 'tableCellVerticalAlignment' ) );
162164

@@ -180,6 +182,8 @@ export default class TableCellPropertiesUI extends Plugin {
180182
borderStyle: commands.get( 'tableCellBorderStyle' ).value || DEFAULT_BORDER_STYLE,
181183
borderColor: commands.get( 'tableCellBorderColor' ).value || '',
182184
borderWidth: commands.get( 'tableCellBorderWidth' ).value || '',
185+
width: commands.get( 'tableCellWidth' ).value || '',
186+
height: commands.get( 'tableCellHeight' ).value || '',
183187
padding: commands.get( 'tableCellPadding' ).value || '',
184188
backgroundColor: commands.get( 'tableCellBackgroundColor' ).value || '',
185189
horizontalAlignment: commands.get( 'tableCellHorizontalAlignment' ).value || DEFAULT_HORIZONTAL_ALIGNMENT,

‎src/tablecellproperties/ui/tablecellpropertiesview.js‎

Lines changed: 132 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export default class TableCellPropertiesView extends View {
6363
super( locale );
6464

6565
const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
66+
const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
6667
const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
6768
const { saveButtonView, cancelButtonView } = this._createActionButtons();
6869

@@ -136,6 +137,24 @@ export default class TableCellPropertiesView extends View {
136137
*/
137138
backgroundColor: '',
138139

140+
/**
141+
* The value of the table cell width style.
142+
*
143+
* @observable
144+
* @default ''
145+
* @member #width
146+
*/
147+
width: '',
148+
149+
/**
150+
* The value of the table cell height style.
151+
*
152+
* @observable
153+
* @default ''
154+
* @member #height
155+
*/
156+
height: '',
157+
139158
/**
140159
* The value of the horizontal text alignment style.
141160
*
@@ -195,6 +214,22 @@ export default class TableCellPropertiesView extends View {
195214
*/
196215
this.paddingInput = this._createPaddingField();
197216

217+
/**
218+
* An input that allows specifying the table cell width.
219+
*
220+
* @readonly
221+
* @member {module:ui/inputtext/inputtextview~InputTextView}
222+
*/
223+
this.widthInput = widthInput;
224+
225+
/**
226+
* An input that allows specifying the table cell height.
227+
*
228+
* @readonly
229+
* @member {module:ui/inputtext/inputtextview~InputTextView}
230+
*/
231+
this.heightInput = heightInput;
232+
198233
/**
199234
* A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
200235
*
@@ -271,11 +306,34 @@ export default class TableCellPropertiesView extends View {
271306
class: 'ck-table-form__border-row'
272307
} ) );
273308

274-
// Background and padding row.
309+
// Background.
275310
this.children.add( new FormRowView( locale, {
276311
children: [
277-
this.backgroundInput,
278-
this.paddingInput,
312+
this.backgroundInput
313+
]
314+
} ) );
315+
316+
// Dimensions row and padding.
317+
this.children.add( new FormRowView( locale, {
318+
children: [
319+
// Dimensions row.
320+
new FormRowView( locale, {
321+
labelView: dimensionsLabel,
322+
children: [
323+
dimensionsLabel,
324+
widthInput,
325+
operatorLabel,
326+
heightInput
327+
],
328+
class: 'ck-table-cell-properties-form__dimensions-row'
329+
} ),
330+
// Padding row.
331+
new FormRowView( locale, {
332+
children: [
333+
this.paddingInput
334+
],
335+
class: 'ck-table-cell-properties-form__padding-row'
336+
} )
279337
]
280338
} ) );
281339

@@ -332,6 +390,8 @@ export default class TableCellPropertiesView extends View {
332390
this.borderColorInput,
333391
this.borderWidthInput,
334392
this.backgroundInput,
393+
this.widthInput,
394+
this.heightInput,
335395
this.paddingInput,
336396
this.horizontalAlignmentToolbar,
337397
this.verticalAlignmentToolbar,
@@ -465,6 +525,75 @@ export default class TableCellPropertiesView extends View {
465525
return backgroundInput;
466526
}
467527

528+
/**
529+
* Creates the following form fields:
530+
*
531+
* * {@link #widthInput}.
532+
* * {@link #heightInput}.
533+
*
534+
* @private
535+
* @returns {module:ui/labeledview/labeledview~LabeledView}
536+
*/
537+
_createDimensionFields() {
538+
const locale = this.locale;
539+
const t = this.t;
540+
541+
// -- Label ---------------------------------------------------
542+
543+
const dimensionsLabel = new LabelView( locale );
544+
dimensionsLabel.text = t( 'Dimensions' );
545+
546+
// -- Width ---------------------------------------------------
547+
548+
const widthInput = new LabeledView( locale, createLabeledInputText );
549+
550+
widthInput.set( {
551+
label: t( 'Width' ),
552+
class: 'ck-table-cell-properties-form__width',
553+
} );
554+
555+
widthInput.view.bind( 'value' ).to( this, 'width' );
556+
widthInput.view.on( 'input', () => {
557+
this.width = widthInput.view.element.value;
558+
} );
559+
560+
// -- Operator ---------------------------------------------------
561+
562+
const operatorLabel = new View( locale );
563+
operatorLabel.setTemplate( {
564+
tag: 'span',
565+
attributes: {
566+
class: [
567+
'ck-table-form__dimension-operator'
568+
]
569+
},
570+
children: [
571+
{ text: '×' }
572+
]
573+
} );
574+
575+
// -- Height ---------------------------------------------------
576+
577+
const heightInput = new LabeledView( locale, createLabeledInputText );
578+
579+
heightInput.set( {
580+
label: t( 'Height' ),
581+
class: 'ck-table-cell-properties-form__height',
582+
} );
583+
584+
heightInput.view.bind( 'value' ).to( this, 'height' );
585+
heightInput.view.on( 'input', () => {
586+
this.height = heightInput.view.element.value;
587+
} );
588+
589+
return {
590+
dimensionsLabel,
591+
widthInput,
592+
operatorLabel,
593+
heightInput
594+
};
595+
}
596+
468597
/**
469598
* Creates the following form fields:
470599
*

‎src/tableproperties/ui/tablepropertiesview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,7 @@ export default class TablePropertiesView extends View {
510510
tag: 'span',
511511
attributes: {
512512
class: [
513-
'ck-table-properties-form__dimension-operator'
513+
'ck-table-form__dimension-operator'
514514
]
515515
},
516516
children: [

‎tests/tablecellproperties/tablecellpropertiesui.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -267,10 +267,12 @@ describe( 'table cell properties', () => {
267267
editor.commands.get( 'tableCellBorderStyle' ).value = 'a';
268268
editor.commands.get( 'tableCellBorderColor' ).value = 'b';
269269
editor.commands.get( 'tableCellBorderWidth' ).value = 'c';
270-
editor.commands.get( 'tableCellPadding' ).value = 'd';
271-
editor.commands.get( 'tableCellBackgroundColor' ).value = 'e';
272-
editor.commands.get( 'tableCellHorizontalAlignment' ).value = 'f';
273-
editor.commands.get( 'tableCellVerticalAlignment' ).value = 'g';
270+
editor.commands.get( 'tableCellWidth' ).value = 'd';
271+
editor.commands.get( 'tableCellHeight' ).value = 'e';
272+
editor.commands.get( 'tableCellPadding' ).value = 'f';
273+
editor.commands.get( 'tableCellBackgroundColor' ).value = 'g';
274+
editor.commands.get( 'tableCellHorizontalAlignment' ).value = 'h';
275+
editor.commands.get( 'tableCellVerticalAlignment' ).value = 'i';
274276

275277
tableCellPropertiesButton.fire( 'execute' );
276278

@@ -279,17 +281,21 @@ describe( 'table cell properties', () => {
279281
borderStyle: 'a',
280282
borderColor: 'b',
281283
borderWidth: 'c',
282-
padding: 'd',
283-
backgroundColor: 'e',
284-
horizontalAlignment: 'f',
285-
verticalAlignment: 'g'
284+
width: 'd',
285+
height: 'e',
286+
padding: 'f',
287+
backgroundColor: 'g',
288+
horizontalAlignment: 'h',
289+
verticalAlignment: 'i'
286290
} );
287291
} );
288292

289293
it( 'should use default values when command has no value', () => {
290294
editor.commands.get( 'tableCellBorderStyle' ).value = null;
291295
editor.commands.get( 'tableCellBorderColor' ).value = null;
292296
editor.commands.get( 'tableCellBorderWidth' ).value = null;
297+
editor.commands.get( 'tableCellWidth' ).value = null;
298+
editor.commands.get( 'tableCellHeight' ).value = null;
293299
editor.commands.get( 'tableCellPadding' ).value = null;
294300
editor.commands.get( 'tableCellBackgroundColor' ).value = null;
295301
editor.commands.get( 'tableCellHorizontalAlignment' ).value = null;
@@ -302,6 +308,8 @@ describe( 'table cell properties', () => {
302308
borderStyle: 'none',
303309
borderColor: '',
304310
borderWidth: '',
311+
width: '',
312+
height: '',
305313
padding: '',
306314
backgroundColor: '',
307315
horizontalAlignment: 'left',

‎tests/tablecellproperties/ui/tablecellpropertiesview.js‎

Lines changed: 92 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -219,13 +219,12 @@ describe( 'table cell properties', () => {
219219
} );
220220
} );
221221

222-
describe( 'background and padding row', () => {
222+
describe( 'background row', () => {
223223
it( 'should be defined', () => {
224224
const row = view.element.childNodes[ 2 ];
225225

226226
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
227227
expect( row.childNodes[ 0 ] ).to.equal( view.backgroundInput.element );
228-
expect( row.childNodes[ 1 ] ).to.equal( view.paddingInput.element );
229228
} );
230229

231230
describe( 'background color input', () => {
@@ -259,6 +258,93 @@ describe( 'table cell properties', () => {
259258
expect( view.backgroundColor ).to.equal( 'bar' );
260259
} );
261260
} );
261+
} );
262+
263+
describe( 'dimensions row', () => {
264+
it( 'should be defined', () => {
265+
const row = view.element.childNodes[ 3 ].childNodes[ 0 ];
266+
267+
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
268+
expect( row.classList.contains( 'ck-table-cell-properties-form__dimensions-row' ) ).to.be.true;
269+
expect( row.childNodes[ 0 ].textContent ).to.equal( 'Dimensions' );
270+
expect( row.childNodes[ 1 ] ).to.equal( view.widthInput.element );
271+
expect( row.childNodes[ 2 ].textContent ).to.equal( '×' );
272+
expect( row.childNodes[ 3 ] ).to.equal( view.heightInput.element );
273+
} );
274+
275+
describe( 'width input', () => {
276+
let labeledInput;
277+
278+
beforeEach( () => {
279+
labeledInput = view.widthInput;
280+
} );
281+
282+
it( 'should be created', () => {
283+
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
284+
expect( labeledInput.label ).to.equal( 'Width' );
285+
expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__width' );
286+
} );
287+
288+
it( 'should reflect #width property', () => {
289+
view.width = 'foo';
290+
expect( labeledInput.view.value ).to.equal( 'foo' );
291+
292+
view.width = 'bar';
293+
expect( labeledInput.view.value ).to.equal( 'bar' );
294+
} );
295+
296+
it( 'should update #width on DOM "input" event', () => {
297+
labeledInput.view.element.value = 'foo';
298+
labeledInput.view.fire( 'input' );
299+
expect( view.width ).to.equal( 'foo' );
300+
301+
labeledInput.view.element.value = 'bar';
302+
labeledInput.view.fire( 'input' );
303+
expect( view.width ).to.equal( 'bar' );
304+
} );
305+
} );
306+
307+
describe( 'height input', () => {
308+
let labeledInput;
309+
310+
beforeEach( () => {
311+
labeledInput = view.heightInput;
312+
} );
313+
314+
it( 'should be created', () => {
315+
expect( labeledInput.view ).to.be.instanceOf( InputTextView );
316+
expect( labeledInput.label ).to.equal( 'Height' );
317+
expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__height' );
318+
} );
319+
320+
it( 'should reflect #height property', () => {
321+
view.height = 'foo';
322+
expect( labeledInput.view.value ).to.equal( 'foo' );
323+
324+
view.height = 'bar';
325+
expect( labeledInput.view.value ).to.equal( 'bar' );
326+
} );
327+
328+
it( 'should update #height on DOM "input" event', () => {
329+
labeledInput.view.element.value = 'foo';
330+
labeledInput.view.fire( 'input' );
331+
expect( view.height ).to.equal( 'foo' );
332+
333+
labeledInput.view.element.value = 'bar';
334+
labeledInput.view.fire( 'input' );
335+
expect( view.height ).to.equal( 'bar' );
336+
} );
337+
} );
338+
} );
339+
340+
describe( 'padding row', () => {
341+
it( 'should be defined', () => {
342+
const row = view.element.childNodes[ 3 ].childNodes[ 1 ];
343+
344+
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
345+
expect( row.classList.contains( 'ck-table-cell-properties-form__padding-row' ) ).to.be.true;
346+
expect( row.childNodes[ 0 ] ).to.equal( view.paddingInput.element );
347+
} );
262348

263349
describe( 'padding input', () => {
264350
let labeledInput;
@@ -295,7 +381,7 @@ describe( 'table cell properties', () => {
295381

296382
describe( 'text alignment row', () => {
297383
it( 'should be defined', () => {
298-
const row = view.element.childNodes[ 3 ];
384+
const row = view.element.childNodes[ 4 ];
299385

300386
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
301387
expect( row.classList.contains( 'ck-table-cell-properties-form__alignment-row' ) ).to.be.true;
@@ -386,7 +472,7 @@ describe( 'table cell properties', () => {
386472

387473
describe( 'action row', () => {
388474
it( 'should be defined', () => {
389-
const row = view.element.childNodes[ 4 ];
475+
const row = view.element.childNodes[ 5 ];
390476

391477
expect( row.classList.contains( 'ck-form__row' ) ).to.be.true;
392478
expect( row.classList.contains( 'ck-table-form__action-row' ) ).to.be.true;
@@ -441,6 +527,8 @@ describe( 'table cell properties', () => {
441527
view.borderColorInput,
442528
view.borderWidthInput,
443529
view.backgroundInput,
530+
view.widthInput,
531+
view.heightInput,
444532
view.paddingInput,
445533
view.horizontalAlignmentToolbar,
446534
view.verticalAlignmentToolbar,

0 commit comments

Comments
 (0)