From 9e5ae9e9aa37aa5eb0970ee674822fc977669632 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 17 Jan 2018 15:03:48 +0100 Subject: [PATCH 1/7] Simplified the text alternative form. --- .../ui/textalternativeformview.js | 36 +++++++++---------- .../ui/textalternativeformview.js | 2 +- theme/textalternativeform.css | 18 ++++------ 3 files changed, 23 insertions(+), 33 deletions(-) diff --git a/src/imagetextalternative/ui/textalternativeformview.js b/src/imagetextalternative/ui/textalternativeformview.js index c23956af..ba46d200 100644 --- a/src/imagetextalternative/ui/textalternativeformview.js +++ b/src/imagetextalternative/ui/textalternativeformview.js @@ -19,6 +19,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 checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg'; +import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg'; import '../../../theme/textalternativeform.css'; /** @@ -63,7 +65,7 @@ export default class TextAlternativeFormView extends View { * * @member {module:ui/button/buttonview~ButtonView} #saveButtonView */ - this.saveButtonView = this._createButton( t( 'Save' ) ); + this.saveButtonView = this._createButton( t( 'Save' ), checkIcon ); this.saveButtonView.type = 'submit'; /** @@ -71,7 +73,7 @@ export default class TextAlternativeFormView extends View { * * @member {module:ui/button/buttonview~ButtonView} #cancelButtonView */ - this.cancelButtonView = this._createButton( t( 'Cancel' ), 'cancel' ); + this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'cancel' ); /** * A collection of views which can be focused in the form. @@ -115,7 +117,7 @@ export default class TextAlternativeFormView extends View { attributes: { class: [ - 'cke-text-alternative-form', + 'ck-text-alternative-form', ], // https://github.com/ckeditor/ckeditor5-image/issues/40 @@ -124,20 +126,8 @@ export default class TextAlternativeFormView extends View { children: [ this.labeledInput, - { - tag: 'div', - - attributes: { - class: [ - 'cke-text-alternative-form__actions' - ] - }, - - children: [ - this.saveButtonView, - this.cancelButtonView - ] - } + this.saveButtonView, + this.cancelButtonView ] } ); } @@ -167,14 +157,18 @@ export default class TextAlternativeFormView extends View { * * @private * @param {String} label The button label + * @param {String} icon The button's icon. * @param {String} [eventName] The event name that the ButtonView#execute event will be delegated to. * @returns {module:ui/button/buttonview~ButtonView} The button view instance. */ - _createButton( label, eventName ) { + _createButton( label, icon, eventName ) { const button = new ButtonView( this.locale ); - button.label = label; - button.withText = true; + button.set( { + label, + icon, + tooltip: true + } ); if ( eventName ) { button.delegate( 'execute' ).to( this, eventName ); @@ -192,7 +186,9 @@ export default class TextAlternativeFormView extends View { _createLabeledInputView() { const t = this.locale.t; const labeledInput = new LabeledInputView( this.locale, InputTextView ); + labeledInput.label = t( 'Text alternative' ); + labeledInput.inputView.placeholder = t( 'Text alternative' ); return labeledInput; } diff --git a/tests/imagetextalternative/ui/textalternativeformview.js b/tests/imagetextalternative/ui/textalternativeformview.js index 02759f72..38d90930 100644 --- a/tests/imagetextalternative/ui/textalternativeformview.js +++ b/tests/imagetextalternative/ui/textalternativeformview.js @@ -27,7 +27,7 @@ describe( 'TextAlternativeFormView', () => { it( 'should create element from template', () => { view.render(); - expect( view.element.classList.contains( 'cke-text-alternative-form' ) ).to.be.true; + expect( view.element.classList.contains( 'ck-text-alternative-form' ) ).to.be.true; expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' ); } ); diff --git a/theme/textalternativeform.css b/theme/textalternativeform.css index e7e6ed08..8f562e58 100644 --- a/theme/textalternativeform.css +++ b/theme/textalternativeform.css @@ -3,18 +3,12 @@ * For licensing, see LICENSE.md. */ -.cke-text-alternative-form { - overflow: hidden; -} - -.cke-text-alternative-form__actions { - clear: both; - - & .ck-button { - float: right; +.ck-text-alternative-form { + & .ck-labeled-input { + display: inline-block; + } - & + .ck-button + .ck-button { - float: left; - } + & .ck-label { + display: none; } } From 5aaddbba338167ad294ba0b3d38ea29490b79e24 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 17 Jan 2018 15:43:55 +0100 Subject: [PATCH 2/7] Enabled additional positions for the image toolbar to fit into viewport when the image is narrow and close to the edge of the screen. --- src/image/ui/utils.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/image/ui/utils.js b/src/image/ui/utils.js index ffb09e31..0dfd249a 100644 --- a/src/image/ui/utils.js +++ b/src/image/ui/utils.js @@ -43,7 +43,11 @@ export function getBalloonPositionData( editor ) { target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ), positions: [ defaultPositions.northArrowSouth, - defaultPositions.southArrowNorth + defaultPositions.northArrowSouthWest, + defaultPositions.northArrowSouthEast, + defaultPositions.southArrowNorth, + defaultPositions.southArrowNorthWest, + defaultPositions.southArrowNorthEast ] }; } From 99d9fc4d9b856c6322b922bc298201c33fe1713b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 18 Jan 2018 14:35:30 +0100 Subject: [PATCH 3/7] Used default BalloonPanelView's positions for the text alternative and toolbar UI. --- src/image/ui/utils.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/image/ui/utils.js b/src/image/ui/utils.js index 0dfd249a..639955fa 100644 --- a/src/image/ui/utils.js +++ b/src/image/ui/utils.js @@ -7,7 +7,6 @@ * @module image/image/ui/utils */ -import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview'; import { isImageWidgetSelected } from '../utils'; /** @@ -37,17 +36,8 @@ export function repositionContextualBalloon( editor ) { */ export function getBalloonPositionData( editor ) { const editingView = editor.editing.view; - const defaultPositions = BalloonPanelView.defaultPositions; return { - target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ), - positions: [ - defaultPositions.northArrowSouth, - defaultPositions.northArrowSouthWest, - defaultPositions.northArrowSouthEast, - defaultPositions.southArrowNorth, - defaultPositions.southArrowNorthWest, - defaultPositions.southArrowNorthEast - ] + target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ) }; } From 6e6e5f87ad17853f96eb4c661de5dc6cc999ce9c Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Thu, 18 Jan 2018 14:38:03 +0100 Subject: [PATCH 4/7] Revert "Used default BalloonPanelView's positions for the text alternative and toolbar UI." This reverts commit 99d9fc4d9b856c6322b922bc298201c33fe1713b. --- src/image/ui/utils.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/image/ui/utils.js b/src/image/ui/utils.js index 639955fa..0dfd249a 100644 --- a/src/image/ui/utils.js +++ b/src/image/ui/utils.js @@ -7,6 +7,7 @@ * @module image/image/ui/utils */ +import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview'; import { isImageWidgetSelected } from '../utils'; /** @@ -36,8 +37,17 @@ export function repositionContextualBalloon( editor ) { */ export function getBalloonPositionData( editor ) { const editingView = editor.editing.view; + const defaultPositions = BalloonPanelView.defaultPositions; return { - target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ) + target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ), + positions: [ + defaultPositions.northArrowSouth, + defaultPositions.northArrowSouthWest, + defaultPositions.northArrowSouthEast, + defaultPositions.southArrowNorth, + defaultPositions.southArrowNorthWest, + defaultPositions.southArrowNorthEast + ] }; } From 3005980d17d3f04c4a63fa6e161f9f099ae871bc Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 24 Jan 2018 16:06:45 +0100 Subject: [PATCH 5/7] Added a separator after the headings dropdown in the configuration of the toolbar. --- tests/manual/autohoist.js | 2 +- tests/manual/caption.js | 2 +- tests/manual/image.js | 2 +- tests/manual/imagestyle.js | 4 ++-- tests/manual/textalternative.js | 2 +- tests/manual/tickets/110/1.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/manual/autohoist.js b/tests/manual/autohoist.js index fc7c23f1..ad869f12 100644 --- a/tests/manual/autohoist.js +++ b/tests/manual/autohoist.js @@ -24,7 +24,7 @@ ClassicEditor Paragraph, Heading, Image, ImageToolbar, ImageCaption, ImageStyle, Bold, Italic, Heading, List ], - toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ], + toolbar: [ 'headings', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ], image: { toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ] } diff --git a/tests/manual/caption.js b/tests/manual/caption.js index 163c092b..42683338 100644 --- a/tests/manual/caption.js +++ b/tests/manual/caption.js @@ -26,7 +26,7 @@ ClassicEditor Enter, Typing, Paragraph, Heading, Image, ImageToolbar, Undo, Clipboard, ImageCaption, ImageStyle, Bold, Italic, Heading, List ], - toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ], + toolbar: [ 'headings', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ], image: { toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ] } diff --git a/tests/manual/image.js b/tests/manual/image.js index 5f116c50..f818b350 100644 --- a/tests/manual/image.js +++ b/tests/manual/image.js @@ -17,7 +17,7 @@ import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ], - toolbar: [ 'headings', 'undo', 'redo' ] + toolbar: [ 'headings', '|', 'undo', 'redo' ] } ) .then( editor => { window.editor = editor; diff --git a/tests/manual/imagestyle.js b/tests/manual/imagestyle.js index d279999d..64a67317 100644 --- a/tests/manual/imagestyle.js +++ b/tests/manual/imagestyle.js @@ -29,7 +29,7 @@ ClassicEditor ClipboardPlugin, ImageStyle ], - toolbar: [ 'headings', 'undo', 'redo' ], + toolbar: [ 'headings', '|', 'undo', 'redo' ], image: { toolbar: [ 'imageStyleFull', 'imageStyleSide' ] } @@ -54,7 +54,7 @@ ClassicEditor ClipboardPlugin, ImageStyle ], - toolbar: [ 'headings', 'undo', 'redo' ], + toolbar: [ 'headings', '|', 'undo', 'redo' ], image: { styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ], toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ] diff --git a/tests/manual/textalternative.js b/tests/manual/textalternative.js index 8525a8b8..7c460fff 100644 --- a/tests/manual/textalternative.js +++ b/tests/manual/textalternative.js @@ -18,7 +18,7 @@ import ImageToolbar from '../../src/imagetoolbar'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageToolbar ], - toolbar: [ 'headings', 'undo', 'redo' ], + toolbar: [ 'headings', '|', 'undo', 'redo' ], image: { toolbar: [ 'imageTextAlternative' ] } diff --git a/tests/manual/tickets/110/1.js b/tests/manual/tickets/110/1.js index 3aba0eda..d60ca972 100644 --- a/tests/manual/tickets/110/1.js +++ b/tests/manual/tickets/110/1.js @@ -18,7 +18,7 @@ import ImageToolbar from '../../../../src/imagetoolbar'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ImageToolbar, ContextualToolbar ], - contextualToolbar: [ 'headings', 'undo', 'redo' ], + contextualToolbar: [ 'headings', '|', 'undo', 'redo' ], image: { toolbar: [ 'imageTextAlternative' ] } From 4e5455652de50488c473b05215359b3b8c2ed7fd Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 29 Jan 2018 12:16:27 +0100 Subject: [PATCH 6/7] Tests: Updated image UI utils tests with the new set of balloon positions. --- tests/image/ui/utils.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/tests/image/ui/utils.js b/tests/image/ui/utils.js index 45bb40f9..82d5554e 100644 --- a/tests/image/ui/utils.js +++ b/tests/image/ui/utils.js @@ -59,7 +59,11 @@ describe( 'Utils', () => { target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ), positions: [ defaultPositions.northArrowSouth, - defaultPositions.southArrowNorth + defaultPositions.northArrowSouthWest, + defaultPositions.northArrowSouthEast, + defaultPositions.southArrowNorth, + defaultPositions.southArrowNorthWest, + defaultPositions.southArrowNorthEast ] } ); } ); @@ -85,7 +89,11 @@ describe( 'Utils', () => { target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ), positions: [ defaultPositions.northArrowSouth, - defaultPositions.southArrowNorth + defaultPositions.northArrowSouthWest, + defaultPositions.northArrowSouthEast, + defaultPositions.southArrowNorth, + defaultPositions.southArrowNorthWest, + defaultPositions.southArrowNorthEast ] } ); } ); From 8af70aeff58382406bb3077c913a6c3dcfbd35f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Fri, 2 Feb 2018 14:08:17 +0100 Subject: [PATCH 7/7] Updated toolbar configuration. --- tests/manual/imageupload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/manual/imageupload.js b/tests/manual/imageupload.js index 9687cdf5..59706564 100644 --- a/tests/manual/imageupload.js +++ b/tests/manual/imageupload.js @@ -30,7 +30,7 @@ ClassicEditor Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard, ImageCaption, ImageStyle, ImageUpload ], - toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ], + toolbar: [ 'headings', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ], image: { toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ] }