Browse Source

Ported the PoC to the monorepo.

Aleksander Nowodzinski 5 years ago
parent
commit
62e04b4510

+ 1 - 1
packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js

@@ -189,7 +189,7 @@ export default class TextAlternativeFormView extends View {
 		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
 
 		labeledInput.label = t( 'Text alternative' );
-		labeledInput.fieldView.placeholder = t( 'Text alternative' );
+		// labeledInput.fieldView.placeholder = t( 'Text alternative' );
 
 		return labeledInput;
 	}

+ 1 - 1
packages/ckeditor5-image/theme/imageupload.css

@@ -4,7 +4,7 @@
  */
 
 .ck.ck-image-upload__panel {
-	padding: var(--ck-spacing-standard);
+	padding: var(--ck-spacing-large);
 }
 
 .ck.ck-image-upload__ck-finder-button {

+ 1 - 1
packages/ckeditor5-link/src/ui/linkformview.js

@@ -216,7 +216,7 @@ export default class LinkFormView extends View {
 		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
 
 		labeledInput.label = t( 'Link URL' );
-		labeledInput.fieldView.placeholder = protocol + 'example.com';
+		// labeledInput.fieldView.placeholder = protocol + 'example.com';
 
 		return labeledInput;
 	}

+ 1 - 1
packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -271,7 +271,7 @@ export default class MediaFormView extends View {
 
 		labeledInput.label = t( 'Media URL' );
 		labeledInput.infoText = this._urlInputViewInfoDefault;
-		inputField.placeholder = 'https://example.com';
+		// inputField.placeholder = 'https://example.com';
 
 		inputField.on( 'input', () => {
 			// Display the tip text only when there's some value. Otherwise fall back to the default info text.

+ 3 - 1
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -486,6 +486,8 @@ export default class TableCellPropertiesView extends View {
 			this.borderStyle = evt.source._borderStyleValue;
 		} );
 
+		borderStyleDropdown.bind( 'isEmpty' ).to( this, 'borderStyle', value => !value );
+
 		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
 
 		// -- Width ---------------------------------------------------
@@ -555,7 +557,7 @@ export default class TableCellPropertiesView extends View {
 		const backgroundInput = new LabeledFieldView( locale, colorInputCreator );
 
 		backgroundInput.set( {
-			label: t( 'Background' ),
+			label: t( 'Background color' ),
 			class: 'ck-table-cell-properties-form__background'
 		} );
 

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

@@ -502,7 +502,7 @@ export default class TablePropertiesView extends View {
 		const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
 
 		backgroundInput.set( {
-			label: t( 'Background' ),
+			label: t( 'Background color' ),
 			class: 'ck-table-properties-form__background'
 		} );
 

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

@@ -370,6 +370,9 @@ export function getLabeledColorInputCreator( options ) {
 			labeledFieldView.errorText = null;
 		} );
 
+		// TODO
+		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( inputView._inputView );
+
 		return inputView;
 	};
 }

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

@@ -13,7 +13,9 @@
 
 		&:active,
 		&:focus {
-			z-index: var(--ck-z-default);
+			& + .ck.ck-dropdown {
+				z-index: -1;
+			}
 		}
 	}
 

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -7,7 +7,7 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-text-alternative-form {
-	padding: var(--ck-spacing-standard);
+	padding: var(--ck-spacing-large);
 
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -7,7 +7,7 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-link-form {
-	padding: var(--ck-spacing-standard);
+	padding: var(--ck-spacing-large);
 
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

@@ -7,7 +7,7 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-media-form {
-	padding: var(--ck-spacing-standard);
+	padding: var(--ck-spacing-large);
 
 	&:focus {
 		outline: none;

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

@@ -8,6 +8,7 @@
 
 	& .ck-form__row {
 		&.ck-table-cell-properties-form__padding-row {
+			align-self: flex-end;
 			padding: 0;
 			width: 35%;
 		}

+ 3 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css

@@ -34,18 +34,13 @@
 		&.ck-table-form__dimensions-row {
 			padding: 0;
 
-			& .ck-labeled-field-view > .ck-label {
-				font-size: 10px;
-				text-align: center;
-			}
-
 			& .ck-table-form__dimensions-row__width,
 			& .ck-table-form__dimensions-row__height {
 				margin: 0
 			}
 
 			& .ck-table-form__dimension-operator {
-				align-self: start;
+				align-self: flex-end;
 				display: inline-block;
 				height: var(--ck-ui-component-min-height);
 				line-height: var(--ck-ui-component-min-height);
@@ -55,6 +50,8 @@
 	}
 
 	& .ck.ck-labeled-field-view {
+		padding-top: var(--ck-spacing-standard);
+
 		& .ck.ck-labeled-field-view__status {
 			@mixin ck-rounded-corners;
 

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

@@ -8,6 +8,7 @@
 
 	& .ck-form__row {
 		&.ck-table-properties-form__alignment-row {
+			align-self: flex-end;
 			padding: 0;
 
 			& .ck.ck-toolbar {

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

@@ -13,7 +13,6 @@
 
 .ck.ck-input-text {
 	@mixin ck-rounded-corners;
-	@mixin ck-box-shadow var(--ck-inner-shadow);
 
 	background: var(--ck-color-input-background);
 	border: 1px solid var(--ck-color-input-border);
@@ -28,7 +27,7 @@
 
 	&:focus {
 		@mixin ck-focus-ring;
-		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 	}
 
 	&[readonly] {
@@ -38,7 +37,7 @@
 
 		&:focus {
 			/* The read-only input should have a slightly less visible shadow when focused. */
-			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
+			@mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow);
 		}
 	}
 
@@ -47,7 +46,7 @@
 		animation: ck-text-input-shake .3s ease both;
 
 		&:focus {
-			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
+			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow);
 		}
 	}
 }

+ 91 - 14
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css

@@ -3,21 +3,98 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-labeled-field-view .ck-labeled-field-view__status {
-	font-size: var(--ck-font-size-small);
-	margin-top: var(--ck-spacing-small);
+@import "../../../mixins/_rounded.css";
 
-	/* Let the info wrap to the next line to avoid stretching the layout horizontally.
-	The status could be very long. */
-	white-space: normal;
-}
+.ck.ck-labeled-field-view {
+	@mixin ck-rounded-corners;
 
-.ck.ck-labeled-field-view .ck-labeled-field-view__status_error {
-	color: var(--ck-color-base-error);
-}
+	& > .ck.ck-labeled-field-view__input-wrapper {
+		position: relative;
+		width: 100%;
+
+		& > .ck-dropdown > .ck.ck-button {
+			background: transparent;
+		}
+	}
+
+	&.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
+		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;
+	}
+
+	& .ck.ck-input {
+		width: 100%;
+	}
+
+	& .ck.ck-label {
+		display: block;
+		position: absolute;
+		top: calc(-1 * var(--ck-spacing-large));
+		left: var(--ck-spacing-medium);
+		right: auto;
+
+		pointer-events: none;
+
+		background: var(--ck-color-base-background);
+		font-size: var(--ck-font-size-small);
+		padding: 0 calc(.75 * var(--ck-font-size-tiny));
+		line-height: initial;
+		font-weight: normal;
+		transform: none;
+
+		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;
+	}
+
+	&.ck-labeled-input_focused {
+		& .ck-input:not([readonly]) + .ck.ck-label {
+			color: hsl(207.9,69.4%,44.9%);
+		}
+	}
+
+	&.ck-error {
+		& .ck-input:not([readonly]) + .ck.ck-label {
+			color: var(--ck-color-base-error);
+		}
+	}
+
+	& .ck-labeled-field-view__status {
+		font-size: var(--ck-font-size-small);
+		margin-top: var(--ck-spacing-small);
+
+		/* Let the info wrap to the next line to avoid stretching the layout horizontally.
+		The status could be very long. */
+		white-space: normal;
+	}
+
+	& .ck-labeled-field-view__status_error {
+		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;
+	}
 
-.ck.ck-labeled-field-view > .ck.ck-label {
-	width: 100%;
-	text-overflow: ellipsis;
-	overflow: hidden;
+	&.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);
+	}
 }

+ 40 - 3
packages/ckeditor5-ui/src/labeledfield/labeledfieldview.js

@@ -93,6 +93,20 @@ export default class LabeledFieldView extends View {
 		this.set( 'isEnabled', true );
 
 		/**
+		 * TODO
+		 *
+		 * @member {Boolean} #isEmpty
+		 */
+		this.set( 'isEmpty', false );
+
+		/**
+		 * TODO
+		 *
+		 * @member {Boolean} #isFocused
+		 */
+		this.set( 'isFocused', false );
+
+		/**
 		 * The validation error text. When set, it will be displayed
 		 * next to the {@link #fieldView} as a typical validation error message.
 		 * Set it to `null` to hide the message.
@@ -129,6 +143,14 @@ export default class LabeledFieldView extends View {
 		this.set( 'class' );
 
 		/**
+		 * TODO
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+		this.set( 'placeholder' );
+
+		/**
 		 * The label view instance that describes the entire view.
 		 *
 		 * @member {module:ui/label/labelview~LabelView} #labelView
@@ -170,12 +192,27 @@ export default class LabeledFieldView extends View {
 					'ck',
 					'ck-labeled-field-view',
 					bind.to( 'class' ),
-					bind.if( 'isEnabled', 'ck-disabled', value => !value )
+					bind.if( 'isEnabled', 'ck-disabled', value => !value ),
+					bind.if( 'isEmpty', 'ck-labeled-field-view_empty' ),
+					bind.if( 'isFocused', 'ck-labeled-field-view_focused' ),
+					bind.if( 'placeholder', 'ck-labeled-field-view_placeholder' ),
+					bind.if( 'errorText', 'ck-error' )
 				]
 			},
 			children: [
-				this.labelView,
-				this.fieldView,
+				{
+					tag: 'div',
+					attributes: {
+						class: [
+							'ck',
+							'ck-labeled-field-view__input-wrapper'
+						]
+					},
+					children: [
+						this.fieldView,
+						this.labelView
+					]
+				},
 				this.statusView
 			]
 		} );

+ 3 - 0
packages/ckeditor5-ui/src/labeledfield/utils.js

@@ -52,6 +52,9 @@ export function createLabeledInputText( labeledFieldView, viewUid, statusUid ) {
 		labeledFieldView.errorText = null;
 	} );
 
+	// TODO
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'hasError', 'placeholder' ).to( inputView );
+
 	return inputView;
 }