Merge pull request #64 from ckeditor/t/ckeditor5-ui/297

Feature: The `StickyToolbarView` has been replaced by the `StickyPanelView` with a child `ToolbarView` (see ckeditor/ckeditor5-ui#297). BREAKING CHANGE: The former attributes controling the position of the toolbar provided by the `StickyToolbarView` are now available under `ClassicEditorUIView#stickyPanel` (`editor.ui.view.stickyPanel`).
ckeditor · Sep 14, 2017 · e4f591f · e4f591f
2 parents 6063c96 + 0aab784
commit e4f591f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 41 deletions.
diff --git a/src/classiceditorui.js b/src/classiceditorui.js
@@ -57,12 +57,12 @@ export default class ClassicEditorUI {
 		view.set( 'width', editor.config.get( 'ui.width' ) );
 		view.set( 'height', editor.config.get( 'ui.height' ) );
 
-		// Set–up the toolbar.
-		view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
-		view.toolbar.limiterElement = view.element;
+		// Set–up the sticky panel with toolbar.
+		view.stickyPanel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
+		view.stickyPanel.limiterElement = view.element;
 
 		if ( this._toolbarConfig && this._toolbarConfig.viewportTopOffset ) {
-			view.toolbar.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
+			view.stickyPanel.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
 		}
 
 		// Setup the editable.

diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js
@@ -9,7 +9,8 @@
 
 import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
-import StickyToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/sticky/stickytoolbarview';
+import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
@@ -28,19 +29,31 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		super( locale );
 
 		/**
-		 * A sticky toolbar view instance.
+		 * Sticky panel view instance. This is a parent view of a {@link #toolbar}
+		 * that makes toolbar sticky.
 		 *
 		 * @readonly
-		 * @member {module:ui/toolbar/sticky/stickytoolbarview~StickyToolbarView}
+		 * @member {module:ui/panel/sticky/stickypanelview~StickyPanelView}
 		 */
-		this.toolbar = new StickyToolbarView( locale );
+		this.stickyPanel = new StickyPanelView( locale );
+
+		/**
+		 * Toolbar view instance.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
+		 */
+		this.toolbar = new ToolbarView( locale );
 
 		Template.extend( this.toolbar.template, {
 			attributes: {
 				class: 'ck-editor-toolbar'
 			}
 		} );
 
+		// Set toolbar as a child of a stickyPanel and makes toolbar sticky.
+		this.stickyPanel.content.add( this.toolbar );
+
 		/**
 		 * Editable UI view.
 		 *
@@ -49,7 +62,7 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		 */
 		this.editable = new InlineEditableUIView( locale );
 
-		this.top.add( this.toolbar );
+		this.top.add( this.stickyPanel );
 		this.main.add( this.editable );
 	}
 

diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js
@@ -75,31 +75,30 @@ describe( 'ClassicEditorUI', () => {
 			expect( view.height ).to.equal( 200 );
 		} );
 
-		describe( 'toolbar', () => {
-			it( 'binds view.toolbar#isFocused to editor#focusTracker', () => {
+		describe( 'stickyPanel', () => {
+			it( 'binds view.stickyToolbar#isActive to editor.focusTracker#isFocused', () => {
 				ui.focusTracker.isFocused = false;
-				expect( view.toolbar.isActive ).to.be.false;
+				expect( view.stickyPanel.isActive ).to.be.false;
 
 				ui.focusTracker.isFocused = true;
-				expect( view.toolbar.isActive ).to.be.true;
+				expect( view.stickyPanel.isActive ).to.be.true;
 			} );
 
-			it( 'sets view.toolbar#limiterElement', () => {
-				expect( view.toolbar.limiterElement ).to.equal( view.element );
+			it( 'sets view.stickyToolbar#limiterElement', () => {
+				expect( view.stickyPanel.limiterElement ).to.equal( view.element );
 			} );
 
-			it( 'doesn\'t set view.toolbar#viewportTopOffset, if not specified in the config', () => {
-				expect( view.toolbar.viewportTopOffset ).to.equal( 0 );
+			it( 'doesn\'t set view.stickyToolbar#viewportTopOffset, if not specified in the config', () => {
+				expect( view.stickyPanel.viewportTopOffset ).to.equal( 0 );
 			} );
 
-			it( 'sets view.toolbar#viewportTopOffset, when specified in the config', () => {
+			it( 'sets view.stickyPanel#viewportTopOffset, when specified in the config', () => {
 				editorElement = document.createElement( 'div' );
 				document.body.appendChild( editorElement );
 
 				return ClassicTestEditor
 					.create( editorElement, {
 						toolbar: {
-							items: [ 'foo', 'bar' ],
 							viewportTopOffset: 100
 						}
 					} )
@@ -108,10 +107,7 @@ describe( 'ClassicEditorUI', () => {
 						ui = new ClassicEditorUI( editor, view );
 						editable = editor.editing.view.getRoot();
 
-						ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
-						ui.componentFactory.add( 'bar', viewCreator( 'bar' ) );
-
-						expect( view.toolbar.viewportTopOffset ).to.equal( 100 );
+						expect( view.stickyPanel.viewportTopOffset ).to.equal( 100 );
 
 						editorElement.remove();
 						return editor.destroy();

diff --git a/tests/classiceditoruiview.js b/tests/classiceditoruiview.js
@@ -6,7 +6,8 @@
 /* globals document */
 
 import ClassicEditorUIView from '../src/classiceditoruiview';
-import StickyToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/sticky/stickytoolbarview';
+import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
@@ -19,9 +20,23 @@ describe( 'ClassicEditorUIView', () => {
 	} );
 
 	describe( 'constructor()', () => {
+		describe( '#stickyPanel', () => {
+			it( 'is created', () => {
+				expect( view.stickyPanel ).to.be.instanceof( StickyPanelView );
+			} );
+
+			it( 'is given a locate object', () => {
+				expect( view.stickyPanel.locale ).to.equal( locale );
+			} );
+
+			it( 'is put into the "top" collection', () => {
+				expect( view.top.get( 0 ) ).to.equal( view.stickyPanel );
+			} );
+		} );
+
 		describe( '#toolbar', () => {
 			it( 'is created', () => {
-				expect( view.toolbar ).to.be.instanceof( StickyToolbarView );
+				expect( view.toolbar ).to.be.instanceof( ToolbarView );
 			} );
 
 			it( 'is given the right CSS class', () => {
@@ -32,8 +47,8 @@ describe( 'ClassicEditorUIView', () => {
 				expect( view.toolbar.locale ).to.equal( locale );
 			} );
 
-			it( 'is put into the "top" collection', () => {
-				expect( view.top.get( 0 ) ).to.equal( view.toolbar );
+			it( 'is put into the "stickyPanel.content" collection', () => {
+				expect( view.stickyPanel.content.get( 0 ) ).to.equal( view.toolbar );
 			} );
 		} );
 
@@ -56,7 +71,7 @@ describe( 'ClassicEditorUIView', () => {
 		it( 'returns editable\'s view element', () => {
 			document.body.appendChild( view.element );
 
-			view.toolbar.limiterElement = view.element;
+			view.stickyPanel.limiterElement = view.element;
 			view.init();
 
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );

diff --git a/theme/theme.scss b/theme/theme.scss
@@ -10,23 +10,27 @@
 	position: relative;
 }
 
-.ck-editor__top .ck-toolbar {
-	@include ck-rounded-corners {
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-
-		&.ck-toolbar_sticky {
-			border-radius: 0;
+.ck-editor__top .ck-sticky-panel {
+	.ck-toolbar {
+		@include ck-rounded-corners {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
 		}
+
+		// https://github.com/ckeditor/ckeditor5-editor-classic/issues/62
+		z-index: ck-z( 'modal' );
+		background: ck-color( 'editor-toolbar-background' );
+		border-bottom-width: 0;
 	}
 
-	// https://github.com/ckeditor/ckeditor5-editor-classic/issues/62
-	z-index: ck-z( 'modal' );
-	background: ck-color( 'editor-toolbar-background' );
-	border-bottom-width: 0;
+	&_sticky {
+		.ck-toolbar {
+			border-bottom-width: 1px;
 
-	&.ck-toolbar_sticky {
-		border-bottom-width: 1px;
+			@include ck-rounded-corners {
+				border-radius: 0;
+			}
+		}
 	}
 }