8
0
Quellcode durchsuchen

Save and cancel buttons WIP.

Aleksander Nowodzinski vor 5 Jahren
Ursprung
Commit
761c7bd74a

+ 3 - 2
packages/ckeditor5-html-embed/lang/contexts.json

@@ -2,6 +2,7 @@
   "Insert HTML": "Toolbar button tooltip for the HTML embed feature.",
   "HTML snippet": "The HTML snippet.",
   "Paste the raw code here.": "A placeholder that will be displayed in the raw HTML textarea field.",
-  "Show preview": "A label of a button that switches the HTML embed to the content preview mode.",
-  "Edit source": "A label of a button that switches the HTML embed to the source editing mode."
+  "Edit source": "A label of a button that switches the HTML embed to the source editing mode.",
+  "Save changes": "A label of a button that saves the HTML embed content and navigates back to the preview.",
+  "Cancel": "A label of a button that discards changes in the HTML embed content and navigates back to the preview."
 }

+ 42 - 22
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -17,7 +17,8 @@ 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';
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 
 import '../theme/htmlembed.css';
 
@@ -96,8 +97,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 );
+		const editButtonDOMElement = getButtonDOMElement( editor.locale, 'edit' );
+		const saveButtonDOMElement = getButtonDOMElement( editor.locale, 'save' );
+		const cancelButtonDOMElement = getButtonDOMElement( editor.locale, 'cancel' );
 
 		editor.conversion.for( 'upcast' ).elementToElement( {
 			view: {
@@ -173,19 +175,19 @@ export default class HtmlEmbedEditing extends Plugin {
 					return root;
 				} );
 
-				const toggleButtonWrapperAttributes = {
-					class: 'raw-html__mode-toggle-wrapper'
+				const buttonsWrapperAttributes = {
+					class: 'raw-html__buttons-wrapper'
 				};
 
 				// The switch button between preview and editing HTML.
-				const toggleButtonWrapper = writer.createUIElement( 'div', toggleButtonWrapperAttributes, function( domDocument ) {
-					const root = this.toDomElement( domDocument );
+				const buttonsWrapper = writer.createUIElement( 'div', buttonsWrapperAttributes, function( domDocument ) {
+					const buttonsWrapperDOMElement = this.toDomElement( domDocument );
 
-					root.appendChild( editModeButtonDOMElement.cloneNode( true ) );
+					buttonsWrapperDOMElement.appendChild( editButtonDOMElement.cloneNode( true ) );
 
-					writer.setCustomProperty( 'domElement', root, toggleButtonWrapper );
+					writer.setCustomProperty( 'domElement', buttonsWrapperDOMElement, buttonsWrapper );
 
-					root.addEventListener( 'click', evt => {
+					buttonsWrapperDOMElement.addEventListener( 'click', evt => {
 						view.change( writer => {
 							if ( htmlEmbedConfig.showPreviews ) {
 								if ( widgetView.hasClass( DISPLAY_PREVIEW_CLASS ) ) {
@@ -198,19 +200,26 @@ export default class HtmlEmbedEditing extends Plugin {
 							const textarea = sourceElement.getCustomProperty( 'domElement' );
 							textarea.disabled = !textarea.disabled;
 
-							const modeButtonToClone = textarea.disabled ? editModeButtonDOMElement : previewModeButtonDOMElement;
+							while ( buttonsWrapperDOMElement.firstChild ) {
+								buttonsWrapperDOMElement.firstChild.remove();
+							}
 
-							root.replaceChild( modeButtonToClone.cloneNode( true ), root.firstChild );
+							if ( textarea.disabled ) {
+								buttonsWrapperDOMElement.appendChild( editButtonDOMElement.cloneNode( true ) );
+							} else {
+								buttonsWrapperDOMElement.appendChild( saveButtonDOMElement.cloneNode( true ) );
+								buttonsWrapperDOMElement.appendChild( cancelButtonDOMElement.cloneNode( true ) );
+							}
 						} );
 
 						evt.preventDefault();
 					} );
 
-					return root;
+					return buttonsWrapperDOMElement;
 				} );
 
 				writer.insert( writer.createPositionAt( widgetView, 0 ), rawHtmlContainer );
-				writer.insert( writer.createPositionAt( rawHtmlContainer, 0 ), toggleButtonWrapper );
+				writer.insert( writer.createPositionAt( rawHtmlContainer, 0 ), buttonsWrapper );
 				writer.insert( writer.createPositionAt( rawHtmlContainer, 1 ), sourceElement );
 
 				// The container that renders the HTML should be created only when `htmlEmbed.showPreviews=true` in the config.
@@ -289,27 +298,38 @@ function toRawHtmlWidget( 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.
+//  @param {'edit'|'save'|'cancel'} type Type of button to create.
 //  @returns {HTMLElement}
-function getModeToggleButtonDOMElement( locale, forPreview ) {
+function getButtonDOMElement( locale, type ) {
 	const t = locale.t;
 	const buttonView = new ButtonView( locale );
 
 	buttonView.set( {
 		tooltipPosition: 'sw',
 		icon: pencilIcon,
-		class: 'raw-html__mode-toggle-button',
 		tooltip: true
 	} );
 
 	buttonView.render();
 
-	if ( forPreview ) {
-		buttonView.icon = eyeIcon;
-		buttonView.label = t( 'Show preview' );
+	if ( type === 'edit' ) {
+		buttonView.set( {
+			icon: pencilIcon,
+			label: t( 'Edit source' ),
+			class: 'raw-html__edit-button'
+		} );
+	} else if ( type === 'save' ) {
+		buttonView.set( {
+			icon: checkIcon,
+			label: t( 'Save changes' ),
+			class: 'raw-html__save-button'
+		} );
 	} else {
-		buttonView.icon = pencilIcon;
-		buttonView.label = t( 'Edit source' );
+		buttonView.set( {
+			icon: cancelIcon,
+			label: t( 'Cancel' ),
+			class: 'raw-html__cancel-button'
+		} );
 	}
 
 	buttonView.destroy();

+ 3 - 1
packages/ckeditor5-html-embed/theme/htmlembed.css

@@ -10,8 +10,10 @@
 	position: relative;
 
 	/* The switch mode button wrapper. */
-	& .raw-html__mode-toggle-wrapper {
+	& .raw-html__buttons-wrapper {
 		position: absolute;
+		display: flex;
+		flex-direction: column;
 	}
 
 	/* Using the feature with enabled previews in data. */

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 1
packages/ckeditor5-html-embed/theme/icons/eye.svg


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

@@ -18,9 +18,21 @@
 	}
 
 	/* The switch mode button wrapper. */
-	& .raw-html__mode-toggle-wrapper {
+	& .raw-html__buttons-wrapper {
 		top: var(--ck-spacing-standard);
 		right: var(--ck-spacing-standard);
+
+		& .ck-button.raw-html__save-button {
+			color: var(--ck-color-button-save);
+		}
+
+		& .ck-button.raw-html__cancel-button {
+			color: var(--ck-color-button-cancel);
+		}
+
+		& .ck-button:not(:first-child) {
+			margin-top: var(--ck-spacing-small);
+		}
 	}
 
 	/* The edit source element. */