8
0
Mateusz Samsel 6 лет назад
Родитель
Сommit
b91e1d46e3

+ 9 - 6
packages/ckeditor5-font/src/ui/colortableview.js

@@ -6,8 +6,10 @@
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import removeButtonIcon from '../../theme/icons/eraser.svg';
 
 
 import '../../theme/fontcolor.css';
 import '../../theme/fontcolor.css';
+
 export default class ColorTableView extends View {
 export default class ColorTableView extends View {
 	constructor( locale, { colors } ) {
 	constructor( locale, { colors } ) {
 		super( locale );
 		super( locale );
@@ -25,8 +27,8 @@ export default class ColorTableView extends View {
 				class: [ 'ck-color-table' ]
 				class: [ 'ck-color-table' ]
 			},
 			},
 			children: [
 			children: [
-				this.createColorTableTemplate(),
-				this.removeColorButton()
+				this.removeColorButton(),
+				this.createColorTableTemplate()
 			]
 			]
 		} );
 		} );
 	}
 	}
@@ -34,10 +36,11 @@ export default class ColorTableView extends View {
 	removeColorButton() {
 	removeColorButton() {
 		const btnView = new ButtonView();
 		const btnView = new ButtonView();
 		btnView.set( {
 		btnView.set( {
-			label: 'X',
-			withText: true
+			withText: true,
+			icon: removeButtonIcon,
+			tooltip: true
 		} );
 		} );
-		btnView.bind( 'tooltip' ).to( this, 'removeButtonTooltip' );
+		btnView.bind( 'label' ).to( this, 'removeButtonTooltip' );
 		btnView.class = 'ck-color-table__remove-color';
 		btnView.class = 'ck-color-table__remove-color';
 		btnView.on( 'execute', () => {
 		btnView.on( 'execute', () => {
 			this.fire( 'execute', { value: null } );
 			this.fire( 'execute', { value: null } );
@@ -71,7 +74,7 @@ export default class ColorTableView extends View {
 					backgroundColor: element.color
 					backgroundColor: element.color
 				},
 				},
 				class: [
 				class: [
-					'ck-color-table__cell-color'
+					'ck-color-table__color-item'
 				]
 				]
 			},
 			},
 			on: {
 			on: {

+ 36 - 27
packages/ckeditor5-font/theme/fontcolor.css

@@ -3,39 +3,48 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-.ck-color-table .ck-color-table__table {
-	margin: 0.5em 0.5em 0 0.5em;
-	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0.2em;
+: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 .ck-color-table__cell-color {
-	width: 20px;
-	height: 20px;
-	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 div.ck-color-table__main-container {
+	display: grid;
+	grid-template-columns: repeat( var(--grid-columns-max), 1fr);
+	grid-gap: 5px;
+	padding: 10px;
 }
 }
 
 
-.ck-color-table .ck-color-table__cell-color:hover {
-	border-width: 0.2em;
+.ck-color-table__main-container span.ck-color-table__color-item {
+	width: var(--grid-size);
+	height: var(--grid-size);
+	border-radius: 3px;
+	cursor: pointer;
+	transition: 300ms ease all;
 }
 }
 
 
-.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__main-container span.ck-color-table__color-item:hover {
+	box-shadow: 0 0 0 2px hsl(184, 80%, 50%);
 }
 }
 
 
-.ck-color-table .ck-color-table__remove-color {
-	margin: 0.5em;
+.ck-color-table button.ck-color-table__remove-color svg {
+	width: 24px;
+	margin-right: 10px;
+}
+
+.ck-color-table button.ck-color-table__remove-color {
+	display: flex;
+	align-items: center;
+	text-align: left;
+	font-size: 16px;
+	border: 0;
+	width: 100%;
+	border-bottom: 1px solid hsl(0, 0%, 87%);
+	padding: 10px;
+	cursor: pointer;
 }
 }

+ 1 - 0
packages/ckeditor5-font/theme/icons/eraser.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path d="M8.636 9.531l-2.758 3.94a.5.5 0 0 0 .122.696l3.224 2.284h1.314l2.636-3.736L8.636 9.53zm.288 8.451L5.14 15.396a2 2 0 0 1-.491-2.786l6.673-9.53a2 2 0 0 1 2.785-.49l3.742 2.62a2 2 0 0 1 .491 2.785l-7.269 10.053-2.147-.066z"/><path d="M4 18h5.523v-1H4zm-2 0h1v-1H2z"/></g></svg>