Sfoglia il codice sorgente

Changed: Make CSS style to button rather then dropdown.

Maciej Gołaszewski 7 anni fa
parent
commit
020eff6029

+ 8 - 1
packages/ckeditor5-highlight/src/highlightui.js

@@ -113,7 +113,8 @@ export default class HighlightUI extends Plugin {
 
 			button.extendTemplate( {
 				attributes: {
-					style: `color: ${ option.color }`
+					style: `color: ${ option.color }`,
+					class: 'ck-highlight-button'
 				}
 			} );
 		}
@@ -196,6 +197,12 @@ export default class HighlightUI extends Plugin {
 			dropdownView.bind( 'commandValue' ).to( command, 'value', value => getActiveOption( value, 'model' ) );
 			dropdownView.bind( 'isOn' ).to( command, 'value', value => !!value );
 
+			dropdownView.buttonView.extendTemplate( {
+				attributes: {
+					class: 'ck-highlight-button'
+				}
+			} );
+
 			// Create buttons array.
 			const buttons = options.map( option => {
 				// Get existing highlighter button.

+ 5 - 1
packages/ckeditor5-highlight/tests/highlightui.js

@@ -82,10 +82,14 @@ describe( 'HighlightUI', () => {
 			expect( button ).to.have.property( 'withText', false );
 		} );
 
-		it( 'should add custom CSS class to dropdown', () => {
+		it( 'should add custom CSS class to dropdown and dropdown buttons', () => {
 			dropdown.render();
 
 			expect( dropdown.element.classList.contains( 'ck-highlight-dropdown' ) ).to.be.true;
+			expect( dropdown.buttonView.element.classList.contains( 'ck-highlight-button' ) ).to.be.true;
+			// There should be 5 highlight buttons, one separator and highlight remove button in toolbar.
+			expect( dropdown.toolbarView.items.map( button => button.element.classList.contains( 'ck-highlight-button' ) ) )
+				.to.deep.equal( [ true, true, true, true, true, false, false ] );
 		} );
 
 		it( 'should focus view after command execution', () => {

+ 1 - 1
packages/ckeditor5-highlight/theme/highlight.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-highlight-dropdown svg path:not(.ck-icon__fill) {
+.ck-highlight-button svg path:not(.ck-icon__fill) {
 	/* Do not inherit color from parent. */
 	fill: initial;
 }