浏览代码

Moved ColorGrid and ColorTile to ckeditor5-ui. Refactroing of styles; some moved to ckeditor5-theme-lark.

Aleksander Nowodzinski 6 年之前
父节点
当前提交
f0a9843933

+ 0 - 175
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -1,175 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module font/ui/colorgrid
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ColorTile from './colortile';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-
-/**
- * A grid of {@link module:font/ui/colortile~ColorTile color tiles}.
- *
- * @extends module:ui/view~View
- */
-export default class ColorGrid extends View {
-	/**
-	 * Creates an instance of a color grid containing {@link module:font/ui/colortile~ColorTile}.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
-	 * @param {Object} options Component configuration
-	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} [options.colorDefinitions] Array with definitions
-	 * required to create the {@link module:font/ui/colortile~ColorTile tiles}.
-	 * @param {Number} options.columns A number of columns to display the tiles.
-	 */
-	constructor( locale, options ) {
-		super( locale );
-
-		/**
-		 * Collection of the child tile views.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.items = this.createCollection();
-
-		/**
-		 * Tracks information about DOM focus in the grid.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * Helps cycling over focusable {@link #items} in the grid.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate grid items backwards using the arrowup key.
-				focusPrevious: 'arrowleft',
-
-				// Navigate grid items forwards using the arrowdown key.
-				focusNext: 'arrowright',
-			}
-		} );
-
-		if ( options.colorDefinitions ) {
-			options.colorDefinitions.forEach( item => {
-				const colorTile = new ColorTile();
-
-				colorTile.set( {
-					color: item.color,
-					label: item.label,
-					tooltip: true,
-					hasBorder: item.options.hasBorder
-				} );
-
-				colorTile.on( 'execute', () => {
-					this.fire( 'execute', {
-						value: item.color,
-						hasBorder: item.options.hasBorder,
-						label: item.label
-					} );
-				} );
-
-				this.items.add( colorTile );
-			} );
-		}
-
-		this.setTemplate( {
-			tag: 'div',
-			children: this.items,
-			attributes: {
-				class: 'ck-color-table__grid-container',
-				style: {
-					gridTemplateColumns: `repeat( ${ options.columns }, 1fr)`
-				}
-			}
-		} );
-	}
-
-	/**
-	 * Focuses the first focusable in {@link #items}.
-	 */
-	focus() {
-		if ( this.items.length ) {
-			this.items.first.focus();
-		}
-	}
-
-	/**
-	 * Focuses the last focusable in {@link #items}.
-	 */
-	focusLast() {
-		if ( this.items.length ) {
-			this.items.last.focus();
-		}
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		// Items added before rendering should be known to the #focusTracker.
-		for ( const item of this.items ) {
-			this.focusTracker.add( item.element );
-		}
-
-		this.items.on( 'add', ( evt, item ) => {
-			this.focusTracker.add( item.element );
-		} );
-
-		this.items.on( 'remove', ( evt, item ) => {
-			this.focusTracker.remove( item.element );
-		} );
-
-		// Start listening for the keystrokes coming from #element.
-		this.keystrokes.listenTo( this.element );
-	}
-}
-
-/**
- * A color definition used to create a {@link module:font/ui/colortile~ColorTile}.
- *
- *		{
- *			color: hsl(0, 0%, 75%),
- *			label: 'Light Grey',
- *			options: {
- *				hasBorder: true
- *			}
- *		}
- *
- * @typedef {Object} module:font/ui/colorgrid~ColorDefinition
- * @type Object
- *
- * @property {String} color String representing a color.
- * It is used as value of background-color style in {@link module:font/ui/colortile~ColorTile}.
- * @property {String} label String used as label for {@link module:font/ui/colortile~ColorTile}.
- * @property {Object} options Additional options passed to create a {@link module:font/ui/colortile~ColorTile}.
- * @property {Boolean} options.hasBorder A flag that indicates if special a CSS class should be added
- * to {@link module:font/ui/colortile~ColorTile}, which renders a border around it.
- */

+ 5 - 5
packages/ckeditor5-font/src/ui/colortableview.js

@@ -9,8 +9,8 @@
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import ColorTile from './colortile';
-import ColorGrid from './colorgrid';
+import ColorTile from '@ckeditor/ckeditor5-ui/src/colorgrid/colortile';
+import ColorGrid from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgrid';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
@@ -22,7 +22,7 @@ import '../../theme/fontcolor.css';
  * Class which represents a view with the following sub–components:
  *
  * * a remove color button,
- * * a {@link module:font/ui/colorgrid~ColorGrid},
+ * * a {@link module:ui/colorgrid/colorgrid~ColorGrid},
  * * a grid of recently used colors.
  *
  * @extends module:ui/view~View
@@ -33,7 +33,7 @@ export default class ColorTableView extends View {
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} config Configuration object
-	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} config.colors Array with definitions of colors to
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors Array with definitions of colors to
 	 * be displayed in the table.
 	 * @param {Number} config.columns Number of columns in the color grid.
 	 * Also determines how many recent color will be displayed.
