From 04268b229a7942f11f8b9a2de4024f2509b4edcc Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 13 Mar 2020 17:33:22 +0100 Subject: [PATCH 01/11] Created standalone form header view component --- src/formheader/formheaderview.js | 73 ++++++++++++++++ tests/formheader/formheaderview.js | 98 ++++++++++++++++++++++ theme/components/formheader/formheader.css | 24 ++++++ 3 files changed, 195 insertions(+) create mode 100644 src/formheader/formheaderview.js create mode 100644 tests/formheader/formheaderview.js create mode 100644 theme/components/formheader/formheader.css diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js new file mode 100644 index 00000000..eedc1e29 --- /dev/null +++ b/src/formheader/formheaderview.js @@ -0,0 +1,73 @@ +/** + * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/** + * @module table/ui/colorinputview + */ + +import View from '../view'; + +import '../../theme/components/formheader/formheader.css'; + +export default class FormHeaderView extends View { + constructor( locale, options = {} ) { + super( locale ); + + const bind = this.bindTemplate; + + /** + * The label of the header. + * + * @readonly + * @member {String} #label + */ + this.set( 'label', options.label || '' ); + + /** + * An additional CSS class added to the {@link #element}. + * + * @observable + * @member {String} #class + */ + this.set( 'class', options.class || null ); + + /** + * A collection of header items. + * + * @readonly + * @member {module:ui/viewcollection~ViewCollection} + */ + this.children = this.createCollection(); + + const label = new View( locale ); + + label.setTemplate( { + tag: 'span', + attributes: { + class: [ + 'ck', + 'ck-form__header__label' + ] + }, + children: [ + { text: bind.to( 'label' ) } + ] + } ); + + this.children.add( label ); + + this.setTemplate( { + tag: 'div', + attributes: { + class: [ + 'ck', + 'ck-form__header', + bind.to( 'class' ) + ] + }, + children: this.children + } ); + } +} diff --git a/tests/formheader/formheaderview.js b/tests/formheader/formheaderview.js new file mode 100644 index 00000000..f10c7b4e --- /dev/null +++ b/tests/formheader/formheaderview.js @@ -0,0 +1,98 @@ +/** + * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +import View from '@ckeditor/ckeditor5-ui/src/view'; +import FormHeaderView from '../../src/formheader/formheaderview'; +import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; + +describe( 'FormHeaderView', () => { + let view, locale; + + beforeEach( () => { + locale = { t: val => val }; + view = new FormHeaderView( locale ); + view.render(); + } ); + + afterEach( () => { + view.element.remove(); + } ); + + describe( 'constructor()', () => { + it( 'should set view#locale', () => { + expect( view.locale ).to.equal( locale ); + } ); + + it( 'should create view#children collection', () => { + expect( view.children ).to.be.instanceOf( ViewCollection ); + expect( view.children ).to.have.length( 1 ); + } ); + + it( 'should set view#label', () => { + expect( view.label ).to.equal( '' ); + } ); + + it( 'should set view#class', () => { + expect( view.class ).to.be.null; + } ); + + it( 'should set the template', () => { + expect( view.element.classList.contains( 'ck' ) ).to.be.true; + expect( view.element.classList.contains( 'ck-form__header' ) ).to.be.true; + } ); + + describe( 'options', () => { + it( 'should set view#class when class was passed', () => { + const view = new FormHeaderView( locale, { + class: 'foo' + } ); + + expect( view.class ).to.equal( 'foo' ); + + view.destroy(); + } ); + + it( 'should use a label text when passed', () => { + const view = new FormHeaderView( locale, { + label: 'foo' + } ); + + view.render(); + + expect( view.element.firstChild.classList.contains( 'ck' ) ).to.be.true; + expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true; + expect( view.element.firstChild.textContent ).to.equal( 'foo' ); + + view.destroy(); + } ); + } ); + + describe( 'template bindings', () => { + it( 'should bind #class to the template', () => { + view.class = 'foo'; + expect( view.element.classList.contains( 'foo' ) ).to.be.true; + } ); + + it( 'should bind #label to the template', () => { + view.label = 'bar'; + expect( view.element.firstChild.textContent ).to.equal( 'bar' ); + + view.label = 'baz'; + expect( view.element.firstChild.textContent ).to.equal( 'baz' ); + } ); + + it( 'should bind #children to the template', () => { + const child = new View(); + child.setTemplate( { tag: 'div' } ); + + view.children.add( child ); + + expect( view.element.childNodes[ 1 ] ).to.equal( child.element ); + + view.destroy(); + } ); + } ); + } ); +} ); diff --git a/theme/components/formheader/formheader.css b/theme/components/formheader/formheader.css new file mode 100644 index 00000000..501630f4 --- /dev/null +++ b/theme/components/formheader/formheader.css @@ -0,0 +1,24 @@ +/* + * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +:root { + --ck-table-form-header-height: 38px; +} + +.ck.ck-form__header { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + padding: var(--ck-spacing-small) var(--ck-spacing-standard); + height: var(--ck-table-form-header-height); + line-height: var(--ck-table-form-header-height); + border-bottom: 1px solid var(--ck-color-base-border); + + & .ck-form__header__label { + font-weight: bold; + } +} From 534dfe3fb1089b5834dc340bd183b7a9dbe0dcb9 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 17 Mar 2020 15:13:48 +0100 Subject: [PATCH 02/11] Use LabelView in Form Header View component --- src/formheader/formheaderview.js | 28 ++++++++++------------ theme/components/formheader/formheader.css | 4 ---- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index eedc1e29..689155de 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -8,6 +8,7 @@ */ import View from '../view'; +import LabelView from '../label/labelview'; import '../../theme/components/formheader/formheader.css'; @@ -41,33 +42,30 @@ export default class FormHeaderView extends View { */ this.children = this.createCollection(); - const label = new View( locale ); - - label.setTemplate( { - tag: 'span', + this.setTemplate( { + tag: 'div', attributes: { class: [ 'ck', - 'ck-form__header__label' + 'ck-form__header', + bind.to( 'class' ) ] }, - children: [ - { text: bind.to( 'label' ) } - ] + children: this.children } ); - this.children.add( label ); + const label = new LabelView( locale ); - this.setTemplate( { - tag: 'div', + label.bind( 'text' ).to( this, 'label' ); + label.extendTemplate( { attributes: { class: [ 'ck', - 'ck-form__header', - bind.to( 'class' ) + 'ck-form__header__label' ] - }, - children: this.children + } } ); + + this.children.add( label ); } } diff --git a/theme/components/formheader/formheader.css b/theme/components/formheader/formheader.css index 501630f4..154da042 100644 --- a/theme/components/formheader/formheader.css +++ b/theme/components/formheader/formheader.css @@ -17,8 +17,4 @@ height: var(--ck-table-form-header-height); line-height: var(--ck-table-form-header-height); border-bottom: 1px solid var(--ck-color-base-border); - - & .ck-form__header__label { - font-weight: bold; - } } From ac11d9348f17bc08d32d91f6b09f26f8257034ef Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 17 Mar 2020 16:02:55 +0100 Subject: [PATCH 03/11] Fix typo in component @module --- src/formheader/formheaderview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index 689155de..99e87113 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -4,7 +4,7 @@ */ /** - * @module table/ui/colorinputview + * @module ui/formheader/formheaderview */ import View from '../view'; From cf08391767ac216349d16324bf57718344cc504a Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 17 Mar 2020 16:49:06 +0100 Subject: [PATCH 04/11] Fix invalid itself import...? --- tests/formheader/formheaderview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/formheader/formheaderview.js b/tests/formheader/formheaderview.js index f10c7b4e..4cc6d743 100644 --- a/tests/formheader/formheaderview.js +++ b/tests/formheader/formheaderview.js @@ -4,8 +4,8 @@ */ import View from '@ckeditor/ckeditor5-ui/src/view'; -import FormHeaderView from '../../src/formheader/formheaderview'; import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; +import FormHeaderView from '../../src/formheader/formheaderview'; describe( 'FormHeaderView', () => { let view, locale; From da2702ba2a96d33fa3b827a9d088516222e6fb13 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 17 Mar 2020 17:11:13 +0100 Subject: [PATCH 05/11] Fix paths in FormHeaderView test --- tests/formheader/formheaderview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/formheader/formheaderview.js b/tests/formheader/formheaderview.js index 4cc6d743..9d8959f1 100644 --- a/tests/formheader/formheaderview.js +++ b/tests/formheader/formheaderview.js @@ -3,8 +3,8 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -import View from '@ckeditor/ckeditor5-ui/src/view'; -import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; +import View from '../../src/view'; +import ViewCollection from '../../src/viewcollection'; import FormHeaderView from '../../src/formheader/formheaderview'; describe( 'FormHeaderView', () => { From 7c78adc22aaa1e354803630c55ca9e589411b7af Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 17 Mar 2020 17:44:57 +0100 Subject: [PATCH 06/11] Fix horizontal padding --- theme/components/formheader/formheader.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/components/formheader/formheader.css b/theme/components/formheader/formheader.css index 154da042..997e0356 100644 --- a/theme/components/formheader/formheader.css +++ b/theme/components/formheader/formheader.css @@ -13,7 +13,7 @@ flex-wrap: nowrap; align-items: center; justify-content: space-between; - padding: var(--ck-spacing-small) var(--ck-spacing-standard); + padding: var(--ck-spacing-small) var(--ck-spacing-large); height: var(--ck-table-form-header-height); line-height: var(--ck-table-form-header-height); border-bottom: 1px solid var(--ck-color-base-border); From b447fbb0cc463c5e171391ee238073bb36cb12bd Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 18 Mar 2020 14:58:17 +0100 Subject: [PATCH 07/11] Switch back to creating the label from View --- src/formheader/formheaderview.js | 14 ++++++++------ theme/components/formheader/formheader.css | 4 ++++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index 99e87113..03887244 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -8,7 +8,6 @@ */ import View from '../view'; -import LabelView from '../label/labelview'; import '../../theme/components/formheader/formheader.css'; @@ -21,7 +20,7 @@ export default class FormHeaderView extends View { /** * The label of the header. * - * @readonly + * @observable * @member {String} #label */ this.set( 'label', options.label || '' ); @@ -54,16 +53,19 @@ export default class FormHeaderView extends View { children: this.children } ); - const label = new LabelView( locale ); + const label = new View( locale ); - label.bind( 'text' ).to( this, 'label' ); - label.extendTemplate( { + label.setTemplate( { + tag: 'span', attributes: { class: [ 'ck', 'ck-form__header__label' ] - } + }, + children: [ + { text: bind.to( 'label' ) } + ] } ); this.children.add( label ); diff --git a/theme/components/formheader/formheader.css b/theme/components/formheader/formheader.css index 997e0356..417c5324 100644 --- a/theme/components/formheader/formheader.css +++ b/theme/components/formheader/formheader.css @@ -17,4 +17,8 @@ height: var(--ck-table-form-header-height); line-height: var(--ck-table-form-header-height); border-bottom: 1px solid var(--ck-color-base-border); + + & .ck-form__header__label { + font-weight: bold; + } } From 2b85545852590094273b75f38ef5e9eb522c6b66 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 18 Mar 2020 16:18:16 +0100 Subject: [PATCH 08/11] Update docs --- src/formheader/formheaderview.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index 03887244..38fa498b 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -11,7 +11,20 @@ import View from '../view'; import '../../theme/components/formheader/formheader.css'; +/** + * The form header view class. + * + * @extends module:ui/view~View + */ export default class FormHeaderView extends View { + /** + * Creates an instance of the form header class. + * + * @param {module:utils/locale~Locale} locale The locale instance. + * @param {Object} options + * @param {String} [options.label] A label. + * @param {String} [options.class] An additional class. + */ constructor( locale, options = {} ) { super( locale ); From 371f362d33704e99d751f441369599bb6558cf93 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 18 Mar 2020 16:18:16 +0100 Subject: [PATCH 09/11] Update docs --- src/formheader/formheaderview.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index 38fa498b..a6bc7c09 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -12,7 +12,9 @@ import View from '../view'; import '../../theme/components/formheader/formheader.css'; /** - * The form header view class. + * The class representing a form header view, used i.a. + * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} + * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}. * * @extends module:ui/view~View */ From 296133e30cdf6beed8a1bf6351611dda0a7c764d Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 26 Mar 2020 13:20:13 +0100 Subject: [PATCH 10/11] Extend the component description --- src/formheader/formheaderview.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index a6bc7c09..d553b146 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -12,10 +12,18 @@ import View from '../view'; import '../../theme/components/formheader/formheader.css'; /** - * The class representing a form header view, used i.a. + * The class component representing a form header view. It should be used in more advanced forms to + * describe the main purpose of the form. + * + * By default the component contains bolded label view which have to be set. The label is usually a short (at most 3-word) string. + * The component can also be extended by any other elements, like: icons, dropdowns etc. + * + * It is used i.a. * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView} * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}. * + * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view. + * * @extends module:ui/view~View */ export default class FormHeaderView extends View { From 88e676b4171b0cbfc4cab8fcc530273557a42842 Mon Sep 17 00:00:00 2001 From: Maciej Date: Thu, 26 Mar 2020 13:30:14 +0100 Subject: [PATCH 11/11] Update src/formheader/formheaderview.js --- src/formheader/formheaderview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/formheader/formheaderview.js b/src/formheader/formheaderview.js index d553b146..cddc3078 100644 --- a/src/formheader/formheaderview.js +++ b/src/formheader/formheaderview.js @@ -15,8 +15,8 @@ import '../../theme/components/formheader/formheader.css'; * The class component representing a form header view. It should be used in more advanced forms to * describe the main purpose of the form. * - * By default the component contains bolded label view which have to be set. The label is usually a short (at most 3-word) string. - * The component can also be extended by any other elements, like: icons, dropdowns etc. + * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string. + * The component can also be extended by any other elements, like: icons, dropdowns, etc. * * It is used i.a. * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}