diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js index d76338b4..262ee9be 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js @@ -51,6 +51,10 @@ class IbexaAttributesUI extends Plugin { this.hideForm(); }); + this.listenTo(formView, 'revert-custom-attributes', () => { + this.hideForm(); + }); + return formView; } diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js index 0136970e..a38d435b 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js @@ -18,6 +18,7 @@ class IbexaCustomAttributesFormView extends View { this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-custom-attributes'); this.cancelButtonView = this.createButton('Remove', null, 'ck-button-cancel', 'remove-custom-attributes'); + this.revertButtonView = this.createButton('Revert to saved', null, 'ck-button-revert', 'revert-custom-attributes'); this.attributeViews = {}; this.classesView = null; @@ -71,7 +72,7 @@ class IbexaCustomAttributesFormView extends View { attributes: { class: 'ibexa-ckeditor-balloon-form__actions', }, - children: [this.saveButtonView, this.cancelButtonView], + children: [this.saveButtonView, this.revertButtonView, this.cancelButtonView], }, ], }, diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss index f7039506..990629c0 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/src/bundle/Resources/public/scss/_balloon-form.scss @@ -91,7 +91,12 @@ } } + &.ck-button-revert { + margin-right: calculateRem(8px); + } + &.ck-button-cancel, + &.ck-button-revert, &.ibexa-btn--select-content { color: $ibexa-color-primary; fill: $ibexa-color-primary;