@@ -53,7 +53,7 @@ export default class ColorTableView extends View {
 		/**
 		 * An array with objects representing colors to be displayed in the grid.
 		 *
-		 * @type {Arrray.<module:font/ui/colorgrid~ColorDefinition>}
+		 * @type {Arrray.<module:ui/colorgrid/colorgrid~ColorDefinition>}
 		 */
 		this.colorDefinitions = colors;
 

+ 0 - 48
packages/ckeditor5-font/src/ui/colortile.js

@@ -1,48 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @module font/ui/colortile
- */
-
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-
-/**
- * This class represents a single color tile in the {@link module:font/ui/colorgrid~ColorGrid}.
- *
- * @extends module:ui/button/buttonview~ButtonView
- */
-export default class ColorTile extends ButtonView {
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * String representing a color shown as tile's background.
-		 * @type {String}
-		 */
-		this.set( 'color' );
-
-		/**
-		 * A flag that toggles a special CSS class responsible for displaying
-		 * a border around the button.
-		 * @type {Boolean}
-		 */
-		this.set( 'hasBorder' );
-
-		this.extendTemplate( {
-			attributes: {
-				style: {
-					backgroundColor: bind.to( 'color' )
-				},
-				class: [
-					'ck-color-table__color-tile',
-					bind.if( 'hasBorder', 'ck-color-table__color-tile_bordered' )
-				]
-			}
-		} );
-	}
-}

+ 1 - 1
packages/ckeditor5-font/src/utils.js

@@ -94,7 +94,7 @@ export function normalizeOptions( colorRow ) {
  * @param {Object} config Configuration object
  * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView Dropdown view to which
  * will be added {@link module:font/ui/colortableview~ColorTableView}.
- * @param {Array.<module:font/ui/colorgrid~ColorDefinition>}  Array with definitions representing colors to be displayed
+ * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}  Array with definitions representing colors to be displayed
  * in the color table.
  * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  */

+ 0 - 161
packages/ckeditor5-font/tests/ui/colorgrid.js

