Procházet zdrojové kódy

Refactored tabe forms. Code refactoring and refining.

Aleksander Nowodzinski před 5 roky
rodič
revize
716a1ba00f

+ 22 - 7
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -166,6 +166,7 @@ export default class TableCellPropertiesView extends View {
 		this.options = options;
 
 		const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
+		const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
 		const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
 		const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
 
@@ -223,7 +224,7 @@ export default class TableCellPropertiesView extends View {
 		 * @readonly
 		 * @member {module:table/ui/colorinputview~ColorInputView}
 		 */
-		this.backgroundInput = this._createBackgroundField();
+		this.backgroundInput = backgroundInput;
 
 		/**
 		 * An input that allows specifying the table cell padding.
@@ -332,9 +333,12 @@ export default class TableCellPropertiesView extends View {
 
 		// Background.
 		this.children.add( new FormRowView( locale, {
+			labelView: backgroundRowLabel,
 			children: [
-				this.backgroundInput
-			]
+				backgroundRowLabel,
+				backgroundInput
+			],
+			class: 'ck-table-form__background-row'
 		} ) );
 
 		// Dimensions row and padding.
@@ -544,11 +548,19 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+	 * @returns {Object.<String,module:ui/view~View>}
 	 */
-	_createBackgroundField() {
+	_createBackgroundFields() {
 		const locale = this.locale;
 		const t = this.t;
+
+		// -- Group label ---------------------------------------------
+
+		const backgroundRowLabel = new LabelView( locale );
+		backgroundRowLabel.text = t( 'Background' );
+
+		// -- Background color input -----------------------------------
+
 		const colorInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.backgroundColors,
 			columns: 5
@@ -557,7 +569,7 @@ export default class TableCellPropertiesView extends View {
 		const backgroundInput = new LabeledFieldView( locale, colorInputCreator );
 
 		backgroundInput.set( {
-			label: t( 'Background color' ),
+			label: t( 'Color' ),
 			class: 'ck-table-cell-properties-form__background'
 		} );
 
@@ -566,7 +578,10 @@ export default class TableCellPropertiesView extends View {
 			this.backgroundColor = backgroundInput.fieldView.value;
 		} );
 
-		return backgroundInput;
+		return {
+			backgroundRowLabel,
+			backgroundInput
+		};
 	}
 
 	/**

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -282,6 +282,9 @@ export default class TablePropertiesUI extends Plugin {
 	_showView() {
 		const editor = this.editor;
 
+		// Update the view with the model values.
+		this._fillViewFormFromCommandValues();
+
 		this._balloon.add( {
 			view: this.view,
 			position: getBalloonTablePositionData( editor )
@@ -290,9 +293,6 @@ export default class TablePropertiesUI extends Plugin {
 		// Create a new batch. Clicking "Cancel" will undo this batch.
 		this._undoStepBatch = editor.model.createBatch();
 
-		// Update the view with the model values.
-		this._fillViewFormFromCommandValues();
-
 		// Basic a11y.
 		this.view.focus();
 	}

+ 24 - 10
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -141,6 +141,7 @@ export default class TablePropertiesView extends View {
 		this.options = options;
 
 		const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
+		const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
 		const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
 		const { alignmentToolbar, alignmentLabel } = this._createAlignmentFields();
 
@@ -198,7 +199,7 @@ export default class TablePropertiesView extends View {
 		 * @readonly
 		 * @member {module:table/ui/colorinputview~ColorInputView}
 		 */
-		this.backgroundInput = this._createBackgroundField();
+		this.backgroundInput = backgroundInput;
 
 		/**
 		 * An input that allows specifying the table width.
@@ -218,7 +219,6 @@ export default class TablePropertiesView extends View {
 
 		/**
 		 * A toolbar with buttons that allow changing the alignment of an entire table.
-		 *
 		 * @readonly
 		 * @member {module:ui/toolbar/toolbar~ToolbarView}
 		 */
@@ -291,9 +291,12 @@ export default class TablePropertiesView extends View {
 
 		// Background row.
 		this.children.add( new FormRowView( locale, {
+			labelView: backgroundRowLabel,
 			children: [
-				this.backgroundInput
-			]
+				backgroundRowLabel,
+				backgroundInput
+			],
+			class: 'ck-table-form__background-row'
 		} ) );
 
 		this.children.add( new FormRowView( locale, {
@@ -491,20 +494,28 @@ export default class TablePropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+	 * @returns {Object.<String,module:ui/view~View>}
 	 */
-	_createBackgroundField() {
+	_createBackgroundFields() {
+		const locale = this.locale;
+		const t = this.t;
+
+		// -- Group label ---------------------------------------------
+
+		const backgroundRowLabel = new LabelView( locale );
+		backgroundRowLabel.text = t( 'Background' );
+
+		// -- Background color input -----------------------------------
+
 		const backgroundInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.backgroundColors,
 			columns: 5
 		} );
-		const locale = this.locale;
-		const t = this.t;
 
 		const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
 
 		backgroundInput.set( {
-			label: t( 'Background color' ),
+			label: t( 'Color' ),
 			class: 'ck-table-properties-form__background'
 		} );
 
@@ -513,7 +524,10 @@ export default class TablePropertiesView extends View {
 			this.backgroundColor = backgroundInput.fieldView.value;
 		} );
 
-		return backgroundInput;
+		return {
+			backgroundRowLabel,
+			backgroundInput
+		};
 	}
 
 	/**

+ 13 - 1
packages/ckeditor5-table/theme/tablecellproperties.css

@@ -9,7 +9,19 @@
 			flex-wrap: wrap;
 
 			& .ck.ck-toolbar {
-				flex-grow: 0;
+				&:first-of-type {
+					/* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
+					flex-grow: 0.57;
+				}
+
+				&:last-of-type {
+					/* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
+					flex-grow: 0.43;
+				}
+
+				& .ck-button {
+					flex-grow: 1;
+				}
 			}
 		}
 	}

+ 4 - 0
packages/ckeditor5-table/theme/tableform.css

@@ -26,6 +26,10 @@
 			}
 		}
 
+		&.ck-table-form__background-row {
+			flex-wrap: wrap;
+		}
+
 		&.ck-table-form__dimensions-row {
 			flex-wrap: wrap;
 			align-items: center;

+ 3 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -75,7 +75,7 @@
 	min-width: var(--ck-input-text-width);
 
 	& .ck-labeled-field-view {
-		margin: var(--ck-spacing-standard) var(--ck-spacing-standard) var(--ck-spacing-small);
+		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
 
 		& .ck-input-text {
 			min-width: 0;
@@ -110,10 +110,11 @@
 
 	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
 	& .ck.ck-list {
-		margin-left: 0;
+		margin: var(--ck-spacing-standard) var(--ck-spacing-large);
 
 		& .ck-button.ck-switchbutton {
 			border: 0;
+			padding: 0;
 			width: 100%;
 
 			&:hover {

+ 3 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tablecellproperties.css

@@ -16,6 +16,9 @@
 		&.ck-table-cell-properties-form__alignment-row {
 			& .ck.ck-toolbar {
 				background: none;
+
+				/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
+				margin-top: var(--ck-spacing-standard);
 			}
 		}
 	}

+ 3 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableproperties.css

@@ -14,6 +14,9 @@
 			& .ck.ck-toolbar {
 				background: none;
 
+				/* Compensate for missing input label that would push the margin (toolbar has no inputs). */
+				margin-top: var(--ck-spacing-standard);
+
 				& .ck-toolbar__items > * {
 					width: 40px;
 				}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -23,7 +23,7 @@
 	min-height: var(--ck-ui-component-min-height);
 
 	/* Apply some smooth transition to the box-shadow and border. */
-	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
+	transition: box-shadow .1s ease-in-out, border .1s ease-in-out;
 
 	&:focus {
 		@mixin ck-focus-ring;

+ 34 - 26
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css

@@ -5,6 +5,10 @@
 
 @import "../../../mixins/_rounded.css";
 
+:root {
+	--ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
+}
+
 .ck.ck-labeled-field-view {
 	@mixin ck-rounded-corners;
 
@@ -21,10 +25,6 @@
 		opacity: 0;
 	}
 
-	&.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
-		color: var(--ck-color-base-error);
-	}
-
 	& .ck-labeled-input__wrapper {
 		position: relative;
 	}
@@ -36,30 +36,35 @@
 	& .ck.ck-label {
 		display: block;
 		position: absolute;
-		top: calc(-1 * var(--ck-spacing-standard) - 1px);
-		left: var(--ck-spacing-medium);
-		right: auto;
+		top: 0px;
+		left: 0px;
 
 		pointer-events: none;
 
+		transform-origin: 0 0;
+
+		/* By default, display the label scaled down above the field. */
+		transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
+
 		background: var(--ck-color-base-background);
-		font-size: var(--ck-font-size-small);
-		padding: 0 calc(.75 * var(--ck-font-size-tiny));
+		padding: 0 calc(.5 * var(--ck-font-size-tiny));
 		line-height: initial;
 		font-weight: normal;
-		transform: none;
 
 		/* Prevent overflow when the label is longer than the input */
 		text-overflow: ellipsis;
 		overflow: hidden;
+
 		max-width: 100%;
 
 		transition:
-			top .1s ease-in-out,
-			transform .1s ease-in-out,
-			padding .1s ease-in-out,
-			background .1s ease-in-out,
-			font-size .1s ease-in-out;
+			transform var(--ck-labeled-field-view-transition),
+			padding var(--ck-labeled-field-view-transition),
+			background var(--ck-labeled-field-view-transition);
+	}
+
+	&.ck-error > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+		color: var(--ck-color-base-error);
 	}
 
 	&.ck-labeled-input_focused {
@@ -87,19 +92,22 @@
 		color: var(--ck-color-base-error);
 	}
 
-	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
-	&.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
-		background: transparent;
-		font-size: var(--ck-font-size-normal);
-		right: var(--ck-spacing-medium);
-		top: 50%;
-		padding: 0;
-		transform: translateY(-50%);
-		bottom: 0;
-	}
-
+	/* Disabled fields and fields that have no focus should fade out. */
 	&.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
 		color: var(--ck-color-input-disabled-text);
 	}
+
+	/* Fields that are disabled or not focused and without a placeholder should have full-sized labels. */
+	/* stylelint-disable-next-line no-descending-specificity */
+	&.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label,
+	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
+		transform: translate(var(--ck-spacing-medium), calc(0.6 * var(--ck-font-size-base))) scale(1);
+
+		/* Compensate for the default translate position */
+		max-width: calc(100% - 2 * var(--ck-spacing-medium));
+
+		background: transparent;
+		padding: 0;
+	}
 }