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

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){
+        onSignatureClick: function(type, signed, guid){
-            switch (opts) {
+            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) {

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

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([
                 '</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();
+                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());
             }
         },
 

apps/documenteditor/main/app/template/SignatureSettings.template

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

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.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) {
@@ -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.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);
         },
 
-        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() {
@@ -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 || {}));
 });

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.",

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;
+    margin: 0 -10px 0 -15px;
-    white-space: nowrap;
+
+    .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;
+            }
+        }
+    }
 }