Explorar o código

Improve test case examples. Add biding for color name in panel.

Mateusz Samsel %!s(int64=6) %!d(string=hai) anos
pai
achega
e9c8407d56

+ 5 - 3
packages/ckeditor5-font/src/fontcolor/utils.js

@@ -17,9 +17,7 @@ export function normalizeOptions( configuredOptions ) {
 
 export function renderUpcastAttribute( viewElement ) {
 	const fontColor = viewElement.getStyle( 'color' );
-	const value = fontColor;
-
-	return value;
+	return normalizeColorCode( fontColor );
 }
 
 export function renderDowncastElement( modelAttributeValue, viewWriter ) {
@@ -42,3 +40,7 @@ function getOptionDefinition( option ) {
 		}
 	};
 }
+
+function normalizeColorCode( color ) {
+	return color.replace( /\s/g, '' );
+}

+ 12 - 2
packages/ckeditor5-font/src/ui/colortableview.js

@@ -8,15 +8,16 @@ 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 );
+		const bind = this.bindTemplate;
 
 		this.COLUMNS = columns;
 		this.colorsDefinition = colors;
 
 		this.set( 'selectedColor' );
+		this.set( 'hoveredColor' );
 
 		this.setTemplate( {
 			tag: 'div',
@@ -25,7 +26,10 @@ export default class ColorTableView extends View {
 			},
 			children: [
 				this.createColorTableTemplate(),
-				this.removeColorButton()
+				this.removeColorButton(),
+				{
+					text: bind.to( 'hoveredColor' )
+				}
 			]
 		} );
 	}
@@ -89,6 +93,12 @@ export default class ColorTableView extends View {
 				on: {
 					click: bind.to( () => {
 						this.fire( 'colorPicked', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
+					} ),
+					mouseover: bind.to( () => {
+						this.set( 'hoveredColor', this.colorsDefinition[ index * this.COLUMNS + i ].name );
+					} ),
+					mouseout: bind.to( () => {
+						this.set( 'hoveredColor', undefined );
 					} )
 				}
 			} ) );

+ 17 - 5
packages/ckeditor5-font/tests/manual/font-color.html

@@ -1,8 +1,20 @@
 <div id="editor">
 	<h2>Font Color feature sample.</h2>
-
-	<h3>Color: #9B59B6;</h3>
-	<p>
-		<span style="color:#9B59B6;">Jujubes sweet wafer. Pastry cotton candy sweet muffin dessert cookie. Chocolate cake candy canes dragée wafer donut bear claw.</span>
-	</p>
+	<p><span style="color:gold">color:gold</span></p>
+	<p><span style="color:lightcoral;">color:lightcoral;</span></p>
+	<p><span style="color:#9B59B6;">color:#9B59B6</span></p>
+	<p><span style="color:rgb(248, 77, 77);">color:rgb(248, 77, 77)</span></p>
+	<p><span style="color:rgb(248,180,77);">color:rgb(248,180,77)</span></p>
+	<p><span style="color:rgba(248, 77, 77, 0.8);">color:rgba(248, 77, 77, 0.8)</span></p>
+	<p><span style="color:rgba(248,180,77,0.8);">color:rgba(248,180,77,0.8)</span></p>
+	<p><span style="color:rgba(248, 77, 77, .8);">color:rgba(248, 77, 77, .8)</span></p>
+	<p><span style="color:rgba(248,180,77,.8);">color:rgba(248,180,77,.8)</span></p>
+	<p><span style="color:rgb(10%, 80%, 0%);">color:rgb(10%, 80%, 0%);</span></p>
+	<p><span style="color:rgb(85%,70%,5%);">color:rgb(85%,70%,5%);</span></p>
+	<p><span style="color:rgba(10%, 80%, 0%, 80%);">color:rgba(10%, 80%, 0%, 80%);</span></p>
+	<p><span style="color:rgba(85%,70%,5%,80%);">color:rgba(85%,70%,5%,80%);</span></p>
+	<p><span style="color:hsl(0, 100%, 50%);">color:hsl(0, 100%, 50%);</span></p>
+	<p><span style="color:hsl(50,100%,50%);">color:hsl(50,100%,50%);</span></p>
+	<p><span style="color:hsla(100, 100%, 50%, 80%);">color:hsla(100, 100%, 50%, 80%);</span></p>
+	<p><span style="color:hsla(250,100%,50%,80%);">color:hsla(250,100%,50%,80%);</span></p>
 </div>