|
@@ -61,6 +61,10 @@ export default class TableCellPropertiesView extends View {
|
|
|
constructor( locale ) {
|
|
constructor( locale ) {
|
|
|
super( locale );
|
|
super( locale );
|
|
|
|
|
|
|
|
|
|
+ const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
|
|
|
|
|
+ const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
|
|
|
|
|
+ const { saveButtonView, cancelButtonView } = this._createActionButtons();
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* Tracks information about the DOM focus in the form.
|
|
* Tracks information about the DOM focus in the form.
|
|
|
*
|
|
*
|
|
@@ -150,6 +154,76 @@ export default class TableCellPropertiesView extends View {
|
|
|
verticalAlignment: 'middle'
|
|
verticalAlignment: 'middle'
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * A dropdown that allows selecting the style of the table cell border.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/dropdown/dropdownview~DropdownView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.borderStyleDropdown = borderStyleDropdown;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * An input that allows specifying the width of the table cell border.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/inputtext/inputtextview~InputTextView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.borderWidthInput = borderWidthInput;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * An input that allows specifying the color of the table cell border.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/inputtext/inputtextview~InputTextView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.borderColorInput = borderColorInput;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * An input that allows specifying the table cell background color.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/inputtext/inputtextview~InputTextView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.backgroundInput = this._createBackgroundField();
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * An input that allows specifying the table cell padding.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/inputtext/inputtextview~InputTextView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.paddingInput = this._createPaddingField();
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/toolbar/toolbar~ToolbarView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.horizontalAlignmentToolbar = horizontalAlignmentToolbar;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @readonly
|
|
|
|
|
+ * @member {module:ui/toolbar/toolbar~ToolbarView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.verticalAlignmentToolbar = verticalAlignmentToolbar;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * The "Save" button view.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @member {module:ui/button/buttonview~ButtonView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.saveButtonView = saveButtonView;
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * The "Cancel" button view.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @member {module:ui/button/buttonview~ButtonView}
|
|
|
|
|
+ */
|
|
|
|
|
+ this.cancelButtonView = cancelButtonView;
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* A collection of views that can be focused in the form.
|
|
* A collection of views that can be focused in the form.
|
|
|
*
|
|
*
|
|
@@ -179,24 +253,17 @@ export default class TableCellPropertiesView extends View {
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- this._createHeaderView();
|
|
|
|
|
- this._createBorderFields();
|
|
|
|
|
- this._createBackgroundField();
|
|
|
|
|
- this._createPaddingField();
|
|
|
|
|
- this._createAlignmentFields();
|
|
|
|
|
- this._createActionButtons();
|
|
|
|
|
-
|
|
|
|
|
// Form header.
|
|
// Form header.
|
|
|
- this.children.add( this._headerView );
|
|
|
|
|
|
|
+ this.children.add( this._createHeaderView() );
|
|
|
|
|
|
|
|
// Border row.
|
|
// Border row.
|
|
|
this.children.add( new FormRowView( locale, {
|
|
this.children.add( new FormRowView( locale, {
|
|
|
- labelView: this._borderRowLabel,
|
|
|
|
|
|
|
+ labelView: borderRowLabel,
|
|
|
children: [
|
|
children: [
|
|
|
- this._borderRowLabel,
|
|
|
|
|
- this.borderStyleDropdown,
|
|
|
|
|
- this.borderColorInput,
|
|
|
|
|
- this.borderWidthInput
|
|
|
|
|
|
|
+ borderRowLabel,
|
|
|
|
|
+ borderStyleDropdown,
|
|
|
|
|
+ borderColorInput,
|
|
|
|
|
+ borderWidthInput
|
|
|
],
|
|
],
|
|
|
class: 'ck-table-cell-properties-form__border-row'
|
|
class: 'ck-table-cell-properties-form__border-row'
|
|
|
} ) );
|
|
} ) );
|
|
@@ -211,11 +278,11 @@ export default class TableCellPropertiesView extends View {
|
|
|
|
|
|
|
|
// Text alignment row.
|
|
// Text alignment row.
|
|
|
this.children.add( new FormRowView( locale, {
|
|
this.children.add( new FormRowView( locale, {
|
|
|
- labelView: this._alignmentLabel,
|
|
|
|
|
|
|
+ labelView: alignmentLabel,
|
|
|
children: [
|
|
children: [
|
|
|
- this._alignmentLabel,
|
|
|
|
|
- this.horizontalAlignmentToolbar,
|
|
|
|
|
- this.verticalAlignmentToolbar,
|
|
|
|
|
|
|
+ alignmentLabel,
|
|
|
|
|
+ horizontalAlignmentToolbar,
|
|
|
|
|
+ verticalAlignmentToolbar,
|
|
|
],
|
|
],
|
|
|
class: 'ck-table-cell-properties-form__alignment-row'
|
|
class: 'ck-table-cell-properties-form__alignment-row'
|
|
|
} ) );
|
|
} ) );
|
|
@@ -289,14 +356,15 @@ export default class TableCellPropertiesView extends View {
|
|
|
* Creates the header of the form with a localized label.
|
|
* Creates the header of the form with a localized label.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {module:ui/view~View}
|
|
|
*/
|
|
*/
|
|
|
_createHeaderView() {
|
|
_createHeaderView() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
|
const t = this.t;
|
|
const t = this.t;
|
|
|
|
|
|
|
|
- this._headerView = new View( locale );
|
|
|
|
|
|
|
+ const headerView = new View( locale );
|
|
|
|
|
|
|
|
- this._headerView.setTemplate( {
|
|
|
|
|
|
|
+ headerView.setTemplate( {
|
|
|
tag: 'div',
|
|
tag: 'div',
|
|
|
attributes: {
|
|
attributes: {
|
|
|
class: [
|
|
class: [
|
|
@@ -308,6 +376,8 @@ export default class TableCellPropertiesView extends View {
|
|
|
t( 'Cell properties' )
|
|
t( 'Cell properties' )
|
|
|
]
|
|
]
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ return headerView;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -318,6 +388,7 @@ export default class TableCellPropertiesView extends View {
|
|
|
* * {@link #borderColorInput}.
|
|
* * {@link #borderColorInput}.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {Object.<String,module:ui/view~View>}
|
|
|
*/
|
|
*/
|
|
|
_createBorderFields() {
|
|
_createBorderFields() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
@@ -325,12 +396,12 @@ export default class TableCellPropertiesView extends View {
|
|
|
|
|
|
|
|
// -- Group label ---------------------------------------------
|
|
// -- Group label ---------------------------------------------
|
|
|
|
|
|
|
|
- const borderRowLabel = this._borderRowLabel = new LabelView( locale );
|
|
|
|
|
|
|
+ const borderRowLabel = new LabelView( locale );
|
|
|
borderRowLabel.text = t( 'Border' );
|
|
borderRowLabel.text = t( 'Border' );
|
|
|
|
|
|
|
|
// -- Style ---------------------------------------------------
|
|
// -- Style ---------------------------------------------------
|
|
|
|
|
|
|
|
- const borderStyleDropdown = this.borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
|
|
|
|
|
|
|
+ const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
|
|
|
borderStyleDropdown.set( {
|
|
borderStyleDropdown.set( {
|
|
|
label: t( 'Style' ),
|
|
label: t( 'Style' ),
|
|
|
class: 'ck-table-cell-properties-form__border-style'
|
|
class: 'ck-table-cell-properties-form__border-style'
|
|
@@ -354,7 +425,7 @@ export default class TableCellPropertiesView extends View {
|
|
|
|
|
|
|
|
// -- Width ---------------------------------------------------
|
|
// -- Width ---------------------------------------------------
|
|
|
|
|
|
|
|
- const borderWidthInput = this.borderWidthInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
+ const borderWidthInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
|
borderWidthInput.set( {
|
|
borderWidthInput.set( {
|
|
|
label: t( 'Width' ),
|
|
label: t( 'Width' ),
|
|
@@ -371,7 +442,7 @@ export default class TableCellPropertiesView extends View {
|
|
|
|
|
|
|
|
// -- Color ---------------------------------------------------
|
|
// -- Color ---------------------------------------------------
|
|
|
|
|
|
|
|
- const borderColorInput = this.borderColorInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
+ const borderColorInput = new LabeledView( locale, createLabeledInputText );
|
|
|
borderColorInput.label = t( 'Color' );
|
|
borderColorInput.label = t( 'Color' );
|
|
|
borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
|
|
borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
|
|
|
borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
|
|
borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
|
|
@@ -381,6 +452,13 @@ export default class TableCellPropertiesView extends View {
|
|
|
borderColorInput.view.on( 'input', () => {
|
|
borderColorInput.view.on( 'input', () => {
|
|
|
this.borderColor = borderColorInput.view.element.value;
|
|
this.borderColor = borderColorInput.view.element.value;
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ borderRowLabel,
|
|
|
|
|
+ borderStyleDropdown,
|
|
|
|
|
+ borderColorInput,
|
|
|
|
|
+ borderWidthInput,
|
|
|
|
|
+ };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -389,11 +467,13 @@ export default class TableCellPropertiesView extends View {
|
|
|
* * {@link #backgroundInput}.
|
|
* * {@link #backgroundInput}.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {module:ui/labeledview/labeledview~LabeledView}
|
|
|
*/
|
|
*/
|
|
|
_createBackgroundField() {
|
|
_createBackgroundField() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
|
const t = this.t;
|
|
const t = this.t;
|
|
|
- const backgroundInput = this.backgroundInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const backgroundInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
|
backgroundInput.set( {
|
|
backgroundInput.set( {
|
|
|
label: t( 'Background' ),
|
|
label: t( 'Background' ),
|
|
@@ -404,6 +484,8 @@ export default class TableCellPropertiesView extends View {
|
|
|
backgroundInput.view.on( 'input', () => {
|
|
backgroundInput.view.on( 'input', () => {
|
|
|
this.backgroundColor = backgroundInput.view.element.value;
|
|
this.backgroundColor = backgroundInput.view.element.value;
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ return backgroundInput;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -412,11 +494,13 @@ export default class TableCellPropertiesView extends View {
|
|
|
* * {@link #paddingInput}.
|
|
* * {@link #paddingInput}.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {module:ui/labeledview/labeledview~LabeledView}
|
|
|
*/
|
|
*/
|
|
|
_createPaddingField() {
|
|
_createPaddingField() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
|
const t = this.t;
|
|
const t = this.t;
|
|
|
- const paddingInput = this.paddingInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
+
|
|
|
|
|
+ const paddingInput = new LabeledView( locale, createLabeledInputText );
|
|
|
|
|
|
|
|
paddingInput.set( {
|
|
paddingInput.set( {
|
|
|
label: t( 'Padding' ),
|
|
label: t( 'Padding' ),
|
|
@@ -427,6 +511,8 @@ export default class TableCellPropertiesView extends View {
|
|
|
paddingInput.view.on( 'input', () => {
|
|
paddingInput.view.on( 'input', () => {
|
|
|
this.padding = paddingInput.view.element.value;
|
|
this.padding = paddingInput.view.element.value;
|
|
|
} );
|
|
} );
|
|
|
|
|
+
|
|
|
|
|
+ return paddingInput;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -436,25 +522,33 @@ export default class TableCellPropertiesView extends View {
|
|
|
* * {@link #verticalAlignmentToolbar}.
|
|
* * {@link #verticalAlignmentToolbar}.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {Object.<String,module:ui/view~View>}
|
|
|
*/
|
|
*/
|
|
|
_createAlignmentFields() {
|
|
_createAlignmentFields() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
|
const t = this.t;
|
|
const t = this.t;
|
|
|
|
|
|
|
|
- this._alignmentLabel = new LabelView( locale );
|
|
|
|
|
- this._alignmentLabel.text = t( 'Text alignment' );
|
|
|
|
|
|
|
+ const alignmentLabel = new LabelView( locale );
|
|
|
|
|
+
|
|
|
|
|
+ alignmentLabel.text = t( 'Text alignment' );
|
|
|
|
|
|
|
|
// -- Horizontal ---------------------------------------------------
|
|
// -- Horizontal ---------------------------------------------------
|
|
|
|
|
|
|
|
- this.horizontalAlignmentToolbar = new ToolbarView( locale );
|
|
|
|
|
- this.horizontalAlignmentToolbar.ariaLabel = t( 'Horizontal text alignment toolbar' );
|
|
|
|
|
- this._fillAlignmentToolbar( this.horizontalAlignmentToolbar, this._horizontalAlignmentLabels, 'horizontalAlignment' );
|
|
|
|
|
|
|
+ const horizontalAlignmentToolbar = new ToolbarView( locale );
|
|
|
|
|
+ horizontalAlignmentToolbar.ariaLabel = t( 'Horizontal text alignment toolbar' );
|
|
|
|
|
+ this._fillAlignmentToolbar( horizontalAlignmentToolbar, this._horizontalAlignmentLabels, 'horizontalAlignment' );
|
|
|
|
|
|
|
|
// -- Vertical -----------------------------------------------------
|
|
// -- Vertical -----------------------------------------------------
|
|
|
|
|
|
|
|
- this.verticalAlignmentToolbar = new ToolbarView( locale );
|
|
|
|
|
- this.verticalAlignmentToolbar.ariaLabel = t( 'Vertical text alignment toolbar' );
|
|
|
|
|
- this._fillAlignmentToolbar( this.verticalAlignmentToolbar, this._verticalAlignmentLabels, 'verticalAlignment' );
|
|
|
|
|
|
|
+ const verticalAlignmentToolbar = new ToolbarView( locale );
|
|
|
|
|
+ verticalAlignmentToolbar.ariaLabel = t( 'Vertical text alignment toolbar' );
|
|
|
|
|
+ this._fillAlignmentToolbar( verticalAlignmentToolbar, this._verticalAlignmentLabels, 'verticalAlignment' );
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ horizontalAlignmentToolbar,
|
|
|
|
|
+ verticalAlignmentToolbar,
|
|
|
|
|
+ alignmentLabel
|
|
|
|
|
+ };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -464,17 +558,14 @@ export default class TableCellPropertiesView extends View {
|
|
|
* * {@link #cancelButtonView}.
|
|
* * {@link #cancelButtonView}.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
|
|
+ * @returns {Object.<String,module:ui/view~View>}
|
|
|
*/
|
|
*/
|
|
|
_createActionButtons() {
|
|
_createActionButtons() {
|
|
|
const locale = this.locale;
|
|
const locale = this.locale;
|
|
|
const t = this.t;
|
|
const t = this.t;
|
|
|
|
|
|
|
|
- /**
|
|
|
|
|
- * The Save button view.
|
|
|
|
|
- *
|
|
|
|
|
- * @member {module:ui/button/buttonview~ButtonView}
|
|
|
|
|
- */
|
|
|
|
|
- const saveButtonView = this.saveButtonView = new ButtonView( locale );
|
|
|
|
|
|
|
+ const saveButtonView = new ButtonView( locale );
|
|
|
|
|
+ const cancelButtonView = new ButtonView( locale );
|
|
|
|
|
|
|
|
saveButtonView.set( {
|
|
saveButtonView.set( {
|
|
|
label: t( 'Save' ),
|
|
label: t( 'Save' ),
|
|
@@ -484,13 +575,6 @@ export default class TableCellPropertiesView extends View {
|
|
|
withText: true,
|
|
withText: true,
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- /**
|
|
|
|
|
- * The Cancel button view.
|
|
|
|
|
- *
|
|
|
|
|
- * @member {module:ui/button/buttonview~ButtonView}
|
|
|
|
|
- */
|
|
|
|
|
- const cancelButtonView = this.cancelButtonView = new ButtonView( locale );
|
|
|
|
|
-
|
|
|
|
|
cancelButtonView.set( {
|
|
cancelButtonView.set( {
|
|
|
label: t( 'Cancel' ),
|
|
label: t( 'Cancel' ),
|
|
|
icon: cancelIcon,
|
|
icon: cancelIcon,
|
|
@@ -500,6 +584,10 @@ export default class TableCellPropertiesView extends View {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
|
|
cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
|
|
|
|
|
+
|
|
|
|
|
+ return {
|
|
|
|
|
+ saveButtonView, cancelButtonView
|
|
|
|
|
+ };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|