[DE embed] Change fill form mode

apps/common/embed/resources/less/common.less

@@ -243,21 +243,25 @@
     background-origin: content-box;
     padding: 0 1px;
 
+    &.has-caption {
+        width: auto;
+        padding-right: 5px;
+    }
+
     &:active {
+        &, .btn-icon {
             background-position-y: -@icon-height !important;
         }
 
-    //margin: 0;
+        &.has-caption {
-
+            color: #ffffff
-    &.no-caption {
+        }
-        padding: 1px 2px;
     }
 
-// Hover state
+    // Hover state
     &:hover {
-        color: @toolbarHoverColor;
         text-decoration: none;
-        text-shadow: 0 1px 0 @toolbarBorderShadowColor;
+        background-color: @btnColor;
     }
 
 // Focus state for keyboard and accessibility
@@ -516,6 +520,12 @@
     float: left;
     margin: 0 15px 0 -35px;
 }
+.btn-icon {
+    width: 24px;
+    height: 22px;
+    display: inline-block;
+    vertical-align: middle;
+}
 
 .btn, button {
     &:focus, &:active:focus {
@@ -599,6 +609,7 @@
 }
 
 #box-tools {
+    display: inline-block;
     a {
         cursor: pointer;
     }

apps/documenteditor/embed/index.html

@@ -185,11 +185,12 @@
       <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>
-              <button id="id-btn-prev-field" class="control-btn svg-icon form-prev margin-right-small"></button>
+              <button id="id-btn-prev-field" class="control-btn svg-icon form-prev margin-right-small"></button><!--
-              <button id="id-btn-next-field" class="control-btn svg-icon form-next"></button>
+              --><button id="id-btn-next-field" class="control-btn has-caption margin-right-large"><span class="btn-icon svg-icon form-next"></span><span class="caption"></span></button><!--
+              --><button id="id-btn-clear-fields" class="control-btn has-caption"><span class="btn-icon svg-icon form-next"></span><span class="caption"></span></button>
           </div>
           <div class="group center">
-              <span id="title-doc-name">ffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffff</span>
+              <span id="title-doc-name"></span>
           </div>
           <div class="group right">
               <div class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>

apps/documenteditor/embed/js/ApplicationController.js

@@ -369,20 +369,30 @@ DE.ApplicationController = new(function(){
         }
         var licType = params.asc_getLicenseType();
         var canFillForms   = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit) && (permissions.fillForms===true) && (config.mode !== 'view');
+
+        api.asc_setViewMode(!canFillForms);
+
         if (!canFillForms) {
             $('#id-btn-prev-field').hide();
             $('#id-btn-next-field').hide();
+            $('#id-btn-clear-fields').hide();
         } else {
+            $('#id-btn-next-field .caption').text(me.textNext);
+            $('#id-btn-clear-fields .caption').text(me.textClear);
             $('#id-btn-prev-field').on('click', function(){
                 api.asc_MoveToFillingForm(false);
             });
             $('#id-btn-next-field').on('click', function(){
                 api.asc_MoveToFillingForm(true);
             });
+            $('#id-btn-clear-fields').on('click', function(){
+                api.asc_ClearAllSpecialForms();
+            });
+            api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyForms);
+            api.asc_SetFastCollaborative(true);
+            api.asc_setAutoSaveGap(1);
         }
 
-        api.asc_setViewMode(!canFillForms);
-        canFillForms && api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyForms);
         api.asc_LoadDocument();
         api.Resize();
     }
@@ -623,6 +633,8 @@ DE.ApplicationController = new(function(){
         textLoadingDocument: 'Loading document',
         txtClose: 'Close',
         errorFileSizeExceed: 'The file size exceeds the limitation set for your server.<br>Please contact your Document Server administrator for details.',
-        errorUpdateVersionOnDisconnect: 'Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.'
+        errorUpdateVersionOnDisconnect: 'Internet connection has been restored, and the file version has been changed.<br>Before you can continue working, you need to download the file or copy its content to make sure nothing is lost, and then reload this page.',
+        textNext: 'Next Field',
+        textClear: 'Clear All Fields'
     }
 })();