From 948731ccff24677dcdc8d6d2e64477d33d3244ba Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Tue, 1 Jun 2021 15:41:59 +0300
Subject: [PATCH] [DE embed] Add tooltip for disabled submit button

---
 apps/common/embed/resources/less/common.less  | 14 ++++++++++++-
 apps/documenteditor/embed/index.html          |  2 +-
 apps/documenteditor/embed/index.html.deploy   |  2 +-
 apps/documenteditor/embed/index_loader.html   |  2 +-
 .../embed/index_loader.html.deploy            |  2 +-
 .../embed/js/ApplicationController.js         | 20 ++++++++++++++++++-
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less
index 3c2dd271c0..54012b65b5 100644
--- a/apps/common/embed/resources/less/common.less
+++ b/apps/common/embed/resources/less/common.less
@@ -683,9 +683,13 @@
         border: 1px solid rgba(0,0,0,0.15);
         color: #333;
         font-weight: bold;
-        line-height: 26px;
         font-size: 11px;
         box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+
+        padding: 5px 12px;
+        white-space: pre-wrap;
+        text-align: left;
+        word-wrap: break-word;
     }
 
     .tooltip-arrow {
@@ -764,4 +768,12 @@
         padding: 3px 12px;
         margin-top: 10px;
     }
+}
+
+.tooltip {
+    .tooltip-inner {
+        .toolbar & {
+            font-weight: normal;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/embed/index.html b/apps/documenteditor/embed/index.html
index fe9d9a3a9e..bd9ab347c2 100644
--- a/apps/documenteditor/embed/index.html
+++ b/apps/documenteditor/embed/index.html
@@ -198,7 +198,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <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>
diff --git a/apps/documenteditor/embed/index.html.deploy b/apps/documenteditor/embed/index.html.deploy
index 4cdbc7f05b..b2bfd8c2b2 100644
--- a/apps/documenteditor/embed/index.html.deploy
+++ b/apps/documenteditor/embed/index.html.deploy
@@ -190,7 +190,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <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>
diff --git a/apps/documenteditor/embed/index_loader.html b/apps/documenteditor/embed/index_loader.html
index 842ca96115..75cf5466f1 100644
--- a/apps/documenteditor/embed/index_loader.html
+++ b/apps/documenteditor/embed/index_loader.html
@@ -299,7 +299,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <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>
diff --git a/apps/documenteditor/embed/index_loader.html.deploy b/apps/documenteditor/embed/index_loader.html.deploy
index d0bcf12f89..6222ab1b2e 100644
--- a/apps/documenteditor/embed/index_loader.html.deploy
+++ b/apps/documenteditor/embed/index_loader.html.deploy
@@ -291,7 +291,7 @@
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button>
+              <div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
               <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>
diff --git a/apps/documenteditor/embed/js/ApplicationController.js b/apps/documenteditor/embed/js/ApplicationController.js
index a30bffbb41..e2aa0592d0 100644
--- a/apps/documenteditor/embed/js/ApplicationController.js
+++ b/apps/documenteditor/embed/js/ApplicationController.js
@@ -166,6 +166,7 @@ DE.ApplicationController = new(function(){
                     _submitFail = false;
                     $submitedTooltip && $submitedTooltip.hide();
                     btnSubmit.attr({disabled: true});
+                    btnSubmit.css("pointer-events", "none");
                 break;
             default:
                 text = me.waitText;
@@ -181,6 +182,7 @@ DE.ApplicationController = new(function(){
     function onLongActionEnd(type, id){
         if (id==Asc.c_oAscAsyncAction['Submit']) {
             btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
             if (!_submitFail) {
                 if (!$submitedTooltip) {
                     $submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + me.textSubmited + '</div>');
@@ -254,7 +256,10 @@ DE.ApplicationController = new(function(){
     }
 
     function onFillRequiredFields() {
-        btnSubmit && btnSubmit.removeAttr('disabled');
+        if (btnSubmit) {
+            btnSubmit.removeAttr('disabled');
+            btnSubmit.css("pointer-events", "auto");
+        }
         $requiredTooltip && $requiredTooltip.hide();
     }
 
@@ -417,7 +422,9 @@ DE.ApplicationController = new(function(){
         // TODO: add asc_hasRequiredFields to sdk
         /*
         if (appOptions.canSubmitForms && api.asc_hasRequiredFields()) {
+            var sgroup = $('#id-submit-group');
             btnSubmit.attr({disabled: true});
+            btnSubmit.css("pointer-events", "none");
             if (!common.localStorage.getItem("de-embed-hide-submittip")) {
                 var offset = btnSubmit.offset();
                 $requiredTooltip = $('<div class="required-tooltip bottom-left" style="display:none;"><div class="tip-arrow bottom-left"></div><div>' + me.textRequired + '</div><div class="close-div">' + me.textGotIt + '</div></div>');
@@ -426,8 +433,19 @@ DE.ApplicationController = new(function(){
                 $requiredTooltip.find('.close-div').on('click', function() {
                     $requiredTooltip.hide();
                     common.localStorage.setItem("de-embed-hide-submittip", 1);
+                    sgroup.attr('data-toggle', 'tooltip');
+                    sgroup.tooltip({
+                        title       : me.textRequired,
+                        placement   : 'bottom'
+                    });
                 });
                 $requiredTooltip.show();
+            } else {
+                sgroup.attr('data-toggle', 'tooltip');
+                sgroup.tooltip({
+                    title       : me.textRequired,
+                    placement   : 'bottom'
+                });
             }
         }
         */