Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #282 from ckeditor/i/6110
Browse files Browse the repository at this point in the history 
Other: Replaced `LabeledInputView` with `LabeledFieldView`. See ckeditor/ckeditor5#6110.
  • Loading branch information
@jodator
jodator authored Mar 26, 2020
2 parents 49ad106 + e66fd92 commit b905aa5
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 182 deletions.
68 changes: 34 additions & 34 deletions src/tablecellproperties/ui/tablecellpropertiesview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';

import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
Expand Down Expand Up @@ -465,57 +465,57 @@ export default class TableCellPropertiesView extends View {
// -- Style ---------------------------------------------------

const styleLabels = getBorderStyleLabels( t );
const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
borderStyleDropdown.set( {
label: t( 'Style' ),
class: 'ck-table-form__border-style'
} );

borderStyleDropdown.view.buttonView.set( {
borderStyleDropdown.fieldView.buttonView.set( {
isOn: false,
withText: true,
tooltip: t( 'Style' )
} );

borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
return styleLabels[ value ? value : 'none' ];
} );

borderStyleDropdown.view.on( 'execute', evt => {
borderStyleDropdown.fieldView.on( 'execute', evt => {
this.borderStyle = evt.source._borderStyleValue;
} );

addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );

// -- Width ---------------------------------------------------

const borderWidthInput = new LabeledView( locale, createLabeledInputText );
const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );

borderWidthInput.set( {
label: t( 'Width' ),
class: 'ck-table-form__border-width'
} );

borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' );
borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
borderWidthInput.view.on( 'input', () => {
this.borderWidth = borderWidthInput.view.element.value;
borderWidthInput.fieldView.on( 'input', () => {
this.borderWidth = borderWidthInput.fieldView.element.value;
} );

// -- Color ---------------------------------------------------

const borderColorInput = new LabeledView( locale, colorInputCreator );
const borderColorInput = new LabeledFieldView( locale, colorInputCreator );

borderColorInput.set( {
label: t( 'Color' ),
class: 'ck-table-form__border-color'
} );

borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' );
borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );

borderColorInput.view.on( 'input', () => {
this.borderColor = borderColorInput.view.value;
borderColorInput.fieldView.on( 'input', () => {
this.borderColor = borderColorInput.fieldView.value;
} );

// Reset the border color and width fields when style is "none".
Expand All @@ -541,7 +541,7 @@ export default class TableCellPropertiesView extends View {
* * {@link #backgroundInput}.
*
* @private
* @returns {module:ui/labeledview/labeledview~LabeledView}
* @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
*/
_createBackgroundField() {
const locale = this.locale;
Expand All @@ -551,16 +551,16 @@ export default class TableCellPropertiesView extends View {
columns: 5
} );

const backgroundInput = new LabeledView( locale, colorInputCreator );
const backgroundInput = new LabeledFieldView( locale, colorInputCreator );

backgroundInput.set( {
label: t( 'Background' ),
class: 'ck-table-cell-properties-form__background'
} );

backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
backgroundInput.view.on( 'input', () => {
this.backgroundColor = backgroundInput.view.value;
backgroundInput.fieldView.bind( 'value' ).to( this, 'backgroundColor' );
backgroundInput.fieldView.on( 'input', () => {
this.backgroundColor = backgroundInput.fieldView.value;
} );

return backgroundInput;
Expand All @@ -573,7 +573,7 @@ export default class TableCellPropertiesView extends View {
* * {@link #heightInput}.
*
* @private
* @returns {module:ui/labeledview/labeledview~LabeledView}
* @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
*/
_createDimensionFields() {
const locale = this.locale;
Expand All @@ -586,16 +586,16 @@ export default class TableCellPropertiesView extends View {

// -- Width ---------------------------------------------------

const widthInput = new LabeledView( locale, createLabeledInputText );
const widthInput = new LabeledFieldView( locale, createLabeledInputText );

widthInput.set( {
label: t( 'Width' ),
class: 'ck-table-form__dimensions-row__width'
} );

widthInput.view.bind( 'value' ).to( this, 'width' );
widthInput.view.on( 'input', () => {
this.width = widthInput.view.element.value;
widthInput.fieldView.bind( 'value' ).to( this, 'width' );
widthInput.fieldView.on( 'input', () => {
this.width = widthInput.fieldView.element.value;
} );

// -- Operator ---------------------------------------------------
Expand All @@ -615,16 +615,16 @@ export default class TableCellPropertiesView extends View {

// -- Height ---------------------------------------------------

const heightInput = new LabeledView( locale, createLabeledInputText );
const heightInput = new LabeledFieldView( locale, createLabeledInputText );

heightInput.set( {
label: t( 'Height' ),
class: 'ck-table-form__dimensions-row__height'
} );

heightInput.view.bind( 'value' ).to( this, 'height' );
heightInput.view.on( 'input', () => {
this.height = heightInput.view.element.value;
heightInput.fieldView.bind( 'value' ).to( this, 'height' );
heightInput.fieldView.on( 'input', () => {
this.height = heightInput.fieldView.element.value;
} );

return {
Expand All @@ -641,22 +641,22 @@ export default class TableCellPropertiesView extends View {
* * {@link #paddingInput}.
*
* @private
* @returns {module:ui/labeledview/labeledview~LabeledView}
* @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
*/
_createPaddingField() {
const locale = this.locale;
const t = this.t;

const paddingInput = new LabeledView( locale, createLabeledInputText );
const paddingInput = new LabeledFieldView( locale, createLabeledInputText );

paddingInput.set( {
label: t( 'Padding' ),
class: 'ck-table-cell-properties-form__padding'
} );

paddingInput.view.bind( 'value' ).to( this, 'padding' );
paddingInput.view.on( 'input', () => {
this.padding = paddingInput.view.element.value;
paddingInput.fieldView.bind( 'value' ).to( this, 'padding' );
paddingInput.fieldView.on( 'input', () => {
this.padding = paddingInput.fieldView.element.value;
} );

return paddingInput;
Expand Down
58 changes: 29 additions & 29 deletions src/tableproperties/ui/tablepropertiesview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';

import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
Expand Down Expand Up @@ -412,57 +412,57 @@ export default class TablePropertiesView extends View {
// -- Style ---------------------------------------------------

const styleLabels = getBorderStyleLabels( this.t );
const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
borderStyleDropdown.set( {
label: t( 'Style' ),
class: 'ck-table-form__border-style'
} );

borderStyleDropdown.view.buttonView.set( {
borderStyleDropdown.fieldView.buttonView.set( {
isOn: false,
withText: true,
tooltip: t( 'Style' )
} );

borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
return styleLabels[ value ? value : 'none' ];
} );

borderStyleDropdown.view.on( 'execute', evt => {
borderStyleDropdown.fieldView.on( 'execute', evt => {
this.borderStyle = evt.source._borderStyleValue;
} );

addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );

// -- Width ---------------------------------------------------

const borderWidthInput = new LabeledView( locale, createLabeledInputText );
const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );

borderWidthInput.set( {
label: t( 'Width' ),
class: 'ck-table-form__border-width'
} );

borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' );
borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
borderWidthInput.view.on( 'input', () => {
this.borderWidth = borderWidthInput.view.element.value;
borderWidthInput.fieldView.on( 'input', () => {
this.borderWidth = borderWidthInput.fieldView.element.value;
} );

// -- Color ---------------------------------------------------

const borderColorInput = new LabeledView( locale, colorInputCreator );
const borderColorInput = new LabeledFieldView( locale, colorInputCreator );

borderColorInput.set( {
label: t( 'Color' ),
class: 'ck-table-form__border-color'
} );

borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' );
borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );

borderColorInput.view.on( 'input', () => {
this.borderColor = borderColorInput.view.value;
borderColorInput.fieldView.on( 'input', () => {
this.borderColor = borderColorInput.fieldView.value;
} );

// Reset the border color and width fields when style is "none".
Expand All @@ -488,7 +488,7 @@ export default class TablePropertiesView extends View {
* * {@link #backgroundInput}.
*
* @private
* @returns {module:ui/labeledview/labeledview~LabeledView}
* @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
*/
_createBackgroundField() {
const backgroundInputCreator = getLabeledColorInputCreator( {
Expand All @@ -498,16 +498,16 @@ export default class TablePropertiesView extends View {
const locale = this.locale;
const t = this.t;

const backgroundInput = new LabeledView( locale, backgroundInputCreator );
const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );

backgroundInput.set( {
label: t( 'Background' ),
class: 'ck-table-properties-form__background'
} );

backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
backgroundInput.view.on( 'input', () => {
this.backgroundColor = backgroundInput.view.value;
backgroundInput.fieldView.bind( 'value' ).to( this, 'backgroundColor' );
backgroundInput.fieldView.on( 'input', () => {
this.backgroundColor = backgroundInput.fieldView.value;
} );

return backgroundInput;
Expand All @@ -520,7 +520,7 @@ export default class TablePropertiesView extends View {
* * {@link #heightInput}.
*
* @private
* @returns {module:ui/labeledview/labeledview~LabeledView}
* @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
*/
_createDimensionFields() {
const locale = this.locale;
Expand All @@ -533,16 +533,16 @@ export default class TablePropertiesView extends View {

// -- Width ---------------------------------------------------

const widthInput = new LabeledView( locale, createLabeledInputText );
const widthInput = new LabeledFieldView( locale, createLabeledInputText );

widthInput.set( {
label: t( 'Width' ),
class: 'ck-table-form__dimensions-row__width'
} );

widthInput.view.bind( 'value' ).to( this, 'width' );
widthInput.view.on( 'input', () => {
this.width = widthInput.view.element.value;
widthInput.fieldView.bind( 'value' ).to( this, 'width' );
widthInput.fieldView.on( 'input', () => {
this.width = widthInput.fieldView.element.value;
} );

// -- Operator ---------------------------------------------------
Expand All @@ -562,16 +562,16 @@ export default class TablePropertiesView extends View {

// -- Height ---------------------------------------------------

const heightInput = new LabeledView( locale, createLabeledInputText );
const heightInput = new LabeledFieldView( locale, createLabeledInputText );

heightInput.set( {
label: t( 'Height' ),
class: 'ck-table-form__dimensions-row__height'
} );

heightInput.view.bind( 'value' ).to( this, 'height' );
heightInput.view.on( 'input', () => {
this.height = heightInput.view.element.value;
heightInput.fieldView.bind( 'value' ).to( this, 'height' );
heightInput.fieldView.on( 'input', () => {
this.height = heightInput.fieldView.element.value;
} );

return {
Expand Down
14 changes: 7 additions & 7 deletions src/ui/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ export const defaultColors = [
*
* For given options, it returns a function that creates an instance of a
* {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
* a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in the DOM.
* a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
*
* The helper does the following:
*
Expand All @@ -413,7 +413,7 @@ export const defaultColors = [
* columns: 3,
* } );
*
* const labeledInputView = new LabeledView( locale, colorInputCreator );
* const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
* console.log( labeledInputView.view ); // A color input instance.
*
* @private
Expand All @@ -425,8 +425,8 @@ export const defaultColors = [
* @returns {Function}
*/
export function getLabeledColorInputCreator( options ) {
return ( labeledView, viewUid, statusUid ) => {
const inputView = new ColorInputView( labeledView.locale, {
return ( labeledFieldView, viewUid, statusUid ) => {
const inputView = new ColorInputView( labeledFieldView.locale, {
colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
columns: options.columns
} );
Expand All @@ -436,13 +436,13 @@ export function getLabeledColorInputCreator( options ) {
ariaDescribedById: statusUid
} );

inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
inputView.bind( 'errorText' ).to( labeledView );
inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
inputView.bind( 'errorText' ).to( labeledFieldView );

inputView.on( 'input', () => {
// UX: Make the error text disappear and disable the error indicator as the user
// starts fixing the errors.
labeledView.errorText = null;
labeledFieldView.errorText = null;
} );

return inputView;
Expand Down
Loading

0 comments on commit b905aa5

Please sign in to comment.