From 354e9d1a9b5918cee0018c6e87fb1aab62f3b47a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 16 Nov 2017 16:06:55 +0300 Subject: [PATCH] [DE] Change signature settings layout in the right panel. --- apps/common/main/lib/controller/Protection.js | 26 ++- apps/common/main/lib/view/Protection.js | 4 +- .../main/lib/view/SignSettingsDialog.js | 40 +++-- .../app/template/SignatureSettings.template | 31 +++- .../main/app/view/SignatureSettings.js | 169 +++++++++++++++--- apps/documenteditor/main/locale/en.json | 4 +- .../main/resources/less/rightmenu.less | 52 +++++- 7 files changed, 263 insertions(+), 63 deletions(-) diff --git a/apps/common/main/lib/controller/Protection.js b/apps/common/main/lib/controller/Protection.js index af4c2f733..002037024 100644 --- a/apps/common/main/lib/controller/Protection.js +++ b/apps/common/main/lib/controller/Protection.js @@ -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) { diff --git a/apps/common/main/lib/view/Protection.js b/apps/common/main/lib/view/Protection.js index 44ed9ab15..9be9d087a 100644 --- a/apps/common/main/lib/view/Protection.js +++ b/apps/common/main/lib/view/Protection.js @@ -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']); }); }); } diff --git a/apps/common/main/lib/view/SignSettingsDialog.js b/apps/common/main/lib/view/SignSettingsDialog.js index 20f718568..e85b8c3e0 100644 --- a/apps/common/main/lib/view/SignSettingsDialog.js +++ b/apps/common/main/lib/view/SignSettingsDialog.js @@ -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([ '', '
', '', + '<% if (type == "edit") { %>', '', + '<% } %>', '
' ].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()); } }, diff --git a/apps/documenteditor/main/app/template/SignatureSettings.template b/apps/documenteditor/main/app/template/SignatureSettings.template index dc38301ad..c4ee01174 100644 --- a/apps/documenteditor/main/app/template/SignatureSettings.template +++ b/apps/documenteditor/main/app/template/SignatureSettings.template @@ -9,14 +9,33 @@
- - + + + + - - + + +
+ - - + + + + + + + +
+ + + + + + + + +
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/SignatureSettings.js b/apps/documenteditor/main/app/view/SignatureSettings.js index f24becfdf..8c371897b 100644 --- a/apps/documenteditor/main/app/view/SignatureSettings.js +++ b/apps/documenteditor/main/app/view/SignatureSettings.js @@ -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([ + '
', + '
', + '
<%= Common.Utils.String.htmlEncode(name) %>
', + '
', + '' + ].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([ + '
', + '
', + '
<%= Common.Utils.String.htmlEncode(name) %>
', + '
<%= Common.Utils.String.htmlEncode(date) %>
', + '
', + '' + ].join('')) + }); + + this.viewInvalidList = new Common.UI.DataView({ + el: $('#signature-invalid-sign'), + enableKeyEvents: false, + itemTemplate: _.template([ + '
', + '
', + '
<%= Common.Utils.String.htmlEncode(name) %>
', + '
<%= Common.Utils.String.htmlEncode(date) %>
', + '
', + '' + ].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 = $('', 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.
Are you sure you want to continue?' + txtEditWarning: 'Editing will remove the signatures from the document.
Are you sure you want to continue?', + strDelete: 'Remove Signature' }, DE.Views.SignatureSettings || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 740e053c1..d19007882 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -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.", diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index c458f8274..1a2c28945 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -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; - text-overflow: ellipsis; - white-space: nowrap; + 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; + } + } + } } \ No newline at end of file