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

Create special character navigation extending reusable form header component

panr 5 лет назад
Родитель
Сommit
2ed9c2e99c

+ 7 - 25
packages/ckeditor5-special-characters/src/ui/specialcharactersnavigationview.js

@@ -7,22 +7,22 @@
  * @module special-characters/ui/specialcharactersnavigationview
  * @module special-characters/ui/specialcharactersnavigationview
  */
  */
 
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
-import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import {
 import {
 	createDropdown,
 	createDropdown,
 	addListToDropdown
 	addListToDropdown
 } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
+
 /**
 /**
  * A class representing the navigation part of the special characters UI. It is responsible
  * A class representing the navigation part of the special characters UI. It is responsible
  * for describing the feature and allowing the user to select a particular character group.
  * for describing the feature and allowing the user to select a particular character group.
  *
  *
  * @extends module:ui/view~View
  * @extends module:ui/view~View
  */
  */
-export default class SpecialCharactersNavigationView extends View {
+export default class SpecialCharactersNavigationView extends FormHeaderView {
 	/**
 	/**
 	 * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
 	 * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
 	 * class.
 	 * class.
@@ -35,14 +35,6 @@ export default class SpecialCharactersNavigationView extends View {
 
 
 		const t = locale.t;
 		const t = locale.t;
 
 
-		/**
-		 * The label of the navigation view describing its purpose.
-		 *
-		 * @member {module:ui/label/labelview~LabelView}
-		 */
-		this.labelView = new LabelView( locale );
-		this.labelView.text = t( 'Special characters' );
-
 		/**
 		/**
 		 * A dropdown that allows selecting a group of special characters to be displayed.
 		 * A dropdown that allows selecting a group of special characters to be displayed.
 		 *
 		 *
@@ -51,19 +43,8 @@ export default class SpecialCharactersNavigationView extends View {
 		this.groupDropdownView = this._createGroupDropdown( groupNames );
 		this.groupDropdownView = this._createGroupDropdown( groupNames );
 		this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
 		this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
 
 
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-special-characters-navigation'
-				]
-			},
-			children: [
-				this.labelView,
-				this.groupDropdownView
-			]
-		} );
+		this.label = t( 'Special characters' );
+		this.children.add( this.groupDropdownView );
 	}
 	}
 
 
 	/**
 	/**
@@ -95,7 +76,8 @@ export default class SpecialCharactersNavigationView extends View {
 		dropdown.buttonView.set( {
 		dropdown.buttonView.set( {
 			isOn: false,
 			isOn: false,
 			withText: true,
 			withText: true,
-			tooltip: t( 'Character categories' )
+			tooltip: t( 'Character categories' ),
+			class: [ 'ck-dropdown__button_label-width_auto' ]
 		} );
 		} );
 
 
 		dropdown.on( 'execute', evt => {
 		dropdown.on( 'execute', evt => {