Kaynağa Gözat

Code refactoring.

Aleksander Nowodzinski 5 yıl önce
ebeveyn
işleme
5d283acc23

+ 2 - 2
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -128,8 +128,8 @@ export default class ColorInputView extends View {
 				'aria-describedby': bind.to( 'ariaDescribedById' )
 			},
 			children: [
-				this._inputView,
-				this._dropdownView
+				this._dropdownView,
+				this._inputView
 			]
 		} );
 

+ 1 - 1
packages/ckeditor5-table/src/utils/ui/table-properties.js

@@ -362,7 +362,7 @@ export function getLabeledColorInputCreator( options ) {
 		} );
 
 		inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-		inputView.bind( 'errorText' ).to( labeledFieldView );
+		inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
 
 		inputView.on( 'input', () => {
 			// UX: Make the error text disappear and disable the error indicator as the user

+ 1 - 7
packages/ckeditor5-table/theme/colorinput.css

@@ -6,17 +6,11 @@
 .ck.ck-input-color {
 	width: 100%;
 	display: flex;
+	flex-direction: row-reverse;
 
 	& > input.ck.ck-input-text {
 		min-width: auto;
 		flex-grow: 1;
-
-		&:active,
-		&:focus {
-			& + .ck.ck-dropdown {
-				z-index: -1;
-			}
-		}
 	}
 
 	& > div.ck.ck-dropdown {

+ 2 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css

@@ -20,19 +20,18 @@
 	}
 
 	& > .ck.ck-dropdown {
-		& > .ck.ck-input-color__button {
+		& > .ck.ck-button.ck-input-color__button {
 			padding: 0;
+			border-left-width: 0;
 
 			@mixin ck-dir ltr {
 				border-top-left-radius: 0;
 				border-bottom-left-radius: 0;
-				margin-left: -1px;
 			}
 
 			@mixin ck-dir rtl {
 				border-top-right-radius: 0;
 				border-bottom-right-radius: 0;
-				margin-right: -1px;
 			}
 
 			&.ck-disabled {