Ver código fonte

Add color tile class and apply those changes to font color plugin.

Mateusz Samsel 6 anos atrás
pai
commit
bd7c5279eb

+ 48 - 24
packages/ckeditor5-font/src/ui/colortableview.js

@@ -6,20 +6,25 @@
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ColorTile from './colortile';
+
 import removeButtonIcon from '../../theme/icons/eraser.svg';
 
 import '../../theme/fontcolor.css';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 export default class ColorTableView extends View {
 	constructor( locale, { colors } ) {
 		super( locale );
 
-		this.COLUMNS = 6;
 		this.colorsDefinition = colors;
 
 		this.set( 'selectedColor' );
 		this.set( 'hoveredColor' );
 		this.set( 'removeButtonTooltip' );
+		this.set( 'colorColumns', 5 );
+		this.set( 'recentlyUsedColors', new Collection() );
+		this.initRecentCollection();
 
 		this.setTemplate( {
 			tag: 'div',
@@ -28,7 +33,8 @@ export default class ColorTableView extends View {
 			},
 			children: [
 				this.removeColorButton(),
-				this.createColorTableTemplate()
+				this.createColorTableTemplate(),
+				this.recentlyUsed()
 			]
 		} );
 	}
@@ -49,36 +55,54 @@ export default class ColorTableView extends View {
 	}
 
 	createColorTableTemplate() {
+		const colorCollection = this.createCollection();
+		this.colorsDefinition.forEach( item => {
+			const colorTile = new ColorTile();
+			colorTile.set( {
+				color: item.color,
+				hasBorder: item.hasBorder
+			} );
+			colorTile.delegate( 'execute' ).to( this );
+			colorCollection.add( colorTile );
+		} );
+
 		return new Template( {
 			tag: 'div',
-			children: this._colorElements( this.colorsDefinition ),
+			children: colorCollection,
 			attributes: {
-				class: 'ck-color-table__main-container'
+				class: 'ck-color-table__grid-container'
 			}
 		} );
 	}
 
-	_colorElements( colorArr ) {
-		const bind = this.bindTemplate;
-		return colorArr.map( element => {
-			const classNames = [ 'ck-color-table__color-item' ];
-			if ( element.options.hasBorder ) {
-				classNames.push( 'ck-color-table__color-item_bordered' );
+	recentlyUsed() {
+		this.recentlyUsedViews = this.createCollection();
+
+		this.recentlyUsedViews.bindTo( this.recentlyUsedColors ).using(
+			storegColor => {
+				const colorTile = new ColorTile();
+				colorTile.set( {
+					color: storegColor.color,
+					hasBorder: true
+				} );
+				colorTile.delegate( 'execute' ).to( this );
+				return colorTile;
+			}
+		);
+		return new Template( {
+			tag: 'div',
+			children: this.recentlyUsedViews,
+			attributes: {
+				class: [ 'ck-color-table__grid-container' ]
 			}
-			return new Template( {
-				tag: 'span',
-				attributes: {
-					style: {
-						backgroundColor: element.color
-					},
-					class: classNames
-				},
-				on: {
-					click: bind.to( () => {
-						this.fire( 'execute', { value: element.color } );
-					} )
-				}
-			} );
 		} );
 	}
+
+	initRecentCollection() {
+		for ( let i = 0; i < this.colorColumns; i++ ) {
+			this.recentlyUsedColors.add( {
+				color: 'hsla( 0, 0%, 0%, 0 )'
+			} );
+		}
+	}
 }

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

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+
+export default class ColorTile extends View {
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.set( 'color' );
+		this.set( 'label' );
+		this.set( 'hasBorder' );
+
+		this.setTemplate( {
+			tag: 'span',
+			attributes: {
+				style: {
+					backgroundColor: bind.to( 'color' )
+				},
+				class: [
+					'ck-color-table__color-tile',
+					bind.if( 'hasBorder', 'ck-color-table__color-tile_bordered' )
+				]
+			},
+			on: {
+				click: bind.to( () => {
+					this.fire( 'execute', { value: this.color } );
+				} )
+			}
+		} );
+	}
+}

+ 9 - 3
packages/ckeditor5-font/tests/manual/font-color.js

@@ -8,14 +8,20 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import FontColor from '../../src/fontcolor';
-import FontBackgroundColor from '../../src/fontbackgroundcolor';
+// import FontBackgroundColor from '../../src/fontbackgroundcolor';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, FontColor, FontBackgroundColor ],
+		plugins: [
+			ArticlePluginSet,
+			FontColor,
+			// FontBackgroundColor
+		],
 		toolbar: [
 			'heading', '|',
-			'fontColor', 'fontBackgroundColor', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
+			'fontColor',
+			// 'fontBackgroundColor',
+			'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		]
 	} )
 	.then( editor => {

+ 4 - 4
packages/ckeditor5-font/theme/fontcolor.css

@@ -9,25 +9,25 @@
 	--grid-columns-max: 5;
 }
 
-.ck-color-table div.ck-color-table__main-container {
+.ck-color-table div.ck-color-table__grid-container {
 	display: grid;
 	grid-template-columns: repeat( var(--grid-columns-max), 1fr);
 	grid-gap: 5px;
 	padding: 10px;
 }
 
-.ck-color-table__main-container span.ck-color-table__color-item {
+.ck-color-table__grid-container span.ck-color-table__color-tile {
 	width: var(--grid-size);
 	height: var(--grid-size);
 	border-radius: 3px;
 	cursor: pointer;
 	transition: 300ms ease all;
 }
-.ck-color-table__main-container span.ck-color-table__color-item.ck-color-table__color-item_bordered {
+.ck-color-table__grid-container span.ck-color-table__color-tile.ck-color-table__color-tile_bordered {
 	box-shadow: 0 0 1px hsl( 0,0%,60%);
 }
 
-.ck-color-table__main-container span.ck-color-table__color-item:hover {
+.ck-color-table__grid-container span.ck-color-table__color-tile:hover {
 	box-shadow: 0 0 0 2px hsl(184, 80%, 50%);
 }