[DE embed] Add submit button

apps/common/embed/resources/img/icon-menu-sprite.svg

@@ -117,7 +117,7 @@
 <path id="Vector_8" d="M317 26H311V25C311 24.45 310.55 24 310 24H303C302.45 24 302 24.45 302 25V36C302 36.55 302.45 37 303 37H317C317.55 37 318 36.55 318 36V27C318 26.45 317.55 26 317 26ZM317 36H303V25H310V27H317V36Z" fill="white"/>
 <path id="Union_9" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 33.6465L310.354 34.3536L313.207 31.5L310.354 28.6465L309.646 29.3536L311.268 30.9747H306V31.9747H311.318L309.646 33.6465Z" fill="white"/>
 </g>
-<g id="arrow-bottom">
+<g id="arrow-down">
 <path id="Union_10" fill-rule="evenodd" clip-rule="evenodd" d="M331 23H330V34.2929L325.354 29.6464L324.646 30.3536L330.146 35.8536L330.5 36.2071L330.854 35.8536L336.354 30.3536L335.646 29.6464L331 34.2929V23Z" fill="white"/>
 </g>
 <g id="edit_2">
@@ -133,13 +133,13 @@
 <path id="Vector_10" d="M317 6H311V5C311 4.45 310.55 4 310 4H303C302.45 4 302 4.45 302 5V16C302 16.55 302.45 17 303 17H317C317.55 17 318 16.55 318 16V7C318 6.45 317.55 6 317 6ZM317 16H303V5H310V7H317V16Z" fill="black"/>
 <path id="Union_11" fill-rule="evenodd" clip-rule="evenodd" d="M309.646 13.6465L310.354 14.3536L313.207 11.5L310.354 8.64648L309.646 9.35359L311.268 10.9747H306V11.9747H311.318L309.646 13.6465Z" fill="black"/>
 </g>
-<g id="arrow-bottom_2">
+<g id="arrow-down_2">
 <path id="Union_12" fill-rule="evenodd" clip-rule="evenodd" d="M331 3H330V14.2929L325.354 9.64645L324.646 10.3536L330.146 15.8536L330.5 16.2071L330.854 15.8536L336.354 10.3536L335.646 9.64645L331 14.2929V3Z" fill="black"/>
 </g>
-<g id="arrow-top">
+<g id="arrow-up">
 <path id="Union_13" fill-rule="evenodd" clip-rule="evenodd" d="M350 36.207L351 36.207L351 24.9141L355.646 29.5606L356.354 28.8535L350.854 23.3535L350.5 22.9999L350.146 23.3535L344.646 28.8535L345.354 29.5606L350 24.9141L350 36.207Z" fill="white"/>
 </g>
-<g id="arrow-top_2">
+<g id="arrow-up_2">
 <path id="Union_14" fill-rule="evenodd" clip-rule="evenodd" d="M350 16.207L351 16.207L351 4.91414L355.646 9.56059L356.354 8.85348L350.854 3.35348L350.5 2.99993L350.146 3.35348L344.646 8.85348L345.354 9.56059L350 4.91414L350 16.207Z" fill="black"/>
 </g>
 <g id="close">

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

@@ -63,6 +63,10 @@
 @controlBtnHoverBottomColor:    #8AACF1;
 @btnColor:                      #d8dadc;
 @btnActiveColor:                #7d858c;
+@btnColored:                    #446995;
+@btnActiveColored:              #293F59;
+@btnHoverColored:               #375478;
+
 @iconSpriteCommonPath:          "../../../../common/embed/resources/img/glyphicons.png";
 @icon-socnet-size: 40px;
 
@@ -248,6 +252,24 @@
         padding-right: 5px;
     }
 
+    &.colored {
+        padding: 0 14px;
+        height: 28px;
+        background-color: @btnColored;
+        border-radius: 3px;
+        color: #ffffff;
+    }
+
+    // Hover state
+    &:hover {
+        text-decoration: none;
+        background-color: @btnColor;
+
+        &.colored {
+            background-color: @btnHoverColored;
+        }
+    }
+
     &:active {
         &, .btn-icon {
             background-position-y: -@icon-height !important;
@@ -256,12 +278,10 @@
         &.has-caption {
             color: #ffffff
         }
-    }
 
-    // Hover state
+        &.colored {
-    &:hover {
+            background-color: @btnActiveColored;
-        text-decoration: none;
+        }
-        background-color: @btnColor;
     }
 
 // Focus state for keyboard and accessibility
@@ -506,10 +526,10 @@
         background-position: -@icon-width*11 0;
     }
 
-    &.arrow-top {
+    &.arrow-up {
         background-position: -@icon-width*17 0;
     }
-    &.arrow-bottom {
+    &.arrow-down {
         background-position: -@icon-width*16 0;
     }
     &.clear-style {

apps/documenteditor/embed/index.html

@@ -188,15 +188,16 @@
       <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 arrow-top margin-right-small"></button><!--
+              <button id="id-btn-prev-field" class="control-btn svg-icon arrow-up margin-right-small"></button><!--
-              --><button id="id-btn-next-field" class="control-btn has-caption margin-right-large"><span class="btn-icon svg-icon arrow-bottom"></span><span class="caption"></span></button><!--
+              --><button id="id-btn-next-field" class="control-btn has-caption margin-right-large"><span class="btn-icon svg-icon arrow-down"></span><span class="caption"></span></button><!--
               --><button id="id-btn-clear-fields" class="control-btn has-caption"><span class="btn-icon svg-icon clear-style"></span><span class="caption"></span></button>
           </div>
           <div class="group center">
               <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>
+              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-pages" 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>
               <div id="box-tools" class="dropdown">
                   <button class="control-btn svg-icon more-vertical"></button>
               </div>

apps/documenteditor/embed/js/ApplicationController.js

@@ -373,6 +373,7 @@ DE.ApplicationController = new(function(){
         var licType = params.asc_getLicenseType();
         appOptions.canLicense     = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
         appOptions.canFillForms   = appOptions.canLicense && (permissions.fillForms===true) && (config.mode !== 'view');
+        appOptions.canSubmitForms = appOptions.canLicense && (typeof (config.customization) == 'object') && !!config.customization.submitForm;
 
         api.asc_setViewMode(!appOptions.canFillForms);
 
@@ -380,9 +381,12 @@ DE.ApplicationController = new(function(){
             $('#id-btn-prev-field').hide();
             $('#id-btn-next-field').hide();
             $('#id-btn-clear-fields').hide();
+            $('#id-btn-submit').hide();
         } else {
+            $('#id-pages').hide();
             $('#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);
             });
@@ -392,6 +396,15 @@ DE.ApplicationController = new(function(){
             $('#id-btn-clear-fields').on('click', function(){
                 api.asc_ClearAllSpecialForms();
             });
+
+            if (appOptions.canSubmitForms) {
+                $('#id-btn-submit .caption').text(me.textSubmit);
+                $('#id-btn-submit').on('click', function(){
+                    api.asc_SendForm();
+                });
+            } else
+                $('#id-btn-submit').hide();
+
             api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyForms);
             api.asc_SetFastCollaborative(true);
             api.asc_setAutoSaveGap(1);
@@ -648,6 +661,7 @@ DE.ApplicationController = new(function(){
         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.',
         textNext: 'Next Field',
-        textClear: 'Clear All Fields'
+        textClear: 'Clear All Fields',
+        textSubmit: 'Submit'
     }
 })();