From c77d02f897963409716efe969b60972479e6e95c Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 16 Oct 2018 15:00:36 +0200 Subject: [PATCH 1/6] Used the enableWrappedItemsGroupping method to enable items groupping in the main toolbar when the space is scarce. --- src/classiceditorui.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 94de4e9..5c758c9 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -57,7 +57,17 @@ export default class ClassicEditorUI extends EditorUI { this.focusTracker.add( this.view.editableElement ); - this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); + view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); + + editor.on( 'ready', () => { + // This feature should not be enabled earlier because for the algorithm to work, + // the toolbar must be visible in DOM (i.e. only after #uiReady). + // But that's not all: the editor content must also be ready because loading it into + // editable can make the vertical website scrollbar to show up (it is usually styled + // differently in the website and in the editor; it can "grow" a lot). And that would + // reduce the horizontal space available for toolbar items. In other words, later is better. + view.toolbar.enableWrappedItemsGroupping(); + } ); enableToolbarKeyboardFocus( { origin: editor.editing.view, From 062fb5e067bc8b425455895ad86432b447888e96 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 6 Aug 2019 17:28:54 +0200 Subject: [PATCH 2/6] Used the new toolbar grouping API in the UI. --- src/classiceditorui.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index f141ccc..7f5b037 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -148,18 +148,9 @@ export default class ClassicEditorUI extends EditorUI { view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset; } + view.toolbar.isGrouping = true; view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); - editor.on( 'ready', () => { - // This feature should not be enabled earlier because for the algorithm to work, - // the toolbar must be visible in DOM (i.e. only after #uiReady). - // But that's not all: the editor content must also be ready because loading it into - // editable can make the vertical website scrollbar to show up (it is usually styled - // differently in the website and in the editor; it can "grow" a lot). And that would - // reduce the horizontal space available for toolbar items. In other words, later is better. - view.toolbar.enableWrappedItemsGroupping(); - } ); - enableToolbarKeyboardFocus( { origin: editingView, originFocusTracker: this.focusTracker, From 8c8e5a1db68bd2ec31d339d37b81172487370f4a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 7 Aug 2019 13:20:01 +0200 Subject: [PATCH 3/6] Code refactoring. --- src/classiceditorui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 7f5b037..a99af12 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -148,7 +148,7 @@ export default class ClassicEditorUI extends EditorUI { view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset; } - view.toolbar.isGrouping = true; + view.toolbar.shouldGroupWhenFull = true; view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); enableToolbarKeyboardFocus( { From 46f8d07365bcf6c01cbc51677cc81dcd93650224 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 16 Sep 2019 13:39:21 +0200 Subject: [PATCH 4/6] Tests: Added a test checking if the main toolbar has automatic items grouping on. --- tests/classiceditorui.js | 60 ++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index a18698b..09f0ddd 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -164,38 +164,44 @@ describe( 'ClassicEditorUI', () => { } ); } ); - describe( 'view.toolbar#items', () => { - it( 'are filled with the config.toolbar (specified as an Array)', () => { - return VirtualClassicTestEditor - .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 VirtualClassicTestEditor + .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 VirtualClassicTestEditor - .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 VirtualClassicTestEditor + .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 5cd6d5dcf622916b63a2027cbbac9354f5a997e3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 7 Oct 2019 17:26:19 +0200 Subject: [PATCH 5/6] Used the new ToolbarView API after code refactoring. --- src/classiceditorui.js | 1 - src/classiceditoruiview.js | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index a99af12..70618a3 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -148,7 +148,6 @@ export default class ClassicEditorUI extends EditorUI { view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset; } - view.toolbar.shouldGroupWhenFull = true; view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); enableToolbarKeyboardFocus( { diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js index d80f0f1..8be1199 100644 --- a/src/classiceditoruiview.js +++ b/src/classiceditoruiview.js @@ -45,7 +45,9 @@ export default class ClassicEditorUIView extends BoxedEditorUIView { * @readonly * @member {module:ui/toolbar/toolbarview~ToolbarView} */ - this.toolbar = new ToolbarView( locale ); + this.toolbar = new ToolbarView( locale, { + shouldGroupWhenFull: true + } ); /** * Editable UI view. From cd0798363bdeb09ef5c55631cbc30d9e736ecaa5 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 14 Oct 2019 16:29:01 +0200 Subject: [PATCH 6/6] Tests: Moved a test that verifies the automatic toolbar items grouping to the ClassicEditorUIView tests. --- tests/classiceditorui.js | 4 ---- tests/classiceditoruiview.js | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index 09f0ddd..b8f4a35 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -165,10 +165,6 @@ describe( 'ClassicEditorUI', () => { } ); 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 VirtualClassicTestEditor diff --git a/tests/classiceditoruiview.js b/tests/classiceditoruiview.js index b3c5471..9ca3f67 100644 --- a/tests/classiceditoruiview.js +++ b/tests/classiceditoruiview.js @@ -58,6 +58,10 @@ describe( 'ClassicEditorUIView', () => { it( 'is put into the "stickyPanel.content" collection', () => { expect( view.stickyPanel.content.get( 0 ) ).to.equal( view.toolbar ); } ); + + it( 'has automatic items grouping enabled', () => { + expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true; + } ); } ); describe( '#editable', () => {