Browse Source

Added tooltips to mode switch buttons. Simplified mode button creation.

Aleksander Nowodzinski 5 years ago
parent
commit
b08587ce17

+ 43 - 9
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -14,6 +14,7 @@ import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 import HtmlEmbedInsertCommand from './htmlembedinsertcommand';
 import HtmlEmbedUpdateCommand from './htmlembedupdatecommand';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
 import eyeIcon from '../theme/icons/eye.svg';
@@ -95,6 +96,9 @@ export default class HtmlEmbedEditing extends Plugin {
 		const upcastWriter = new UpcastWriter( view.document );
 		const htmlProcessor = new HtmlDataProcessor( view.document );
 
+		const editModeButtonDOMElement = getModeToggleButtonDOMElement( editor.locale );
+		const previewModeButtonDOMElement = getModeToggleButtonDOMElement( editor.locale, true );
+
 		editor.conversion.for( 'upcast' ).elementToElement( {
 			view: {
 				name: 'div',
@@ -168,18 +172,17 @@ export default class HtmlEmbedEditing extends Plugin {
 					return root;
 				} );
 
-				const buttonAttributes = {
-					class: 'ck ck-button ck-on raw-html__mode-toggle-button'
+				const toggleButtonWrapperAttributes = {
+					class: 'raw-html__mode-toggle-wrapper'
 				};
 
 				// The switch button between preview and editing HTML.
-				const toggleButton = writer.createUIElement( 'button', buttonAttributes, function( domDocument ) {
+				const toggleButtonWrapper = writer.createUIElement( 'div', toggleButtonWrapperAttributes, function( domDocument ) {
 					const root = this.toDomElement( domDocument );
 
-					root.innerHTML = pencilIcon;
-					root.firstChild.classList.add( 'ck', 'ck-icon', 'ck-button__icon' );
+					root.appendChild( editModeButtonDOMElement.cloneNode( true ) );
 
-					writer.setCustomProperty( 'domElement', root, toggleButton );
+					writer.setCustomProperty( 'domElement', root, toggleButtonWrapper );
 
 					root.addEventListener( 'click', evt => {
 						view.change( writer => {
@@ -194,8 +197,9 @@ export default class HtmlEmbedEditing extends Plugin {
 							const textarea = sourceElement.getCustomProperty( 'domElement' );
 							textarea.disabled = !textarea.disabled;
 
-							root.innerHTML = textarea.disabled ? pencilIcon : eyeIcon;
-							root.firstChild.classList.add( 'ck', 'ck-icon', 'ck-button__icon' );
+							const modeButtonToClone = textarea.disabled ? editModeButtonDOMElement : previewModeButtonDOMElement;
+
+							root.replaceChild( modeButtonToClone.cloneNode( true ), root.firstChild );
 						} );
 
 						evt.preventDefault();
@@ -205,7 +209,7 @@ export default class HtmlEmbedEditing extends Plugin {
 				} );
 
 				writer.insert( writer.createPositionAt( widgetView, 0 ), rawHtmlContainer );
-				writer.insert( writer.createPositionAt( rawHtmlContainer, 0 ), toggleButton );
+				writer.insert( writer.createPositionAt( rawHtmlContainer, 0 ), toggleButtonWrapper );
 				writer.insert( writer.createPositionAt( rawHtmlContainer, 1 ), sourceElement );
 
 				// The container that renders the HTML should be created only when `htmlEmbed.showPreviews=true` in the config.
@@ -278,3 +282,33 @@ function toRawHtmlWidget( viewElement, writer, label ) {
 
 	return toWidget( viewElement, writer, { label } );
 }
+
+// Returns a toggle mode button DOM element that can be cloned and used in conversion.
+//
+//  @param {module:utils/locale~Locale} locale Editor locale.
+//  @param {module:utils/locale~Locale} forPreview `true` when the button should toggle to preview mode.
+//  @returns {HTMLElement}
+function getModeToggleButtonDOMElement( locale, forPreview ) {
+	const t = locale.t;
+	const buttonView = new ButtonView( locale );
+
+	buttonView.set( {
+		tooltipPosition: 'sw',
+		icon: pencilIcon,
+		class: 'raw-html__mode-toggle-button'
+	} );
+
+	buttonView.render();
+
+	if ( forPreview ) {
+		buttonView.icon = eyeIcon;
+		buttonView.tooltip = t( 'Show preview' );
+	} else {
+		buttonView.icon = pencilIcon;
+		buttonView.tooltip = t( 'Edit source' );
+	}
+
+	buttonView.destroy();
+
+	return buttonView.element.cloneNode( true );
+}

+ 7 - 7
packages/ckeditor5-html-embed/tests/htmlembedediting.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global console, document, HTMLTextAreaElement, HTMLDivElement, HTMLButtonElement, Event */
+/* global console, document, HTMLTextAreaElement, HTMLDivElement, Event */
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import HtmlEmbedEditing from '../src/htmlembedediting';
@@ -259,10 +259,10 @@ describe( 'HtmlEmbedEditing', () => {
 				// Expecting two children: toggle button and editable textarea.
 				expect( viewHtmlContainer.childCount ).to.equal( 2 );
 
-				const toggleIconElement = viewHtmlContainer.getChild( 0 );
+				const toggleWrapperElement = viewHtmlContainer.getChild( 0 );
 
-				expect( toggleIconElement.is( 'uiElement' ) ).to.equal( true );
-				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLButtonElement );
+				expect( toggleWrapperElement.is( 'uiElement' ) ).to.equal( true );
+				expect( toggleWrapperElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLDivElement );
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
 
@@ -506,10 +506,10 @@ describe( 'HtmlEmbedEditing', () => {
 				// Expecting three children: toggle button, editable textarea, and the preview container.
 				expect( viewHtmlContainer.childCount ).to.equal( 3 );
 
-				const toggleIconElement = viewHtmlContainer.getChild( 0 );
+				const toggleWrapperElement = viewHtmlContainer.getChild( 0 );
 
-				expect( toggleIconElement.is( 'uiElement' ) ).to.equal( true );
-				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLButtonElement );
+				expect( toggleWrapperElement.is( 'uiElement' ) ).to.equal( true );
+				expect( toggleWrapperElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLDivElement );
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
 

+ 2 - 2
packages/ckeditor5-html-embed/theme/htmlembed.css

@@ -7,8 +7,8 @@
 .ck-widget.raw-html {
 	position: relative;
 
-	/* The switch mode button. */
-	& .raw-html__mode-toggle-button {
+	/* The switch mode button wrapper. */
+	& .raw-html__mode-toggle-wrapper {
 		position: absolute;
 	}
 

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css

@@ -14,8 +14,8 @@
 	font-size: var(--ck-font-size-base);
 	padding: var(--ck-spacing-standard);
 
-	/* The switch mode button. */
-	& .raw-html__mode-toggle-button {
+	/* The switch mode button wrapper. */
+	& .raw-html__mode-toggle-wrapper {
 		top: var(--ck-spacing-standard);
 		right: var(--ck-spacing-standard);
 	}