@@ -1,161 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals Event */
-
-import ColorGrid from './../../src/ui/colorgrid';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-import ColorTile from '../../src/ui/colortile';
-import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-
-describe( 'ColorGrid', () => {
-	let locale, colorGrid;
-
-	const colorDefinitions = [
-		{
-			color: '#000',
-			label: 'Black',
-			options: {
-				hasBorder: false
-			}
-		},
-		{
-			color: 'rgb(255, 255, 255)',
-			label: 'White',
-			options: {
-				hasBorder: true
-			}
-		},
-		{
-			color: 'red',
-			label: 'Red',
-			options: {
-				hasBorder: false
-			}
-		}
-	];
-
-	beforeEach( () => {
-		locale = { t() {} };
-		colorGrid = new ColorGrid( locale, { colorDefinitions } );
-		colorGrid.render();
-	} );
-
-	testUtils.createSinonSandbox();
-
-	describe( 'constructor()', () => {
-		it( 'creates view collection with children', () => {
-			expect( colorGrid.items ).to.be.instanceOf( ViewCollection );
-		} );
-
-		it( 'creates focus tracker', () => {
-			expect( colorGrid.focusTracker ).to.be.instanceOf( FocusTracker );
-		} );
-
-		it( 'creates keystroke handler', () => {
-			expect( colorGrid.keystrokes ).to.be.instanceOf( KeystrokeHandler );
-		} );
-
-		it( 'creates focus cycler', () => {
-			expect( colorGrid._focusCycler ).to.be.instanceOf( FocusCycler );
-		} );
-
-		describe( 'add colors from definition as child items', () => {
-			it( 'has proper number of elements', () => {
-				expect( colorGrid.items.length ).to.equal( 3 );
-			} );
-			colorDefinitions.forEach( ( color, index ) => {
-				describe( 'child items has proper attributes', () => {
-					it( `for (index: ${ index }, color: ${ color.color }) child`, () => {
-						const colorTile = colorGrid.items.get( index );
-						expect( colorTile ).to.be.instanceOf( ColorTile );
-						expect( colorTile.color ).to.equal( color.color );
-					} );
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'execute()', () => {
-		it( 'fires event for rendered tiles', () => {
-			const spy = sinon.spy();
-			const firstTile = colorGrid.items.first;
-
-			colorGrid.on( 'execute', spy );
-
-			firstTile.isEnabled = true;
-
-			firstTile.element.dispatchEvent( new Event( 'click' ) );
-			sinon.assert.callCount( spy, 1 );
-
-			firstTile.isEnabled = false;
-
-			firstTile.element.dispatchEvent( new Event( 'click' ) );
-			sinon.assert.callCount( spy, 1 );
-		} );
-	} );
-
-	describe( 'focus', () => {
-		it( 'focuses the tile in DOM', () => {
-			const spy = sinon.spy( colorGrid.items.first, 'focus' );
-
-			colorGrid.focus();
-
-			sinon.assert.calledOnce( spy );
-
-			colorGrid.items.clear();
-			colorGrid.focus();
-
-			expect( colorGrid.items.length ).to.equal( 0 );
-			sinon.assert.calledOnce( spy );
-		} );
-
-		it( 'focuses last the tile in DOM', () => {
-			const spy = sinon.spy( colorGrid.items.last, 'focus' );
-
-			colorGrid.focusLast();
-
-			sinon.assert.calledOnce( spy );
-
-			colorGrid.items.clear();
-			colorGrid.focusLast();
-
-			expect( colorGrid.items.length ).to.equal( 0 );
-			sinon.assert.calledOnce( spy );
-		} );
-
-		describe( 'update elements in focus tracker', () => {
-			it( 'adding new element', () => {
-				const spy = sinon.spy( colorGrid.focusTracker, 'add' );
-
-				const colorTile = new ColorTile();
-				colorTile.set( {
-					color: 'yellow',
-					label: 'Yellow',
-					tooltip: true,
-					options: {
-						hasBorder: false
-					}
-				} );
-				colorGrid.items.add( colorTile );
-
-				expect( colorGrid.items.length ).to.equal( 4 );
-				sinon.assert.calledOnce( spy );
-			} );
-
-			it( 'removes element', () => {
-				const spy = sinon.spy( colorGrid.focusTracker, 'remove' );
-
-				colorGrid.items.remove( colorGrid.items.length - 1 );
-
-				expect( colorGrid.items.length ).to.equal( 2 );
-				sinon.assert.calledOnce( spy );
-			} );
-		} );
-	} );
-} );

+ 0 - 30
packages/ckeditor5-font/tests/ui/colortile.js

@@ -1,30 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import ColorTile from './../../src/ui/colortile';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-
-describe( 'ColorTile', () => {
-	it( 'inherits from ButtonView', () => {
-		expect( new ColorTile() ).to.be.instanceOf( ButtonView );
-	} );
-
-	it( 'has proper attributes and classes', () => {
-		const colorTile = new ColorTile();
-		colorTile.render();
-
-		expect( colorTile.color ).to.be.undefined;
-		expect( colorTile.hasBorder ).to.be.undefined;
-
-		colorTile.set( 'color', 'green' );
-		expect( colorTile.color ).to.equal( 'green' );
-		expect( colorTile.element.style.backgroundColor ).to.equal( 'green' );
-		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile' ) ).to.be.true;
-		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.false;
-
-		colorTile.set( 'hasBorder', true );
-		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.true;
-	} );
-} );

+ 0 - 42
packages/ckeditor5-font/theme/fontcolor.css

@@ -3,50 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
-	--ck-table-color-tile-size: 20px;
-	--ck-table-color-max-columns: 5;
-	--ck-color-table-color-tile-border: hsl(0, 0%, 90%);
-	--ck-color-table-color-tile-border-active: hsl(184, 80%, 50%);
-}
-
-.ck .ck-color-table__grid-container {
-	display: grid;
-	grid-gap: calc( var(--ck-spacing-standard) / 2 );
-	padding: var(--ck-spacing-standard);
-}
-
-.ck .ck-color-table__color-tile {
-	width: var(--ck-table-color-tile-size);
-	height: var(--ck-table-color-tile-size);
-	min-width: var(--ck-table-color-tile-size);
-	min-height: var(--ck-table-color-tile-size);
-	border-radius: var(--ck-border-radius);
-	transition: 200ms ease box-shadow;
-}
-
-.ck .ck-disabled.ck-color-table__color-tile {
-	cursor: unset;
-	transition: unset;
-}
-
-.ck .ck-color-table__color-tile_bordered {
-	box-shadow: 0 0 0 1px var(--ck-color-table-color-tile-border);
-}
-
-.ck .ck-color-table__color-tile:hover:not( .ck-disabled ) {
-	box-shadow: 0 0 0 2px var(--ck-color-table-color-tile-border-active);
-}
-
-/* If we change it to list element this CSS will be obsolete. */
 .ck .ck-button.ck-color-table__remove-color {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	border-bottom: 1px solid var(--ck-color-base-border);
-	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
-}
-
-.ck .ck-button.ck-button_with-text.ck-color-table__remove-color svg {
-	margin-right: var(--ck-spacing-standard);
 }