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

Commit

Permalink
Merge pull request #232 from ckeditor/i/6112
Browse files Browse the repository at this point in the history 
Feature: Implemented the table properties form. Closes ckeditor/ckeditor5#6112.
  • Loading branch information
@jodator
jodator authored Feb 3, 2020
2 parents 1eb4b4c + f8d8d07 commit a11a146
Show file tree
Hide file tree
Showing 24 changed files with 2,578 additions and 315 deletions.
8 changes: 7 additions & 1 deletion lang/contexts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,12 @@
"Color": "The label for the input that allows configuring the border color of a table or a table cell.",
"Background": "The label for the input that allows configuring the background color of a table or a table cell.",
"Padding": "The label for the input that allows configuring the padding of a table cell.",
"Dimensions": "The label describing a group of form fields that allows setting dimensions of a table or a table cell.",
"Text alignment": "The label for the group of toolbars that allows configuring the text alignment in a table cell.",
"Alignment": "The label for the toolbar that allows configuring the alignment of a table.",
"Horizontal text alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the horizontal text alignment in a table cell.",
"Vertical text alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the vertical text alignment in a table cell.",
"Table alignment toolbar": "The label used by assistive technologies describing a toolbar that allows configuring the alignment of a table.",
"Save": "The label for the button that saves the changes made to the table or table cell properties.",
"Cancel": "The label for the button that rejects the changes made to the table or table cell properties.",
"None": "The label for the border style dropdown when no style is applied to a table or a table cell.",
Expand All @@ -45,5 +48,8 @@
"Justify cell text": "The label used by assistive technologies describing a button that justifies the table cell text.",
"Align cell text to the top": "The label used by assistive technologies describing a button that aligns the table cell text to the top.",
"Align cell text to the middle": "The label used by assistive technologies describing a button that aligns the table cell text to the middle.",
"Align cell text to the bottom": "The label used by assistive technologies describing a button that aligns the table cell text to the bottom."
"Align cell text to the bottom": "The label used by assistive technologies describing a button that aligns the table cell text to the bottom.",
"Align table to the left": "The label used by assistive technologies describing a button that aligns the table to the left.",
"Center table": "The label used by assistive technologies describing a button that centers the table.",
"Align table to the right": "The label used by assistive technologies describing a button that aligns the table to the right."
}
2 changes: 1 addition & 1 deletion src/tablecellproperties/tablecellpropertiesui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default class TableCellPropertiesUI extends Plugin {
if ( !getTableWidgetAncestor( viewDocument.selection ) ) {
this._hideView();
} else if ( this._isViewVisible ) {
repositionContextualBalloon( editor );
repositionContextualBalloon( editor, 'cell' );
}
} );

Expand Down
165 changes: 41 additions & 124 deletions src/tablecellproperties/ui/tablecellpropertiesview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
*/

import View from '@ckeditor/ckeditor5-ui/src/view';
import Model from '@ckeditor/ckeditor5-ui/src/model';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';

Expand All @@ -18,11 +16,14 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';

import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
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';
import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels } from '../../ui/utils';
import FormRowView from '../../ui/formrowview';
import FormHeaderView from '../../ui/formheaderview';

import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
Expand All @@ -35,8 +36,8 @@ import alignMiddleIcon from '@ckeditor/ckeditor5-core/theme/icons/align-middle.s
import alignBottomIcon from '@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg';

import '../../../theme/form.css';
import '../../../theme/tableform.css';
import '../../../theme/tablecellproperties.css';
import FormRowView from '../../ui/formrowview';

const ALIGNMENT_ICONS = {
left: alignLeftIcon,
Expand Down Expand Up @@ -254,7 +255,9 @@ export default class TableCellPropertiesView extends View {
} );

// Form header.
this.children.add( this._createHeaderView() );
this.children.add( new FormHeaderView( locale, {
label: this.t( 'Cell properties' )
} ) );

// Border row.
this.children.add( new FormRowView( locale, {
Expand All @@ -265,7 +268,7 @@ export default class TableCellPropertiesView extends View {
borderColorInput,
borderWidthInput
],
class: 'ck-table-cell-properties-form__border-row'
class: 'ck-table-form__border-row'
} ) );

// Background and padding row.
Expand Down Expand Up @@ -302,6 +305,7 @@ export default class TableCellPropertiesView extends View {
class: [
'ck',
'ck-form',
'ck-table-form',
'ck-table-cell-properties-form'
],
// https://github.com/ckeditor/ckeditor5-link/issues/90
Expand Down Expand Up @@ -352,34 +356,6 @@ export default class TableCellPropertiesView extends View {
this._focusCycler.focusFirst();
}

/**
* Creates the header of the form with a localized label.
*
* @private
* @returns {module:ui/view~View}
*/
_createHeaderView() {
const locale = this.locale;
const t = this.t;

const headerView = new View( locale );

headerView.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-form__header'
]
},
children: [
t( 'Cell properties' )
]
} );

return headerView;
}

/**
* Creates the following form fields:
*
Expand All @@ -401,10 +377,11 @@ export default class TableCellPropertiesView extends View {

// -- Style ---------------------------------------------------

const styleLabels = getBorderStyleLabels( t );
const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
borderStyleDropdown.set( {
label: t( 'Style' ),
class: 'ck-table-cell-properties-form__border-style'
class: 'ck-table-form__border-style'
} );

borderStyleDropdown.view.buttonView.set( {
Expand All @@ -414,22 +391,22 @@ export default class TableCellPropertiesView extends View {
} );

borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
return this._borderStyleLabels[ value ];
return styleLabels[ value ];
} );

borderStyleDropdown.view.on( 'execute', evt => {
this.borderStyle = evt.source._borderStyleValue;
} );

addListToDropdown( borderStyleDropdown.view, this._getBorderStyleDefinitions() );
addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );

// -- Width ---------------------------------------------------

const borderWidthInput = new LabeledView( locale, createLabeledInputText );

borderWidthInput.set( {
label: t( 'Width' ),
class: 'ck-table-cell-properties-form__border-width',
class: 'ck-table-form__border-width',
} );

borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
Expand Down Expand Up @@ -535,14 +512,36 @@ export default class TableCellPropertiesView extends View {
// -- Horizontal ---------------------------------------------------

const horizontalAlignmentToolbar = new ToolbarView( locale );
horizontalAlignmentToolbar.ariaLabel = t( 'Horizontal text alignment toolbar' );
this._fillAlignmentToolbar( horizontalAlignmentToolbar, this._horizontalAlignmentLabels, 'horizontalAlignment' );

horizontalAlignmentToolbar.set( {
isCompact: true,
ariaLabel: t( 'Horizontal text alignment toolbar' )
} );

fillToolbar( {
view: this,
icons: ALIGNMENT_ICONS,
toolbar: horizontalAlignmentToolbar,
labels: this._horizontalAlignmentLabels,
propertyName: 'horizontalAlignment'
} );

// -- Vertical -----------------------------------------------------

const verticalAlignmentToolbar = new ToolbarView( locale );
verticalAlignmentToolbar.ariaLabel = t( 'Vertical text alignment toolbar' );
this._fillAlignmentToolbar( verticalAlignmentToolbar, this._verticalAlignmentLabels, 'verticalAlignment' );

verticalAlignmentToolbar.set( {
isCompact: true,
ariaLabel: t( 'Vertical text alignment toolbar' )
} );

fillToolbar( {
view: this,
icons: ALIGNMENT_ICONS,
toolbar: verticalAlignmentToolbar,
labels: this._verticalAlignmentLabels,
propertyName: 'verticalAlignment'
} );

return {
horizontalAlignmentToolbar,
Expand Down Expand Up @@ -590,88 +589,6 @@ export default class TableCellPropertiesView extends View {
};
}

/**
* Provides a set of {@link #borderStyleDropdown} item definitions.
*
* @private
* @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
*/
_getBorderStyleDefinitions() {
const itemDefinitions = new Collection();

for ( const style in this._borderStyleLabels ) {
const definition = {
type: 'button',
model: new Model( {
_borderStyleValue: style,
label: this._borderStyleLabels[ style ],
withText: true,
} )
};

definition.model.bind( 'isOn' ).to( this, 'borderStyle', value => {
return value === style;
} );

itemDefinitions.add( definition );
}

return itemDefinitions;
}

/**
* Fills an alignment (either horizontal or vertical) with buttons
* that have certain labels and interact with a certain view property
* upon execution.
*
* @private
* @param {module:ui/toolbar/toolbarview~ToolbarView} toolbar
* @param {Array.<String>} labels
* @param {String} propertyName
*/
_fillAlignmentToolbar( toolbar, labels, propertyName ) {
for ( const alignment in labels ) {
const button = new ButtonView( this.locale );

button.set( {
label: labels[ alignment ],
icon: ALIGNMENT_ICONS[ alignment ],
} );

button.bind( 'isOn' ).to( this, propertyName, value => {
return value === alignment;
} );

button.on( 'execute', () => {
this[ propertyName ] = alignment;
} );

toolbar.items.add( button );
}
}

/**
* Provides localized labels for {@link #borderStyleDropdown} items.
*
* @private
* @type {Object.<String,String>}
*/
get _borderStyleLabels() {
const t = this.t;

return {
none: t( 'None' ),
solid: t( 'Solid' ),
dotted: t( 'Dotted' ),
dashed: t( 'Dashed' ),
double: t( 'Double' ),
groove: t( 'Groove' ),
ridge: t( 'Ridge' ),
inset: t( 'Inset' ),
outset: t( 'Outset' ),
};
}

/**
* Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
*
Expand Down
5 changes: 3 additions & 2 deletions src/tableproperties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
import TablePropertiesUI from './tableproperties/tablepropertiesui';

/**
* The table properties feature.
*
* This is a "glue" plugin which loads the
* {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing table editing feature} and
* table UI feature.
* the {@link module:table/tableproperties/tablepropertiesui~TablePropertiesUI table properties UI feature}.
*
* @extends module:core/plugin~Plugin
*/
Expand All @@ -32,6 +33,6 @@ export default class TableProperties extends Plugin {
* @inheritDoc
*/
static get requires() {
return [ TablePropertiesEditing ];
return [ TablePropertiesEditing, TablePropertiesUI ];
}
}
Loading

0 comments on commit a11a146

Please sign in to comment.