8
0
Просмотр исходного кода

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.
Piotrek Koszuliński 8 лет назад
Родитель
Сommit
2b8d5d787c

+ 5 - 1
packages/ckeditor5-image/src/image/ui/utils.js

@@ -43,7 +43,11 @@ export function getBalloonPositionData( editor ) {
 		target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 		target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 		positions: [
 		positions: [
 			defaultPositions.northArrowSouth,
 			defaultPositions.northArrowSouth,
-			defaultPositions.southArrowNorth
+			defaultPositions.northArrowSouthWest,
+			defaultPositions.northArrowSouthEast,
+			defaultPositions.southArrowNorth,
+			defaultPositions.southArrowNorthWest,
+			defaultPositions.southArrowNorthEast
 		]
 		]
 	};
 	};
 }
 }

+ 16 - 20
packages/ckeditor5-image/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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 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';
 import '../../../theme/textalternativeform.css';
 
 
 /**
 /**
@@ -63,7 +65,7 @@ export default class TextAlternativeFormView extends View {
 		 *
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView} #saveButtonView
 		 * @member {module:ui/button/buttonview~ButtonView} #saveButtonView
 		 */
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ) );
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon );
 		this.saveButtonView.type = 'submit';
 		this.saveButtonView.type = 'submit';
 
 
 		/**
 		/**
@@ -71,7 +73,7 @@ export default class TextAlternativeFormView extends View {
 		 *
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView} #cancelButtonView
 		 * @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.
 		 * A collection of views which can be focused in the form.
@@ -115,7 +117,7 @@ export default class TextAlternativeFormView extends View {
 
 
 			attributes: {
 			attributes: {
 				class: [
 				class: [
-					'cke-text-alternative-form',
+					'ck-text-alternative-form',
 				],
 				],
 
 
 				// https://github.com/ckeditor/ckeditor5-image/issues/40
 				// https://github.com/ckeditor/ckeditor5-image/issues/40
@@ -124,20 +126,8 @@ export default class TextAlternativeFormView extends View {
 
 
 			children: [
 			children: [
 				this.labeledInput,
 				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
 	 * @private
 	 * @param {String} label The button label
 	 * @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.
 	 * @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.
 	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
 	 */
 	 */
-	_createButton( label, eventName ) {
+	_createButton( label, icon, eventName ) {
 		const button = new ButtonView( this.locale );
 		const button = new ButtonView( this.locale );
 
 
-		button.label = label;
-		button.withText = true;
+		button.set( {
+			label,
+			icon,
+			tooltip: true
+		} );
 
 
 		if ( eventName ) {
 		if ( eventName ) {
 			button.delegate( 'execute' ).to( this, eventName );
 			button.delegate( 'execute' ).to( this, eventName );
@@ -192,7 +186,9 @@ export default class TextAlternativeFormView extends View {
 	_createLabeledInputView() {
 	_createLabeledInputView() {
 		const t = this.locale.t;
 		const t = this.locale.t;
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+
 		labeledInput.label = t( 'Text alternative' );
 		labeledInput.label = t( 'Text alternative' );
+		labeledInput.inputView.placeholder = t( 'Text alternative' );
 
 
 		return labeledInput;
 		return labeledInput;
 	}
 	}

+ 10 - 2
packages/ckeditor5-image/tests/image/ui/utils.js

@@ -59,7 +59,11 @@ describe( 'Utils', () => {
 				target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 				target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 				positions: [
 				positions: [
 					defaultPositions.northArrowSouth,
 					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() ),
 				target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
 				positions: [
 				positions: [
 					defaultPositions.northArrowSouth,
 					defaultPositions.northArrowSouth,
-					defaultPositions.southArrowNorth
+					defaultPositions.northArrowSouthWest,
+					defaultPositions.northArrowSouthEast,
+					defaultPositions.southArrowNorth,
+					defaultPositions.southArrowNorthWest,
+					defaultPositions.southArrowNorthEast
 				]
 				]
 			} );
 			} );
 		} );
 		} );

+ 1 - 1
packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js

@@ -27,7 +27,7 @@ describe( 'TextAlternativeFormView', () => {
 		it( 'should create element from template', () => {
 		it( 'should create element from template', () => {
 			view.render();
 			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' );
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 		} );
 
 

+ 1 - 1
packages/ckeditor5-image/tests/manual/caption.js

@@ -26,7 +26,7 @@ ClassicEditor
 			Enter, Typing, Paragraph, Heading, Image, ImageToolbar,
 			Enter, Typing, Paragraph, Heading, Image, ImageToolbar,
 			Undo, Clipboard, ImageCaption, ImageStyle, Bold, Italic, Heading, List
 			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: {
 		image: {
 			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 		}
 		}

+ 1 - 1
packages/ckeditor5-image/tests/manual/image.js

@@ -17,7 +17,7 @@ import ClipboardPlugin from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ],
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin ],
-		toolbar: [ 'headings', 'undo', 'redo' ]
+		toolbar: [ 'headings', '|', 'undo', 'redo' ]
 	} )
 	} )
 	.then( editor => {
 	.then( editor => {
 		window.editor = editor;
 		window.editor = editor;

+ 2 - 2
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -29,7 +29,7 @@ ClassicEditor
 			ClipboardPlugin,
 			ClipboardPlugin,
 			ImageStyle
 			ImageStyle
 		],
 		],
-		toolbar: [ 'headings', 'undo', 'redo' ],
+		toolbar: [ 'headings', '|', 'undo', 'redo' ],
 		image: {
 		image: {
 			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
 			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
 		}
 		}
@@ -54,7 +54,7 @@ ClassicEditor
 			ClipboardPlugin,
 			ClipboardPlugin,
 			ImageStyle
 			ImageStyle
 		],
 		],
-		toolbar: [ 'headings', 'undo', 'redo' ],
+		toolbar: [ 'headings', '|', 'undo', 'redo' ],
 		image: {
 		image: {
 			styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
 			styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
 			toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]
 			toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]

+ 1 - 1
packages/ckeditor5-image/tests/manual/imageupload.js

@@ -30,7 +30,7 @@ ClassicEditor
 			Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
 			Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
 			ImageCaption, ImageStyle, ImageUpload
 			ImageCaption, ImageStyle, ImageUpload
 		],
 		],
-		toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ],
+		toolbar: [ 'headings', '|', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'uploadImage' ],
 		image: {
 		image: {
 			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 		}
 		}

+ 1 - 1
packages/ckeditor5-image/tests/manual/textalternative.js

@@ -18,7 +18,7 @@ import ImageToolbar from '../../src/imagetoolbar';
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageToolbar ],
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageToolbar ],
-		toolbar: [ 'headings', 'undo', 'redo' ],
+		toolbar: [ 'headings', '|', 'undo', 'redo' ],
 		image: {
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 			toolbar: [ 'imageTextAlternative' ]
 		}
 		}

+ 1 - 1
packages/ckeditor5-image/tests/manual/tickets/110/1.js

@@ -18,7 +18,7 @@ import ImageToolbar from '../../../../src/imagetoolbar';
 ClassicEditor
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ImageToolbar, ContextualToolbar ],
 		plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ImageToolbar, ContextualToolbar ],
-		contextualToolbar: [ 'headings', 'undo', 'redo' ],
+		contextualToolbar: [ 'headings', '|', 'undo', 'redo' ],
 		image: {
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 			toolbar: [ 'imageTextAlternative' ]
 		}
 		}

+ 6 - 12
packages/ckeditor5-image/theme/textalternativeform.css

@@ -3,18 +3,12 @@
  * For licensing, see LICENSE.md.
  * 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;
 	}
 	}
 }
 }