ソースを参照

Changed: Extract DropdownButtonView from Dropdown.

Maciej Gołaszewski 8 年 前
コミット
181888ca06

+ 80 - 0
packages/ckeditor5-ui/src/button/dropdownbuttonview.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/button/splitbuttonview
+ */
+
+import ButtonView from './buttonview';
+
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
+import IconView from '../icon/iconview';
+
+/**
+ * The default dropdown button view class.
+ *
+ *		const view = new SplitButtonView();
+ *
+ *		view.set( {
+ *			label: 'A button',
+ *			keystroke: 'Ctrl+B',
+ *			tooltip: true
+ *		} );
+ *
+ *		view.render();
+ *
+ *		document.body.append( view.element );
+ *
+ * @extends module:ui/view~View
+ */
+export default class DropdownButtonView extends ButtonView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * A secondary button of split button that opens dropdown.
+		 *
+		 * @readonly
+		 * @member {module:ui/button/buttonview~ButtonView}
+		 */
+		this.selectView = this._createSelectView();
+
+		// Dropdown expects "select" event on button view upon which the dropdown will open.
+		this.delegate( 'execute' ).to( this, 'select' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.children.add( this.selectView );
+	}
+
+	/**
+	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #selectView} and binds it with main split button
+	 * attributes.
+	 *
+	 * @private
+	 * @returns {module:ui/button/buttonview~ButtonView}
+	 */
+	_createSelectView() {
+		const arrowView = new IconView();
+
+		arrowView.content = dropdownArrowIcon;
+
+		arrowView.extendTemplate( {
+			attributes: {
+				class: 'ck-dropdown__arrow'
+			}
+		} );
+
+		return arrowView;
+	}
+}

+ 2 - 3
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -13,8 +13,7 @@ import ButtonView from './buttonview';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 
-// TODO: temporary hack...
-import arrowIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 
 import './../../theme/components/button/splitbutton.css';
 
@@ -238,7 +237,7 @@ export default class SplitButtonView extends View {
 	_createSelectView() {
 		const selectView = new ButtonView();
 
-		selectView.icon = arrowIcon;
+		selectView.icon = dropdownArrowIcon;
 
 		selectView.extendTemplate( {
 			attributes: {

+ 0 - 18
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -8,10 +8,8 @@
  */
 
 import View from '../view';
-import IconView from '../icon/iconview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 
 import '../../theme/components/dropdown/dropdown.css';
 
@@ -109,14 +107,6 @@ export default class DropdownView extends View {
 		 */
 		this.keystrokes = new KeystrokeHandler();
 
-		/**
-		 * The arrow icon of the dropdown.
-		 *
-		 * @readonly
-		 * @member {module:ui/icon/iconview~IconView} #arrowView
-		 */
-		const arrowView = this.arrowView = new IconView();
-
 		this.setTemplate( {
 			tag: 'div',
 
@@ -129,18 +119,10 @@ export default class DropdownView extends View {
 
 			children: [
 				buttonView,
-				arrowView,
 				panelView
 			]
 		} );
 
-		arrowView.content = dropdownArrowIcon;
-		arrowView.extendTemplate( {
-			attributes: {
-				class: 'ck-dropdown__arrow'
-			}
-		} );
-
 		buttonView.extendTemplate( {
 			attributes: {
 				class: [

+ 2 - 5
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -9,8 +9,8 @@
 
 import DropdownPanelView from './dropdownpanelview';
 import DropdownView from './dropdownview';
+import DropdownButtonView from '../button/dropdownbuttonview';
 import SplitButtonView from '../button/splitbuttonview';
-import ButtonView from '../button/buttonview';
 import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
@@ -45,10 +45,7 @@ import '../../theme/components/dropdown/toolbardropdown.css';
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
 export function createDropdown( locale ) {
-	const buttonView = new ButtonView( locale );
-
-	// Dropdown expects "select" event on button view upon which the dropdown will open.
-	buttonView.delegate( 'execute' ).to( buttonView, 'select' );
+	const buttonView = new DropdownButtonView( locale );
 
 	const dropdownView = prepareDropdown( locale, buttonView );
 	addDefaultBehavior( dropdownView );

+ 9 - 26
packages/ckeditor5-ui/theme/components/button/splitbutton.css

@@ -3,13 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-/* TODO: change me */
-.ck-splitbutton-dropdown {
-	&::after {
-		display: none;
-	}
-}
-
 .ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-select) {
 	border-top-right-radius: unset;
 	border-bottom-right-radius: unset;
@@ -24,25 +17,15 @@
 	border-bottom-left-radius: unset;
 }
 
-.ck-splitbutton-select {
-	padding-right: var(--ck-spacing-standard);
-
-	& svg {
-		width: 0;
-		min-width: 0;
-	}
-
-	&::after {
-		content: '';
-		width: 0;
-		height: 0;
-		pointer-events: none;
-		z-index: var(--ck-z-default);
+.ck-dropdown {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
 
-		position: absolute;
-		top: 50%;
-		/* To make the triangle appear in the middle of split button the translation in X-axis
-		 * should be adjusted by the half of its width. */
-		transform: translate3d(calc(-50% + 0.2em), -50%, 0);
+	& .ck-splitbutton .ck-splitbutton-select svg {
+		position: static;
+		top: initial;
+		transform: initial;
+		right: auto;
+		width: var(--ck-dropdown-icon-size);
 	}
 }