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

[DE forms] Refactoring submit form

Browse source
This commit is contained in:
Julia Radzhabova 2021-08-19 23:09:18 +03:00
parent dc07380894
commit e92ee58308
6 changed files with 106 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -84,17 +84,17 @@
@toolbarBorderShadowColor: #FAFAFA;
@toolbarTopColor: #F7F7F7;
@toolbarBottomColor: #CCCCCC;
@toolbarHoverColor: #7698DE;
//@toolbarHoverColor: #7698DE;
@toolbarFontSize: 12px;
@buttonFontSize: 11px;
@controlBtnHoverTopColor: #6180C4;
@controlBtnHoverBottomColor: #8AACF1;
@btnColor: #d8dadc;
@btnActiveColor: #7d858c;
//@buttonFontSize: 11px;
//@controlBtnHoverTopColor: #6180C4;
//@controlBtnHoverBottomColor: #8AACF1;
//@btnColor: #d8dadc;
//@btnActiveColor: #7d858c;
@btnColored: #446995;
@btnActiveColored: #293F59;
@btnHoverColored: #375478;
@notificationColor: #fcfed7;
//@notificationColor: #fcfed7;
@iconSpriteCommonPath: "../../../../common/forms/resources/img/glyphicons.png";
@icon-socnet-size: 40px;
@ -248,6 +248,12 @@
.margin-right-large {
margin-right: 12px;
}
.margin-left-small {
margin-left: 8px;
}
.margin-left-large {
margin-left: 12px;
}
}
// Logo
@ -259,76 +265,25 @@
background: data-uri('../../../../common/forms/resources/img/logo.svg') no-repeat;
}
// Control buttons
// -------------------------
.control-btn {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
width: 22px;
height: 22px;
background-origin: content-box;
padding: 0 1px;
font-size: @buttonFontSize;
&.has-caption {
width: auto;
padding-right: 5px;
}
.btn-text-default {
&.colored {
padding: 0 16px;
height: 28px;
background-color: @btnColored;
border: 1px solid transparent;
border-radius: 3px;
color: #ffffff;
font-weight: 700;
}
// Hover state
&:hover:not(:disabled) {
text-decoration: none;
background-color: @btnColor;
&.colored {
background-color: @btnHoverColored;
}
}
&:active:not(:disabled) {
& {
background-position-y: -@icon-height !important;
&:hover:not(.disabled),
.over:not(.disabled) {
background-color: @btnHoverColored !important;
}
&.has-caption {
color: #ffffff
&:active:not(.disabled),
&.active:not(.disabled) {
background-color: @btnActiveColored !important;;
}
&.colored {
background-color: @btnActiveColored;
}
}
// Focus state for keyboard and accessibility
&:focus {
.tab-focus();
outline: none;
}
// Active state
&.active:not(:disabled),
&:active:not(:disabled) {
outline: none;
border: 1px solid @btnActiveColor;
background-color: @btnActiveColor;
}
&[disabled] {
opacity: 0.4;
}
}
@ -657,27 +612,6 @@
}
}
.tooltip {
.tooltip-inner {
background-color: #fff;
border: 1px solid rgba(0,0,0,0.15);
color: #333;
font-weight: bold;
font-size: 11px;
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
max-width: 350px;
padding: 5px 12px;
white-space: pre-wrap;
text-align: left;
word-wrap: break-word;
}
.tooltip-arrow {
display: none;
}
}
.submit-tooltip {
position: absolute;
z-index: 1000;
@ -686,68 +620,40 @@
padding: 7px 15px;
border-radius: 5px;
background-color: @notificationColor;
background-color: @background-notification-popover;
-webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
font-size: 11px;
}
.required-tooltip {
position: absolute;
z-index: 1000;
.synch-tip-root {
&.colored {
@tip-width: 240px;
width: @tip-width;
.tip-text {
width: @tip-width - 40px;
}
padding: 15px;
border-radius: 5px;
background-color: @btnColored;
color: #fff;
-webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
font-size: 11px;
&.bottom-left {
border-top-right-radius: 0;
margin: 15px 0 0 0;
.tip-arrow {
position: absolute;
overflow: hidden;
right: 0;
top: -15px;
width: 15px;
height: 15px;
.box-shadow(8px 5px 8px -5px rgba(0, 0, 0, 0.2));
&:after {
content: '';
position: absolute;
top: 8px;
left: 8px;
background-color: @btnColored;
width: 15px;
height: 15px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
.box-shadow(0 0 8px -1px rgba(0, 0, 0, 0.2));
.asc-synchronizetip {
background-color: @btnColored;
color: @text-toolbar-header;
.close {
&:before, &:after {
background-color: @text-toolbar-header;
}
}
}
}
.close-div {
display: inline-block;
border: 1px solid #fff;
border-radius: 2px;
padding: 3px 12px;
margin-top: 10px;
}
}
.tooltip {
.tooltip-inner {
.toolbar & {
font-weight: normal;
.tip-arrow:after {
background-color: @btnColored;
}
.btn-div {
display: inline-block;
border: 1px solid #fff;
border-radius: 2px;
padding: 3px 12px;
margin-top: 10px;
}
}
}

9
apps/common/main/lib/component/SynchronizeTip.js
View file

@ -44,7 +44,8 @@ define([
target : $(document.body),
text : '',
placement: 'right-bottom',
showLink: true
showLink: true,
showButton: false
},
template: _.template([
@ -58,6 +59,9 @@ define([
'<% if ( scope.showLink ) { %>',
'<div class="show-link"><label><%= scope.textLink %></label></div>',
'<% } %>',
'<% if ( scope.showButton ) { %>',
'<div class="btn-div"><%= scope.textButton %></div>',
'<% } %>',
'</div>',
'</div>'
].join('')),
@ -71,6 +75,8 @@ define([
this.textLink = !_.isEmpty(this.options.textLink) ? this.options.textLink : this.textDontShow;
this.placement = this.options.placement;
this.showLink = this.options.showLink;
this.showButton = this.options.showButton;
this.textButton = this.options.textButton || '';
},
render: function() {
@ -79,6 +85,7 @@ define([
$(document.body).append(this.cmpEl);
this.cmpEl.find('.close').on('click', _.bind(function() { this.trigger('closeclick');}, this));
this.cmpEl.find('.show-link label').on('click', _.bind(function() { this.trigger('dontshowclick');}, this));
this.cmpEl.find('.btn-div').on('click', _.bind(function() { this.trigger('buttonclick');}, this));
}
this.applyPlacement();

5
apps/common/main/resources/less/synchronize-tip.less
View file

@ -1,12 +1,13 @@
.synch-tip-root {
position: absolute;
z-index: @zindex-navbar + 2;
@tip-width: 300px;
&:not(.simple) {
width: 300px;
width: @tip-width;
.tip-text {
width: 260px;
width: @tip-width - 40px;
}
}

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

@ -5,6 +5,7 @@ define([
'common/main/lib/component/Window',
'common/main/lib/component/LoadMask',
'common/main/lib/component/Tooltip',
'common/main/lib/component/SynchronizeTip',
'common/main/lib/util/LocalStorage',
'common/main/lib/util/Shortcuts',
'documenteditor/forms/app/view/ApplicationView'
@ -14,8 +15,7 @@ define([
var LoadingDocument = -256,
maxPages = 0,
labelDocName,
btnSubmit,
_submitFail, $submitedTooltip, $requiredTooltip,
_submitFail,
screenTip,
mouseMoveData = null,
isTooltipHiding = false,
@ -195,8 +195,8 @@ define([
case Asc.c_oAscError.ID.Submit:
config.msg = this.errorSubmit;
// _submitFail = true;
// $submitedTooltip && $submitedTooltip.hide();
_submitFail = true;
this.submitedTooltip && this.submitedTooltip.hide();
break;
case Asc.c_oAscError.ID.EditingError:
@ -459,14 +459,12 @@ define([
AscCommon.UserInfoParser.setParser(true);
AscCommon.UserInfoParser.setCurrentName(this.appOptions.user.fullname);
btnSubmit = $('#id-btn-submit');
var me = this;
me.view.btnSubmit.setVisible(this.appOptions.canFillForms && this.appOptions.canSubmitForms);
if (!this.appOptions.canFillForms) {
me.view.btnPrev.setVisible(false);
me.view.btnNext.setVisible(false);
me.view.btnClear.setVisible(false);
btnSubmit.hide();
} else {
me.view.btnPrev.on('click', function(){
me.api.asc_MoveToFillingForm(false);
@ -477,14 +475,9 @@ define([
me.view.btnClear.on('click', function(){
me.api.asc_ClearAllSpecialForms();
});
if (this.appOptions.canSubmitForms) {
btnSubmit.find('.caption').text(this.textSubmit);
btnSubmit.on('click', function(){
me.api.asc_SendForm();
});
} else
btnSubmit.hide();
me.view.btnSubmit.on('click', function(){
me.api.asc_SendForm();
});
this.api.asc_setRestriction(Asc.c_oAscRestrictionType.OnlyForms);
this.api.asc_SetFastCollaborative(true);
@ -557,9 +550,9 @@ define([
break;
case Asc.c_oAscAsyncAction['Submit']:
_submitFail = false;
$submitedTooltip && $submitedTooltip.hide();
btnSubmit.attr({disabled: true});
btnSubmit.css("pointer-events", "none");
this.submitedTooltip && this.submitedTooltip.hide();
this.view.btnSubmit.setDisabled(true);
this.view.btnSubmit.cmpEl.css("pointer-events", "none");
break;
case LoadingDocument:
text = this.textLoadingDocument + ' ';
@ -588,15 +581,16 @@ define([
action ? this.setLongActionView(action) : this.loadMask && this.loadMask.hide();
if (id==Asc.c_oAscAsyncAction['Submit']) {
btnSubmit.removeAttr('disabled');
btnSubmit.css("pointer-events", "auto");
this.view.btnSubmit.setDisabled(false);
this.view.btnSubmit.cmpEl.css("pointer-events", "auto");
if (!_submitFail) {
if (!$submitedTooltip) {
$submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + this.textSubmited + '</div>');
$(document.body).append($submitedTooltip);
$submitedTooltip.on('click', function() {$submitedTooltip.hide();});
if (!this.submitedTooltip) {
var me = this;
this.submitedTooltip = $('<div class="submit-tooltip" style="display:none;">' + this.textSubmited + '</div>');
$(document.body).append(this.submitedTooltip);
this.submitedTooltip.on('click', function() {me.submitedTooltip.hide();});
}
$submitedTooltip.show();
this.submitedTooltip.show();
}
}
},
@ -715,14 +709,8 @@ define([
},
onFillRequiredFields: function(isFilled) {
if (isFilled) {
btnSubmit.removeAttr('disabled');
btnSubmit.css("pointer-events", "auto");
// $requiredTooltip && $requiredTooltip.hide();
} else {
btnSubmit.attr({disabled: true});
btnSubmit.css("pointer-events", "none");
}
this.view.btnSubmit.setDisabled(!isFilled);
this.view.btnSubmit.cmpEl.css("pointer-events", isFilled ? "auto" : "none");
},
onProcessMouse: function(data) {
@ -1055,25 +1043,34 @@ define([
// TODO: add asc_hasRequiredFields to sdk
if (this.appOptions.canSubmitForms && !this.api.asc_IsAllRequiredFormsFilled()) {
this.view.btnSubmit.setDisabled(true);
this.view.btnSubmit.cmpEl.css("pointer-events", "none");
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>');
$(document.body).append($requiredTooltip);
$requiredTooltip.css({top : offset.top + btnSubmit.height() + 'px', left: offset.left + btnSubmit.outerWidth()/2 - $requiredTooltip.outerWidth() + 'px'});
$requiredTooltip.find('.close-div').on('click', function() {
$requiredTooltip.hide();
var requiredTooltip = new Common.UI.SynchronizeTip({
extCls: 'colored',
placement: 'bottom-left',
target: this.view.btnSubmit.$el,
text: this.textRequired,
showLink: false,
showButton: true,
textButton: this.textGotIt
});
var onclose = function () {
requiredTooltip.hide();
me.api.asc_MoveToFillingForm(true, true, true);
Common.localStorage.setItem("de-embed-hide-submittip", 1);
sgroup.attr('data-toggle', 'tooltip');
sgroup.tooltip({
title : me.textRequired,
placement : 'bottom'
});
};
requiredTooltip.on('buttonclick', function () {
onclose();
Common.localStorage.setItem("de-embed-hide-submittip", 1);
});
$requiredTooltip.show();
requiredTooltip.on('closeclick', onclose);
requiredTooltip.show();
} else {
sgroup.attr('data-toggle', 'tooltip');
sgroup.tooltip({
@ -1126,7 +1123,6 @@ define([
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',
textSubmit: 'Submit',
textSubmited: '<b>Form submitted successfully</b><br>Click to close the tip.',
errorSubmit: 'Submit failed.',
errorEditingDownloadas: 'An error occurred during the work with the document.<br>Use the \'Download as...\' option to save the file backup copy to your computer hard drive.',

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

@ -54,6 +54,12 @@ define([
});
this.btnPrev.render($('#id-btn-prev-field'));
this.btnSubmit = new Common.UI.Button({
cls: 'btn-text-default colored margin-left-small margin-right-small',
caption: this.textSubmit
});
this.btnSubmit.render($('#id-submit-group'));
this.txtGoToPage = new Common.UI.InputField({
el: $('#page-number'),
cls: 'masked',
@ -75,6 +81,7 @@ define([
txtDownloadDocx: 'Download as docx',
txtDownloadPdf: 'Download as pdf',
textNext: 'Next Field',
textClear: 'Clear All Fields'
textClear: 'Clear All Fields',
textSubmit: 'Submit'
});
});

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

@ -201,7 +201,7 @@
<div id="id-pages" class="item margin-right-small" style="vertical-align: middle;">
<div id="page-number" style="display: inline-block; vertical-align: middle;"></div><span class="text" id="pages" tabindex="-1">of 1</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>
<div id="id-submit-group" style="display: inline-block;"></div>
<span id="box-tools"></span>
</div>
</div>