Browse Source

Move color input view to table

panr 5 years ago
parent
commit
dd02181a6f

+ 1 - 1
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -35,7 +35,7 @@ import alignTopIcon from '@ckeditor/ckeditor5-core/theme/icons/align-top.svg';
 import alignMiddleIcon from '@ckeditor/ckeditor5-core/theme/icons/align-middle.svg';
 import alignBottomIcon from '@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg';
 
-import ColorInputView from '@ckeditor/ckeditor5-ui/src/colorinputview/colorinputview';
+import ColorInputView from '../../ui/colorinputview';
 
 import '../../../theme/form.css';
 import '../../../theme/tableform.css';

+ 222 - 0
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -0,0 +1,222 @@
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
+import '../../theme/colorinputview.css';
+
+export default class ColorInputView extends View {
+	// options?
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.set( 'label' );
+
+		this.set( 'value' );
+
+		this.set( 'id' );
+
+		this.set( 'placeholder' );
+
+		this.set( 'isReadOnly', false );
+
+		this.set( 'errorText', null );
+
+		this.set( 'ariaDescribedById' );
+
+		this._dropdownView = this._createDropdownView( locale );
+		this._inputView = this._createInputTextView( locale );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input-color-picker',
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			children: [
+				this._inputView,
+				this._dropdownView
+			],
+		} );
+	}
+
+	focus() {
+		this._inputView.focus();
+	}
+
+	_createDropdownView( locale ) {
+		const bind = this.bindTemplate;
+		const colorGrid = this._createColorGrid();
+		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'
+				],
+				style: {
+					backgroundColor: bind.to( 'value' )
+				}
+			}
+		} );
+
+		dropdown.buttonView.extendTemplate( {
+			attributes: {
+				class: 'ck-dropdown__color-picker-button'
+			},
+		} );
+
+		dropdown.buttonView.children.add( colorPreview );
+
+		dropdown.panelPosition = 'sw';
+		dropdown.panelView.children.add( removeColorButton );
+		dropdown.panelView.children.add( colorGrid );
+		dropdown.bind( 'isReadOnly' ).to( this );
+		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
+
+		return dropdown;
+	}
+
+	_createInputTextView( locale ) {
+		const input = new InputTextView( locale );
+
+		input.bind( 'value' ).to( this );
+		input.bind( 'isReadOnly' ).to( this );
+		input.bind( 'placeholder' ).to( this );
+		input.bind( 'hasError' ).to( this, 'errorText', value => !!value );
+
+		input.on( 'input', () => {
+			this.value = input.element.value;
+		} );
+
+		input.delegate( 'input' ).to( this );
+
+		return input;
+	}
+
+	_createRemoveColorButton( locale ) {
+		const bind = this.bindTemplate;
+		const removeColor = new ButtonView( locale );
+		const buttonLabel = new View();
+
+		removeColor.extendTemplate( {
+			attributes: {
+				class: [
+					'ck',
+					'ck-dropdown__color-picker-remove-color'
+				]
+			},
+		} );
+
+		buttonLabel.setTemplate( {
+			tag: 'span',
+			children: [
+				'Remove color'
+			],
+			on: {
+				click: bind.to( () => {
+					this.value = '';
+					this._dropdownView.isOpen = false;
+				} )
+			}
+		} );
+
+		removeColor.children.add( buttonLabel );
+
+		return removeColor;
+	}
+
+	_createColorGrid( locale ) {
+		const options = {
+			colorDefinitions: [
+				{
+					color: 'hsl(0, 0%, 0%)',
+					label: 'Black'
+				},
+				{
+					color: 'hsl(0, 0%, 30%)',
+					label: 'Dim grey'
+				},
+				{
+					color: 'hsl(0, 0%, 60%)',
+					label: 'Grey'
+				},
+				{
+					color: 'hsl(0, 0%, 90%)',
+					label: 'Light grey'
+				},
+				{
+					color: 'hsl(0, 0%, 100%)',
+					label: 'White',
+					hasBorder: true
+				},
+				{
+					color: 'hsl(0, 75%, 60%)',
+					label: 'Red'
+				},
+				{
+					color: 'hsl(30, 75%, 60%)',
+					label: 'Orange'
+				},
+				{
+					color: 'hsl(60, 75%, 60%)',
+					label: 'Yellow'
+				},
+				{
+					color: 'hsl(90, 75%, 60%)',
+					label: 'Light green'
+				},
+				{
+					color: 'hsl(120, 75%, 60%)',
+					label: 'Green'
+				},
+				{
+					color: 'hsl(150, 75%, 60%)',
+					label: 'Aquamarine'
+				},
+				{
+					color: 'hsl(180, 75%, 60%)',
+					label: 'Turquoise'
+				},
+				{
+					color: 'hsl(210, 75%, 60%)',
+					label: 'Light blue'
+				},
+				{
+					color: 'hsl(240, 75%, 60%)',
+					label: 'Blue'
+				},
+				{
+					color: 'hsl(270, 75%, 60%)',
+					label: 'Purple'
+				}
+			],
+			columns: 5
+		};
+
+		const colorGrid = new ColorGrid( locale, options );
+
+		colorGrid.on( 'execute', ( evtData, data ) => {
+			this.value = data.value;
+			this._dropdownView.isOpen = false;
+			this.fire( 'input' );
+		} );
+
+		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
+
+		return colorGrid;
+	}
+}

+ 28 - 0
packages/ckeditor5-table/theme/colorinputview.css

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.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;
+
+		/* This dropdown has no arrow but a color preview instead. */
+		& > .ck-dropdown__color-picker-button .ck-dropdown__arrow {
+			display: none;
+		}
+	}
+}