IBX-6078: Added Revert to saved button (#117)

ibexa · Aug 22, 2023 · 88f4447 · 88f4447
1 parent f0c61c1
commit 88f4447
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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;