Signature settings refactoring.

This commit is contained in:
Julia Radzhabova 2017-11-02 12:14:53 +03:00
parent efa385f924
commit d1bdace072
6 changed files with 42 additions and 9 deletions

View file

@ -86,7 +86,7 @@ define([
'<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>', '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
'<% _.each(signatures, function(item) { %>', '<% _.each(signatures, function(item) { %>',
'<tr>', '<tr>',
'<td style="padding-bottom: 3px;"><label style="overflow: hidden; max-height: 15px;"><%= Common.Utils.String.htmlEncode(item.name) %></label></td>', '<td style="padding-bottom: 5px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></label></td>',
'<td style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-sign-link" data-value="<%= item.guid %>">' + this.strSign + '</label></td>', '<td style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-sign-link" data-value="<%= item.guid %>">' + this.strSign + '</label></td>',
'</tr>', '</tr>',
'<% }); %>', '<% }); %>',
@ -100,10 +100,10 @@ define([
'<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>', '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
'<% _.each(signatures, function(item) { %>', '<% _.each(signatures, function(item) { %>',
'<tr>', '<tr>',
'<td><div style="overflow: hidden; max-height: 15px;"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>', '<td><div class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>',
'<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>', '<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>',
'</tr>', '</tr>',
'<tr><td style="padding-bottom: 3px;"><%= Common.Utils.String.htmlEncode(item.date) %></td></tr>', '<tr><td style="padding-bottom: 3px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.date) %></label></td></tr>',
'<% }); %>', '<% }); %>',
'</table>', '</table>',
'</td>' '</td>'
@ -202,7 +202,13 @@ define([
// this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid})); // this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid}));
this.$linksSign = $('.signature-sign-link', this.$el); 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); 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);
}, },
addVisibleSign: function(btn) { addVisibleSign: function(btn) {

View file

@ -269,3 +269,9 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
.gradient-radial-center { .gradient-radial-center {
background-position: -100px -150px; background-position: -100px -150px;
} }
.signature-sign-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View file

@ -84,10 +84,10 @@ define([
'<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>', '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
'<% _.each(signatures, function(item) { %>', '<% _.each(signatures, function(item) { %>',
'<tr>', '<tr>',
'<td><div style="overflow: hidden; max-height: 15px;"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>', '<td><div class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>',
'<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>', '<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>',
'</tr>', '</tr>',
'<tr><td style="padding-bottom: 3px;"><%= Common.Utils.String.htmlEncode(item.date) %></td></tr>', '<tr><td style="padding-bottom: 3px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.date) %></label></td></tr>',
'<% }); %>', '<% }); %>',
'</table>', '</table>',
'</td>' '</td>'
@ -172,6 +172,9 @@ define([
// this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid})); // this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid}));
this.$linksView = $('.signature-view-link', this.$el); this.$linksView = $('.signature-view-link', this.$el);
var width = this.$linksView.width();
$('.signature-sign-name', this.cntValidSign).css('max-width', 170-width);
$('.signature-sign-name', this.cntInvalidSign).css('max-width', 170-width);
}, },
addInvisibleSign: function(btn) { addInvisibleSign: function(btn) {

View file

@ -205,3 +205,9 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
.gradient-radial-center { .gradient-radial-center {
background-position: -100px -150px; background-position: -100px -150px;
} }
.signature-sign-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View file

@ -86,7 +86,7 @@ define([
'<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>', '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
'<% _.each(signatures, function(item) { %>', '<% _.each(signatures, function(item) { %>',
'<tr>', '<tr>',
'<td style="padding-bottom: 3px;"><label style="overflow: hidden; max-height: 15px;"><%= Common.Utils.String.htmlEncode(item.name) %></label></td>', '<td style="padding-bottom: 5px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></label></td>',
'<td style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-sign-link" data-value="<%= item.guid %>">' + this.strSign + '</label></td>', '<td style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-sign-link" data-value="<%= item.guid %>">' + this.strSign + '</label></td>',
'</tr>', '</tr>',
'<% }); %>', '<% }); %>',
@ -100,10 +100,10 @@ define([
'<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>', '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
'<% _.each(signatures, function(item) { %>', '<% _.each(signatures, function(item) { %>',
'<tr>', '<tr>',
'<td><div style="overflow: hidden; max-height: 15px;"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>', '<td><div class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>',
'<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>', '<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>',
'</tr>', '</tr>',
'<tr><td style="padding-bottom: 3px;"><%= Common.Utils.String.htmlEncode(item.date) %></td></tr>', '<tr><td style="padding-bottom: 3px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.date) %></label></td></tr>',
'<% }); %>', '<% }); %>',
'</table>', '</table>',
'</td>' '</td>'
@ -202,7 +202,13 @@ define([
// this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid})); // this.cntInvalidSign.html(this.templateValid({signatures: [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}], header: this.strInvalid}));
this.$linksSign = $('.signature-sign-link', this.$el); 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); 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);
}, },
addVisibleSign: function(btn) { addVisibleSign: function(btn) {

View file

@ -335,3 +335,9 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
#table-combo-template .combo-dataview { #table-combo-template .combo-dataview {
.combo-template(60px); .combo-template(60px);
} }
.signature-sign-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}