From 3eb07133953bf8e6e4433f36818f3e0d453b70a7 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Wed, 18 Aug 2021 21:29:47 +0300
Subject: [PATCH] [DE forms] Use button component
---
apps/common/forms/resources/less/common.less | 54 ++++++-------------
.../app/controller/ApplicationController.js | 22 +++-----
.../forms/app/view/ApplicationView.js | 39 ++++++++------
apps/documenteditor/forms/index.html | 15 +++---
4 files changed, 50 insertions(+), 80 deletions(-)
diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less
index 18aaf35da..983d6ed69 100644
--- a/apps/common/forms/resources/less/common.less
+++ b/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;
diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js
index c8165345f..b1eb11ff9 100644
--- a/apps/documenteditor/forms/app/controller/ApplicationController.js
+++ b/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();
- $('#id-btn-next-field').hide();
- $('#id-btn-clear-fields').hide();
+ me.view.btnPrev.setVisible(false);
+ me.view.btnNext.setVisible(false);
+ me.view.btnClear.setVisible(false);
btnSubmit.hide();
} else {
- $('#id-pages').hide();
- $('#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.view.btnPrev.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;
diff --git a/apps/documenteditor/forms/app/view/ApplicationView.js b/apps/documenteditor/forms/app/view/ApplicationView.js
index 7375cd5fe..cc0d8d5ce 100644
--- a/apps/documenteditor/forms/app/view/ApplicationView.js
+++ b/apps/documenteditor/forms/app/view/ApplicationView.js
@@ -36,22 +36,25 @@ define([
});
this.btnOptions.render($('#box-tools'));
- // $btnTools = $('#box-tools button');
- // $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
- // $btnTools.parent().append(
- // '<ul class="dropdown-menu pull-right">' +
- // '<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
- // '<li class="divider"></li>' +
- // '<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>' +
- // '<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' +
- // '<li class="divider"></li>' +
- // '<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
- // '<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>' +
- // '<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>' +
- // '</ul>');
+ this.btnClear = new Common.UI.Button({
+ cls: 'btn-toolbar',
+ iconCls: 'svg-icon clear-style',
+ caption: this.textClear
+ });
+ this.btnClear.render($('#id-btn-clear-fields'));
+
+ this.btnNext = new Common.UI.Button({
+ cls: 'btn-toolbar',
+ iconCls: 'svg-icon arrow-down',
+ caption: this.textNext
+ });
+ this.btnNext.render($('#id-btn-next-field'));
+
+ this.btnPrev = new Common.UI.Button({
+ 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'
});
});
\ No newline at end of file
diff --git a/apps/documenteditor/forms/index.html b/apps/documenteditor/forms/index.html
index f48095ca7..aa4d60cdd 100644
--- a/apps/documenteditor/forms/index.html
+++ b/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><!--
- --><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>
+ <span id="id-btn-prev-field" class="margin-right-small"></span>
+ <span id="id-btn-next-field" class="margin-right-large"></span>
+ <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"><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" 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-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>