Przeglądaj źródła

Added SVG icons to the indent/outdent buttons in the IndentUI class.

Aleksander Nowodzinski 6 lat temu
rodzic
commit
c2840d8cd9

+ 7 - 4
packages/ckeditor5-indent/src/indentui.js

@@ -9,6 +9,8 @@
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
+import indentIcon from '../theme/icons/indent.svg';
+import outdentIcon from '../theme/icons/outdent.svg';
 
 /**
  * The indent feature.
@@ -35,8 +37,8 @@ export default class IndentUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
-		this._defineButton( 'indent', t( 'Increase indent' ) );
-		this._defineButton( 'outdent', t( 'Decrease indent' ) );
+		this._defineButton( 'indent', t( 'Increase indent' ), indentIcon );
+		this._defineButton( 'outdent', t( 'Decrease indent' ), outdentIcon );
 	}
 
 	/**
@@ -44,9 +46,10 @@ export default class IndentUI extends Plugin {
 	 *
 	 * @param {String} commandName
 	 * @param {String} label
+	 * @param {String} icon
 	 * @private
 	 */
-	_defineButton( commandName, label ) {
+	_defineButton( commandName, label, icon ) {
 		const editor = this.editor;
 
 		editor.ui.componentFactory.add( commandName, locale => {
@@ -55,7 +58,7 @@ export default class IndentUI extends Plugin {
 
 			view.set( {
 				label,
-				withText: true,
+				icon,
 				tooltip: true
 			} );
 

+ 5 - 1
packages/ckeditor5-indent/tests/indentui.js

@@ -48,12 +48,16 @@ describe( 'IndentUI', () => {
 		const indentButton = editor.ui.componentFactory.create( 'indent' );
 
 		expect( indentButton ).to.be.instanceOf( ButtonView );
+		expect( indentButton.label ).to.equal( 'Increase indent' );
+		expect( indentButton.icon ).to.match( /<svg / );
 	} );
 
-	it( 'should set up button for indent', () => {
+	it( 'should set up button for outdent', () => {
 		const outdentButton = editor.ui.componentFactory.create( 'outdent' );
 
 		expect( outdentButton ).to.be.instanceOf( ButtonView );
+		expect( outdentButton.label ).to.equal( 'Decrease indent' );
+		expect( outdentButton.icon ).to.match( /<svg / );
 	} );
 
 	it( 'should execute indent command on button execute', () => {

+ 1 - 0
packages/ckeditor5-indent/theme/icons/indent.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm5 6c0 .414.336.75.75.75h9.5a.75.75 0 1 0 0-1.5h-9.5a.75.75 0 0 0-.75.75zM2.75 16.5h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 1 0 0 1.5z"/><path d="M1.632 6.95L5.02 9.358a.4.4 0 0 1-.013.661l-3.39 2.207A.4.4 0 0 1 1 11.892V7.275a.4.4 0 0 1 .632-.326z"/></svg>

+ 1 - 0
packages/ckeditor5-indent/theme/icons/outdent.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm5 6c0 .414.336.75.75.75h9.5a.75.75 0 1 0 0-1.5h-9.5a.75.75 0 0 0-.75.75zM2.75 16.5h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 1 0 0 1.5z"/><path d="M4.368 6.95L.98 9.358a.4.4 0 0 0 .013.661l3.39 2.207A.4.4 0 0 0 5 11.892V7.275a.4.4 0 0 0-.632-.326z"/></svg>