瀏覽代碼

Added panel elements like button, URL input and label along with the
styles.

Aleksander Nowodzinski 9 年之前
父節點
當前提交
95fc3ec563

+ 1 - 4
packages/ckeditor5-link/src/link.js

@@ -66,19 +66,16 @@ export default class Link extends Feature {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
 		const editableViewElement = editor.ui.editable.view.element;
-		const t = editor.t;
 
 		// Create panel model.
 		const balloonPanelModel = new Model( {
 			maxWidth: 300
 		} );
 
-		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( t ) );
+		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( editor.locale ) );
 
 		editor.ui.add( 'body', this.balloonPanel );
 
-		this.balloonPanel.view.element.innerHTML = 'LinkBalloonPanel';
-
 		editingView.on( 'render', () => {
 			const firstParent = editingView.selection.getFirstPosition().parent;
 			const firstParentAncestors = firstParent.getAncestors();

+ 17 - 2
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -3,7 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
+import Model from '../../ui/model.js';
 import Controller from '../../ui/controller.js';
+import Button from '../../ui/button/button.js';
+import ButtonView from '../../ui/button/buttonview.js';
 
 /**
  * The link balloon panel controller class.
@@ -23,11 +26,23 @@ export default class LinkBalloonPanel extends Controller {
 	constructor( model, view ) {
 		super( model, view );
 
-		view.model.bind( 'arrow', 'maxWidth', 'maxHeight' ).to( model );
+		const t = this.view.t;
 
+		view.model.bind( 'arrow', 'maxWidth', 'maxHeight' ).to( model );
 		view.model.set( 'top', 0 );
 		view.model.set( 'left', 0 );
-
 		view.model.set( 'isVisible', false );
+
+		const buttonModel = new Model( {
+			isEnabled: true,
+			isOn: false,
+			label: t( 'Save' ),
+			withText: true
+		} );
+
+		this.saveButton = new Button( buttonModel, new ButtonView( this.locale ) );
+		this.saveButton.view.element.classList.add( 'ck-button-action' );
+
+		this.addCollection( 'buttons' ).add( this.saveButton );
 	}
 }

+ 41 - 4
packages/ckeditor5-link/src/ui/linkballoonpanelview.js

@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
+import uid from '../../utils/uid.js';
 import View from '../../ui/view.js';
 import Template from '../../ui/template.js';
 
@@ -23,10 +24,12 @@ export default class LinkBalloonPanelView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor() {
-		super();
+	constructor( locale ) {
+		super( locale );
 
+		const t = this.t;
 		const bind = this.bind;
+		const urlFieldId = `ck-input-${ uid() }`;
 
 		this.template = new Template( {
 			tag: 'div',
@@ -45,10 +48,44 @@ export default class LinkBalloonPanelView extends View {
 					maxWidth: bind.to( 'maxWidth', ( value ) => `${ value }px` ),
 					maxHeight: bind.to( 'maxHeight', ( value ) => `${ value }px` ),
 				}
-			}
+			},
+
+			children: [
+				{
+					tag: 'label',
+					attributes: {
+						class: [
+							'ck-input__label'
+						],
+						for: urlFieldId
+					},
+					children: [
+						t( 'Link URL' )
+					]
+				},
+				{
+					tag: 'input',
+					attributes: {
+						class: [
+							'ck-input',
+							'ck-input-text'
+						],
+						id: urlFieldId,
+						type: 'text'
+					}
+				},
+				{
+					tag: 'div',
+					attributes: {
+						class: [
+							'ck-balloon-panel__buttons'
+						]
+					}
+				}
+			]
 		} );
 
-		this.register( 'main', el => el );
+		this.register( 'buttons', '.ck-balloon-panel__buttons' );
 	}
 
 	show() {

+ 17 - 0
packages/ckeditor5-link/theme/components/input.scss

@@ -0,0 +1,17 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-input {
+	&-text {
+		@include ck-rounded-corners();
+
+		border: 1px solid ck-border-color( 'foreground' );
+		padding: ck-spacing( 'small' );
+		min-width: 200px;
+	}
+
+	&__label {
+		display: block;
+		font-weight: bold;
+	}
+}

+ 8 - 0
packages/ckeditor5-link/theme/components/linkballoonpanel.scss

@@ -7,6 +7,9 @@ $ck-balloon-arrow-half-width: 10px;
 
 // TODO: This will become BalloonPanel component stylesheet.
 .ck-balloon-panel {
+	@include ck-unselectable();
+	@include ck-rounded-corners();
+
 	display: none;
 	position: absolute;
 	background: ck-color( 'background' );
@@ -109,4 +112,9 @@ $ck-balloon-arrow-half-width: 10px;
 	&_visible {
 		display: block;
 	}
+
+	&__buttons {
+		text-align: right;
+		margin-top: ck-spacing( 'medium' );
+	}
 }

+ 1 - 0
packages/ckeditor5-link/theme/theme.scss

@@ -1,4 +1,5 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@import 'components/input';
 @import 'components/linkballoonpanel';