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

t/24: Added separators to the table UI drop-downs #46

Merged
merged 3 commits into from
Jun 13, 2018
Merged

t/24: Added separators to the table UI drop-downs #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41785f9
Feature: Added separators to the table UI drop-downs. Closes #24.
oleq Jun 12, 2018
5754538
Merge branch 'master' into t/24
oleq Jun 13, 2018
23af545
Used #isSeparator instead of #separator in the dropdown list model.
oleq Jun 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions src/tableui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export default class TableUI extends Plugin {
editor.ui.componentFactory.add( 'tableColumn', locale => {
const options = [
{ commandName: 'setColumnHeader', label: t( 'Header column' ), bindIsActive: true },
'|',
{ commandName: 'insertColumnBefore', label: t( 'Insert column before' ) },
{ commandName: 'insertColumnAfter', label: t( 'Insert column after' ) },
{ commandName: 'removeColumn', label: t( 'Delete column' ) }
Expand All @@ -86,6 +87,7 @@ export default class TableUI extends Plugin {
editor.ui.componentFactory.add( 'tableRow', locale => {
const options = [
{ commandName: 'setRowHeader', label: t( 'Header row' ), bindIsActive: true },
'|',
{ commandName: 'insertRowBelow', label: t( 'Insert row below' ) },
{ commandName: 'insertRowAbove', label: t( 'Insert row above' ) },
{ commandName: 'removeRow', label: t( 'Delete row' ) }
Expand All @@ -100,6 +102,7 @@ export default class TableUI extends Plugin {
{ commandName: 'mergeCellRight', label: t( 'Merge cell right' ) },
{ commandName: 'mergeCellDown', label: t( 'Merge cell down' ) },
{ commandName: 'mergeCellLeft', label: t( 'Merge cell left' ) },
'|',
{ commandName: 'splitCellVertically', label: t( 'Split cell vertically' ) },
{ commandName: 'splitCellHorizontally', label: t( 'Split cell horizontally' ) }
];
Expand Down Expand Up @@ -161,20 +164,28 @@ export default class TableUI extends Plugin {
// @param {Array.<module:core/command~Command>} commands List of commands to update.
// @param {module:utils/collection~Collection} dropdownItems Collection of dropdown items to update with given option.
function addListOption( option, editor, commands, dropdownItems ) {
const { commandName, label, bindIsActive } = option;
const command = editor.commands.get( commandName );
const itemModel = new Model();

commands.push( command );
if ( option === '|' ) {
itemModel.set( {
isSeparator: true
} );
} else {
const { commandName, label, bindIsActive } = option;
const command = editor.commands.get( commandName );

commands.push( command );

const itemModel = new Model( {
commandName,
label
} );
itemModel.set( {
commandName,
label
} );

itemModel.bind( 'isEnabled' ).to( command );
itemModel.bind( 'isEnabled' ).to( command );

if ( bindIsActive ) {
itemModel.bind( 'isActive' ).to( command, 'value' );
if ( bindIsActive ) {
itemModel.bind( 'isActive' ).to( command, 'value' );
}
}

dropdownItems.add( itemModel );
Expand Down
34 changes: 18 additions & 16 deletions tests/tableui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
import TableEditing from '../src/tableediting';
import TableUI from '../src/tableui';
import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';

testUtils.createSinonSandbox();

Expand Down Expand Up @@ -121,9 +122,9 @@ describe( 'TableUI', () => {
it( 'should have proper items in panel', () => {
const listView = dropdown.listView;

const labels = listView.items.map( ( { label } ) => label );
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );

expect( labels ).to.deep.equal( [ 'Header row', 'Insert row below', 'Insert row above', 'Delete row' ] );
expect( labels ).to.deep.equal( [ 'Header row', '|', 'Insert row below', 'Insert row above', 'Delete row' ] );
} );

it( 'should bind items in panel to proper commands', () => {
Expand All @@ -140,9 +141,9 @@ describe( 'TableUI', () => {
removeRowCommand.isEnabled = true;

expect( items.get( 0 ).isEnabled ).to.be.true;
expect( items.get( 1 ).isEnabled ).to.be.true;
expect( items.get( 2 ).isEnabled ).to.be.true;
expect( items.get( 3 ).isEnabled ).to.be.true;
expect( items.get( 4 ).isEnabled ).to.be.true;
expect( dropdown.buttonView.isEnabled ).to.be.true;

setRowHeaderCommand.isEnabled = false;
Expand All @@ -152,16 +153,16 @@ describe( 'TableUI', () => {

insertRowBelowCommand.isEnabled = false;

expect( items.get( 1 ).isEnabled ).to.be.false;
expect( items.get( 2 ).isEnabled ).to.be.false;
expect( dropdown.buttonView.isEnabled ).to.be.true;

insertRowAboveCommand.isEnabled = false;
expect( items.get( 2 ).isEnabled ).to.be.false;
expect( items.get( 3 ).isEnabled ).to.be.false;
expect( dropdown.buttonView.isEnabled ).to.be.true;

removeRowCommand.isEnabled = false;

expect( items.get( 3 ).isEnabled ).to.be.false;
expect( items.get( 4 ).isEnabled ).to.be.false;
expect( dropdown.buttonView.isEnabled ).to.be.false;
} );

Expand Down Expand Up @@ -216,9 +217,9 @@ describe( 'TableUI', () => {
it( 'should have proper items in panel', () => {
const listView = dropdown.listView;

const labels = listView.items.map( ( { label } ) => label );
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );

expect( labels ).to.deep.equal( [ 'Header column', 'Insert column before', 'Insert column after', 'Delete column' ] );
expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column before', 'Insert column after', 'Delete column' ] );
} );

it( 'should bind items in panel to proper commands', () => {
Expand All @@ -235,9 +236,9 @@ describe( 'TableUI', () => {
removeColumnCommand.isEnabled = true;

expect( items.get( 0 ).isEnabled ).to.be.true;
expect( items.get( 1 ).isEnabled ).to.be.true;
expect( items.get( 2 ).isEnabled ).to.be.true;
expect( items.get( 3 ).isEnabled ).to.be.true;
expect( items.get( 4 ).isEnabled ).to.be.true;
expect( dropdown.buttonView.isEnabled ).to.be.true;

setColumnHeaderCommand.isEnabled = false;
Expand All @@ -247,14 +248,14 @@ describe( 'TableUI', () => {

insertColumnBeforeCommand.isEnabled = false;

expect( items.get( 1 ).isEnabled ).to.be.false;
expect( items.get( 2 ).isEnabled ).to.be.false;
expect( dropdown.buttonView.isEnabled ).to.be.true;

insertColumnAfterCommand.isEnabled = false;
expect( items.get( 2 ).isEnabled ).to.be.false;
expect( items.get( 3 ).isEnabled ).to.be.false;

removeColumnCommand.isEnabled = false;
expect( items.get( 3 ).isEnabled ).to.be.false;
expect( items.get( 4 ).isEnabled ).to.be.false;
expect( dropdown.buttonView.isEnabled ).to.be.false;
} );

Expand Down Expand Up @@ -309,13 +310,14 @@ describe( 'TableUI', () => {
it( 'should have proper items in panel', () => {
const listView = dropdown.listView;

const labels = listView.items.map( ( { label } ) => label );
const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );

expect( labels ).to.deep.equal( [
'Merge cell up',
'Merge cell right',
'Merge cell down',
'Merge cell left',
'|',
'Split cell vertically',
'Split cell horizontally'
] );
Expand All @@ -342,8 +344,8 @@ describe( 'TableUI', () => {
expect( items.get( 1 ).isEnabled ).to.be.true;
expect( items.get( 2 ).isEnabled ).to.be.true;
expect( items.get( 3 ).isEnabled ).to.be.true;
expect( items.get( 4 ).isEnabled ).to.be.true;
expect( items.get( 5 ).isEnabled ).to.be.true;
expect( items.get( 6 ).isEnabled ).to.be.true;
expect( dropdown.buttonView.isEnabled ).to.be.true;

mergeCellUpCommand.isEnabled = false;
Expand All @@ -363,10 +365,10 @@ describe( 'TableUI', () => {
expect( items.get( 3 ).isEnabled ).to.be.false;

splitCellVerticallyCommand.isEnabled = false;
expect( items.get( 4 ).isEnabled ).to.be.false;
expect( items.get( 5 ).isEnabled ).to.be.false;

splitCellHorizontallyCommand.isEnabled = false;
expect( items.get( 5 ).isEnabled ).to.be.false;
expect( items.get( 6 ).isEnabled ).to.be.false;

expect( dropdown.buttonView.isEnabled ).to.be.false;
} );
Expand Down