[DE] Change signature settings layout in the right panel.
This commit is contained in:
Julia Radzhabova
parent
781030ed3d
commit
354e9d1a9b
|
|
@ -92,6 +92,7 @@ define([
|
|||
if (this.appConfig.canProtect) {
|
||||
this.api.asc_registerCallback('asc_onSignatureClick', _.bind(this.onApiSignatureClick, this));
|
||||
Common.NotificationCenter.on('protect:sign', _.bind(this.onApiSignatureClick, this));
|
||||
Common.NotificationCenter.on('protect:signature', _.bind(this.onSignatureClick, this));
|
||||
this.api.asc_registerCallback('asc_onUpdateSignatures', _.bind(this.onApiUpdateSignatures, this));
|
||||
}
|
||||
}
|
||||
|
|
@ -126,10 +127,10 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', this.view);
|
||||
},
|
||||
|
||||
onSignatureClick: function(btn, opts){
|
||||
switch (opts) {
|
||||
onSignatureClick: function(type, signed, guid){
|
||||
switch (type) {
|
||||
case 'invisible': this.addInvisibleSignature(); break;
|
||||
case 'visible': this.addVisibleSignature(); break;
|
||||
case 'visible': this.addVisibleSignature(signed, guid); break;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -144,7 +145,7 @@ define([
|
|||
|
||||
onAppReady: function (config) {
|
||||
var me = this;
|
||||
// this.onApiUpdateSignatures([{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}]);
|
||||
// this.onApiUpdateSignatures([{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}], [{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}]);
|
||||
// this.onDocumentPassword(true);
|
||||
},
|
||||
|
||||
|
|
@ -168,7 +169,7 @@ define([
|
|||
this.api.asc_resetPassword();
|
||||
},
|
||||
|
||||
addInvisibleSignature: function(btn) {
|
||||
addInvisibleSignature: function() {
|
||||
var me = this,
|
||||
win = new Common.Views.SignDialog({
|
||||
api: me.api,
|
||||
|
|
@ -185,11 +186,12 @@ define([
|
|||
win.show();
|
||||
},
|
||||
|
||||
addVisibleSignature: function(btn) {
|
||||
addVisibleSignature: function(signed, guid) {
|
||||
var me = this,
|
||||
win = new Common.Views.SignSettingsDialog({
|
||||
type: (!signed) ? 'edit' : 'view',
|
||||
handler: function(dlg, result) {
|
||||
if (result == 'ok') {
|
||||
if (!signed && result == 'ok') {
|
||||
me.api.asc_AddSignatureLine2(dlg.getSettings());
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete');
|
||||
|
|
@ -197,6 +199,16 @@ define([
|
|||
});
|
||||
|
||||
win.show();
|
||||
|
||||
// var props = new AscCommon.asc_CSignatureLine();
|
||||
// props.asc_setSigner1("s1");
|
||||
// props.asc_setSigner2("s2");
|
||||
// props.asc_setEmail('email');
|
||||
// props.asc_setInstructions('instructions');
|
||||
// props.asc_setShowDate(true);
|
||||
|
||||
if (guid)
|
||||
win.setSettings(this.api.asc_getSignatureSetup(guid));
|
||||
},
|
||||
|
||||
signVisibleSignature: function(guid, width, height) {
|
||||
|
|
|
|||
|
|
@ -84,12 +84,12 @@ define([
|
|||
|
||||
if (me.appConfig.canProtect) {
|
||||
this.btnSignature.menu.on('item:click', function (menu, item, e) {
|
||||
me.fireEvent('protect:signature', [menu, item.value]);
|
||||
me.fireEvent('protect:signature', [item.value, false]);
|
||||
});
|
||||
|
||||
this.btnsInvisibleSignature.forEach(function(button) {
|
||||
button.on('click', function (b, e) {
|
||||
me.fireEvent('protect:signature', [b, 'invisible']);
|
||||
me.fireEvent('protect:signature', ['invisible']);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@ define([
|
|||
options: {
|
||||
width: 350,
|
||||
style: 'min-width: 350px;',
|
||||
cls: 'modal-dlg'
|
||||
cls: 'modal-dlg',
|
||||
type: 'edit'
|
||||
},
|
||||
|
||||
initialize : function(options) {
|
||||
|
|
@ -86,12 +87,15 @@ define([
|
|||
'</div>',
|
||||
'<div class="footer center">',
|
||||
'<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>',
|
||||
'<% if (type == "edit") { %>',
|
||||
'<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
|
||||
'<% } %>',
|
||||
'</div>'
|
||||
].join('');
|
||||
|
||||
this.options.tpl = _.template(this.template)(this.options);
|
||||
this.api = this.options.api;
|
||||
this.type = this.options.type || 'edit';
|
||||
this.options.tpl = _.template(this.template)(this.options);
|
||||
|
||||
Common.UI.Window.prototype.initialize.call(this, this.options);
|
||||
},
|
||||
|
|
@ -104,17 +108,20 @@ define([
|
|||
|
||||
me.inputName = new Common.UI.InputField({
|
||||
el : $('#id-dlg-sign-settings-name'),
|
||||
style : 'width: 100%;'
|
||||
style : 'width: 100%;',
|
||||
disabled : this.type=='view'
|
||||
});
|
||||
|
||||
me.inputTitle = new Common.UI.InputField({
|
||||
el : $('#id-dlg-sign-settings-title'),
|
||||
style : 'width: 100%;'
|
||||
style : 'width: 100%;',
|
||||
disabled : this.type=='view'
|
||||
});
|
||||
|
||||
me.inputEmail = new Common.UI.InputField({
|
||||
el : $('#id-dlg-sign-settings-email'),
|
||||
style : 'width: 100%;'
|
||||
style : 'width: 100%;',
|
||||
disabled : this.type=='view'
|
||||
});
|
||||
|
||||
me.textareaInstructions = this.$window.find('textarea');
|
||||
|
|
@ -123,10 +130,13 @@ define([
|
|||
event.stopPropagation();
|
||||
}
|
||||
});
|
||||
(this.type=='view') ? this.textareaInstructions.attr('disabled', 'disabled') : this.textareaInstructions.removeAttr('disabled');
|
||||
this.textareaInstructions.toggleClass('disabled', this.type=='view');
|
||||
|
||||
this.chDate = new Common.UI.CheckBox({
|
||||
el: $('#id-dlg-sign-settings-date'),
|
||||
labelText: this.textShowDate
|
||||
labelText: this.textShowDate,
|
||||
disabled: this.type=='view'
|
||||
});
|
||||
|
||||
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
|
||||
|
|
@ -146,15 +156,15 @@ define([
|
|||
if (props) {
|
||||
var me = this;
|
||||
|
||||
// var value = props.asc_getSigner1();
|
||||
// me.inputName.setValue(value ? value : '');
|
||||
// value = props.asc_getSigner2();
|
||||
// me.inputTitle.setValue(value ? value : '');
|
||||
// value = props.asc_getEmail();
|
||||
// me.inputEmail.setValue(value ? value : '');
|
||||
// value = props.asc_getInstructions();
|
||||
// me.textareaInstructions.val(value ? value : '');
|
||||
// me.chDate.setValue(props.asc_getShowDate());
|
||||
var value = props.asc_getSigner1();
|
||||
me.inputName.setValue(value ? value : '');
|
||||
value = props.asc_getSigner2();
|
||||
me.inputTitle.setValue(value ? value : '');
|
||||
value = props.asc_getEmail();
|
||||
me.inputEmail.setValue(value ? value : '');
|
||||
value = props.asc_getInstructions();
|
||||
me.textareaInstructions.val(value ? value : '');
|
||||
me.chDate.setValue(props.asc_getShowDate());
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -9,14 +9,33 @@
|
|||
<div id="signature-invisible-sign" style="width:100%;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="signature-requested-sign">
|
||||
<td></td>
|
||||
<tr class="requested">
|
||||
<td class="padding-small">
|
||||
<label class="header"><%= scope.strRequested %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="signature-valid-sign">
|
||||
<td></td>
|
||||
<tr class="requested">
|
||||
<td class="padding-large">
|
||||
<div id="signature-requested-sign"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="signature-invalid-sign">
|
||||
<td></td>
|
||||
<tr class="valid">
|
||||
<td class="padding-small">
|
||||
<label class="header"><%= scope.strValid %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="valid">
|
||||
<td class="padding-large">
|
||||
<div id="signature-valid-sign"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="invalid">
|
||||
<td class="padding-small">
|
||||
<label class="header" style="color:#bb3d3d;"><%= scope.strInvalid %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="invalid">
|
||||
<td><div id="signature-invalid-sign"></div></td>
|
||||
</tr>
|
||||
<tr class="finish-cell"></tr>
|
||||
</table>
|
||||
|
|
@ -120,12 +120,58 @@ define([
|
|||
this.btnAddInvisibleSign = protection.getButton('signature');
|
||||
this.btnAddInvisibleSign.render(this.$el.find('#signature-invisible-sign'));
|
||||
|
||||
this.cntRequestedSign = $('#signature-requested-sign');
|
||||
this.cntValidSign = $('#signature-valid-sign');
|
||||
this.cntInvalidSign = $('#signature-invalid-sign');
|
||||
this.viewRequestedList = new Common.UI.DataView({
|
||||
el: $('#signature-requested-sign'),
|
||||
enableKeyEvents: false,
|
||||
itemTemplate: _.template([
|
||||
'<div id="<%= id %>" class="signature-item requested">',
|
||||
'<div class="caret img-commonctrl"></div>',
|
||||
'<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
|
||||
this.$el.on('click', '.signature-sign-link', _.bind(this.onSign, this));
|
||||
this.$el.on('click', '.signature-view-link', _.bind(this.onViewSignature, this));
|
||||
this.viewValidList = new Common.UI.DataView({
|
||||
el: $('#signature-valid-sign'),
|
||||
enableKeyEvents: false,
|
||||
itemTemplate: _.template([
|
||||
'<div id="<%= id %>" class="signature-item">',
|
||||
'<div class="caret img-commonctrl"></div>',
|
||||
'<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
|
||||
'<div class="date"><%= Common.Utils.String.htmlEncode(date) %></div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
|
||||
this.viewInvalidList = new Common.UI.DataView({
|
||||
el: $('#signature-invalid-sign'),
|
||||
enableKeyEvents: false,
|
||||
itemTemplate: _.template([
|
||||
'<div id="<%= id %>" class="signature-item">',
|
||||
'<div class="caret img-commonctrl"></div>',
|
||||
'<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
|
||||
'<div class="date"><%= Common.Utils.String.htmlEncode(date) %></div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
|
||||
this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this));
|
||||
this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this));
|
||||
this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this));
|
||||
|
||||
this.signatureMenu = new Common.UI.Menu({
|
||||
menuAlign : 'tr-br',
|
||||
items: [
|
||||
{ caption: this.strSign, value: 0 },
|
||||
{ caption: this.strDetails,value: 1 },
|
||||
{ caption: this.strSetup, value: 2 },
|
||||
{ caption: this.strDelete, value: 3 }
|
||||
]
|
||||
});
|
||||
this.signatureMenu.on('item:click', _.bind(this.onMenuSignatureClick, this));
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
|
@ -174,45 +220,108 @@ define([
|
|||
me._state.invalidSignatures = [];
|
||||
|
||||
_.each(requested, function(item, index){
|
||||
me._state.requestedSignatures.push({name: item.asc_getSigner1(), guid: item.asc_getGuid()});
|
||||
me._state.requestedSignatures.push({name: item.asc_getSigner1(), guid: item.asc_getGuid(), requested: true});
|
||||
});
|
||||
_.each(valid, function(item, index){
|
||||
var sign = {name: item.asc_getSigner1(), guid: item.asc_getId(), date: '18/05/2017'};
|
||||
(item.asc_getValid()==0) ? me._state.validSignatures.push(sign) : me._state.invalidSignatures.push(sign);
|
||||
});
|
||||
|
||||
// me._state.requestedSignatures = [{name: 'Hammish Mitchell', guid: '123'}, {name: 'Someone Somewhere', guid: '123'}, {name: 'Mary White', guid: '123'}, {name: 'John Black', guid: '123'}];
|
||||
// me._state.requestedSignatures = [{name: 'Hammish Mitchell', guid: '123', requested: true}, {name: 'Someone Somewhere', guid: '123', requested: true}, {name: 'Mary White', guid: '123', requested: true}, {name: 'John Black', guid: '123', requested: true}];
|
||||
// me._state.validSignatures = [{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}];
|
||||
// me._state.invalidSignatures = [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}];
|
||||
|
||||
this.cntRequestedSign.html(this.templateRequested({signatures: me._state.requestedSignatures, header: this.strRequested}));
|
||||
this.cntValidSign.html(this.templateValid({signatures: me._state.validSignatures, header: this.strValid}));
|
||||
this.cntInvalidSign.html(this.templateValid({signatures: me._state.invalidSignatures, header: this.strInvalid}));
|
||||
this.viewRequestedList.store.reset(me._state.requestedSignatures);
|
||||
this.viewValidList.store.reset(me._state.validSignatures);
|
||||
this.viewInvalidList.store.reset(me._state.invalidSignatures);
|
||||
|
||||
this.$linksSign = $('.signature-sign-link', this.$el);
|
||||
var width = this.$linksSign.width();
|
||||
$('.signature-sign-name', this.cntRequestedSign).css('max-width', 170-width);
|
||||
|
||||
this.$linksView = $('.signature-view-link', this.$el);
|
||||
width = this.$linksView.width();
|
||||
$('.signature-sign-name', this.cntValidSign).css('max-width', 170-width);
|
||||
$('.signature-sign-name', this.cntInvalidSign).css('max-width', 170-width);
|
||||
this.$el.find('.requested').toggleClass('hidden', me._state.requestedSignatures.length<1);
|
||||
this.$el.find('.valid').toggleClass('hidden', me._state.validSignatures.length<1);
|
||||
this.$el.find('.invalid').toggleClass('hidden', me._state.invalidSignatures.length<1);
|
||||
|
||||
me.disableEditing(me._state.validSignatures.length>0 || me._state.invalidSignatures.length>0);
|
||||
},
|
||||
|
||||
onSign: function(event) {
|
||||
var target = $(event.currentTarget);
|
||||
if (target.hasClass('disabled')) return;
|
||||
onSelectSignature: function(picker, item, record, e){
|
||||
if (!record) return;
|
||||
|
||||
Common.NotificationCenter.trigger('protect:sign', target.attr('data-value'));
|
||||
var btn = $(e.target);
|
||||
if (btn && btn.hasClass('caret')) {
|
||||
var menu = this.signatureMenu;
|
||||
if (menu.isVisible()) {
|
||||
menu.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var showPoint, me = this,
|
||||
currentTarget = $(e.currentTarget),
|
||||
parent = $(this.el),
|
||||
offset = currentTarget.offset(),
|
||||
offsetParent = parent.offset();
|
||||
|
||||
showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2];
|
||||
|
||||
var menuContainer = parent.find('#menu-signature-container');
|
||||
if (!menu.rendered) {
|
||||
if (menuContainer.length < 1) {
|
||||
menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
|
||||
parent.append(menuContainer);
|
||||
}
|
||||
menu.render(menuContainer);
|
||||
menu.cmpEl.attr({tabindex: "-1"});
|
||||
|
||||
menu.on({
|
||||
'show:after': function(cmp) {
|
||||
if (cmp && cmp.menuAlignEl)
|
||||
cmp.menuAlignEl.toggleClass('over', true);
|
||||
},
|
||||
'hide:after': function(cmp) {
|
||||
if (cmp && cmp.menuAlignEl)
|
||||
cmp.menuAlignEl.toggleClass('over', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
var requested = record.get('requested'),
|
||||
signed = (this._state.validSignatures.length>0 || this._state.invalidSignatures.length>0);
|
||||
menu.items[0].setVisible(requested);
|
||||
menu.items[1].setVisible(!requested);
|
||||
menu.items[3].setVisible(!requested);
|
||||
menu.items[0].setDisabled(this._locked);
|
||||
menu.items[3].setDisabled(this._locked);
|
||||
menu.items[2].cmpEl.attr('data-value', signed ? 1 : 0); // view or edit signature settings
|
||||
menu.cmpEl.attr('data-value', record.get('guid'));
|
||||
|
||||
menuContainer.css({left: showPoint[0], top: showPoint[1]});
|
||||
|
||||
menu.menuAlignEl = currentTarget;
|
||||
menu.setOffset(-20, -currentTarget.height()/2 + 3);
|
||||
menu.show();
|
||||
_.delay(function() {
|
||||
menu.cmpEl.focus();
|
||||
}, 10);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
} else {
|
||||
this.api.asc_gotoSignature(record.get('guid'));
|
||||
}
|
||||
},
|
||||
|
||||
onViewSignature: function(event) {
|
||||
var target = $(event.currentTarget);
|
||||
if (target.hasClass('disabled')) return;
|
||||
|
||||
this.api.asc_ViewCertificate(target.attr('data-value'));
|
||||
onMenuSignatureClick: function(menu, item) {
|
||||
var guid = menu.cmpEl.attr('data-value');
|
||||
switch (item.value) {
|
||||
case 0:
|
||||
Common.NotificationCenter.trigger('protect:sign', guid);
|
||||
break;
|
||||
case 1:
|
||||
this.api.asc_ViewCertificate(guid);
|
||||
break;
|
||||
case 2:
|
||||
Common.NotificationCenter.trigger('protect:signature', 'visible', !!parseInt(item.cmpEl.attr('data-value')), guid);// can edit settings for requested signature
|
||||
break;
|
||||
case 3:
|
||||
this.api.asc_DeleteSign(guid);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
onDocumentReady: function() {
|
||||
|
|
@ -285,13 +394,15 @@ define([
|
|||
strValid: 'Valid signatures',
|
||||
strInvalid: 'Invalid signatures',
|
||||
strSign: 'Sign',
|
||||
strView: 'View',
|
||||
strDetails: 'Signature Details',
|
||||
strSetup: 'Signature Setup',
|
||||
txtSigned: 'Valid signatures has been added to the document. The document is protected from editing.',
|
||||
txtSignedInvalid: 'Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.',
|
||||
txtRequestedSignatures: 'This document needs to be signed.',
|
||||
txtContinueEditing: 'Edit anyway',
|
||||
notcriticalErrorTitle: 'Warning',
|
||||
txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?'
|
||||
txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?',
|
||||
strDelete: 'Remove Signature'
|
||||
|
||||
}, DE.Views.SignatureSettings || {}));
|
||||
});
|
||||
|
|
@ -1445,7 +1445,9 @@
|
|||
"DE.Views.SignatureSettings.strValid": "Valid signatures",
|
||||
"DE.Views.SignatureSettings.strInvalid": "Invalid signatures",
|
||||
"DE.Views.SignatureSettings.strSign": "Sign",
|
||||
"DE.Views.SignatureSettings.strView": "View",
|
||||
"DE.Views.SignatureSettings.strDetails": "Signature Details",
|
||||
"DE.Views.SignatureSettings.strDelete": "Remove Signature",
|
||||
"DE.Views.SignatureSettings.strSetup": "Signature Setup",
|
||||
"DE.Views.SignatureSettings.txtSigned": "Valid signatures has been added to the document. The document is protected from editing.",
|
||||
"DE.Views.SignatureSettings.txtSignedInvalid": "Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.",
|
||||
"DE.Views.SignatureSettings.txtRequestedSignatures": "This document needs to be signed.",
|
||||
|
|
|
|||
|
|
@ -270,8 +270,54 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
|
|||
background-position: -100px -150px;
|
||||
}
|
||||
|
||||
.signature-sign-name {
|
||||
#signature-requested-sign,
|
||||
#signature-valid-sign,
|
||||
#signature-invalid-sign {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0 -10px 0 -15px;
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
.box-shadow(none);
|
||||
margin: 0;
|
||||
|
||||
&:hover,
|
||||
&.over {
|
||||
background-color: @secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.signature-item {
|
||||
padding: 5px 2px 5px 15px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
max-width: 160px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.caret {
|
||||
width: 23px;
|
||||
height: 14px;
|
||||
border: 0;
|
||||
background-position: -43px -150px;
|
||||
margin: 8px 15px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.requested {
|
||||
.caret {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue