From f3e22acd405bf88b74a7eb2cbc663a79d4abdff6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Kup=C5=9B?= Date: Thu, 23 Mar 2017 13:23:47 +0100 Subject: [PATCH 1/3] Changed default heading dropdown title. --- src/heading.js | 5 +++-- tests/heading.js | 8 +++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/heading.js b/src/heading.js index 96d1617..e99ddeb 100644 --- a/src/heading.js +++ b/src/heading.js @@ -39,7 +39,8 @@ export default class Heading extends Plugin { const options = this._getLocalizedOptions(); const commands = []; const t = editor.t; - const defaultTitle = t( 'Heading' ); + const defaultTitle = t( 'Chose heading' ); + const dropdownTooltip = t( 'Heading' ); for ( let option of options ) { const command = editor.commands.get( option.modelElement ); @@ -61,7 +62,7 @@ export default class Heading extends Plugin { const dropdownModel = new Model( { withText: true, items: dropdownItems, - tooltip: defaultTitle + tooltip: dropdownTooltip } ); dropdownModel.bind( 'isEnabled' ).to( diff --git a/tests/heading.js b/tests/heading.js index 3dd1337..76cbd27 100644 --- a/tests/heading.js +++ b/tests/heading.js @@ -13,6 +13,7 @@ import { add } from '@ckeditor/ckeditor5-utils/src/translation-service'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; add( 'pl', { + 'Chose heading': 'Wybierz nagłówek', 'Paragraph': 'Akapit', 'Heading': 'Nagłówek', 'Heading 1': 'Nagłówek 1', @@ -57,7 +58,7 @@ describe( 'Heading', () => { expect( dropdown ).to.be.instanceOf( DropdownView ); expect( dropdown.buttonView.isEnabled ).to.be.true; expect( dropdown.buttonView.isOn ).to.be.undefined; - expect( dropdown.buttonView.label ).to.equal( 'Heading' ); + expect( dropdown.buttonView.label ).to.equal( 'Chose heading' ); expect( dropdown.buttonView.tooltip ).to.equal( 'Heading' ); } ); @@ -109,7 +110,7 @@ describe( 'Heading', () => { commands[ name ].value = false; } - expect( dropdown.buttonView.label ).to.equal( 'Heading' ); + expect( dropdown.buttonView.label ).to.equal( 'Chose heading' ); commands.heading2.value = true; expect( dropdown.buttonView.label ).to.equal( 'Heading 2' ); @@ -138,7 +139,8 @@ describe( 'Heading', () => { it( 'works for the #buttonView', () => { const buttonView = dropdown.buttonView; - expect( buttonView.label ).to.equal( 'Nagłówek' ); + expect( buttonView.label ).to.equal( 'Wybierz nagłówek' ); + expect( buttonView.tooltip ).to.equal( 'Nagłówek' ); commands.paragraph.value = true; expect( buttonView.label ).to.equal( 'Akapit' ); From 0b4268e6897748313ed83503bbcd14e83d16558f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Kup=C5=9B?= Date: Thu, 23 Mar 2017 16:24:15 +0100 Subject: [PATCH 2/3] Changed default heading dropdown label. Added it to translation contexts. --- lang/contexts.json | 3 ++- src/heading.js | 2 +- tests/heading.js | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lang/contexts.json b/lang/contexts.json index 3f53dce..2aeee9f 100644 --- a/lang/contexts.json +++ b/lang/contexts.json @@ -1,6 +1,7 @@ { "Paragraph": "Drop-down option label for the paragraph format.", - "Heading": "Tooltip and default label for the heading drop-down.", + "Heading": "Tooltip for the heading drop-down.", + "Choose heading": "Default label for heading drop-down.", "Heading 1": "Drop-down option label for the heading level 1 format.", "Heading 2": "Drop-down option label for the heading level 2 format.", "Heading 3": "Drop-down option label for the heading level 3 format." diff --git a/src/heading.js b/src/heading.js index e99ddeb..34f834f 100644 --- a/src/heading.js +++ b/src/heading.js @@ -39,7 +39,7 @@ export default class Heading extends Plugin { const options = this._getLocalizedOptions(); const commands = []; const t = editor.t; - const defaultTitle = t( 'Chose heading' ); + const defaultTitle = t( 'Choose heading' ); const dropdownTooltip = t( 'Heading' ); for ( let option of options ) { diff --git a/tests/heading.js b/tests/heading.js index 76cbd27..08b7284 100644 --- a/tests/heading.js +++ b/tests/heading.js @@ -13,7 +13,7 @@ import { add } from '@ckeditor/ckeditor5-utils/src/translation-service'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; add( 'pl', { - 'Chose heading': 'Wybierz nagłówek', + 'Choose heading': 'Wybierz nagłówek', 'Paragraph': 'Akapit', 'Heading': 'Nagłówek', 'Heading 1': 'Nagłówek 1', @@ -58,7 +58,7 @@ describe( 'Heading', () => { expect( dropdown ).to.be.instanceOf( DropdownView ); expect( dropdown.buttonView.isEnabled ).to.be.true; expect( dropdown.buttonView.isOn ).to.be.undefined; - expect( dropdown.buttonView.label ).to.equal( 'Chose heading' ); + expect( dropdown.buttonView.label ).to.equal( 'Choose heading' ); expect( dropdown.buttonView.tooltip ).to.equal( 'Heading' ); } ); @@ -110,7 +110,7 @@ describe( 'Heading', () => { commands[ name ].value = false; } - expect( dropdown.buttonView.label ).to.equal( 'Chose heading' ); + expect( dropdown.buttonView.label ).to.equal( 'Choose heading' ); commands.heading2.value = true; expect( dropdown.buttonView.label ).to.equal( 'Heading 2' ); From 58b922bada4cbbf3352b31eb6204e0628f9e7694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Kup=C5=9B?= Date: Thu, 23 Mar 2017 17:14:40 +0100 Subject: [PATCH 3/3] Added custom CSS class to heading dropdown. Added styles to resize dropdown button to match default label. --- src/heading.js | 9 +++++++++ tests/heading.js | 5 +++++ theme/theme.scss | 11 +++++++++++ 3 files changed, 25 insertions(+) diff --git a/src/heading.js b/src/heading.js index 34f834f..4427fea 100644 --- a/src/heading.js +++ b/src/heading.js @@ -13,6 +13,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import Model from '@ckeditor/ckeditor5-ui/src/model'; import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown'; import Collection from '@ckeditor/ckeditor5-utils/src/collection'; +import Template from '@ckeditor/ckeditor5-ui/src/template'; import '../theme/theme.scss'; @@ -88,6 +89,14 @@ export default class Heading extends Plugin { editor.ui.componentFactory.add( 'headings', ( locale ) => { const dropdown = createListDropdown( dropdownModel, locale ); + Template.extend( dropdown.template, { + attributes: { + class: [ + 'ck-heading-dropdown' + ] + } + } ); + // Execute command when an item from the dropdown is selected. this.listenTo( dropdown, 'execute', ( evt ) => { editor.execute( evt.source.commandName ); diff --git a/tests/heading.js b/tests/heading.js index bd98946..4d5dc64 100644 --- a/tests/heading.js +++ b/tests/heading.js @@ -85,6 +85,11 @@ describe( 'Heading', () => { sinon.assert.calledOnce( focusSpy ); } ); + it( 'should add custom CSS class to dropdown', () => { + const dropdown = editor.ui.componentFactory.create( 'headings' ); + expect( dropdown.element.classList.contains( 'ck-heading-dropdown' ) ).to.be.true; + } ); + describe( 'model to command binding', () => { let commands; diff --git a/theme/theme.scss b/theme/theme.scss index b367a74..a02d23e 100644 --- a/theme/theme.scss +++ b/theme/theme.scss @@ -29,3 +29,14 @@ [class*="ck-heading_heading"] { font-weight: bold; } + +// Resize dropdown's button label. +.ck-dropdown { + &.ck-heading-dropdown { + .ck-dropdown__button { + .ck-button__label { + width: 8em; + } + } + } +}