[DE forms] Use button component

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

@@ -112,6 +112,9 @@
 
     font-size: @toolbarFontSize;
     overflow: hidden;
+
+    color: @text-normal-ie;
+    color: @text-normal;
 }
 
 // Document Viewer
@@ -578,6 +581,18 @@
     }
 }
 
+.btn {
+    &.active, &:active {
+        &:not(:disabled):not(.disabled) {
+            .icon {
+                @btn-active-icon-offset: -20px;
+                background-position-y: @btn-active-icon-offset;
+                background-position-y: var(--button-small-active-icon-offset-x, 0);
+            }
+        }
+    }
+}
+
 .mi-icon {
     width: @icon-width;
     height: @icon-height;
@@ -591,14 +606,6 @@
     vertical-align: middle;
 }
 
-//.btn, button {
-//    &:focus, &:active:focus {
-//        outline: 0 none;
-//    }
-//
-//    background-color: @btnColor;
-//}
-
 .modal-dialog {
     margin-top: 100px;
     .share-buttons {
@@ -653,37 +660,6 @@
     }
 }
 
-//.dropdown-menu {
-//    > li > a {
-//        padding: 8px 20px 8px 28px;
-//        &:hover, &:focus {
-//            background-color: @btnColor;
-//            outline: 0 none;
-//        }
-//        font-size: @buttonFontSize;
-//    }
-//
-//    .divider {
-//        margin: 4px 0;
-//    }
-//}
-//
-//.dropdown {
-//    &.open {
-//        > button {
-//            background-color: @btnActiveColor !important;
-//            background-position: -@icon-width*14 -@icon-height;
-//        }
-//    }
-//}
-//
-//#box-tools {
-//    display: inline-block;
-//    a {
-//        cursor: pointer;
-//    }
-//}
-
 .masked {
     background-color: transparent;
     border-color: transparent;

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

@@ -326,7 +326,6 @@ define([
             if (this.embedConfig.toolbarDocked === 'bottom') {
                 $('#toolbar').addClass('bottom');
                 this.boxSdk.addClass('bottom');
-                // $('#box-tools').removeClass('dropdown').addClass('dropup');
                 ttOffset[1] = -40;
             } else {
                 $('#toolbar').addClass('top');
@@ -509,24 +508,20 @@ define([
 
             btnSubmit = $('#id-btn-submit');
 
+            var me = this;
             if (!this.appOptions.canFillForms) {
-                $('#id-btn-prev-field').hide();
+                me.view.btnPrev.setVisible(false);
-                $('#id-btn-next-field').hide();
+                me.view.btnNext.setVisible(false);
-                $('#id-btn-clear-fields').hide();
+                me.view.btnClear.setVisible(false);
                 btnSubmit.hide();
             } else {
-                $('#id-pages').hide();
+                me.view.btnPrev.on('click', function(){
-                $('#id-btn-next-field .caption').text(this.textNext);
-                $('#id-btn-clear-fields .caption').text(this.textClear);
-
-                var me = this;
-                $('#id-btn-prev-field').on('click', function(){
                     me.api.asc_MoveToFillingForm(false);
                 });
-                $('#id-btn-next-field').on('click', function(){
+                me.view.btnNext.on('click', function(){
                     me.api.asc_MoveToFillingForm(true);
                 });
-                $('#id-btn-clear-fields').on('click', function(){
+                me.view.btnClear.on('click', function(){
                     me.api.asc_ClearAllSpecialForms();
                 });
 
@@ -906,9 +901,6 @@ define([
             var zf = (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom) : -2);
             (zf == -1) ? this.api.zoomFitToPage() : ((zf == -2) ? this.api.zoomFitToWidth() : this.api.zoom(zf>0 ? zf : 100));
 
-            // var dividers = $('#box-tools .divider');
-            // var itemsCount = $('#box-tools a').length;
-            //
             var menuItems = this.view.btnOptions.menu.items;
             var itemsCount = menuItems.length-3;
 

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

@@ -36,22 +36,25 @@ define([
             });
             this.btnOptions.render($('#box-tools'));
 
-            // $btnTools = $('#box-tools button');
+            this.btnClear = new Common.UI.Button({
-            // $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
+                cls: 'btn-toolbar',
-            // $btnTools.parent().append(
+                iconCls: 'svg-icon clear-style',
-            //     '<ul class="dropdown-menu pull-right">' +
+                caption: this.textClear
-            //     '<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
+            });
-            //     '<li class="divider"></li>' +
+            this.btnClear.render($('#id-btn-clear-fields'));
-            //     '<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
+
-            //     '<li><a id="idt-download-docx"><span class="mi-icon svg-icon download"></span>' + this.txtDownloadDocx + '</a></li>' +
+            this.btnNext = new Common.UI.Button({
-            //     '<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' +
+                cls: 'btn-toolbar',
-            //     '<li class="divider"></li>' +
+                iconCls: 'svg-icon arrow-down',
-            //     '<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
+                caption: this.textNext
-            //     '<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' +
+            });
-            //     '<li class="divider"></li>' +
+            this.btnNext.render($('#id-btn-next-field'));
-            //     '<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' +
+
-            //     '<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' +
+            this.btnPrev = new Common.UI.Button({
-            //     '</ul>');
+                cls: 'btn-toolbar',
+                iconCls: 'svg-icon arrow-up'
+            });
+            this.btnPrev.render($('#id-btn-prev-field'));
             return this;
         },
 
@@ -77,6 +80,8 @@ define([
         txtFullScreen: 'Full Screen',
         txtFileLocation: 'Open file location',
         txtDownloadDocx: 'Download as docx',
-        txtDownloadPdf: 'Download as pdf'
+        txtDownloadPdf: 'Download as pdf',
+        textNext: 'Next Field',
+        textClear: 'Clear All Fields'
     });
 });

apps/documenteditor/forms/index.html

@@ -115,7 +115,7 @@
     <![endif]-->
   </head>
 
-  <body class="embed-body">
+  <body class="embed-body theme-classic-light theme-type-light">
       <script src="../../common/main/lib/util/htmlutils.js"></script>
       <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="brand-logo loading-logo"><img src=""></div><div class="doc-title"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
@@ -190,20 +190,17 @@
       <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-up margin-right-small"></button><!--
+              <span id="id-btn-prev-field" class="margin-right-small"></span>
-              --><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><!--
+              <span id="id-btn-next-field" class="margin-right-large"></span>
-              --><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>
+              <span id="id-btn-clear-fields"></span>
           </div>
           <div class="group center">
               <span id="title-doc-name"></span>
           </div>
           <div class="group right">
-              <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" style="vertical-align: middle;"><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="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="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-left-small margin-right-small colored"><span class="caption"></span></button></div>
               <span id="box-tools"></span>
-              <!--<div id="box-tools" class="dropdown">-->
-                  <!--<button class="control-btn svg-icon more-vertical"></button>-->
-              <!--</div>-->
           </div>
       </div>