[DE] Change signature settings layout in the right panel.

This commit is contained in:
Julia Radzhabova 2017-11-16 16:06:55 +03:00
parent 4da0fe1938
commit d48e76e5c6
7 changed files with 263 additions and 63 deletions

View file

@ -92,6 +92,7 @@ define([
if (this.appConfig.canProtect) { if (this.appConfig.canProtect) {
this.api.asc_registerCallback('asc_onSignatureClick', _.bind(this.onApiSignatureClick, this)); this.api.asc_registerCallback('asc_onSignatureClick', _.bind(this.onApiSignatureClick, this));
Common.NotificationCenter.on('protect:sign', _.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)); this.api.asc_registerCallback('asc_onUpdateSignatures', _.bind(this.onApiUpdateSignatures, this));
} }
} }
@ -126,10 +127,10 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.view); Common.NotificationCenter.trigger('edit:complete', this.view);
}, },
onSignatureClick: function(btn, opts){ onSignatureClick: function(type, signed, guid){
switch (opts) { switch (type) {
case 'invisible': this.addInvisibleSignature(); break; 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) { onAppReady: function (config) {
var me = this; 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); // this.onDocumentPassword(true);
}, },
@ -168,7 +169,7 @@ define([
this.api.asc_resetPassword(); this.api.asc_resetPassword();
}, },
addInvisibleSignature: function(btn) { addInvisibleSignature: function() {
var me = this, var me = this,
win = new Common.Views.SignDialog({ win = new Common.Views.SignDialog({
api: me.api, api: me.api,
@ -185,11 +186,12 @@ define([
win.show(); win.show();
}, },
addVisibleSignature: function(btn) { addVisibleSignature: function(signed, guid) {
var me = this, var me = this,
win = new Common.Views.SignSettingsDialog({ win = new Common.Views.SignSettingsDialog({
type: (!signed) ? 'edit' : 'view',
handler: function(dlg, result) { handler: function(dlg, result) {
if (result == 'ok') { if (!signed && result == 'ok') {
me.api.asc_AddSignatureLine2(dlg.getSettings()); me.api.asc_AddSignatureLine2(dlg.getSettings());
} }
Common.NotificationCenter.trigger('edit:complete'); Common.NotificationCenter.trigger('edit:complete');
@ -197,6 +199,16 @@ define([
}); });
win.show(); 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) { signVisibleSignature: function(guid, width, height) {

View file

@ -84,12 +84,12 @@ define([
if (me.appConfig.canProtect) { if (me.appConfig.canProtect) {
this.btnSignature.menu.on('item:click', function (menu, item, e) { 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) { this.btnsInvisibleSignature.forEach(function(button) {
button.on('click', function (b, e) { button.on('click', function (b, e) {
me.fireEvent('protect:signature', [b, 'invisible']); me.fireEvent('protect:signature', ['invisible']);
}); });
}); });
} }

View file

@ -53,7 +53,8 @@ define([
options: { options: {
width: 350, width: 350,
style: 'min-width: 350px;', style: 'min-width: 350px;',
cls: 'modal-dlg' cls: 'modal-dlg',
type: 'edit'
}, },
initialize : function(options) { initialize : function(options) {
@ -86,12 +87,15 @@ define([
'</div>', '</div>',
'<div class="footer center">', '<div class="footer center">',
'<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + '</button>', '<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>', '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + '</button>',
'<% } %>',
'</div>' '</div>'
].join(''); ].join('');
this.options.tpl = _.template(this.template)(this.options);
this.api = this.options.api; 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); Common.UI.Window.prototype.initialize.call(this, this.options);
}, },
@ -104,17 +108,20 @@ define([
me.inputName = new Common.UI.InputField({ me.inputName = new Common.UI.InputField({
el : $('#id-dlg-sign-settings-name'), el : $('#id-dlg-sign-settings-name'),
style : 'width: 100%;' style : 'width: 100%;',
disabled : this.type=='view'
}); });
me.inputTitle = new Common.UI.InputField({ me.inputTitle = new Common.UI.InputField({
el : $('#id-dlg-sign-settings-title'), el : $('#id-dlg-sign-settings-title'),
style : 'width: 100%;' style : 'width: 100%;',
disabled : this.type=='view'
}); });
me.inputEmail = new Common.UI.InputField({ me.inputEmail = new Common.UI.InputField({
el : $('#id-dlg-sign-settings-email'), el : $('#id-dlg-sign-settings-email'),
style : 'width: 100%;' style : 'width: 100%;',
disabled : this.type=='view'
}); });
me.textareaInstructions = this.$window.find('textarea'); me.textareaInstructions = this.$window.find('textarea');
@ -123,10 +130,13 @@ define([
event.stopPropagation(); 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({ this.chDate = new Common.UI.CheckBox({
el: $('#id-dlg-sign-settings-date'), 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)); $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
@ -146,15 +156,15 @@ define([
if (props) { if (props) {
var me = this; var me = this;
// var value = props.asc_getSigner1(); var value = props.asc_getSigner1();
// me.inputName.setValue(value ? value : ''); me.inputName.setValue(value ? value : '');
// value = props.asc_getSigner2(); value = props.asc_getSigner2();
// me.inputTitle.setValue(value ? value : ''); me.inputTitle.setValue(value ? value : '');
// value = props.asc_getEmail(); value = props.asc_getEmail();
// me.inputEmail.setValue(value ? value : ''); me.inputEmail.setValue(value ? value : '');
// value = props.asc_getInstructions(); value = props.asc_getInstructions();
// me.textareaInstructions.val(value ? value : ''); me.textareaInstructions.val(value ? value : '');
// me.chDate.setValue(props.asc_getShowDate()); me.chDate.setValue(props.asc_getShowDate());
} }
}, },

View file

@ -9,14 +9,33 @@
<div id="signature-invisible-sign" style="width:100%;"></div> <div id="signature-invisible-sign" style="width:100%;"></div>
</td> </td>
</tr> </tr>
<tr id="signature-requested-sign"> <tr class="requested">
<td></td> <td class="padding-small">
<label class="header"><%= scope.strRequested %></label>
</td>
</tr> </tr>
<tr id="signature-valid-sign"> <tr class="requested">
<td></td> <td class="padding-large">
<div id="signature-requested-sign"></div>
</td>
</tr> </tr>
<tr id="signature-invalid-sign"> <tr class="valid">
<td></td> <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>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>
</table> </table>

View file

@ -120,12 +120,58 @@ define([
this.btnAddInvisibleSign = protection.getButton('signature'); this.btnAddInvisibleSign = protection.getButton('signature');
this.btnAddInvisibleSign.render(this.$el.find('#signature-invisible-sign')); this.btnAddInvisibleSign.render(this.$el.find('#signature-invisible-sign'));
this.cntRequestedSign = $('#signature-requested-sign'); this.viewRequestedList = new Common.UI.DataView({
this.cntValidSign = $('#signature-valid-sign'); el: $('#signature-requested-sign'),
this.cntInvalidSign = $('#signature-invalid-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.viewValidList = new Common.UI.DataView({
this.$el.on('click', '.signature-view-link', _.bind(this.onViewSignature, this)); 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) { setApi: function(api) {
@ -174,45 +220,108 @@ define([
me._state.invalidSignatures = []; me._state.invalidSignatures = [];
_.each(requested, function(item, index){ _.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){ _.each(valid, function(item, index){
var sign = {name: item.asc_getSigner1(), guid: item.asc_getId(), date: '18/05/2017'}; 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); (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.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'}]; // 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.viewRequestedList.store.reset(me._state.requestedSignatures);
this.cntValidSign.html(this.templateValid({signatures: me._state.validSignatures, header: this.strValid})); this.viewValidList.store.reset(me._state.validSignatures);
this.cntInvalidSign.html(this.templateValid({signatures: me._state.invalidSignatures, header: this.strInvalid})); this.viewInvalidList.store.reset(me._state.invalidSignatures);
this.$linksSign = $('.signature-sign-link', this.$el); this.$el.find('.requested').toggleClass('hidden', me._state.requestedSignatures.length<1);
var width = this.$linksSign.width(); this.$el.find('.valid').toggleClass('hidden', me._state.validSignatures.length<1);
$('.signature-sign-name', this.cntRequestedSign).css('max-width', 170-width); this.$el.find('.invalid').toggleClass('hidden', me._state.invalidSignatures.length<1);
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);
me.disableEditing(me._state.validSignatures.length>0 || me._state.invalidSignatures.length>0); me.disableEditing(me._state.validSignatures.length>0 || me._state.invalidSignatures.length>0);
}, },
onSign: function(event) { onSelectSignature: function(picker, item, record, e){
var target = $(event.currentTarget); if (!record) return;
if (target.hasClass('disabled')) 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) { onMenuSignatureClick: function(menu, item) {
var target = $(event.currentTarget); var guid = menu.cmpEl.attr('data-value');
if (target.hasClass('disabled')) return; switch (item.value) {
case 0:
this.api.asc_ViewCertificate(target.attr('data-value')); 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() { onDocumentReady: function() {
@ -285,13 +394,15 @@ define([
strValid: 'Valid signatures', strValid: 'Valid signatures',
strInvalid: 'Invalid signatures', strInvalid: 'Invalid signatures',
strSign: 'Sign', 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.', 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.', 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.', txtRequestedSignatures: 'This document needs to be signed.',
txtContinueEditing: 'Edit anyway', txtContinueEditing: 'Edit anyway',
notcriticalErrorTitle: 'Warning', 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 || {})); }, DE.Views.SignatureSettings || {}));
}); });

View file

@ -1418,7 +1418,9 @@
"DE.Views.SignatureSettings.strValid": "Valid signatures", "DE.Views.SignatureSettings.strValid": "Valid signatures",
"DE.Views.SignatureSettings.strInvalid": "Invalid signatures", "DE.Views.SignatureSettings.strInvalid": "Invalid signatures",
"DE.Views.SignatureSettings.strSign": "Sign", "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.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.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.", "DE.Views.SignatureSettings.txtRequestedSignatures": "This document needs to be signed.",

View file

@ -270,8 +270,54 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
background-position: -100px -150px; background-position: -100px -150px;
} }
.signature-sign-name { #signature-requested-sign,
#signature-valid-sign,
#signature-invalid-sign {
height: 100%;
overflow: hidden; 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; text-overflow: ellipsis;
.name {
width: 100%;
white-space: nowrap; 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;
}
}
}
} }