Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

bug 51943

Browse source
This commit is contained in:
OVSharova 2023-01-10 16:02:13 +03:00
parent 0c2e5806a2
commit 6e3f767882
7 changed files with 138 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -65,7 +65,7 @@ define([
displayValue: null, displayValue: null,
pxValue: null, pxValue: null,
id: Common.UI.getId(), id: Common.UI.getId(),
offsety: undefined imgId: undefined
} }
} }
}); });
@ -78,7 +78,7 @@ define([
template: _.template([ template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">', '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="image"></i>', '<i class="img-line"><svg class="img-border-size" style="margin-top: -9.5px"><use xlink:href="#half-pt"></use></svg></i>',
'<span class="text"></span>', '<span class="text"></span>',
'</div>', '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
@ -89,9 +89,11 @@ define([
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">', '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<span><%= item.displayValue %></span>', '<span><%= item.displayValue %></span>',
'<% if (item.offsety!==undefined) { %>', '<span style="float: right;">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">', '<svg class="img-border-size" style="height: <%= Math.ceil(item.pxValue) %>px; margin-top: -<%= Math.ceil(item.pxValue)/2 %>px">',
'<% } %>', '<use xlink:href="#<%= item.imgId %>"></use>',
'</svg>',
'</span>',
'</a></li>', '</a></li>',
'<% }); %>', '<% }); %>',
'</ul>', '</ul>',
@ -101,13 +103,13 @@ define([
initialize : function(options) { initialize : function(options) {
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt), var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
data = [ data = [
{displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, imgId: 'half-pt'},
{displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20}, //pxValue = 1.34px {displayValue: '1 ' + txtPt, value: 1, pxValue: 1, imgId: 'one-pt'},
{displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40}, {displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, imgId: 'one-and-half-pt'},
{displayValue: '2.25 ' + txtPt, value: 2.25,pxValue: 3, offsety: 60}, {displayValue: '2.25 ' + txtPt, value: 2.25,pxValue: 3, imgId: 'two-and-quarter-pt'},
{displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80}, {displayValue: '3 ' + txtPt, value: 3, pxValue: 4, imgId: 'three-pt'},
{displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, offsety: 100}, {displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, imgId: 'four-and-half-pt'},
{displayValue: '6 ' + txtPt, value: 6, pxValue: 8, offsety: 120} {displayValue: '6 ' + txtPt, value: 6, pxValue: 8, imgId: 'six-pt'}
]; ];
if (options.allowNoBorders !== false) if (options.allowNoBorders !== false)
data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 }); data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 });
@ -144,11 +146,17 @@ define([
updateFormControl: function(record) { updateFormControl: function(record) {
var formcontrol = $(this.el).find('.form-control'); var formcontrol = $(this.el).find('.form-control');
var image = formcontrol.find('> .image'); var image = formcontrol.find('> .img-line');
var text = formcontrol.find('> .text'); var text = formcontrol.find('> .text');
if (record.get('value')>0) { if (record.get('value')>0) {
image.css('background-position', '10px -' + record.get('offsety') + 'px').show(); var elm = formcontrol.find('use');
if(elm.length>0) {
elm[0].setAttribute('xlink:href', '#' + record.get('imgId'));
elm.parent().css('margin-top', (- Math.ceil(record.get('pxValue')/2))+'px');
elm.parent().css('height', Math.ceil(record.get('pxValue'))+'px');
}
image.show();
text.hide(); text.hide();
} else { } else {
image.hide(); image.hide();
@ -190,9 +198,13 @@ define([
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">', '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<span><%= item.displayValue %></span>', '<span><%= item.displayValue %>' + '</span>',
'<% if (item.offsety!==undefined) { %>', '<% if (item.imgId!==undefined) { %>',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">', '<span style="float: right;">',
'<svg class="img-border-size" style="height: <%= Math.ceil(item.pxValue) %>px; margin-top: -<%= (Math.ceil(item.pxValue)/2) %>px">',
'<use xlink:href="#<%= item.imgId %>"></use>',
'</svg>',
'</span>',
'<% } %>', '<% } %>',
'</a></li>', '</a></li>',
'<% }); %>', '<% }); %>',
@ -204,13 +216,13 @@ define([
this.txtNoBorders = options.txtNoBorders || this.txtNoBorders; this.txtNoBorders = options.txtNoBorders || this.txtNoBorders;
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt), var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
data = [ data = [
{displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, imgId: 'half-pt'},
{displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20}, {displayValue: '1 ' + txtPt, value: 1, pxValue: 1, imgId: 'one-pt'},
{displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40}, {displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, imgId: 'one-and-half-pt'},
{displayValue: '2.25 ' + txtPt, value: 2.25,pxValue: 3, offsety: 60}, {displayValue: '2.25 ' + txtPt, value: 2.25,pxValue: 3, imgId: 'two-and-quarter-pt'},
{displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80}, {displayValue: '3 ' + txtPt, value: 3, pxValue: 4, imgId: 'three-pt'},
{displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, offsety: 100}, {displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, imgId: 'four-and-half-pt'},
{displayValue: '6 ' + txtPt, value: 6, pxValue: 8, offsety: 120} {displayValue: '6 ' + txtPt, value: 6, pxValue: 8, imgId: 'six-pt'}
]; ];
if (options.allowNoBorders !== false) if (options.allowNoBorders !== false)
@ -236,7 +248,7 @@ define([
template: _.template([ template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">', '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="image"></i>', '<i class="img-line"><svg><use xlink:href="#solid"></use></svg></i>',
'</div>', '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
@ -244,10 +256,11 @@ define([
'</button>', '</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">', '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 1px 10px;">',
'<span style="margin-top: 0;"></span>', '<% if (item.imgId!==undefined) { %>',
'<% if (item.offsety!==undefined) { %>', '<span>',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">', '<svg class="img-border-size"><use xlink:href="#<%= item.imgId %>"></use></svg>',
'</span>',
'<% } %>', '<% } %>',
'</a></li>', '</a></li>',
'<% }); %>', '<% }); %>',
@ -259,14 +272,14 @@ define([
Common.UI.ComboBorderSize.prototype.initialize.call(this, _.extend({ Common.UI.ComboBorderSize.prototype.initialize.call(this, _.extend({
store: new Common.UI.BordersStore(), store: new Common.UI.BordersStore(),
data: [ data: [
{value: Asc.c_oDashType.solid, offsety: 140}, {value: Asc.c_oDashType.solid, imgId: "solid"},
{value: Asc.c_oDashType.sysDot, offsety: 160}, {value: Asc.c_oDashType.sysDot, imgId: 'dots'},
{value: Asc.c_oDashType.sysDash, offsety: 180}, {value: Asc.c_oDashType.sysDash, imgId: 'dashes'},
{value: Asc.c_oDashType.dash, offsety: 200}, {value: Asc.c_oDashType.dash, imgId: 'dashes-spaced'},
{value: Asc.c_oDashType.dashDot, offsety: 220}, {value: Asc.c_oDashType.dashDot, imgId: 'dash-dot'},
{value: Asc.c_oDashType.lgDash, offsety: 240}, {value: Asc.c_oDashType.lgDash, imgId: 'dashes-wide'},
{value: Asc.c_oDashType.lgDashDot, offsety: 260}, {value: Asc.c_oDashType.lgDashDot, imgId: 'wide-dash-dot'},
{value: Asc.c_oDashType.lgDashDotDot, offsety: 280} {value: Asc.c_oDashType.lgDashDotDot, imgId: 'wide-dash-dot-dot'}
] ]
}, options)); }, options));
}, },
@ -277,11 +290,18 @@ define([
}, },
updateFormControl: function(record) { updateFormControl: function(record) {
if (record) if (record) {
$(this.el).find('.form-control > .image') var elm = $(this.el).find('.form-control > .img-line use');
.css('background-position', '10px -' + record.get('offsety') + 'px').show(); if(elm.length) {
var height = Math.ceil(record.get('pxValue'));
height = height ? height : 3;
elm[0].setAttribute('xlink:href', '#' + record.get('imgId'));
elm.parent().css('height', height + 'px');
}
$(this.el).find('.form-control > .img-line').show();
}
else else
$(this.el).find('.form-control > .image').hide(); $(this.el).find('.form-control > .img-line').hide();
}, },
setValue: function(value) { setValue: function(value) {

59
apps/common/main/resources/less/combo-border-size.less
View file

@ -14,53 +14,48 @@
li { li {
a { a {
white-space: normal; white-space: normal;
padding: 6px 20px;
} }
span { span {
width: auto;
height: 18px;
display: inline-block; display: inline-block;
margin-top: 3px;
.font-size-normal();
height: 17px;
}
img {
width:60px;
height:20px;
background-color: transparent; background-color: transparent;
image-rendering: pixelated; svg {
height: 3px;
width: 60px;
fill: @text-normal-ie;
fill: @text-normal;
} }
} }
.image {
}
.img-border-size {
position: relative; position: relative;
width: 100%; display: block;
top:50%;
}
.img-line {
width: auto;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;
margin: 0 0 0 -3px; margin: 0 0 0 7px;
image-rendering: pixelated; svg {
width: 60px;
fill: @text-normal-ie;
fill: @text-normal;
}
}
.border-type {
display: inline-block;
margin-bottom: 2px;
} }
img, .image {
background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
background-size: 60px auto;
.pixel-ratio__1_25 & {
background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.25x.png)";
}
.pixel-ratio__1_5 & {
background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.5x.png)";
}
.pixel-ratio__1_75 & {
background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@1.75x.png)";
}
.pixel-ratio__2 & {
background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
}
}
} }
.combo-color { .combo-color {

14
apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js
View file

@ -146,13 +146,13 @@ define([
takeFocusOnClose: true, takeFocusOnClose: true,
data: [ data: [
{id: Common.UI.getId(), displayValue: this.txtNoBorders, value: 0, borderstyle: ''}, {id: Common.UI.getId(), displayValue: this.txtNoBorders, value: 0, borderstyle: ''},
{id: Common.UI.getId(), displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {id: Common.UI.getId(), displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, imgId: 'half-pt'},
{id: Common.UI.getId(), displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20}, {id: Common.UI.getId(), displayValue: '1 ' + txtPt, value: 1, pxValue: 1, imgId: 'one-pt'},
{id: Common.UI.getId(), displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40}, {id: Common.UI.getId(), displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, imgId: 'one-and-half-pt'},
{id: Common.UI.getId(), displayValue: '2.25 ' + txtPt, value: 2.25, pxValue: 3, offsety: 60}, {id: Common.UI.getId(), displayValue: '2.25 ' + txtPt, value: 2.25, pxValue: 3, imgId: 'two-and-quarter-pt'},
{id: Common.UI.getId(), displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80}, {id: Common.UI.getId(), displayValue: '3 ' + txtPt, value: 3, pxValue: 4, imgId: 'three-pt'},
{id: Common.UI.getId(), displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, offsety: 100}, {id: Common.UI.getId(), displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 6, imgId: 'four-and-half-pt'},
{id: Common.UI.getId(), displayValue: '6 ' + txtPt, value: 6, pxValue: 8, offsety: 120} {id: Common.UI.getId(), displayValue: '6 ' + txtPt, value: 6, pxValue: 8, imgId: 'six-pt'}
] ]
}).on('selected', _.bind(function(combo, record) { }).on('selected', _.bind(function(combo, record) {
this.BorderSize = {ptValue: record.value, pxValue: record.pxValue}; this.BorderSize = {ptValue: record.value, pxValue: record.pxValue};

22
apps/spreadsheeteditor/main/app/view/CellSettings.js
View file

@ -424,17 +424,17 @@ define([
menuStyle: 'min-width: 93px;', menuStyle: 'min-width: 93px;',
disabled: this._locked, disabled: this._locked,
data: [ data: [
{ value: Asc.c_oAscBorderStyles.Thin, offsety: 0}, { value: Asc.c_oAscBorderStyles.Thin, imgId: "solid-s"},
{ value: Asc.c_oAscBorderStyles.Hair, offsety: 20}, { value: Asc.c_oAscBorderStyles.Hair, imgId: "dots-s"},
{ value: Asc.c_oAscBorderStyles.Dotted, offsety: 40}, { value: Asc.c_oAscBorderStyles.Dotted, imgId: "dashes-s"},
{ value: Asc.c_oAscBorderStyles.Dashed, offsety: 60}, { value: Asc.c_oAscBorderStyles.Dashed, imgId: "dashes-m"},
{ value: Asc.c_oAscBorderStyles.DashDot, offsety: 80}, { value: Asc.c_oAscBorderStyles.DashDot, imgId: "dash-dot-s"},
{ value: Asc.c_oAscBorderStyles.DashDotDot, offsety: 100}, { value: Asc.c_oAscBorderStyles.DashDotDot, imgId: "dash-dot-dot-s"},
{ value: Asc.c_oAscBorderStyles.Medium, offsety: 120}, { value: Asc.c_oAscBorderStyles.Medium, imgId: "solid-m"},
{ value: Asc.c_oAscBorderStyles.MediumDashed, offsety: 140}, { value: Asc.c_oAscBorderStyles.MediumDashed, imgId: "dashes-l"},
{ value: Asc.c_oAscBorderStyles.MediumDashDot, offsety: 160}, { value: Asc.c_oAscBorderStyles.MediumDashDot, imgId: "dash-dot-s"},
{ value: Asc.c_oAscBorderStyles.MediumDashDotDot, offsety: 180}, { value: Asc.c_oAscBorderStyles.MediumDashDotDot, imgId: "dash-dot-dot-m"},
{ value: Asc.c_oAscBorderStyles.Thick, offsety: 200} { value: Asc.c_oAscBorderStyles.Thick, imgId: "solid-l"}
], ],
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',

24
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View file

@ -501,22 +501,22 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
caption : this.textBordersStyle, caption : this.textBordersStyle,
iconCls : 'menu__icon btn-border-style', iconCls : 'menu__icon btn-border-style',
menu : (function(){ menu : (function(){
var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item" style="background-position: 0 -<%= options.offsety %>px;"></div></a>'); var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item"><svg><use xlink:href="#<%= options.imgId %>"></use></svg></div></a>');
me.mnuBorderWidth = new Common.UI.Menu({ me.mnuBorderWidth = new Common.UI.Menu({
style : 'min-width: 100px;', style : 'min-width: 100px;',
menuAlign : 'tl-tr', menuAlign : 'tl-tr',
items: [ items: [
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin , offsety: 0, checked:true}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin , imgId: "solid-s", checked:true},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair, offsety: 20}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair, imgId: "dots-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted, offsety: 40}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted, imgId: "dashes-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed, offsety: 60}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed, imgId: "dashes-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot, offsety: 80}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot, imgId: "dash-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot, offsety: 100}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot, imgId: "dash-dot-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, offsety: 120}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, imgId: "solid-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed, offsety: 140}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed, imgId: "dashes-l"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot, offsety: 160}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot, imgId: "dash-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot, offsety: 180}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot, imgId: "dash-dot-dot-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick, offsety: 200} { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick, imgId: "solid-l"}
] ]
}); });

24
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -2482,24 +2482,24 @@ define([
iconCls : 'menu__icon btn-border-style', iconCls : 'menu__icon btn-border-style',
// template : _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 11px; height: 11px; margin: 2px 7px 0 -9px;"></span><%= caption %></a>'), // template : _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 11px; height: 11px; margin: 2px 7px 0 -9px;"></span><%= caption %></a>'),
menu : (function(){ menu : (function(){
var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item" style="background-position: 0 -<%= options.offsety %>px;"></div></a>'); var itemTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div class="border-size-item"><svg><use xlink:href="#<%= options.imgId %>"></use></svg></div></a>');
me.mnuBorderWidth = new Common.UI.Menu({ me.mnuBorderWidth = new Common.UI.Menu({
style : 'min-width: 100px;', style : 'min-width: 100px;',
menuAlign : 'tl-tr', menuAlign : 'tl-tr',
id : 'toolbar-menu-borders-width', id : 'toolbar-menu-borders-width',
items: [ items: [
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin , offsety: 0, checked:true}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thin , imgId: "solid-s", checked:true},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair, offsety: 20}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Hair, imgId: "dots-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted, offsety: 40}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dotted, imgId: "dashes-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed, offsety: 60}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Dashed, imgId: "dashes-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot, offsety: 80}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDot, imgId: "dash-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot, offsety: 100}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.DashDotDot, imgId: "dash-dot-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, offsety: 120}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Medium, imgId: "solid-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed, offsety: 140}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashed, imgId: "dashes-l"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot, offsety: 160}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDot, imgId: "dash-dot-s"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot, offsety: 180}, { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.MediumDashDotDot, imgId: "dash-dot-dot-m"},
{ template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick, offsety: 200} { template: itemTemplate, stopPropagation: true, checkable: true, toggleGroup: 'border-width', value: Asc.c_oAscBorderStyles.Thick, imgId: "solid-l"}
] ]
}); });

25
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -81,28 +81,15 @@
#id-toolbar-mnu-item-border-width, #id-toolbar-mnu-item-border-width,
#format-rules-borders-border-width { #format-rules-borders-border-width {
.border-size-item { .border-size-item {
background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) no-repeat scroll 0 0";
background-size: 60px auto;
width: 60px; width: 60px;
height: 20px; height: 20px;
margin: -3px 10px -2px; margin: -3px 10px -2px;
filter: @img-border-type-filter; svg{
display: inline-block;
.pixel-ratio__1_25 & { height: 3px;
background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.25x.png)"; width: 100%;
} fill: @text-normal-ie;
fill: @text-normal;
.pixel-ratio__1_5 & {
background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.5x.png)";
//background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.5x.png)";
}
.pixel-ratio__1_75 & {
background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@1.75x.png)";
}
.pixel-ratio__2 & {
background-image: ~"url(@{app-image-const-path}/toolbar/BorderSize@2x.png)";
} }
} }
} }