Sfoglia il codice sorgente

Added custom CSS class to heading dropdown. Added styles to resize dropdown button to match default label.

Szymon Kupś 8 anni fa
parent
commit
439d1ec830

+ 9 - 0
packages/ckeditor5-heading/src/heading.js

@@ -13,6 +13,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 import '../theme/theme.scss';
 
@@ -88,6 +89,14 @@ export default class Heading extends Plugin {
 		editor.ui.componentFactory.add( 'headings', ( locale ) => {
 			const dropdown = createListDropdown( dropdownModel, locale );
 
+			Template.extend( dropdown.template, {
+				attributes: {
+					class: [
+						'ck-heading-dropdown'
+					]
+				}
+			} );
+
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdown, 'execute', ( evt ) => {
 				editor.execute( evt.source.commandName );

+ 5 - 0
packages/ckeditor5-heading/tests/heading.js

@@ -85,6 +85,11 @@ describe( 'Heading', () => {
 			sinon.assert.calledOnce( focusSpy );
 		} );
 
+		it( 'should add custom CSS class to dropdown', () => {
+			const dropdown = editor.ui.componentFactory.create( 'headings' );
+			expect( dropdown.element.classList.contains( 'ck-heading-dropdown' ) ).to.be.true;
+		} );
+
 		describe( 'model to command binding', () => {
 			let commands;
 

+ 11 - 0
packages/ckeditor5-heading/theme/theme.scss

@@ -29,3 +29,14 @@
 [class*="ck-heading_heading"] {
 	font-weight: bold;
 }
+
+// Resize dropdown's button label.
+.ck-dropdown {
+	&.ck-heading-dropdown {
+		.ck-dropdown__button {
+			.ck-button__label {
+				width: 8em;
+			}
+		}
+	}
+}