From d1cf342ded5ba650bbd22c2ac53d582d172704d9 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 7 Aug 2019 13:21:13 +0200 Subject: [PATCH 1/6] Enabled automatic toolbar grouping when items start overflow. --- src/decouplededitorui.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/decouplededitorui.js b/src/decouplededitorui.js index 14843ab..7d3756b 100644 --- a/src/decouplededitorui.js +++ b/src/decouplededitorui.js @@ -115,6 +115,7 @@ export default class DecoupledEditorUI extends EditorUI { const toolbar = view.toolbar; toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); + toolbar.shouldGroupWhenFull = true; enableToolbarKeyboardFocus( { origin: editor.editing.view, @@ -122,6 +123,10 @@ export default class DecoupledEditorUI extends EditorUI { originKeystrokeHandler: editor.keystrokes, toolbar } ); + + this.on( 'update', () => { + toolbar.update(); + } ); } /** From 9904fc2014180125f634a7e597e9723ba108484b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 11 Sep 2019 16:05:17 +0200 Subject: [PATCH 2/6] Aligned API to changes in the ToolbarView class. --- src/decouplededitorui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/decouplededitorui.js b/src/decouplededitorui.js index 7d3756b..8379673 100644 --- a/src/decouplededitorui.js +++ b/src/decouplededitorui.js @@ -125,7 +125,7 @@ export default class DecoupledEditorUI extends EditorUI { } ); this.on( 'update', () => { - toolbar.update(); + toolbar.updateGroupedItems(); } ); } From 2b03774115328256b1adff1ce2e2dd559179c437 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 13 Sep 2019 13:20:49 +0200 Subject: [PATCH 3/6] Code refactoring in the DecoupledEditorUIView class. --- src/decouplededitoruiview.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/decouplededitoruiview.js b/src/decouplededitoruiview.js index 6d6204e..50c611e 100644 --- a/src/decouplededitoruiview.js +++ b/src/decouplededitoruiview.js @@ -10,7 +10,6 @@ import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview'; import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; -import Template from '@ckeditor/ckeditor5-ui/src/template'; /** * The decoupled editor UI view. It is a virtual view providing an inline @@ -55,7 +54,7 @@ export default class DecoupledEditorUIView extends EditorUIView { // Because of the above, make sure the toolbar supports rounded corners. // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one // and some toolbar item styles depend on this attribute. - Template.extend( this.toolbar.template, { + this.toolbar.extendTemplate( { attributes: { class: [ 'ck-reset_all', From 20f2d11828d01c2db99790d5430162685fec57f9 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 16 Sep 2019 13:39:34 +0200 Subject: [PATCH 4/6] Tests: Added a test checking if the main toolbar has automatic items grouping on. --- tests/decouplededitorui.js | 60 +++++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/tests/decouplededitorui.js b/tests/decouplededitorui.js index f6e43e8..90dc7ce 100644 --- a/tests/decouplededitorui.js +++ b/tests/decouplededitorui.js @@ -136,38 +136,44 @@ describe( 'DecoupledEditorUI', () => { } ); } ); - describe( 'view.toolbar#items', () => { - it( 'are filled with the config.toolbar (specified as an Array)', () => { - return VirtualDecoupledTestEditor - .create( '', { - toolbar: [ 'foo', 'bar' ] - } ) - .then( editor => { - const items = editor.ui.view.toolbar.items; + describe( 'view.toolbar', () => { + it( 'has automatic items grouping enabled', () => { + expect( view.toolbar.shouldGroupWhenFull ).to.be.true; + } ); - expect( items.get( 0 ).name ).to.equal( 'foo' ); - expect( items.get( 1 ).name ).to.equal( 'bar' ); + describe( '#items', () => { + it( 'are filled with the config.toolbar (specified as an Array)', () => { + return VirtualDecoupledTestEditor + .create( '', { + toolbar: [ 'foo', 'bar' ] + } ) + .then( editor => { + const items = editor.ui.view.toolbar.items; - return editor.destroy(); - } ); - } ); + expect( items.get( 0 ).name ).to.equal( 'foo' ); + expect( items.get( 1 ).name ).to.equal( 'bar' ); - it( 'are filled with the config.toolbar (specified as an Object)', () => { - return VirtualDecoupledTestEditor - .create( '', { - toolbar: { - items: [ 'foo', 'bar' ], - viewportTopOffset: 100 - } - } ) - .then( editor => { - const items = editor.ui.view.toolbar.items; + return editor.destroy(); + } ); + } ); - expect( items.get( 0 ).name ).to.equal( 'foo' ); - expect( items.get( 1 ).name ).to.equal( 'bar' ); + it( 'are filled with the config.toolbar (specified as an Object)', () => { + return VirtualDecoupledTestEditor + .create( '', { + toolbar: { + items: [ 'foo', 'bar' ], + viewportTopOffset: 100 + } + } ) + .then( editor => { + const items = editor.ui.view.toolbar.items; - return editor.destroy(); - } ); + expect( items.get( 0 ).name ).to.equal( 'foo' ); + expect( items.get( 1 ).name ).to.equal( 'bar' ); + + return editor.destroy(); + } ); + } ); } ); } ); From 7d449ccbe70a7e36231697bb6e675197aca69af3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 8 Oct 2019 16:55:36 +0200 Subject: [PATCH 5/6] Used the new ToolbarView API after code refactoring. --- src/decouplededitorui.js | 5 ----- src/decouplededitoruiview.js | 4 +++- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/decouplededitorui.js b/src/decouplededitorui.js index 8379673..14843ab 100644 --- a/src/decouplededitorui.js +++ b/src/decouplededitorui.js @@ -115,7 +115,6 @@ export default class DecoupledEditorUI extends EditorUI { const toolbar = view.toolbar; toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); - toolbar.shouldGroupWhenFull = true; enableToolbarKeyboardFocus( { origin: editor.editing.view, @@ -123,10 +122,6 @@ export default class DecoupledEditorUI extends EditorUI { originKeystrokeHandler: editor.keystrokes, toolbar } ); - - this.on( 'update', () => { - toolbar.updateGroupedItems(); - } ); } /** diff --git a/src/decouplededitoruiview.js b/src/decouplededitoruiview.js index 50c611e..7c5fc0e 100644 --- a/src/decouplededitoruiview.js +++ b/src/decouplededitoruiview.js @@ -40,7 +40,9 @@ export default class DecoupledEditorUIView extends EditorUIView { * @readonly * @member {module:ui/toolbar/toolbarview~ToolbarView} */ - this.toolbar = new ToolbarView( locale ); + this.toolbar = new ToolbarView( locale, { + shouldGroupWhenFull: true + } ); /** * The editable of the decoupled editor UI. From a2cc7aa26a0f48f07d91b2642b0e94246053be7e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 14 Oct 2019 16:29:37 +0200 Subject: [PATCH 6/6] Tests: Moved a test that verifies the automatic toolbar items grouping to the DecoupledEditorUIView tests. --- tests/decouplededitorui.js | 4 ---- tests/decouplededitoruiview.js | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/decouplededitorui.js b/tests/decouplededitorui.js index 90dc7ce..b835777 100644 --- a/tests/decouplededitorui.js +++ b/tests/decouplededitorui.js @@ -137,10 +137,6 @@ describe( 'DecoupledEditorUI', () => { } ); describe( 'view.toolbar', () => { - it( 'has automatic items grouping enabled', () => { - expect( view.toolbar.shouldGroupWhenFull ).to.be.true; - } ); - describe( '#items', () => { it( 'are filled with the config.toolbar (specified as an Array)', () => { return VirtualDecoupledTestEditor diff --git a/tests/decouplededitoruiview.js b/tests/decouplededitoruiview.js index 169bdb1..22d0345 100644 --- a/tests/decouplededitoruiview.js +++ b/tests/decouplededitoruiview.js @@ -45,6 +45,10 @@ describe( 'DecoupledEditorUIView', () => { it( 'is not rendered', () => { expect( view.toolbar.isRendered ).to.be.false; } ); + + it( 'has automatic items grouping enabled', () => { + expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true; + } ); } ); describe( '#editable', () => {