Explorar el Código

Code refactoring.

Aleksander Nowodzinski hace 5 años
padre
commit
727277457e

+ 38 - 77
packages/ckeditor5-ui/src/colorinputview/colorinputview.js

@@ -1,10 +1,7 @@
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import LabelView from '../label/labelview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import DropdownButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview';
-import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
-import DropdownPanelView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelview';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
 import '../../theme/components/colorinputview/colorinputview.css';
 
@@ -13,6 +10,8 @@ export default class ColorInputView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		const bind = this.bindTemplate;
+
 		this.set( 'label' );
 
 		this.set( 'value' );
@@ -21,104 +20,72 @@ export default class ColorInputView extends View {
 
 		this.set( 'placeholder' );
 
-		this.set( 'isEnabled', false );
+		this.set( 'isReadOnly', false );
 
 		this.set( 'errorText', null );
 
 		this.set( 'ariaDescribedById' );
 
-		this.dropdownButton = null;
-
-		this.dropdownPanel = null;
-
-		this.colorPicker = this._createTextInputWithDropdown( locale );
-
-		this.label = this._createLabelView( this.id );
-
-		const bind = this.bindTemplate;
-
-		this.on( 'setColor:setValueFromPicker', ( evtData, data ) => {
-			this.value = data.value;
-			this._toggleColorPicker();
-		} );
+		this._dropdownView = this._createDropdownView( locale );
+		this._inputView = this._createInputTextView( locale );
 
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
 				class: [
 					'ck',
-					'ck-input',
 					'ck-input-color-picker',
-					'ck-labeled-view',
 					bind.if( 'hasError', 'ck-error' )
 				],
 				id: bind.to( 'id' ),
 				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isEnabled', isEnabled => !isEnabled ),
 				'aria-invalid': bind.if( 'hasError', true ),
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			children: [
-				this.label,
-				this.colorPicker
+				this._inputView,
+				this._dropdownView
 			],
 		} );
 	}
 
