Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE forms] Use button component

Browse source
This commit is contained in:
Julia Radzhabova 2021-08-18 21:29:47 +03:00
parent b6ee27af27
commit 3eb0713395
4 changed files with 50 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
apps/common/forms/resources/less/common.less
View file

@ -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;

22
apps/documenteditor/forms/app/controller/ApplicationController.js
View file

@ -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;

39
apps/documenteditor/forms/app/view/ApplicationView.js
View file

@ -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'
});
});

15
apps/documenteditor/forms/index.html
View file

@ -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>