소스 검색

Clean up in code, add support for bordered colors.

Mateusz Samsel 6 년 전
부모
커밋
afa7f33095

+ 4 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -26,7 +26,10 @@ export default class FontBackgroundColorEditing extends Plugin {
 				'hsl(0, 0%, 30%)',
 				'hsl(0, 0%, 60%)',
 				'hsl(0, 0%, 90%)',
-				'hsl(0, 0%, 100%)',
+				{
+					color: 'hsl(0, 0%, 100%)',
+					hasBorder: true
+				},
 				'hsl(360, 75%, 60%)',
 				'hsl(30, 75%, 60%)',
 				'hsl(60, 75%, 60%)',

+ 7 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -30,7 +30,13 @@ export default class FontBackgroundColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( element => ( { name: element.label, color: element.model } ) )
+				options.map( element => ( {
+					name: element.label,
+					color: element.model,
+					options: {
+						hasBorder: element.hasBorder
+					}
+				} ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove background color' ) );
 

+ 4 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -26,7 +26,10 @@ export default class FontColorEditing extends Plugin {
 				'hsl(0, 0%, 30%)',
 				'hsl(0, 0%, 60%)',
 				'hsl(0, 0%, 90%)',
-				'hsl(0, 0%, 100%)',
+				{
+					color: 'hsl(0, 0%, 100%)',
+					hasBorder: true
+				},
 				'hsl(360, 75%, 60%)',
 				'hsl(30, 75%, 60%)',
 				'hsl(60, 75%, 60%)',

+ 7 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -30,7 +30,13 @@ export default class FontColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( element => ( { name: element.label, color: element.model } ) )
+				options.map( element => ( {
+					name: element.label,
+					color: element.model,
+					options: {
+						hasBorder: element.hasBorder
+					}
+				} ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 

+ 19 - 22
packages/ckeditor5-font/src/ui/colortableview.js

@@ -58,30 +58,27 @@ export default class ColorTableView extends View {
 		} );
 	}
 
-	// _colorRows( colorTable ) {
-	// 	return colorTable.map( rowArr => new Template( {
-	// 		tag: 'tr',
-	// 		children: this._colorElements( rowArr )
-	// 	} ) );
-	// }
-
 	_colorElements( colorArr ) {
 		const bind = this.bindTemplate;
-		return colorArr.map( element => new Template( {
-			tag: 'span',
-			attributes: {
-				style: {
-					backgroundColor: element.color
-				},
-				class: [
-					'ck-color-table__color-item'
-				]
-			},
-			on: {
-				click: bind.to( () => {
-					this.fire( 'execute', { value: element.color } );
-				} )
+		return colorArr.map( element => {
+			const classNames = [ 'ck-color-table__color-item' ];
+			if ( element.options.hasBorder ) {
+				classNames.push( 'ck-color-table__color-item_bordered' );
 			}
-		} ) );
+			return new Template( {
+				tag: 'span',
+				attributes: {
+					style: {
+						backgroundColor: element.color
+					},
+					class: classNames
+				},
+				on: {
+					click: bind.to( () => {
+						this.fire( 'execute', { value: element.color } );
+					} )
+				}
+			} );
+		} );
 	}
 }

+ 2 - 0
packages/ckeditor5-font/src/utils.js

@@ -68,6 +68,7 @@ function getColorsDefinition( color ) {
 	if ( typeof color === 'string' ) {
 		return {
 			model: color,
+			label: color,
 			view: {
 				name: 'span',
 				styles: {
@@ -80,6 +81,7 @@ function getColorsDefinition( color ) {
 		return {
 			model: color.color,
 			label: color.label,
+			hasBorder: color.hasBorder,
 			view: {
 				name: 'span',
 				styles: {

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

@@ -4,13 +4,9 @@
  */
 
 :root {
-	/* 	--grid-size: 20px; */
 	--grid-size: 25px;
 
 	--grid-columns-max: 5;
-	/* 	 Test it and uncomment variable. */
-	/* --grid-columns-max: 8; */
-	/* --grid-columns-max: 3; */
 }
 
 .ck-color-table div.ck-color-table__main-container {
@@ -27,6 +23,9 @@
 	cursor: pointer;
 	transition: 300ms ease all;
 }
+.ck-color-table__main-container span.ck-color-table__color-item.ck-color-table__color-item_bordered {
+	box-shadow: 0 0 1px hsl( 0,0%,60%);
+}
 
 .ck-color-table__main-container span.ck-color-table__color-item:hover {
 	box-shadow: 0 0 0 2px hsl(184, 80%, 50%);