Przeglądaj źródła

Added previous and next icons.

Damian Konopka 6 lat temu
rodzic
commit
2c43d2e7a4

+ 24 - 13
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -15,6 +15,9 @@ import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 
+import prevIcon from '../../../theme/icons/previous-arrow.svg';
+import nextIcon from '../../../theme/icons/next-arrow.svg';
+
 /**
  * Provides the common contextual balloon panel for the editor.
  *
@@ -411,6 +414,8 @@ class RotatorView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		const t = locale.t;
+
 		const bind = this.bindTemplate;
 
 		// Defines whether navigation is visible or not.
@@ -424,12 +429,12 @@ class RotatorView extends View {
 		// Navigation button to switches panel to the next one.
 		//
 		// @type {module:ui/button/buttonview~ButtonView}
-		this.buttonPrevView = this._createButtonView( locale.t( 'Prev' ) );
+		this.buttonPrevView = this._createButtonView( t( 'Previous baloon' ), prevIcon );
 
 		// Navigation button to switches panel to the previous one.
 		//
 		// @type {module:ui/button/buttonview~ButtonView}
-		this.buttonNextView = this._createButtonView( locale.t( 'Next' ) );
+		this.buttonNextView = this._createButtonView( t( 'Next balloon' ), nextIcon );
 
 		// Collection of the child views which creates balloon panel contents.
 		//
@@ -440,7 +445,10 @@ class RotatorView extends View {
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
-				class: 'rotator',
+				class: [
+					'ck',
+					'ck-balloon-rotator'
+				],
 				'z-index': '-1'
 			},
 			children: [
@@ -448,7 +456,7 @@ class RotatorView extends View {
 					tag: 'div',
 					attributes: {
 						class: [
-							'rotator_navigation',
+							'ck-balloon-rotator_navigation',
 							bind.to( 'isNavigationVisible', value => value ? '' : 'ck-hidden' )
 						]
 					},
@@ -463,7 +471,7 @@ class RotatorView extends View {
 				{
 					tag: 'div',
 					attributes: {
-						class: 'rotator_content'
+						class: 'ck-balloon-rotator_content'
 					},
 					children: this.content
 				}
@@ -478,17 +486,20 @@ class RotatorView extends View {
 		this.focusTracker.add( this.element );
 	}
 
-	// Create navigation button view.
-	//
-	// @private
-	// @param {String} label
-	// @returns {module:ui/button/buttonview~ButtonView}
-	_createButtonView( label ) {
+	/** Creates a navigation button view.
+	 *
+	 * @private
+	 * @param {String} label The button's label.
+	 * @param {String} icon The button's icon.
+	 * @returns {module:ui/button/buttonview~ButtonView}
+	 */
+	_createButtonView( label, icon ) {
 		const view = new ButtonView( this.locale );
 
 		view.set( {
-			withText: true,
-			label
+			label,
+			icon,
+			tooltip: true
 		} );
 
 		return view;

+ 1 - 0
packages/ckeditor5-ui/theme/icons/next-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.537 14.813a.888.888 0 1 1-1.254-1.255L10.84 10 7.283 6.442a.888.888 0 1 1 1.254-1.255L12.74 9.39a.888.888 0 0 1-.16 1.382l-4.043 4.042z"/></svg>

+ 1 - 0
packages/ckeditor5-ui/theme/icons/previous-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.463 5.187a.888.888 0 1 1 1.254 1.255L9.16 10l3.557 3.557a.888.888 0 1 1-1.254 1.255L7.26 10.61a.888.888 0 0 1 .16-1.382l4.043-4.042z" /></svg>