8
0
Просмотр исходного кода

Added ToolbarView#isVertical. Made ToolbarView flex-driven.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
d740b2bd0f

+ 12 - 1
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -30,6 +30,8 @@ export default class ToolbarView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		const bind = this.bindTemplate;
+
 		/**
 		 * Collection of the toolbar items (like buttons).
 		 *
@@ -55,6 +57,14 @@ export default class ToolbarView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
+		 * Controls the orientation of toolbar items.
+		 *
+		 * @observable
+		 * @member {Boolean} #isVertical
+		 */
+		this.set( 'isVertical', false );
+
+		/**
 		 * Helps cycling over focusable {@link #items} in the toolbar.
 		 *
 		 * @readonly
@@ -78,7 +88,8 @@ export default class ToolbarView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
-					'ck-toolbar'
+					'ck-toolbar',
+					bind.if( 'isVertical', 'ck-toolbar_vertical' )
 				]
 			},
 

+ 16 - 0
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -37,6 +37,10 @@ describe( 'ToolbarView', () => {
 			expect( view.locale ).to.equal( locale );
 		} );
 
+		it( 'should set view#isVertical', () => {
+			expect( view.isVertical ).to.be.false;
+		} );
+
 		it( 'should create view#children collection', () => {
 			expect( view.items ).to.be.instanceOf( ViewCollection );
 		} );
@@ -70,6 +74,18 @@ describe( 'ToolbarView', () => {
 		} );
 	} );
 
+	describe( 'element bindings', () => {
+		describe( 'class', () => {
+			it( 'reacts on view#isVertical', () => {
+				view.isVertical = false;
+				expect( view.element.classList.contains( 'ck-toolbar_vertical' ) ).to.be.false;
+
+				view.isVertical = true;
+				expect( view.element.classList.contains( 'ck-toolbar_vertical' ) ).to.be.true;
+			} );
+		} );
+	} );
+
 	describe( 'render()', () => {
 		it( 'registers #items in #focusTracker', () => {
 			const view = new ToolbarView( locale );

+ 4 - 9
packages/ckeditor5-ui/theme/components/dropdown/buttondropdown.css

@@ -4,18 +4,13 @@
  */
 
 .ck-buttondropdown {
+	& .ck-toolbar {
+		flex-wrap: nowrap;
+	}
+
 	& .ck-dropdown__panel .ck-button {
 		&:focus {
 			z-index: calc(var(--ck-z-default) + 1);
 		}
 	}
-
-	& .ck-toolbar {
-		display: flex;
-		flex-direction: row;
-
-		&.ck-toolbar__vertical {
-			flex-direction: column;
-		}
-	}
 }

+ 13 - 1
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -7,6 +7,14 @@
 
 .ck-toolbar {
 	@mixin ck-unselectable;
+
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+
+	&.ck-toolbar_vertical {
+		flex-direction: column;
+	}
 }
 
 .ck-toolbar__separator {
@@ -15,5 +23,9 @@
 
 .ck-toolbar__newline {
 	display: block;
-	clear: left;
+	width: 100%;
+}
+
+.ck-toolbar_floating {
+	flex-wrap: nowrap;
 }