Ver Fonte

Further improvements to font color. Code reorganization, rename view to be more accurate, add feedback for the user when color is selected.

Mateusz Samsel há 6 anos atrás
pai
commit
8bcebeb04f

+ 8 - 5
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -12,8 +12,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import fontColorIcon from '../../theme/icons/font-family.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { normalizeOptions } from './utils';
-import InsertColorView from '../ui/insertcolorview';
-
+import ColorTableView from '../ui/colortableview';
 export default class FontColorUI extends Plugin {
 	/**
 	 * @inheritDoc
@@ -29,10 +28,14 @@ export default class FontColorUI extends Plugin {
 		editor.ui.componentFactory.add( 'fontColor', locale => {
 			const dropdownView = createDropdown( locale );
 
-			const insertColorView = new InsertColorView( locale, options );
-			dropdownView.panelView.children.add( insertColorView );
+			const colorTableView = new ColorTableView( locale, {
+				colors: options.map( item => ( { name: item.label, color: item.model } ) )
+			} );
+
+			dropdownView.panelView.children.add( colorTableView );
 
-			insertColorView.delegate( 'execute' ).to( dropdownView );
+			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
+			colorTableView.delegate( 'colorPicked' ).to( dropdownView, 'execute' );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Color' ),

+ 98 - 0
packages/ckeditor5-font/src/ui/colortableview.js

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+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 '../../theme/fontcolor.css';
+
+export default class ColorTableView extends View {
+	constructor( locale, { colors, columns = 6 } ) {
+		super( locale );
+
+		this.COLUMNS = columns;
+		this.colorsDefinition = colors;
+
+		this.set( 'selectedColor' );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [ 'ck-color-table' ]
+			},
+			children: [
+				this.createColorTableTemplate(),
+				this.removeColorButton()
+			]
+		} );
+	}
+
+	removeColorButton() {
+		const btnView = new ButtonView();
+		btnView.set( {
+			label: 'X',
+			tooltip: this.t( 'Remove font color' ),
+			withText: true
+		} );
+		btnView.class = 'ck-color-table__remove-color';
+		btnView.on( 'execute', () => {
+			this.fire( 'colorPicked', { value: null } );
+		} );
+		return btnView;
+	}
+
+	createColorTableTemplate() {
+		return new Template( {
+			tag: 'table',
+			children: this._colorRows(),
+			attributes: {
+				class: 'ck-color-table__table'
+			}
+		} );
+	}
+
+	_colorRows() {
+		const rows = [];
+		for ( let i = 0; i < Math.ceil( this.colorsDefinition.length / this.COLUMNS ); i++ ) {
+			rows.push( new Template( {
+				tag: 'tr',
+				children: this._colorElements( i )
+			} ) );
+		}
+		return rows;
+	}
+
+	_colorElements( index ) {
+		const elements = [];
+		const bind = this.bindTemplate;
+		for ( let i = 0; i < this.COLUMNS; i++ ) {
+			elements.push( new Template( {
+				tag: 'td',
+				attributes: {
+					style: {
+						backgroundColor: `#${ this.colorsDefinition[ index * this.COLUMNS + i ].color }`
+					},
+					class: [
+						'ck-color-table__cell-color',
+						bind.if(
+							'selectedColor',
+							'ck-color-table__cell-color_active',
+							value => {
+								return value === this.colorsDefinition[ index * this.COLUMNS + i ].color;
+							}
+						)
+					]
+				},
+				on: {
+					click: bind.to( () => {
+						this.fire( 'colorPicked', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
+					} )
+				}
+			} ) );
+		}
+		return elements;
+	}
+}

+ 0 - 78
packages/ckeditor5-font/src/ui/insertcolorview.js

@@ -1,78 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
-
-export default class InsertColorView extends View {
-	constructor( locale, options ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		this.items = this.createCollection();
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [ 'ck' ]
-			},
-
-			children: [ new ColorTable( options.map( item => ( { name: item.label, color: item.model } ) ), bind, this ) ]
-		} );
-	}
-}
-
-class ColorTable {
-	constructor( colorsDefinition, bind, colorViewInstance ) {
-		this.bind = bind;
-		this.colorsDefinition = colorsDefinition;
-		this.colorViewInstance = colorViewInstance;
-		this.COLUMNS = 6;
-		const template = new Template( {
-			tag: 'table',
-			children: this.colorRows(),
-			attributes: {
-				style: {
-					width: '150px'
-				}
-			}
-		} );
-		return template;
-	}
-
-	colorRows() {
-		const rows = [];
-		for ( let i = 0; i < Math.ceil( this.colorsDefinition.length / this.COLUMNS ); i++ ) {
-			rows.push( new Template( {
-				tag: 'tr',
-				children: this.colorElements( i )
-			} ) );
-		}
-		return rows;
-	}
-
-	colorElements( index ) {
-		const elements = [];
-		for ( let i = 0; i < this.COLUMNS; i++ ) {
-			elements.push( new Template( {
-				tag: 'td',
-				attributes: {
-					style: {
-						backgroundColor: `#${ this.colorsDefinition[ index * this.COLUMNS + i ].color }`,
-						width: '25px',
-						height: '25px'
-					}
-				},
-				on: {
-					click: this.bind.to( () => {
-						this.colorViewInstance.fire( 'execute', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
-					} )
-				}
-			} ) );
-		}
-		return elements;
-	}
-}

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-color-table .ck-color-table__table {
+	margin: 0.5em 0.5em 0 0.5em;
+	width: 14em;
+	border-collapse: separate;
+	border-spacing: 0.2em;
+}
+
+.ck-color-table .ck-color-table__cell-color {
+	width: 2em;
+	height: 2em;
+	border: 0.1em solid #000;
+	transition-property: border-width;
+	transition-duration: 0.1s;
+	transition-timing-function: ease;
+	text-align: center;
+	vertical-align: middle;
+	line-height: 0;
+}
+
+.ck-color-table .ck-color-table__cell-color:hover {
+	border-width: 0.2em;
+}
+
+.ck-color-table .ck-color-table__cell-color_active::before {
+	content: "✓";
+	font-size: 1.2em;
+	color: white;
+	text-shadow: -1px -1px 0 #000,
+		1px -1px 0 #000,
+		-1px 1px 0 #000,
+		1px 1px 0 #000;
+}
+
+.ck-color-table .ck-color-table__remove-color {
+	margin: 0.5em;
+}