Преглед изворни кода

Fix: Button tooltip should not look blurry on ldpi screens. Closes #142. Closes #133.

Aleksander Nowodzinski пре 8 година
родитељ
комит
ff4c1f11b9

+ 21 - 8
packages/ckeditor5-ui/src/button/buttonview.js

@@ -10,6 +10,7 @@
 import View from '../view';
 import Template from '../template';
 import IconView from '../icon/iconview';
+import TooltipView from '../tooltip/tooltipview';
 
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
@@ -140,6 +141,13 @@ export default class ButtonView extends View {
 		 * @member {module:ui/icon/iconview~IconView} #iconView
 		 */
 
+		/**
+		 * Tooltip of the button view.
+		 *
+		 * @readonly
+		 * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
+		 */
+
 		const bind = this.bindTemplate;
 
 		this.template = new Template( {
@@ -148,16 +156,12 @@ export default class ButtonView extends View {
 			attributes: {
 				class: [
 					'ck-button',
-					bind.if( '_tooltipString', 'ck-tooltip_s' ),
 					bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
 					bind.if( 'isVisible', 'ck-hidden', value => !value ),
 					bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
 					bind.if( 'withText', 'ck-button_with-text' )
 				],
 				type: bind.to( 'type', value => value ? value : 'button' ),
-				'data-ck-tooltip': [
-					bind.to( '_tooltipString' )
-				],
 				tabindex: bind.to( 'tabindex' )
 			},
 
@@ -207,17 +211,26 @@ export default class ButtonView extends View {
 	 * @inheritDoc
 	 */
 	init() {
-		if ( this.icon && !this.iconView ) {
+		if ( this.icon ) {
 			const iconView = this.iconView = new IconView();
 
 			iconView.bind( 'content' ).to( this, 'icon' );
-
 			this.element.insertBefore( iconView.element, this.element.firstChild );
 
-			// Make sure the icon view will be destroyed along with button.
+			// Make sure the icon will be destroyed along with the button.
 			this.addChildren( iconView );
 		}
 
+		if ( this.tooltip ) {
+			const tooltipView = this.tooltipView = new TooltipView();
+
+			tooltipView.bind( 'text' ).to( this, '_tooltipString' );
+			this.element.appendChild( tooltipView.element );
+
+			// Make sure the tooltip will be destroyed along with the button.
+			this.addChildren( tooltipView );
+		}
+
 		super.init();
 	}
 
@@ -229,7 +242,7 @@ export default class ButtonView extends View {
 	}
 
 	/**
-	 * Gets value for the `data-ck-tooltip` attribute from the combination of
+	 * Gets the text for the {@link #tooltipView} from the combination of
 	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
 	 *
 	 * @private

+ 50 - 15
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -8,6 +8,7 @@
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import ButtonView from '../../src/button/buttonview';
 import IconView from '../../src/icon/iconview';
+import TooltipView from '../../src/tooltip/tooltipview';
 
 testUtils.createSinonSandbox();
 
@@ -75,29 +76,56 @@ describe( 'ButtonView', () => {
 		} );
 
 		describe( 'tooltip', () => {
+			beforeEach( () => {
+				view = new ButtonView( locale );
+			} );
+
 			it( 'is not initially set', () => {
-				expect( view.element.dataset.ckTooltip ).to.undefined;
+				expect( view.tooltipView ).to.be.undefined;
+				expect( view.element.childNodes ).to.have.length( 1 );
 			} );
 
 			it( 'is not initially set (despite #label and #keystroke)', () => {
 				view.label = 'foo';
 				view.keystroke = 'A';
+				view.init();
 
-				expect( view.element.dataset.ckTooltip ).to.undefined;
+				expect( view.tooltipView ).to.be.undefined;
 			} );
 
 			it( 'is not set if neither `true`, String or Function', () => {
 				view.label = 'foo';
 				view.keystroke = 'A';
 				view.tooltip = false;
+				view.init();
 
-				expect( view.element.dataset.ckTooltip ).to.undefined;
+				expect( view.tooltipView ).to.be.undefined;
 
 				view.tooltip = 3;
-				expect( view.element.dataset.ckTooltip ).to.undefined;
+				expect( view.tooltipView ).to.be.undefined;
 
 				view.tooltip = new Date();
-				expect( view.element.dataset.ckTooltip ).to.undefined;
+				expect( view.tooltipView ).to.be.undefined;
+			} );
+
+			it( 'when set, is added to the DOM', () => {
+				view.tooltip = 'foo';
+				view.icon = 'bar';
+				view.init();
+
+				expect( view.element.childNodes ).to.have.length( 3 );
+				expect( view.element.childNodes[ 2 ] ).to.equal( view.tooltipView.element );
+				expect( view.tooltipView ).to.instanceOf( TooltipView );
+			} );
+
+			it( 'when set, is destroyed along with the view', () => {
+				view.tooltip = 'foo';
+				view.init();
+
+				const spy = sinon.spy( view.tooltipView, 'destroy' );
+
+				view.destroy();
+				sinon.assert.calledOnce( spy );
 			} );
 
 			describe( 'defined as a Boolean', () => {
@@ -105,21 +133,23 @@ describe( 'ButtonView', () => {
 					view.tooltip = true;
 					view.label = 'bar';
 					view.keystroke = 'A';
+					view.init();
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'bar (A)' );
+					expect( view.tooltipView.text ).to.equal( 'bar (A)' );
 				} );
 
 				it( 'reacts to changes in #label and #keystroke', () => {
 					view.tooltip = true;
 					view.label = 'foo';
 					view.keystroke = 'B';
+					view.init();
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'foo (B)' );
+					expect( view.tooltipView.text ).to.equal( 'foo (B)' );
 
 					view.label = 'baz';
 					view.keystroke = false;
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'baz' );
+					expect( view.tooltipView.text ).to.equal( 'baz' );
 				} );
 			} );
 
@@ -128,16 +158,19 @@ describe( 'ButtonView', () => {
 					view.tooltip = 'bar';
 					view.label = 'foo';
 					view.keystroke = 'A';
+					view.init();
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'bar' );
+					expect( view.tooltipView.text ).to.equal( 'bar' );
 				} );
 
 				it( 'reacts to changes of #tooltip', () => {
 					view.tooltip = 'bar';
-					expect( view.element.dataset.ckTooltip ).to.equal( 'bar' );
+					view.init();
+
+					expect( view.tooltipView.text ).to.equal( 'bar' );
 
 					view.tooltip = 'foo';
-					expect( view.element.dataset.ckTooltip ).to.equal( 'foo' );
+					expect( view.tooltipView.text ).to.equal( 'foo' );
 				} );
 			} );
 
@@ -146,21 +179,23 @@ describe( 'ButtonView', () => {
 					view.tooltip = ( l, k ) => `${ l } - ${ k }`;
 					view.label = 'foo';
 					view.keystroke = 'A';
+					view.init();
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'foo - A' );
+					expect( view.tooltipView.text ).to.equal( 'foo - A' );
 				} );
 
 				it( 'reacts to changes of #label and #keystroke', () => {
 					view.tooltip = ( l, k ) => `${ l } - ${ k }`;
 					view.label = 'foo';
 					view.keystroke = 'A';
+					view.init();
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'foo - A' );
+					expect( view.tooltipView.text ).to.equal( 'foo - A' );
 
 					view.label = 'bar';
 					view.keystroke = 'B';
 
-					expect( view.element.dataset.ckTooltip ).to.equal( 'bar - B' );
+					expect( view.tooltipView.text ).to.equal( 'bar - B' );
 				} );
 			} );
 		} );
@@ -218,7 +253,7 @@ describe( 'ButtonView', () => {
 	describe( 'icon', () => {
 		it( 'is not initially set', () => {
 			expect( view.element.childNodes ).to.have.length( 1 );
-			expect( view.iconView ).to.undefined;
+			expect( view.iconView ).to.be.undefined;
 		} );
 
 		it( 'is set when view#icon is defined', () => {