[multiscaling] changed "wrapping" and "table borders" icons in DE

This commit is contained in:
Maxim Kadushkin 2021-01-26 23:52:43 +03:00
parent 8e81a7b0e1
commit 5cd3145d73
83 changed files with 208 additions and 138 deletions

View file

@ -121,10 +121,18 @@ Common.Utils = _.extend(new(function() {
checkSize = function() {
var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
"screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
var str_mq_200 = "screen and (-webkit-min-device-pixel-ratio: 2), " +
"screen and (min-resolution: 2dppx), screen and (min-resolution: 192dpi)";
if ( window.matchMedia(str_mq_150).matches ) {
$(document.body).addClass('pixel-ratio__1_5');
$(document.body).removeClass('pixel-ratio__2');
} else
if ( window.matchMedia(str_mq_200).matches ) {
$(document.body).addClass('pixel-ratio__2');
$(document.body).removeClass('pixel-ratio__1_5');
} else {
$(document.body).removeClass('pixel-ratio__1_5');
$(document.body).removeClass('pixel-ratio__2');
}
me.zoom = 1;

View file

@ -10,4 +10,8 @@
}
}
}
.toolbar__icon.toolbar__icon-big {
background-size: var(--big-icon-background-image-width) auto;
}
{{/spritesheet}}

View file

@ -0,0 +1,5 @@
{{#spritesheet}}
.options__icon.options__icon-huge {
background-size: var(--huge-icon-background-image-width) auto;
}
{{/spritesheet}}

View file

@ -11,13 +11,27 @@
}
}
}
&.active, &:active {
&:not(:disabled):not(.disabled) {
.toolbar__icon.toolbar__icon-big {
@btn-active-icon-offset: -28px;
background-position-x: @btn-active-icon-offset;
}
}
}
}
.x-huge .toolbar__icon {
background-image: url(resources/{{{escaped_image}}});
}
.toolbar__icon.toolbar__icon-big {
background-image: var(--big-icon-background-image);
}
{{/spritesheet}}
{{#sprites}}
{{#parselang name}}.x-huge .{{name}}{{/parselang}} {
{{#parselang name}}.x-huge .{{name}}{{/parselang}},
.toolbar__icon-big.{{name}}
{
background-position: {{px.offset_x}} {{px.offset_y}};
--bgX: {{px.offset_x}};

View file

@ -0,0 +1,22 @@
{{#spritesheet}}
.btn {
&.active, &:active {
&:not(:disabled):not(.disabled) {
.options__icon.options__icon-huge {
@btn-active-icon-offset: -40px;
background-position-x: @btn-active-icon-offset;
}
}
}
}
.options__icon.options__icon-huge {
background-image: var(--huge-icon-background-image);
}
{{/spritesheet}}
{{#sprites}}
.options__icon-huge.{{name}}
{
background-position: {{px.offset_x}} {{px.offset_y}};
}
{{/sprites}}

View file

@ -95,6 +95,9 @@
--pixel-ratio-factor: @ratio;
--scaled-one-pixel: @one-px;
}
.pixel-ratio__2 {
}
}
.button-normal-icon(@icon-class, @index, @icon-size) {

View file

@ -22,7 +22,7 @@
}
&.large {
.btnsize(31px);
.btnsize(30px);
}
&.huge {
@ -30,7 +30,7 @@
}
&.huge-1 {
.btnsize(45px);
.btnsize(40px);
}
&.x-huge {
@ -876,21 +876,21 @@ svg.icon {
display: none;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 2.5dppx),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 240dpi) {
.@{class100} {
display: none;
}
.@{class150} {
display: block;
}
}
//@media
//only screen and (-webkit-min-device-pixel-ratio: 1.5),
//only screen and (-webkit-min-device-pixel-ratio: 2.5),
//only screen and (min-resolution: 1.5dppx),
//only screen and (min-resolution: 2.5dppx),
//only screen and (min-resolution: 144dpi),
//only screen and (min-resolution: 240dpi) {
// .@{class100} {
// display: none;
// }
//
// .@{class150} {
// display: block;
// }
//}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),

View file

@ -211,13 +211,13 @@ define([
createDelayedControls: function() {
var me = this,
viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
{ icon: 'btn-wrap-inline', data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ icon: 'btn-wrap-square', data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ icon: 'btn-wrap-tight', data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ icon: 'btn-wrap-through', data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ icon: 'btn-wrap-topbottom', data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ icon: 'btn-wrap-infront', data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ icon: 'btn-wrap-behind', data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
];
this.cmbWrapType = new Common.UI.ComboDataView({
@ -229,10 +229,9 @@ define([
cls: 'combo-chart-style'
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px 0;"/>',
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
'</div>'
].join(''));
this.cmbWrapType.render($('#chart-combo-wrap'));

View file

@ -113,14 +113,14 @@ define([
});
_.each([
[c_tableBorder.BORDER_HORIZONTAL_TOP, 't', 'btn-borders-large btn-adv-paragraph-top', '00'],
[c_tableBorder.BORDER_HORIZONTAL_CENTER, 'm', 'btn-borders-large btn-adv-paragraph-inner-hor', '01'],
[c_tableBorder.BORDER_HORIZONTAL_BOTTOM, 'b', 'btn-borders-large btn-adv-paragraph-bottom', '10'],
[c_tableBorder.BORDER_OUTER, 'lrtb', 'btn-borders-large btn-adv-paragraph-outer', '11'],
[c_tableBorder.BORDER_VERTICAL_LEFT, 'l', 'btn-borders-large btn-adv-paragraph-left', '20'],
[c_tableBorder.BORDER_ALL, 'lrtbm', 'btn-borders-large btn-adv-paragraph-all', '21'],
[c_tableBorder.BORDER_VERTICAL_RIGHT, 'r', 'btn-borders-large btn-adv-paragraph-right', '30'],
[c_tableBorder.BORDER_NONE, '', 'btn-borders-large btn-adv-paragraph-none', '31']
[c_tableBorder.BORDER_HORIZONTAL_TOP, 't', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top', '00'],
[c_tableBorder.BORDER_HORIZONTAL_CENTER, 'm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner', '01'],
[c_tableBorder.BORDER_HORIZONTAL_BOTTOM, 'b', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-bottom', '10'],
[c_tableBorder.BORDER_OUTER, 'lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-outer', '11'],
[c_tableBorder.BORDER_VERTICAL_LEFT, 'l', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-left', '20'],
[c_tableBorder.BORDER_ALL, 'lrtbm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-all', '21'],
[c_tableBorder.BORDER_VERTICAL_RIGHT, 'r', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-right', '30'],
[c_tableBorder.BORDER_NONE, '', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-none', '31']
], function(item, index) {
var _btn = new Common.UI.Button({
parentEl: $('#drop-advanced-button-borderline-' + item[3]),
@ -270,7 +270,7 @@ define([
this.btnNone = new Common.UI.Button({
parentEl: $('#drop-advanced-button-none'),
cls : 'btn huge-1 btn-options',
iconCls : 'icon-advanced-wrap btn-drop-none',
iconCls : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-none',
enableToggle: true,
toggleGroup : 'dropAdvGroup',
allowDepress: false,
@ -286,7 +286,7 @@ define([
this.btnInText = new Common.UI.Button({
parentEl: $('#drop-advanced-button-intext'),
cls : 'btn huge-1 btn-options',
iconCls : 'icon-advanced-wrap btn-drop-text',
iconCls : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-text',
enableToggle: true,
toggleGroup : 'dropAdvGroup',
allowDepress: false,
@ -302,7 +302,7 @@ define([
this.btnInMargin = new Common.UI.Button({
parentEl: $('#drop-advanced-button-inmargin'),
cls : 'btn huge-1 btn-options',
iconCls : 'icon-advanced-wrap btn-drop-margin',
iconCls : 'icon-advanced-wrap options__icon options__icon-huge btn-drop-margin',
enableToggle: true,
toggleGroup : 'dropAdvGroup',
allowDepress: false,

View file

@ -121,13 +121,13 @@ define([
createDelayedControls: function() {
var me = this,
viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
{ icon: 'btn-wrap-inline', data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ icon: 'btn-wrap-square', data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ icon: 'btn-wrap-tight', data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ icon: 'btn-wrap-through', data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ icon: 'btn-wrap-topbottom', data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ icon: 'btn-wrap-infront', data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ icon: 'btn-wrap-behind', data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
];
this.cmbWrapType = new Common.UI.ComboDataView({
@ -139,10 +139,9 @@ define([
cls: 'combo-chart-style'
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px 0;"/>',
'<div class="item-icon-box" id="<%= id %>" style="">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''));
this.cmbWrapType.render($('#image-combo-wrap'));

View file

@ -403,7 +403,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapInline = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-inline'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-inline',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-inline',
posId: Asc.c_oAscWrapStyle2.Inline,
hint: this.textWrapInlineTooltip,
enableToggle: true,
@ -415,7 +415,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapSquare = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-square'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-square',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-square',
posId: Asc.c_oAscWrapStyle2.Square,
hint: this.textWrapSquareTooltip,
enableToggle: true,
@ -427,7 +427,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapTight = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-tight'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-tight',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-tight',
posId: Asc.c_oAscWrapStyle2.Tight,
hint: this.textWrapTightTooltip,
enableToggle: true,
@ -439,7 +439,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapThrough = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-through'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-through',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-through',
posId: Asc.c_oAscWrapStyle2.Through,
hint: this.textWrapThroughTooltip,
enableToggle: true,
@ -451,7 +451,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapTopBottom = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-topbottom'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-topbottom',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-topbottom',
posId: Asc.c_oAscWrapStyle2.TopAndBottom,
hint: this.textWrapTopbottomTooltip,
enableToggle: true,
@ -463,7 +463,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapBehind = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-behind'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-behind',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-behind',
posId: Asc.c_oAscWrapStyle2.Behind,
hint: this.textWrapBehindTooltip,
enableToggle: true,
@ -475,7 +475,7 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
this.btnWrapInFront = new Common.UI.Button({
parentEl: $('#image-advanced-button-wrap-infront'),
cls: 'btn-options huge-1',
iconCls: 'icon-advanced-wrap btn-wrap-infront',
iconCls: 'icon-advanced-wrap options__icon options__icon-huge btn-wrap-infront',
posId: Asc.c_oAscWrapStyle2.InFront,
hint: this.textWrapInFrontTooltip,
enableToggle: true,

View file

@ -391,14 +391,14 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
});
var _arrBorderPresets = [
['lrtb', 'btn-borders-large btn-adv-paragraph-outer', 'paragraphadv-button-border-outer', this.tipOuter],
['lrtbm', 'btn-borders-large btn-adv-paragraph-all', 'paragraphadv-button-border-all', this.tipAll],
['', 'btn-borders-large btn-adv-paragraph-none', 'paragraphadv-button-border-none', this.tipNone],
['l', 'btn-borders-large btn-adv-paragraph-left', 'paragraphadv-button-border-left', this.tipLeft],
['r', 'btn-borders-large btn-adv-paragraph-right', 'paragraphadv-button-border-right', this.tipRight],
['t', 'btn-borders-large btn-adv-paragraph-top', 'paragraphadv-button-border-top', this.tipTop],
['m', 'btn-borders-large btn-adv-paragraph-inner-hor', 'paragraphadv-button-border-inner-hor', this.tipInner],
['b', 'btn-borders-large btn-adv-paragraph-bottom', 'paragraphadv-button-border-bottom', this.tipBottom]
['lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-outer', 'paragraphadv-button-border-outer', this.tipOuter],
['lrtbm', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-all', 'paragraphadv-button-border-all', this.tipAll],
['', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-none', 'paragraphadv-button-border-none', this.tipNone],
['l', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-left', 'paragraphadv-button-border-left', this.tipLeft],
['r', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-right', 'paragraphadv-button-border-right', this.tipRight],
['t', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-top', 'paragraphadv-button-border-top', this.tipTop],
['m', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-inner', 'paragraphadv-button-border-inner-hor', this.tipInner],
['b', 'btn-borders-large toolbar__icon toolbar__icon-big paragraph-borders-bottom', 'paragraphadv-button-border-bottom', this.tipBottom]
];
this._btnsBorderPosition = [];

View file

@ -1520,13 +1520,13 @@ define([
this.lockedControls.push(this.btnFlipH);
var viewData = [
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
{ icon: 'btn-wrap-inline', data: Asc.c_oAscWrapStyle2.Inline, tip: this.txtInline, selected: true },
{ icon: 'btn-wrap-square', data: Asc.c_oAscWrapStyle2.Square, tip: this.txtSquare },
{ icon: 'btn-wrap-tight', data: Asc.c_oAscWrapStyle2.Tight, tip: this.txtTight },
{ icon: 'btn-wrap-through', data: Asc.c_oAscWrapStyle2.Through, tip: this.txtThrough },
{ icon: 'btn-wrap-topbottom', data: Asc.c_oAscWrapStyle2.TopAndBottom, tip: this.txtTopAndBottom },
{ icon: 'btn-wrap-infront', data: Asc.c_oAscWrapStyle2.InFront, tip: this.txtInFront },
{ icon: 'btn-wrap-behind', data: Asc.c_oAscWrapStyle2.Behind, tip: this.txtBehind }
];
@ -1539,10 +1539,9 @@ define([
cls: 'combo-chart-style'
});
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-wrap-item" ',
'width="' + this.cmbWrapType.itemWidth + '" height="' + this.cmbWrapType.itemHeight + '" ',
'style="background-position: -<%= offsetx %>px 0;"/>',
'<div class="item-icon-box" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
'</div>'
].join(''));
this.cmbWrapType.render($('#shape-combo-wrap'));

View file

@ -929,10 +929,10 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
});
var _arrBorderPresets = [
['cm', 'btn-borders-large btn-adv-position-inner', 'tableadv-button-border-inner', this.tipInner],
['lrtb', 'btn-borders-large btn-adv-position-outer', 'tableadv-button-border-outer', this.tipOuter],
['lrtbcm', 'btn-borders-large btn-adv-position-all', 'tableadv-button-border-all', this.tipAll],
['', 'btn-borders-large btn-adv-position-none', 'tableadv-button-border-none', this.tipNone]
['cm', 'btn-borders-large toolbar__icon toolbar__icon-big borders-inner-only', 'tableadv-button-border-inner', this.tipInner],
['lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big borders-outer-only', 'tableadv-button-border-outer', this.tipOuter],
['lrtbcm', 'btn-borders-large toolbar__icon toolbar__icon-big borders-all', 'tableadv-button-border-all', this.tipAll],
['', 'btn-borders-large toolbar__icon toolbar__icon-big borders-none', 'tableadv-button-border-none', this.tipNone]
];
this._btnsBorderPosition = [];
@ -951,14 +951,14 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
var _arrTableBorderPresets = [
['cm', '', 'btn-borders-large btn-adv-position-inner-none', 'tableadv-button-border-inner-none', this.tipCellInner],
['lrtb', '', 'btn-borders-large btn-adv-position-outer-none', 'tableadv-button-border-outer-none', this.tipCellOuter],
['lrtbcm', '', 'btn-borders-large btn-adv-position-all-none', 'tableadv-button-border-all-none', this.tipCellAll],
['', '', 'btn-borders-large btn-adv-position-none-none', 'tableadv-button-border-none-none', this.tipNone],
['lrtbcm', 'lrtb', 'btn-borders-large btn-adv-position-all-table', 'tableadv-button-border-all-table', this.tipTableOuterCellAll],
['', 'lrtb', 'btn-borders-large btn-adv-position-none-table', 'tableadv-button-border-none-table', this.tipOuter],
['cm', 'lrtb', 'btn-borders-large btn-adv-position-inner-table', 'tableadv-button-border-inner-table', this.tipTableOuterCellInner],
['lrtb', 'lrtb', 'btn-borders-large btn-adv-position-outer-table', 'tableadv-button-border-outer-table', this.tipTableOuterCellOuter]
['cm', '', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-inner', 'tableadv-button-border-inner-none', this.tipCellInner],
['lrtb', '', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-outer', 'tableadv-button-border-outer-none', this.tipCellOuter],
['lrtbcm', '', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none-all', 'tableadv-button-border-all-none', this.tipCellAll],
['', '', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-none', 'tableadv-button-border-none-none', this.tipNone],
['lrtbcm', 'lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-all', 'tableadv-button-border-all-table', this.tipTableOuterCellAll],
['', 'lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-none', 'tableadv-button-border-none-table', this.tipOuter],
['cm', 'lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-inner', 'tableadv-button-border-inner-table', this.tipTableOuterCellInner],
['lrtb', 'lrtb', 'btn-borders-large toolbar__icon toolbar__icon-big borders-twin-outer-outer', 'tableadv-button-border-outer-table', this.tipTableOuterCellOuter]
];
this._btnsTableBorderPosition = [];

View file

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 583 B

View file

Before

Width:  |  Height:  |  Size: 485 B

After

Width:  |  Height:  |  Size: 485 B

View file

Before

Width:  |  Height:  |  Size: 779 B

After

Width:  |  Height:  |  Size: 779 B

View file

@ -1,47 +1,9 @@
.btn-borders-large {
.background-ximage-v2('right-panels/LargeBorders.png', 62px, @commonimage: false);
}
.button-normal-icon(btn-adv-paragraph-all, 0, 31px);
.button-normal-icon(btn-adv-paragraph-bottom, 1, 31px);
.button-normal-icon(btn-adv-paragraph-left, 2, 31px);
.button-normal-icon(btn-adv-paragraph-inner-hor, 3, 31px);
.button-normal-icon(btn-adv-paragraph-none, 4, 31px);
.button-normal-icon(btn-adv-paragraph-outer, 5, 31px);
.button-normal-icon(btn-adv-paragraph-right, 6, 31px);
.button-normal-icon(btn-adv-paragraph-top, 7, 31px);
.button-normal-icon(btn-adv-position-all-none, 8, 31px);
.button-normal-icon(btn-adv-position-all-table, 9, 31px);
.button-normal-icon(btn-adv-position-all, 10, 31px);
.button-normal-icon(btn-adv-position-inner-none, 11, 31px);
.button-normal-icon(btn-adv-position-inner-table, 12, 31px);
.button-normal-icon(btn-adv-position-inner, 13, 31px);
.button-normal-icon(btn-adv-position-none, 14, 31px);
.button-normal-icon(btn-adv-position-none-table, 15, 31px);
.button-normal-icon(btn-adv-position-none-none, 16, 31px);
.button-normal-icon(btn-adv-position-outer-none, 17, 31px);
.button-normal-icon(btn-adv-position-outer-table, 18, 31px);
.button-normal-icon(btn-adv-position-outer, 19, 31px);
.button-otherstates-icon(btn-borders-large, 31px);
.icon-advanced-wrap {
.background-ximage-v2('right-panels/right_panel_wrap_btns.png', 90px, @commonimage: false);
}
.button-normal-icon(btn-wrap-inline, 0, @x-huge-icon-size);
.button-normal-icon(btn-wrap-square, 1, @x-huge-icon-size);
.button-normal-icon(btn-wrap-tight, 2, @x-huge-icon-size);
.button-normal-icon(btn-wrap-through, 3, @x-huge-icon-size);
.button-normal-icon(btn-wrap-topbottom, 4, @x-huge-icon-size);
.button-normal-icon(btn-wrap-infront, 5, @x-huge-icon-size);
.button-normal-icon(btn-wrap-behind, 6, @x-huge-icon-size);
.button-normal-icon(btn-drop-none, 7, @x-huge-icon-size);
.button-normal-icon(btn-drop-text, 8, @x-huge-icon-size);
.button-normal-icon(btn-drop-margin, 9, @x-huge-icon-size);
.button-otherstates-icon(icon-advanced-wrap, @x-huge-icon-size);
.combo-arrow-style {
.form-control {
cursor: pointer;

View file

@ -135,10 +135,30 @@
@import "sprites/iconssmall@1x";
@import "sprites/iconsbig@1x";
@import "sprites/iconshuge@1x";
@import "sprites/iconssmall@2x";
@import "sprites/iconsbig@2x";
@import "sprites/iconssmall@1.5x";
@import "sprites/iconsbig@1.5x";
@import "sprites/iconshuge@1.5x";
:root {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge.png)";
--big-icon-background-image-width: 56px;
--huge-icon-background-image-width: 80px;
.pixel-ratio__1_5 {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@1.5x.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@1.5x.png)";
}
.pixel-ratio__2 {
--big-icon-background-image: ~"url(@{app-image-const-path}/iconsbig@2x.png)";
--huge-icon-background-image: ~"url(@{app-image-const-path}/iconshuge@2x.png)";
}
}
.font-size-small {
.fontsize(@font-size-small);

View file

@ -214,4 +214,19 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
}
}
}
}
#image-combo-wrap, #chart-combo-wrap, #shape-combo-wrap {
.options__icon {
width: 40px;
height: 40px;
}
.item-icon-box {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}

View file

@ -1,6 +1,7 @@
module.exports = function (grunt, rootpathprefix) {
const sprite_name = 'iconssmall';
const sprite_name_big = 'iconsbig';
const sprite_name_huge = 'iconshuge';
const helpers = {
parselang: (name, options) => {
@ -19,7 +20,7 @@ module.exports = function (grunt, rootpathprefix) {
const configTemplate = opts => {
let _editor_res_root = `${_prefix}apps/${opts.editor}/main/resources`,
_common_res_root = `${_prefix}apps/common/main/resources`,
_scaled_path = `${opts.scale}/${opts.isbig ? 'big' : '.'}`;
_scaled_path = `${opts.scale}/${opts.extpath ? opts.extpath : '.'}`;
return {
src: [`${_editor_res_root}/img/toolbar/${_scaled_path}/*.png`, `${_common_res_root}/img/toolbar/${_scaled_path}/*.png`],
dest: `${_editor_res_root}/img/${opts.scale != '1x' ? opts.spritename + '@' + opts.scale : opts.spritename}.png`,
@ -41,7 +42,13 @@ module.exports = function (grunt, rootpathprefix) {
editor:'documenteditor',
spritename: sprite_name_big,
scale: '1x',
isbig: true
extpath: 'big'
}),
'word-huge-1x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_huge,
scale: '1x',
extpath: 'huge'
}),
'word-2x': configTemplate({
editor:'documenteditor',
@ -52,7 +59,13 @@ module.exports = function (grunt, rootpathprefix) {
editor:'documenteditor',
spritename: sprite_name_big,
scale: '2x',
isbig: true
extpath: 'big'
}),
'word-huge-2x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_huge,
scale: '2x',
extpath: 'huge'
}),
'word1.5x': configTemplate({
editor:'documenteditor',
@ -63,7 +76,13 @@ module.exports = function (grunt, rootpathprefix) {
editor:'documenteditor',
spritename: sprite_name_big,
scale: '1.5x',
isbig: true
extpath: 'big'
}),
'word-huge-1.5x': configTemplate({
editor:'documenteditor',
spritename: sprite_name_huge,
scale: '1.5x',
extpath: 'huge'
}),
'slide-1x': configTemplate({
editor:'presentationeditor',
@ -74,7 +93,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'presentationeditor',
spritename: sprite_name_big,
scale: '1x',
isbig: true
extpath: 'big'
}),
'slide-2x': configTemplate({
editor:'presentationeditor',
@ -85,7 +104,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'presentationeditor',
spritename: sprite_name_big,
scale: '2x',
isbig: true
extpath: 'big'
}),
'slide-1.5x': configTemplate({
editor:'presentationeditor',
@ -96,7 +115,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'presentationeditor',
spritename: sprite_name_big,
scale: '1.5x',
isbig: true
extpath: 'big'
}),
'cell-1x': configTemplate({
editor:'spreadsheeteditor',
@ -107,7 +126,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'spreadsheeteditor',
spritename: sprite_name_big,
scale: '1x',
isbig: true
extpath: 'big'
}),
'cell-2x': configTemplate({
editor:'spreadsheeteditor',
@ -118,7 +137,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'spreadsheeteditor',
spritename: sprite_name_big,
scale: '2x',
isbig: true
extpath: 'big'
}),
'cell-1.5x': configTemplate({
editor:'spreadsheeteditor',
@ -129,7 +148,7 @@ module.exports = function (grunt, rootpathprefix) {
editor:'spreadsheeteditor',
spritename: sprite_name_big,
scale: '1.5x',
isbig: true
extpath: 'big'
})
}
});
@ -137,7 +156,8 @@ module.exports = function (grunt, rootpathprefix) {
// Load in `grunt-spritesmith`
grunt.loadNpmTasks('grunt-spritesmith');
grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word1.5x', 'sprite:word-big-1.5x']);
grunt.registerTask('word-icons', ['sprite:word-1x', 'sprite:word-big-1x', 'sprite:word-huge-1x', 'sprite:word-2x', 'sprite:word-big-2x', 'sprite:word-huge-2x',
'sprite:word1.5x', 'sprite:word-big-1.5x', 'sprite:word-huge-1.5x']);
grunt.registerTask('slide-icons', ['sprite:slide-1x', 'sprite:slide-big-1x','sprite:slide-2x', 'sprite:slide-big-2x','sprite:slide-1.5x', 'sprite:slide-big-1.5x']);
grunt.registerTask('cell-icons', ['sprite:cell-1x', 'sprite:cell-big-1x','sprite:cell-2x', 'sprite:cell-big-2x','sprite:cell-1.5x', 'sprite:cell-big-1.5x']);