Merge pull request #172 from ckeditor/t/ckeditor5/645

Feature: Simplified the text alternative UI, aligning the image package to the redesigned Lark theme (see ckeditor/ckeditor5#645). BREAKING CHANGE: The DOM structure of the text alternative form has changed.
ckeditor · Feb 2, 2018 · 9a069b0 · 9a069b0
2 parents b974bb0 + 8af70ae
commit 9a069b0
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 43 deletions.
diff --git 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
 		]
 	};
 }
diff --git 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,15 +65,15 @@ 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';
 
 		/**
 		 * A button used to cancel the form.
 		 *
 		 * @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/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
 				]
 			} );
 		} );

diff --git 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/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
@@ -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
@@ -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/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' ]
 		}

diff --git 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
@@ -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' ]
 		}

diff --git 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;
 	}
 }