Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

T/ckeditor5/645: Simplified the text alternative UI #172

Merged
merged 13 commits into from
Feb 2, 2018
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/image/ui/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
]
};
}
36 changes: 16 additions & 20 deletions src/imagetextalternative/ui/textalternativeformview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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
]
} );
}
Expand Down Expand Up @@ -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 );
Expand All @@ -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;
}
Expand Down
12 changes: 10 additions & 2 deletions tests/image/ui/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
]
} );
} );
Expand All @@ -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
]
} );
} );
Expand Down
2 changes: 1 addition & 1 deletion tests/imagetextalternative/ui/textalternativeformview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
} );

Expand Down
2 changes: 1 addition & 1 deletion tests/manual/caption.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ]
}
Expand Down
2 changes: 1 addition & 1 deletion tests/manual/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions tests/manual/imagestyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ ClassicEditor
ClipboardPlugin,
ImageStyle
],
toolbar: [ 'headings', 'undo', 'redo' ],
toolbar: [ 'headings', '|', 'undo', 'redo' ],
image: {
toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
}
Expand All @@ -54,7 +54,7 @@ ClassicEditor
ClipboardPlugin,
ImageStyle
],
toolbar: [ 'headings', 'undo', 'redo' ],
toolbar: [ 'headings', '|', 'undo', 'redo' ],
image: {
styles: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ],
toolbar: [ 'imageStyleAlignLeft', 'imageStyleAlignCenter', 'imageStyleAlignRight' ]
Expand Down
2 changes: 1 addition & 1 deletion tests/manual/textalternative.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ]
}
Expand Down
2 changes: 1 addition & 1 deletion tests/manual/tickets/110/1.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ]
}
Expand Down
18 changes: 6 additions & 12 deletions theme/textalternativeform.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}