diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 687fb3c23..6bca49533 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -187,8 +187,9 @@ define([
'
' +
'<% } else { %>' +
'<% if (/svgicon/.test(iconCls)) {' +
- 'print(\'\');' +
- '} else ' +
+ 'print(\'\');' +
+ '} else ' +
'print(\' \'); %>' +
'<% } %>';
diff --git a/apps/common/main/resources/img/controls/toolbarbig@1.5x.png b/apps/common/main/resources/img/controls/toolbarbig@1.5x.png
new file mode 100644
index 000000000..315ce3014
Binary files /dev/null and b/apps/common/main/resources/img/controls/toolbarbig@1.5x.png differ
diff --git a/apps/common/main/resources/img/header/buttons.svg b/apps/common/main/resources/img/header/buttons.svg
index b808b1cb7..7b8046f07 100644
--- a/apps/common/main/resources/img/header/buttons.svg
+++ b/apps/common/main/resources/img/header/buttons.svg
@@ -67,4 +67,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/common/main/resources/img/header/buttons150.svg b/apps/common/main/resources/img/header/buttons150.svg
index 1534f858f..ae53c467c 100644
--- a/apps/common/main/resources/img/header/buttons150.svg
+++ b/apps/common/main/resources/img/header/buttons150.svg
@@ -8,10 +8,9 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 508f59f61..e701bda90 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -110,6 +110,9 @@
.icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
}
}
+
+ &.active svg.icon,
+ &:active svg.icon {fill:#fff;}
}
.button-otherstates-icon2(@icon-class, @icon-size) {
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index c7abef83e..7d68f554d 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -121,12 +121,25 @@
}
}
- .icon {
+ .icon:not(svg) {
width: @icon-size;
height: @icon-size;
min-width: 0;
}
+ svg.icon {
+ width: 28px;
+ height: 28px;
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 1.5dppx),
+ only screen and (min-resolution: 144dpi) {
+ width:calc(~"40px/1.5");
+ height:calc(~"40px/1.5");
+ }
+ }
+
button.small .icon {
width: 20px;
height: 20px;
@@ -237,13 +250,39 @@
line-height: 20px;
&:not(svg) {
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 1.5dppx),
+ only screen and (min-resolution: 144dpi) {
+ background-image: ~"url('@{app-image-const-path}/toolbar-menu@1.5x.png')";
+ background-size: 60px auto;
+ }
+
.background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
}
}
+
+ svg.icon {
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+ only screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+ only screen and (min-resolution: 144dpi) and (max-resolution: 143dpi) {
+ width:calc(~"28px/1.5");
+ height:calc(~"28px/1.5");
+ }
+ }
}
&.x-huge, .btn-group.x-huge > & {
:not(svg).icon {
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 1.5dppx),
+ only screen and (min-resolution: 144dpi) {
+ background-image: ~"url('@{common-image-const-path}/controls/toolbarbig@1.5x.png')";
+ background-size: 78px auto;
+ }
+
.background-ximage('@{common-image-path}/controls/toolbarbig.png', '@{common-image-path}/controls/toolbarbig@2x.png', 78px);
}
}
@@ -333,6 +372,7 @@
> .dropdown-toggle:first-child {
.inner-box-caret {
padding: 0 2px;
+ float: right;
}
}
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 6e082188d..d81d23c55 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -291,6 +291,14 @@
svg.icon {
display: inline-block;
vertical-align: middle;
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 1.5dppx),
+ only screen and (min-resolution: 144dpi) {
+ width:calc(~"28px/1.5");
+ height:calc(~"28px/1.5");
+ }
}
.btn&[disabled],
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index acdb1b86a..d5d1c65f6 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -292,7 +292,8 @@ define([
this.btnAlignLeft = new Common.UI.Button({
id: 'id-toolbar-btn-align-left',
cls: 'btn-toolbar',
- iconCls: 'btn-align-left',
+ // iconCls: 'btn-align-left',
+ iconCls: 'svgicon svg-btn-align-left',
enableToggle: true,
allowDepress: false,
toggleGroup: 'alignGroup'
@@ -302,7 +303,8 @@ define([
this.btnAlignCenter = new Common.UI.Button({
id: 'id-toolbar-btn-align-center',
cls: 'btn-toolbar',
- iconCls: 'btn-align-center',
+ // iconCls: 'btn-align-center',
+ iconCls: 'svgicon svg-btn-align-center',
enableToggle: true,
allowDepress: false,
toggleGroup: 'alignGroup'
@@ -312,7 +314,8 @@ define([
this.btnAlignRight = new Common.UI.Button({
id: 'id-toolbar-btn-align-right',
cls: 'btn-toolbar',
- iconCls: 'btn-align-right',
+ // iconCls: 'btn-align-right',
+ iconCls: 'svgicon svg-btn-align-right',
enableToggle: true,
allowDepress: false,
toggleGroup: 'alignGroup'
@@ -322,7 +325,8 @@ define([
this.btnAlignJust = new Common.UI.Button({
id: 'id-toolbar-btn-align-just',
cls: 'btn-toolbar',
- iconCls: 'btn-align-just',
+ // iconCls: 'btn-align-just',
+ iconCls: 'svgicon svg-btn-align-just',
enableToggle: true,
allowDepress: false,
toggleGroup: 'alignGroup'
@@ -378,21 +382,24 @@ define([
this.btnDecLeftOffset = new Common.UI.Button({
id: 'id-toolbar-btn-decoffset',
cls: 'btn-toolbar',
- iconCls: 'btn-decoffset'
+ // iconCls: 'btn-decoffset'
+ iconCls: 'svgicon svg-btn-decoffset'
});
this.paragraphControls.push(this.btnDecLeftOffset);
this.btnIncLeftOffset = new Common.UI.Button({
id: 'id-toolbar-btn-incoffset',
cls: 'btn-toolbar',
- iconCls: 'btn-incoffset'
+ // iconCls: 'btn-incoffset'
+ iconCls: 'svgicon svg-btn-incoffset'
});
this.paragraphControls.push(this.btnIncLeftOffset);
this.btnLineSpace = new Common.UI.Button({
id: 'id-toolbar-btn-linespace',
cls: 'btn-toolbar',
- iconCls: 'btn-linespace',
+ // iconCls: 'btn-linespace',
+ iconCls: 'svgicon svg-btn-linespace',
menu: new Common.UI.Menu({
style: 'min-width: 60px;',
items: [
@@ -410,7 +417,8 @@ define([
this.btnShowHidenChars = new Common.UI.Button({
id: 'id-toolbar-btn-hidenchars',
cls: 'btn-toolbar',
- iconCls: 'btn-hidenchars',
+ // iconCls: 'btn-hidenchars',
+ iconCls: 'svgicon svg-btn-hidenchars',
enableToggle: true,
split: true,
menu: new Common.UI.Menu({
@@ -426,7 +434,8 @@ define([
this.btnMarkers = new Common.UI.Button({
id: 'id-toolbar-btn-markers',
cls: 'btn-toolbar',
- iconCls: 'btn-setmarkers',
+ // iconCls: 'btn-setmarkers',
+ iconCls: 'svgicon svg-btn-setmarkers',
enableToggle: true,
toggleGroup: 'markersGroup',
split: true,
@@ -438,7 +447,8 @@ define([
this.btnNumbers = new Common.UI.Button({
id: 'id-toolbar-btn-numbering',
cls: 'btn-toolbar',
- iconCls: 'btn-numbering',
+ // iconCls: 'btn-numbering',
+ iconCls: 'svgicon svg-btn-numbering',
enableToggle: true,
toggleGroup: 'markersGroup',
split: true,
@@ -450,7 +460,8 @@ define([
this.btnMultilevels = new Common.UI.Button({
id: 'id-toolbar-btn-multilevels',
cls: 'btn-toolbar',
- iconCls: 'btn-multilevels',
+ // iconCls: 'btn-multilevels',
+ iconCls: 'svgicon svg-btn-multilevels',
menu: true
});
this.paragraphControls.push(this.btnMultilevels);
@@ -475,7 +486,8 @@ define([
this.btnInsertTable = new Common.UI.Button({
id: 'tlbtn-inserttable',
cls: 'btn-toolbar x-huge icon-top',
- iconCls: 'btn-inserttable',
+ // iconCls: 'btn-inserttable',
+ iconCls: 'svgicon svg-btn-inserttable',
caption: me.capBtnInsTable,
menu: new Common.UI.Menu({
items: [
@@ -489,7 +501,8 @@ define([
this.btnInsertImage = new Common.UI.Button({
id: 'tlbtn-insertimage',
cls: 'btn-toolbar x-huge icon-top',
- iconCls: 'btn-insertimage',
+ // iconCls: 'btn-insertimage',
+ iconCls: 'svgicon svg-btn-insertimage',
caption: me.capBtnInsImage,
menu: new Common.UI.Menu({
items: [
@@ -505,7 +518,8 @@ define([
id: 'tlbtn-insertchart',
cls: 'btn-toolbar x-huge icon-top',
caption: me.capBtnInsChart,
- iconCls: 'btn-insertchart',
+ // iconCls: 'btn-insertchart',
+ iconCls: 'svgicon svg-btn-insertchart',
menu: true
});
this.paragraphControls.push(this.btnInsertChart);
@@ -535,7 +549,8 @@ define([
this.btnEditHeader = new Common.UI.Button({
id: 'id-toolbar-btn-editheader',
cls: 'btn-toolbar x-huge icon-top',
- iconCls: 'btn-editheader',
+ // iconCls: 'btn-editheader',
+ iconCls: 'svgicon svg-btn-editheader',
caption: me.capBtnInsHeader,
menu: true
});
@@ -566,7 +581,8 @@ define([
this.btnInsertShape = new Common.UI.Button({
id: 'tlbtn-insertshape',
cls: 'btn-toolbar x-huge icon-top',
- iconCls: 'btn-insertshape',
+ // iconCls: 'btn-insertshape',
+ iconCls: 'svgicon svg-btn-insertshape',
caption: me.capBtnInsShape,
enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'})
@@ -1326,7 +1342,7 @@ define([
_injectComponent('#slot-img-wrapping', this.btnImgWrapping);
_injectComponent('#slot-btn-watermark', this.btnWatermark);
- this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true);
+ this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', /*'btn-pagebreak'*/'svgicon svg-btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true);
Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);
return $host;
diff --git a/apps/documenteditor/main/resources/img/toolbar-menu@1.5x.png b/apps/documenteditor/main/resources/img/toolbar-menu@1.5x.png
new file mode 100644
index 000000000..55fbb602d
Binary files /dev/null and b/apps/documenteditor/main/resources/img/toolbar-menu@1.5x.png differ