ソースを参照

Remove color input files from ui

panr 5 年 前
コミット
b213cbf419

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

@@ -1,222 +0,0 @@
-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/components/colorinputview/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;
-	}
-}

+ 0 - 28
packages/ckeditor5-ui/theme/components/colorinputview/colorinputview.css

@@ -1,28 +0,0 @@
-/*
- * 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;
-		}
-	}
-}