-	_createTextInputWithDropdown( locale ) {
-		const textInput = this._createInputTextView( locale );
-		const dropdown = this._createDropdownView( locale );
-		const colorInputPicker = new View();
-
-		colorInputPicker.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [ 'ck', 'ck-dropdown__color-picker' ]
-			},
-			children: [
-				textInput,
-				dropdown,
-			]
-		} );
-
-		return colorInputPicker;
+	focus() {
+		this._inputView.focus();
 	}
 
 	_createDropdownView( locale ) {
 		const bind = this.bindTemplate;
 		const colorGrid = this._createColorGrid();
-		const dropdownPanel = new DropdownPanelView( locale );
-		const dropdownButton = new DropdownButtonView( locale );
+		const dropdown = createDropdown( locale );
 		const colorPreview = new View();
 		const removeColorButton = this._createRemoveColorButton( locale );
 
 		colorPreview.setTemplate( {
 			tag: 'span',
 			attributes: {
-				class: [ 'ck', 'ck-dropdown__color-picker-preview' ],
+				class: [
+					'ck',
+					'ck-dropdown__color-picker-preview'
+				],
 				style: {
 					backgroundColor: bind.to( 'value' )
 				}
 			}
 		} );
 
-		dropdownButton.extendTemplate( {
+		dropdown.buttonView.extendTemplate( {
 			attributes: {
 				class: 'ck-dropdown__color-picker-button'
 			},
 		} );
-		dropdownButton.withArrow = false;
-		dropdownButton.children.add( colorPreview );
-		dropdownButton.bind( 'isEnabled' ).to( this );
 
-		const dropdown = new DropdownView( locale, dropdownButton, dropdownPanel );
+		dropdown.buttonView.children.add( colorPreview );
 
+		dropdown.panelPosition = 'sw';
 		dropdown.panelView.children.add( removeColorButton );
 		dropdown.panelView.children.add( colorGrid );
-		dropdown.bind( 'isEnabled' ).to( this );
-
-		this.dropdownButton = dropdownButton;
-		this.dropdownPanel = dropdownPanel;
+		dropdown.bind( 'isReadOnly' ).to( this );
+		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
 
 		return dropdown;
 	}
@@ -127,20 +94,16 @@ export default class ColorInputView extends View {
 		const input = new InputTextView( locale );
 
 		input.bind( 'value' ).to( this );
-		input.bind( 'isReadOnly' ).to( this, 'isEnabled', value => !value );
+		input.bind( 'isReadOnly' ).to( this );
 		input.bind( 'placeholder' ).to( this );
 		input.bind( 'hasError' ).to( this, 'errorText', value => !!value );
 
-		input.on( 'input', ( evt, input ) => {
-			// UX: Make the error text disappear and disable the error indicator as the user
-			// starts fixing the errors.
-			this.errorText = null;
-
-			this.fire( 'setColor:setInputValue', {
-				value: input.target.value
-			} );
+		input.on( 'input', () => {
+			this.value = input.element.value;
 		} );
 
+		input.delegate( 'input' ).to( this );
+
 		return input;
 	}
 
@@ -151,7 +114,10 @@ export default class ColorInputView extends View {
 
 		removeColor.extendTemplate( {
 			attributes: {
-				class: [ 'ck', 'ck-dropdown__color-picker-remove-color' ]
+				class: [
+					'ck',
+					'ck-dropdown__color-picker-remove-color'
+				]
 			},
 		} );
 
@@ -163,7 +129,7 @@ export default class ColorInputView extends View {
 			on: {
 				click: bind.to( () => {
 					this.value = '';
-					this._toggleColorPicker();
+					this._dropdownView.isOpen = false;
 				} )
 			}
 		} );
@@ -173,14 +139,6 @@ export default class ColorInputView extends View {
 		return removeColor;
 	}
 
-	_createLabelView( id ) {
-		const label = new LabelView();
-		label.for = id;
-		label.bind( 'text' ).to( this, 'label' );
-
-		return label;
-	}
-
 	_createColorGrid( locale ) {
 		const options = {
 			colorDefinitions: [
@@ -248,14 +206,17 @@ export default class ColorInputView extends View {
 			],
 			columns: 5
 		};
+
 		const colorGrid = new ColorGrid( locale, options );
-		colorGrid.delegate( 'execute' ).to( this, 'setColor:setValueFromPicker' );
+
+		colorGrid.on( 'execute', ( evtData, data ) => {
+			this.value = data.value;
+			this._dropdownView.isOpen = false;
+			this.fire( 'input' );
+		} );
+
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
 
 		return colorGrid;
 	}
-
-	_toggleColorPicker() {
-		this.dropdownButton.fire( 'open' );
-	}
 }

+ 1 - 5
packages/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js

@@ -53,8 +53,6 @@ export default class DropdownButtonView extends ButtonView {
 			}
 		} );
 
-		this.withArrow = true;
-
 		// The DropdownButton interface expects the open event upon which will open the dropdown.
 		this.delegate( 'execute' ).to( this, 'open' );
 	}
@@ -65,9 +63,7 @@ export default class DropdownButtonView extends ButtonView {
 	render() {
 		super.render();
 
-		if ( this.withArrow ) {
-			this.children.add( this.arrowView );
-		}
+		this.children.add( this.arrowView );
 	}
 
 	/**

+ 21 - 10
packages/ckeditor5-ui/theme/components/colorinputview/colorinputview.css

@@ -3,15 +3,26 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */
+.ck.ck-input-color-picker {
+	width: 100%;
+	display: flex;
+
+	& > .ck.ck-input-text {
+		min-width: auto;
+		flex-grow: 1;
+
+		&:active,
+		&:focus {
+			z-index: 1;
+		}
+	}
+
+	& > .ck.ck-dropdown {
+		min-width: auto;
 
-.ck.ck-dropdown__input-color-preview {
-	position: absolute;
-	right: 5px;
-  width: 20px;
-	height: 20px;
+		/* This dropdown has no arrow but a color preview instead. */
+		& > .ck-dropdown__color-picker-button .ck-dropdown__arrow {
+			display: none;
+		}
+	}
 }