[Forms] Add undo/redo buttons to the toolbar, add Clear field to context menu

apps/common/forms/resources/less/common.less

@@ -202,6 +202,13 @@
                 text-overflow: ellipsis;
             }
         }
+
+        .separator {
+            height: 22px;
+            margin: 0 9px;
+            border-left: 1px solid @border-divider-ie;
+            border-left: 1px solid @border-divider;
+        }
     }
 
     .margin-right-small {

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -603,6 +603,9 @@ define([
                 me.view.btnPrev.setVisible(false);
                 me.view.btnNext.setVisible(false);
                 me.view.btnClear.setVisible(false);
+                me.view.btnUndo.setVisible(false);
+                me.view.btnRedo.setVisible(false);
+                me.view.btnRedo.$el.next().hide();
             } else {
                 me.view.btnPrev.on('click', function(){
                     me.api.asc_MoveToFillingForm(false);
@@ -626,6 +629,12 @@ define([
                         }
                     }
                 });
+                me.view.btnUndo.on('click', function(){
+                    me.api.Undo(false);
+                });
+                me.view.btnRedo.on('click', function(){
+                    me.api.Redo(false);
+                });
 
                 this.api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyForms);
                 this.api.asc_SetFastCollaborative(true);
@@ -1363,6 +1372,8 @@ define([
             if (this.appOptions.canFillForms) {
                 this.api.asc_registerCallback('asc_onShowContentControlsActions', _.bind(this.onShowContentControlsActions, this));
                 this.api.asc_registerCallback('asc_onHideContentControlsActions', _.bind(this.onHideContentControlsActions, this));
+                this.api.asc_registerCallback('asc_onCanUndo', _.bind(this.onApiCanRevert, this, 'undo'));
+                this.api.asc_registerCallback('asc_onCanRedo', _.bind(this.onApiCanRevert, this, 'redo'));
                 this.api.asc_SetHighlightRequiredFields(true);
                 Common.Gateway.on('insertimage',        _.bind(this.insertImage, this));
                 Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this)); // try to load image from storage
@@ -1800,9 +1811,10 @@ define([
                 this.textMenu.items[0].setDisabled(disabled || !this.api.asc_getCanUndo()); // undo
                 this.textMenu.items[1].setDisabled(disabled || !this.api.asc_getCanRedo()); // redo
 
-                this.textMenu.items[3].setDisabled(disabled || !cancopy); // cut
+                this.textMenu.items[3].setDisabled(disabled); // clear
-                this.textMenu.items[4].setDisabled(!cancopy); // copy
+                this.textMenu.items[5].setDisabled(disabled || !cancopy); // cut
-                this.textMenu.items[5].setDisabled(disabled) // paste;
+                this.textMenu.items[6].setDisabled(!cancopy); // copy
+                this.textMenu.items[7].setDisabled(disabled) // paste;
 
                 this.showPopupMenu(this.textMenu, {}, event);
             }
@@ -1832,6 +1844,9 @@ define([
                         }
                     }
                     break;
+                case 'clear':
+                    this.api && this.api.asc_ClearSpecialForm();
+                    break;
             }
         },
 
@@ -1839,6 +1854,8 @@ define([
             this._state.isDisconnected = true;
             this._isDisabled = true;
             this.view && this.view.btnClear && this.view.btnClear.setDisabled(true);
+            this.view && this.view.btnUndo && this.view.btnUndo.setDisabled(true);
+            this.view && this.view.btnRedo && this.view.btnRedo.setDisabled(true);
             if (!enableDownload) {
                 this.appOptions.canPrint = this.appOptions.canDownload = false;
                 this.view && this.view.btnDownload.setDisabled(true);
@@ -1852,6 +1869,12 @@ define([
             }
         },
 
+        onApiCanRevert: function(which, can) {
+            if (!this.view) return;
+
+            (which=='undo') ? this.view.btnUndo.setDisabled(!can) : this.view.btnRedo.setDisabled(!can);
+        },
+
         errorDefaultMessage     : 'Error code: %1',
         unknownErrorText        : 'Unknown error.',
         convertationTimeoutText : 'Conversion timeout exceeded.',

apps/documenteditor/forms/app/view/ApplicationView.js

@@ -89,6 +89,20 @@ define([
             });
             this.btnPrev.render($('#id-btn-prev-field'));
 
+            this.btnUndo = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'svg-icon undo',
+                hint: this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z')
+            });
+            this.btnUndo.render($('#id-btn-undo'));
+
+            this.btnRedo = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'svg-icon redo',
+                hint: this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y')
+            });
+            this.btnRedo.render($('#id-btn-redo'));
+
             this.btnSubmit = new Common.UI.Button({
                 cls: 'btn-text-default colored margin-left-small margin-right-small',
                 caption: this.textSubmit
@@ -121,6 +135,8 @@ define([
                     { caption: this.textUndo, value: 'undo', iconCls: 'mi-icon svg-icon undo' },
                     { caption: this.textRedo, value: 'redo', iconCls: 'mi-icon svg-icon redo' },
                     { caption: '--' },
+                    { caption: this.textClearField, value: 'clear', iconCls: 'mi-icon svg-icon clear-style' },
+                    { caption: '--' },
                     { caption: this.textCut, value: 'cut', iconCls: 'mi-icon svg-icon cut' },
                     { caption: this.textCopy, value: 'copy', iconCls: 'mi-icon svg-icon copy' },
                     { caption: this.textPaste, value: 'paste', iconCls: 'mi-icon svg-icon paste' }
@@ -150,7 +166,10 @@ define([
         textZoom: 'Zoom',
         textFitToPage: 'Fit to Page',
         textFitToWidth: 'Fit to Width',
-        txtSearch: 'Search'
+        txtSearch: 'Search',
+        tipUndo: 'Undo',
+        tipRedo: 'Redo',
+        textClearField: 'Clear field'
 
     }, DE.Views.ApplicationView || {}));
 });

apps/documenteditor/forms/index.html

@@ -259,7 +259,10 @@
       <div class="toolbar" id="toolbar">
           <div class="group left">
               <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
-              <span id="id-btn-prev-field" class="margin-right-small"></span>
+              <span id="id-btn-undo" class="margin-right-small"></span>
+              <span id="id-btn-redo" class="margin-right-small"></span>
+              <div class="separator"></div>
+              <span id="id-btn-prev-field" class="margin-left-small margin-right-small"></span>
               <span id="id-btn-next-field" class="margin-right-large"></span>
               <span id="id-btn-clear-fields"></span>
           </div>

apps/documenteditor/forms/index.html.deploy

@@ -241,7 +241,10 @@
       <div class="toolbar" id="toolbar">
           <div class="group left">
               <div class="margin-right-large"><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></div>
-              <span id="id-btn-prev-field" class="margin-right-small"></span>
+              <span id="id-btn-undo" class="margin-right-small"></span>
+              <span id="id-btn-redo" class="margin-right-small"></span>
+              <div class="separator"></div>
+              <span id="id-btn-prev-field" class="margin-left-small margin-right-small"></span>
               <span id="id-btn-next-field" class="margin-right-large"></span>
               <span id="id-btn-clear-fields"></span>
           </div>

apps/documenteditor/forms/locale/en.json

@@ -180,5 +180,8 @@
   "DE.Views.ApplicationView.txtPrint": "Print",
   "DE.Views.ApplicationView.txtSearch": "Search",
   "DE.Views.ApplicationView.txtShare": "Share",
-  "DE.Views.ApplicationView.txtTheme": "Interface theme"
+  "DE.Views.ApplicationView.txtTheme": "Interface theme",
+  "DE.Views.ApplicationView.tipUndo": "Undo",
+  "DE.Views.ApplicationView.tipRedo": "Redo",
+  "DE.Views.ApplicationView.textClearField": "Clear field"
 }