Kaynağa Gözat

Simplified the link editing form.

Aleksander Nowodzinski 8 yıl önce
ebeveyn
işleme
db7c3f2144

+ 8 - 8
packages/ckeditor5-link/src/link.js

@@ -86,14 +86,14 @@ export default class Link extends Plugin {
 		const editor = this.editor;
 		const formView = new LinkFormView( editor.locale );
 		const linkCommand = editor.commands.get( 'link' );
-		const unlinkCommand = editor.commands.get( 'unlink' );
+		// const unlinkCommand = editor.commands.get( 'unlink' );
 
 		formView.urlInputView.bind( 'value' ).to( linkCommand, 'value' );
 
 		// Form elements should be read-only when corresponding commands are disabled.
 		formView.urlInputView.bind( 'isReadOnly' ).to( linkCommand, 'isEnabled', value => !value );
 		formView.saveButtonView.bind( 'isEnabled' ).to( linkCommand );
-		formView.unlinkButtonView.bind( 'isEnabled' ).to( unlinkCommand );
+		// formView.unlinkButtonView.bind( 'isEnabled' ).to( unlinkCommand );
 
 		// Execute link command after clicking on formView `Save` button.
 		this.listenTo( formView, 'submit', () => {
@@ -102,10 +102,10 @@ export default class Link extends Plugin {
 		} );
 
 		// Execute unlink command after clicking on formView `Unlink` button.
-		this.listenTo( formView, 'unlink', () => {
-			editor.execute( 'unlink' );
-			this._hidePanel( true );
-		} );
+		// this.listenTo( formView, 'unlink', () => {
+		// 	editor.execute( 'unlink' );
+		// 	this._hidePanel( true );
+		// } );
 
 		// Hide the panel after clicking on formView `Cancel` button.
 		this.listenTo( formView, 'cancel', () => this._hidePanel( true ) );
@@ -218,7 +218,7 @@ export default class Link extends Plugin {
 	_showPanel( focusInput ) {
 		const editor = this.editor;
 		const linkCommand = editor.commands.get( 'link' );
-		const unlinkCommand = editor.commands.get( 'unlink' );
+		// const unlinkCommand = editor.commands.get( 'unlink' );
 		const editing = editor.editing;
 		const showViewDocument = editing.view;
 		const showIsCollapsed = showViewDocument.selection.isCollapsed;
@@ -265,7 +265,7 @@ export default class Link extends Plugin {
 		}
 
 		// https://github.com/ckeditor/ckeditor5-link/issues/53
-		this.formView.unlinkButtonView.isVisible = unlinkCommand.isEnabled;
+		// this.formView.unlinkButtonView.isVisible = unlinkCommand.isEnabled;
 
 		// Make sure that each time the panel shows up, the URL field remains in sync with the value of
 		// the command. If the user typed in the input, then canceled the balloon (`urlInputView#value` stays

+ 12 - 35
packages/ckeditor5-link/src/ui/linkformview.js

@@ -19,6 +19,8 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import '../../theme/linkform.css';
 
 /**
@@ -65,7 +67,7 @@ export default class LinkFormView extends View {
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ) );
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon );
 		this.saveButtonView.type = 'submit';
 
 		/**
@@ -73,14 +75,7 @@ export default class LinkFormView extends View {
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), 'cancel' );
-
-		/**
-		 * The Unlink button view.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView}
-		 */
-		this.unlinkButtonView = this._createButton( t( 'Unlink' ), 'unlink' );
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'cancel' );
 
 		/**
 		 * A collection of views which can be focused in the form.
@@ -133,21 +128,8 @@ export default class LinkFormView extends View {
 
 			children: [
 				this.urlInputView,
-				{
-					tag: 'div',
-
-					attributes: {
-						class: [
-							'ck-link-form__actions'
-						]
-					},
-
-					children: [
-						this.saveButtonView,
-						this.cancelButtonView,
-						this.unlinkButtonView
-					]
-				}
+				this.cancelButtonView,
+				this.saveButtonView
 			]
 		} );
 	}
@@ -164,9 +146,8 @@ export default class LinkFormView extends View {
 
 		const childViews = [
 			this.urlInputView,
-			this.saveButtonView,
 			this.cancelButtonView,
-			this.unlinkButtonView
+			this.saveButtonView
 		];
 
 		childViews.forEach( v => {
@@ -209,15 +190,17 @@ export default class LinkFormView extends View {
 	 * Creates a button view.
 	 *
 	 * @private
-	 * @param {String} label The button label
+	 * @param {String} label The button label.
+	 * @param {String} icon The button's icon.
 	 * @param {String} [eventName] An 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.icon = icon;
+		button.tooltip = true;
 
 		if ( eventName ) {
 			button.delegate( 'execute' ).to( this, eventName );
@@ -239,9 +222,3 @@ export default class LinkFormView extends View {
  *
  * @event cancel
  */
-
-/**
- * Fired when the {@link #unlinkButtonView} is clicked.
- *
- * @event unlink
- */

+ 5 - 16
packages/ckeditor5-link/theme/linkform.css

@@ -3,19 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-link-form {
-	overflow: hidden;
-}
-
-.ck-link-form__actions {
-	clear: both;
-
-	& .ck-button {
-		float: right;
-
-		/* The "Unlink" button.*/
-		&:last-child {
-			float: left;
-		}
-	}
-}
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */