diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js index 50de61e27..4f56044e9 100644 --- a/apps/presentationeditor/main/app/controller/Viewport.js +++ b/apps/presentationeditor/main/app/controller/Viewport.js @@ -272,9 +272,9 @@ define([ 'data-stopPropagation="true"', '<% } %>', '>', '', - '', + '', '', - '', + '', '' ].join('')), stopPropagation: true, diff --git a/apps/presentationeditor/main/app/template/LeftMenu.template b/apps/presentationeditor/main/app/template/LeftMenu.template index 408883566..2e85b7171 100644 --- a/apps/presentationeditor/main/app/template/LeftMenu.template +++ b/apps/presentationeditor/main/app/template/LeftMenu.template @@ -1,14 +1,14 @@
- - + + - - + + - - + +
diff --git a/apps/presentationeditor/main/app/template/RightMenu.template b/apps/presentationeditor/main/app/template/RightMenu.template index f4cfb2d7b..c5b460b6a 100644 --- a/apps/presentationeditor/main/app/template/RightMenu.template +++ b/apps/presentationeditor/main/app/template/RightMenu.template @@ -19,13 +19,13 @@
- - - - - - - - + + + + + + + +
\ No newline at end of file diff --git a/apps/presentationeditor/main/app/template/StatusBar.template b/apps/presentationeditor/main/app/template/StatusBar.template index 411948a61..f4d7afebb 100644 --- a/apps/presentationeditor/main/app/template/StatusBar.template +++ b/apps/presentationeditor/main/app/template/StatusBar.template @@ -36,14 +36,14 @@
- - - + + +
- +
diff --git a/apps/presentationeditor/main/app/view/DocumentHolder.js b/apps/presentationeditor/main/app/view/DocumentHolder.js index 529e5359c..669121698 100644 --- a/apps/presentationeditor/main/app/view/DocumentHolder.js +++ b/apps/presentationeditor/main/app/view/DocumentHolder.js @@ -2703,24 +2703,27 @@ define([ items : [ me.menuParagraphDirectH = new Common.UI.MenuItem({ caption : me.directHText, - iconCls : 'mnu-direct-horiz', + iconCls : 'menu__icon text-orient-hor', checkable : true, + checkmark : false, checked : false, toggleGroup : 'popupparagraphdirect', direction : Asc.c_oAscVertDrawingText.normal }).on('click', _.bind(paragraphDirection, me)), me.menuParagraphDirect90 = new Common.UI.MenuItem({ caption : me.direct90Text, - iconCls : 'mnu-direct-rdown', + iconCls : 'menu__icon text-orient-rdown', checkable : true, + checkmark : false, checked : false, toggleGroup : 'popupparagraphdirect', direction : Asc.c_oAscVertDrawingText.vert }).on('click', _.bind(paragraphDirection, me)), me.menuParagraphDirect270 = new Common.UI.MenuItem({ caption : me.direct270Text, - iconCls : 'mnu-direct-rup', + iconCls : 'menu__icon text-orient-rup', checkable : true, + checkmark : false, checked : false, toggleGroup : 'popupparagraphdirect', direction : Asc.c_oAscVertDrawingText.vert270 diff --git a/apps/presentationeditor/main/app/view/ImageSettings.js b/apps/presentationeditor/main/app/view/ImageSettings.js index 447502f11..479115a28 100644 --- a/apps/presentationeditor/main/app/view/ImageSettings.js +++ b/apps/presentationeditor/main/app/view/ImageSettings.js @@ -178,7 +178,7 @@ define([ this.btnRotate270 = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'rotate-270', + iconCls: 'toolbar__icon btn-rotate-270', value: 0, hint: this.textHint270 }); @@ -188,7 +188,7 @@ define([ this.btnRotate90 = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'rotate-90', + iconCls: 'toolbar__icon btn-rotate-90', value: 1, hint: this.textHint90 }); @@ -198,7 +198,7 @@ define([ this.btnFlipV = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'flip-vert', + iconCls: 'toolbar__icon btn-flip-vert', value: 0, hint: this.textHintFlipV }); @@ -208,7 +208,7 @@ define([ this.btnFlipH = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'flip-hor', + iconCls: 'toolbar__icon btn-flip-hor', value: 1, hint: this.textHintFlipH }); diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 0ab44f978..1ce17c08d 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -1308,7 +1308,7 @@ define([ this.btnRotate270 = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'rotate-270', + iconCls: 'toolbar__icon btn-rotate-270', value: 0, hint: this.textHint270 }); @@ -1318,7 +1318,7 @@ define([ this.btnRotate90 = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'rotate-90', + iconCls: 'toolbar__icon btn-rotate-90', value: 1, hint: this.textHint90 }); @@ -1328,7 +1328,7 @@ define([ this.btnFlipV = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'flip-vert', + iconCls: 'toolbar__icon btn-flip-vert', value: 0, hint: this.textHintFlipV }); @@ -1338,7 +1338,7 @@ define([ this.btnFlipH = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'flip-hor', + iconCls: 'toolbar__icon btn-flip-hor', value: 1, hint: this.textHintFlipH }); diff --git a/apps/presentationeditor/main/app/view/Statusbar.js b/apps/presentationeditor/main/app/view/Statusbar.js index 07b70a2b6..bc1f27ab4 100644 --- a/apps/presentationeditor/main/app/view/Statusbar.js +++ b/apps/presentationeditor/main/app/view/Statusbar.js @@ -231,7 +231,7 @@ define([ this.btnPreview = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'btn-preview', + iconCls: 'toolbar__icon btn-preview', hint: this.tipPreview, hintAnchor: 'top', split: true, diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js index 4fc127f91..9c0caf84b 100644 --- a/apps/presentationeditor/main/app/view/TableSettings.js +++ b/apps/presentationeditor/main/app/view/TableSettings.js @@ -280,22 +280,22 @@ define([ this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5)); var _arrBorderPosition = [ - ['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft], - ['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert], - ['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight], - ['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop], - ['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor], - ['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom], - ['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner], - ['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter], - ['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll], - ['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone] + ['l', 'toolbar__icon btn-border-left', 'table-button-border-left', this.tipLeft], + ['c', 'toolbar__icon btn-border-insidevert', 'table-button-border-inner-vert', this.tipInnerVert], + ['r', 'toolbar__icon btn-border-right', 'table-button-border-right', this.tipRight], + ['t', 'toolbar__icon btn-border-top', 'table-button-border-top', this.tipTop], + ['m', 'toolbar__icon btn-border-insidehor', 'table-button-border-inner-hor', this.tipInnerHor], + ['b', 'toolbar__icon btn-border-bottom', 'table-button-border-bottom', this.tipBottom], + ['cm', 'toolbar__icon btn-border-inside', 'table-button-border-inner', this.tipInner], + ['lrtb', 'toolbar__icon btn-border-out', 'table-button-border-outer', this.tipOuter], + ['lrtbcm', 'toolbar__icon btn-border-all', 'table-button-border-all', this.tipAll], + ['', 'toolbar__icon btn-border-no', 'table-button-border-none', this.tipNone] ]; this._btnsBorderPosition = []; _.each(_arrBorderPosition, function(item, index, list){ var _btn = new Common.UI.Button({ - cls: 'btn-toolbar', + cls: 'btn-toolbar borders--small', iconCls: item[1], strId :item[0], hint: item[3] diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 77bca5712..06f473aa8 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -144,7 +144,7 @@ define([ me.btnChangeSlide = new Common.UI.Button({ id: 'id-toolbar-button-change-slide', cls: 'btn-toolbar', - iconCls: 'btn-changeslide', + iconCls: 'toolbar__icon btn-changeslide', lock: [_set.menuFileOpen, _set.slideDeleted, _set.slideLock, _set.lostConnect, _set.noSlides, _set.disableOnStart], menu: true }); @@ -153,7 +153,7 @@ define([ me.btnPreview = new Common.UI.Button({ id: 'id-toolbar-button-preview', cls: 'btn-toolbar', - iconCls: 'btn-preview', + iconCls: 'toolbar__icon btn-preview', lock: [_set.menuFileOpen, _set.slideDeleted, _set.noSlides, _set.disableOnStart], split: true, menu: new Common.UI.Menu({ @@ -175,7 +175,7 @@ define([ me.btnPrint = new Common.UI.Button({ id: 'id-toolbar-btn-print', cls: 'btn-toolbar', - iconCls: 'btn-print no-mask', + iconCls: 'toolbar__icon btn-print no-mask', lock: [_set.slideDeleted, _set.noSlides, _set.cantPrint, _set.disableOnStart], signals: ['disabled'] }); @@ -184,7 +184,7 @@ define([ me.btnSave = new Common.UI.Button({ id: 'id-toolbar-btn-save', cls: 'btn-toolbar', - iconCls: 'no-mask ' + me.btnSaveCls, + iconCls: 'toolbar__icon no-mask ' + me.btnSaveCls, lock: [_set.lostConnect], signals: ['disabled'] }); @@ -193,7 +193,7 @@ define([ me.btnUndo = new Common.UI.Button({ id: 'id-toolbar-btn-undo', cls: 'btn-toolbar', - iconCls: 'btn-undo', + iconCls: 'toolbar__icon btn-undo', lock: [_set.undoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart], signals: ['disabled'] }); @@ -202,7 +202,7 @@ define([ me.btnRedo = new Common.UI.Button({ id: 'id-toolbar-btn-redo', cls: 'btn-toolbar', - iconCls: 'btn-redo', + iconCls: 'toolbar__icon btn-redo', lock: [_set.redoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart], signals: ['disabled'] }); @@ -211,7 +211,7 @@ define([ me.btnCopy = new Common.UI.Button({ id: 'id-toolbar-btn-copy', cls: 'btn-toolbar', - iconCls: 'btn-copy', + iconCls: 'toolbar__icon btn-copy', lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart] }); me.slideOnlyControls.push(me.btnCopy); @@ -219,7 +219,7 @@ define([ me.btnPaste = new Common.UI.Button({ id: 'id-toolbar-btn-paste', cls: 'btn-toolbar', - iconCls: 'btn-paste', + iconCls: 'toolbar__icon btn-paste', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides] }); me.paragraphControls.push(me.btnPaste); @@ -264,7 +264,7 @@ define([ me.btnBold = new Common.UI.Button({ id: 'id-toolbar-btn-bold', cls: 'btn-toolbar', - iconCls: 'btn-bold', + iconCls: 'toolbar__icon btn-bold', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock], enableToggle: true }); @@ -273,7 +273,7 @@ define([ me.btnItalic = new Common.UI.Button({ id: 'id-toolbar-btn-italic', cls: 'btn-toolbar', - iconCls: 'btn-italic', + iconCls: 'toolbar__icon btn-italic', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock], enableToggle: true }); @@ -282,7 +282,7 @@ define([ me.btnUnderline = new Common.UI.Button({ id: 'id-toolbar-btn-underline', cls: 'btn-toolbar', - iconCls: 'btn-underline', + iconCls: 'toolbar__icon btn-underline', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock], enableToggle: true }); @@ -291,7 +291,7 @@ define([ me.btnStrikeout = new Common.UI.Button({ id: 'id-toolbar-btn-strikeout', cls: 'btn-toolbar', - iconCls: 'btn-strikeout', + iconCls: 'toolbar__icon btn-strikeout', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock], enableToggle: true }); @@ -300,7 +300,7 @@ define([ me.btnSuperscript = new Common.UI.Button({ id: 'id-toolbar-btn-superscript', cls: 'btn-toolbar', - iconCls: 'btn-superscript', + iconCls: 'toolbar__icon btn-superscript', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock, _set.inEquation], enableToggle: true, toggleGroup: 'superscriptGroup' @@ -310,7 +310,7 @@ define([ me.btnSubscript = new Common.UI.Button({ id: 'id-toolbar-btn-subscript', cls: 'btn-toolbar', - iconCls: 'btn-subscript', + iconCls: 'toolbar__icon btn-subscript', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock, _set.inEquation], enableToggle: true, toggleGroup: 'superscriptGroup' @@ -320,7 +320,7 @@ define([ me.btnFontColor = new Common.UI.Button({ id: 'id-toolbar-btn-fontcolor', cls: 'btn-toolbar', - iconCls: 'btn-fontcolor', + iconCls: 'toolbar__icon btn-fontcolor', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock], split: true, menu: new Common.UI.Menu({ @@ -335,7 +335,7 @@ define([ me.btnClearStyle = new Common.UI.Button({ id: 'id-toolbar-btn-clearstyle', cls: 'btn-toolbar', - iconCls: 'btn-clearstyle', + iconCls: 'toolbar__icon btn-clearstyle', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected] }); me.paragraphControls.push(me.btnClearStyle); @@ -343,7 +343,7 @@ define([ me.btnCopyStyle = new Common.UI.Button({ id: 'id-toolbar-btn-copystyle', cls: 'btn-toolbar', - iconCls: 'btn-copystyle', + iconCls: 'toolbar__icon btn-copystyle', lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noParagraphSelected, _set.disableOnStart], enableToggle: true }); @@ -352,7 +352,7 @@ define([ me.btnMarkers = new Common.UI.Button({ id: 'id-toolbar-btn-markers', cls: 'btn-toolbar', - iconCls: 'btn-setmarkers', + iconCls: 'toolbar__icon btn-setmarkers', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected], enableToggle: true, toggleGroup: 'markersGroup', @@ -364,7 +364,7 @@ define([ me.btnNumbers = new Common.UI.Button({ id: 'id-toolbar-btn-numbering', cls: 'btn-toolbar', - iconCls: 'btn-numbering', + iconCls: 'toolbar__icon btn-numbering', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected], enableToggle: true, toggleGroup: 'markersGroup', @@ -391,41 +391,45 @@ define([ me.btnHorizontalAlign = new Common.UI.Button({ id: 'id-toolbar-btn-halign', cls: 'btn-toolbar', - iconCls: 'btn-align-left', + iconCls: 'toolbar__icon btn-align-left', icls: 'btn-align-left', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected], menu: new Common.UI.Menu({ items: [ { caption: me.textAlignLeft + Common.Utils.String.platformKey('Ctrl+L'), - iconCls: 'mnu-align-left', + iconCls: 'menu__icon btn-align-left', icls: 'btn-align-left', checkable: true, + checkmark: false, toggleGroup: 'halignGroup', checked: true, value: 1 }, { caption: me.textAlignCenter + Common.Utils.String.platformKey('Ctrl+E'), - iconCls: 'mnu-align-center', + iconCls: 'menu__icon btn-align-center', icls: 'btn-align-center', checkable: true, + checkmark: false, toggleGroup: 'halignGroup', value: 2 }, { caption: me.textAlignRight + Common.Utils.String.platformKey('Ctrl+R'), - iconCls: 'mnu-align-right', + iconCls: 'menu__icon btn-align-right', icls: 'btn-align-right', checkable: true, + checkmark: false, toggleGroup: 'halignGroup', value: 0 }, { caption: me.textAlignJust + Common.Utils.String.platformKey('Ctrl+J'), - iconCls: 'mnu-align-just', + iconCls: 'menu__icon btn-align-just', icls: 'btn-align-just', checkable: true, + checkmark: false, toggleGroup: 'halignGroup', value: 3 } @@ -438,32 +442,35 @@ define([ id: 'id-toolbar-btn-valign', cls: 'btn-toolbar', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.noObjectSelected], - iconCls: 'btn-align-middle', + iconCls: 'toolbar__icon btn-align-middle', icls: 'btn-align-middle', menu: new Common.UI.Menu({ items: [ { caption: me.textAlignTop, - iconCls: 'mnu-align-top', + iconCls: 'menu__icon btn-align-top', icls: 'btn-align-top', checkable: true, + checkmark: false, toggleGroup: 'valignGroup', value: Asc.c_oAscVAlign.Top }, { caption: me.textAlignMiddle, - iconCls: 'mnu-align-middle', + iconCls: 'menu__icon btn-align-middle', icls: 'btn-align-middle', checkable: true, + checkmark: false, toggleGroup: 'valignGroup', value: Asc.c_oAscVAlign.Center, checked: true }, { caption: me.textAlignBottom, - iconCls: 'mnu-align-bottom', + iconCls: 'menu__icon btn-align-bottom', icls: 'btn-align-bottom', checkable: true, + checkmark: false, toggleGroup: 'valignGroup', value: Asc.c_oAscVAlign.Bottom } @@ -475,7 +482,7 @@ define([ me.btnDecLeftOffset = new Common.UI.Button({ id: 'id-toolbar-btn-decoffset', cls: 'btn-toolbar', - iconCls: 'btn-decoffset', + iconCls: 'toolbar__icon btn-decoffset', lock: [_set.decIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected] }); me.paragraphControls.push(me.btnDecLeftOffset); @@ -483,7 +490,7 @@ define([ me.btnIncLeftOffset = new Common.UI.Button({ id: 'id-toolbar-btn-incoffset', cls: 'btn-toolbar', - iconCls: 'btn-incoffset', + iconCls: 'toolbar__icon btn-incoffset', lock: [_set.incIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected] }); me.paragraphControls.push(me.btnIncLeftOffset); @@ -491,7 +498,7 @@ define([ me.btnLineSpace = new Common.UI.Button({ id: 'id-toolbar-btn-linespace', cls: 'btn-toolbar', - iconCls: 'btn-linespace', + iconCls: 'toolbar__icon btn-linespace', lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected], menu: new Common.UI.Menu({ style: 'min-width: 60px;', @@ -510,7 +517,7 @@ define([ me.btnInsertTable = new Common.UI.Button({ id: 'tlbtn-inserttable', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-inserttable', + iconCls: 'toolbar__icon btn-inserttable', caption: me.capInsertTable, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], menu: new Common.UI.Menu({ @@ -525,7 +532,7 @@ define([ me.btnInsertChart = new Common.UI.Button({ id: 'tlbtn-insertchart', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-insertchart', + iconCls: 'toolbar__icon btn-insertchart', caption: me.capInsertChart, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], menu: true @@ -535,7 +542,7 @@ define([ me.btnInsertEquation = new Common.UI.Button({ id: 'tlbtn-insertequation', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-insertequation', + iconCls: 'toolbar__icon btn-insertequation', caption: me.capInsertEquation, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], split: true, @@ -546,7 +553,7 @@ define([ me.btnInsertHyperlink = new Common.UI.Button({ id: 'tlbtn-insertlink', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-inserthyperlink', + iconCls: 'toolbar__icon btn-inserthyperlink', caption: me.capInsertHyperlink, lock: [_set.hyperlinkLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected] }); @@ -555,7 +562,7 @@ define([ me.btnInsertTextArt = new Common.UI.Button({ id: 'tlbtn-inserttextart', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-textart', + iconCls: 'toolbar__icon btn-textart', caption: me.capInsertTextArt, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], menu: new Common.UI.Menu({ @@ -570,7 +577,7 @@ define([ me.btnEditHeader = new Common.UI.Button({ id: 'id-toolbar-btn-editheader', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-editheader', + iconCls: 'toolbar__icon btn-editheader', caption: me.capBtnInsHeader, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart] }); @@ -579,7 +586,7 @@ define([ me.btnInsDateTime = new Common.UI.Button({ id: 'id-toolbar-btn-datetime', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-datetime', + iconCls: 'toolbar__icon btn-datetime', caption: me.capBtnDateTime, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.paragraphLock, _set.disableOnStart] }); @@ -588,7 +595,7 @@ define([ me.btnInsSlideNum = new Common.UI.Button({ id: 'id-toolbar-btn-slidenum', cls: 'btn-toolbar x-huge icon-top', - iconCls: 'btn-pagenum', + iconCls: 'toolbar__icon btn-pagenum', caption: me.capBtnSlideNum, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.paragraphLock, _set.disableOnStart] }); @@ -597,7 +604,7 @@ define([ me.btnColorSchemas = new Common.UI.Button({ id: 'id-toolbar-btn-colorschemas', cls: 'btn-toolbar', - iconCls: 'btn-colorschemas', + iconCls: 'toolbar__icon btn-colorschemas', lock: [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], menu: new Common.UI.Menu({ items: [], @@ -625,50 +632,50 @@ define([ me.mniDistribHor = new Common.UI.MenuItem({ caption: me.txtDistribHor, - iconCls: 'mnu-distrib-hor', + iconCls: 'menu__icon shape-distribute-hor', value: 6 }); me.mniDistribVert = new Common.UI.MenuItem({ caption: me.txtDistribVert, - iconCls: 'mnu-distrib-vert', + iconCls: 'menu__icon shape-distribute-vert', value: 7 }); me.btnShapeAlign = new Common.UI.Button({ id: 'id-toolbar-btn-shape-align', cls: 'btn-toolbar', - iconCls: 'btn-align-shape', + iconCls: 'toolbar__icon btn-shape-alignleft', lock: [_set.slideDeleted, _set.shapeLock, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart], menu: new Common.UI.Menu({ items: [ { caption: me.textShapeAlignLeft, - iconCls: 'mnu-shape-align-left', + iconCls: 'menu__icon shape-align-left', value: Asc.c_oAscAlignShapeType.ALIGN_LEFT }, { caption: me.textShapeAlignCenter, - iconCls: 'mnu-shape-align-center', + iconCls: 'menu__icon shape-align-center', value: Asc.c_oAscAlignShapeType.ALIGN_CENTER }, { caption: me.textShapeAlignRight, - iconCls: 'mnu-shape-align-right', + iconCls: 'menu__icon shape-align-right', value: Asc.c_oAscAlignShapeType.ALIGN_RIGHT }, { caption: me.textShapeAlignTop, - iconCls: 'mnu-shape-align-top', + iconCls: 'menu__icon shape-align-top', value: Asc.c_oAscAlignShapeType.ALIGN_TOP }, { caption: me.textShapeAlignMiddle, - iconCls: 'mnu-shape-align-middle', + iconCls: 'menu__icon shape-align-middle', value: Asc.c_oAscAlignShapeType.ALIGN_MIDDLE }, { caption: me.textShapeAlignBottom, - iconCls: 'mnu-shape-align-bottom', + iconCls: 'menu__icon shape-align-bottom', value: Asc.c_oAscAlignShapeType.ALIGN_BOTTOM }, {caption: '--'}, @@ -686,39 +693,39 @@ define([ me.btnShapeArrange = new Common.UI.Button({ id: 'id-toolbar-btn-shape-arrange', cls: 'btn-toolbar', - iconCls: 'btn-arrange-shape', + iconCls: 'toolbar__icon arrange-front', lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart], menu: new Common.UI.Menu({ items: [ { caption: me.textArrangeFront, - iconCls: 'mnu-arrange-front', + iconCls: 'menu__icon arrange-front', value: 1 }, { caption: me.textArrangeBack, - iconCls: 'mnu-arrange-back', + iconCls: 'menu__icon arrange-back', value: 2 }, { caption: me.textArrangeForward, - iconCls: 'mnu-arrange-forward', + iconCls: 'menu__icon arrange-forward', value: 3 }, { caption: me.textArrangeBackward, - iconCls: 'mnu-arrange-backward', + iconCls: 'menu__icon arrange-backward', value: 4 }, {caption: '--'}, me.mnuGroupShapes = new Common.UI.MenuItem({ caption: me.txtGroup, - iconCls: 'mnu-group', + iconCls: 'menu__icon shape-group', value: 5 }), me.mnuUnGroupShapes = new Common.UI.MenuItem({ caption: me.txtUngroup, - iconCls: 'mnu-ungroup', + iconCls: 'menu__icon shape-ungroup', value: 6 }) ] @@ -729,7 +736,7 @@ define([ me.btnSlideSize = new Common.UI.Button({ id: 'id-toolbar-btn-slide-size', cls: 'btn-toolbar', - iconCls: 'btn-slidesize', + iconCls: 'toolbar__icon btn-slidesize', lock: [_set.docPropsLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart], menu: new Common.UI.Menu({ items: [ @@ -944,13 +951,13 @@ define([ _injectComponent('#slot-btn-datetime', this.btnInsDateTime); _injectComponent('#slot-btn-slidenum', this.btnInsSlideNum); - this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg'), 'tlbtn-insertimage-', 'btn-insertimage', this.capInsertImage, + this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg'), 'tlbtn-insertimage-', 'toolbar__icon btn-insertimage', this.capInsertImage, [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], false, true); - this.btnsInsertText = Common.Utils.injectButtons($host.find('.slot-instext'), 'tlbtn-inserttext-', 'btn-text', this.capInsertText, + this.btnsInsertText = Common.Utils.injectButtons($host.find('.slot-instext'), 'tlbtn-inserttext-', 'toolbar__icon btn-text', this.capInsertText, [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], false, false, true); - this.btnsInsertShape = Common.Utils.injectButtons($host.find('.slot-insertshape'), 'tlbtn-insertshape-', 'btn-insertshape', this.capInsertShape, + this.btnsInsertShape = Common.Utils.injectButtons($host.find('.slot-insertshape'), 'tlbtn-insertshape-', 'toolbar__icon btn-insertshape', this.capInsertShape, [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], false, true, true); - this.btnsAddSlide = Common.Utils.injectButtons($host.find('.slot-addslide'), 'tlbtn-addslide-', 'btn-addslide', this.capAddSlide, + this.btnsAddSlide = Common.Utils.injectButtons($host.find('.slot-addslide'), 'tlbtn-addslide-', 'toolbar__icon btn-addslide', this.capAddSlide, [PE.enumLock.menuFileOpen, PE.enumLock.lostConnect, PE.enumLock.disableOnStart], true, true); var created = this.btnsInsertImage.concat(this.btnsInsertText, this.btnsInsertShape, this.btnsAddSlide); diff --git a/apps/presentationeditor/main/resources/img/popupmenu-btns.png b/apps/presentationeditor/main/resources/img/popupmenu-btns.png deleted file mode 100644 index 7712e0858..000000000 Binary files a/apps/presentationeditor/main/resources/img/popupmenu-btns.png and /dev/null differ diff --git a/apps/presentationeditor/main/resources/img/popupmenu-btns@2x.png b/apps/presentationeditor/main/resources/img/popupmenu-btns@2x.png deleted file mode 100644 index e2c0cbf36..000000000 Binary files a/apps/presentationeditor/main/resources/img/popupmenu-btns@2x.png and /dev/null differ diff --git a/apps/presentationeditor/main/resources/img/toolbar-menu.png b/apps/presentationeditor/main/resources/img/toolbar-menu.png deleted file mode 100644 index 752e1a813..000000000 Binary files a/apps/presentationeditor/main/resources/img/toolbar-menu.png and /dev/null differ diff --git a/apps/presentationeditor/main/resources/img/toolbar-menu@2x.png b/apps/presentationeditor/main/resources/img/toolbar-menu@2x.png deleted file mode 100644 index 96422249e..000000000 Binary files a/apps/presentationeditor/main/resources/img/toolbar-menu@2x.png and /dev/null differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars b/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars new file mode 100644 index 000000000..11a6a8157 --- /dev/null +++ b/apps/presentationeditor/main/resources/img/toolbar/1x/.css.handlebars @@ -0,0 +1,31 @@ +{{#spritesheet}} +.btn { + &.active, &:active { + &:not(:disabled):not(.disabled) { + .toolbar__icon { + @btn-active-icon-offset: -20px; + background-position-x: @btn-active-icon-offset; + --bgX: @btn-active-icon-offset; + } + } + } +} +.menu__icon { + .no-checkmark.checked & { + @btn-active-icon-offset: -20px; + background-position-x: @btn-active-icon-offset; + --bgX: @btn-active-icon-offset; + } +} +.toolbar__icon, .menu__icon { + background-image: url(resources/{{{escaped_image}}}); +} +{{/spritesheet}} +{{#sprites}} +{{#parselang name}}.{{name}}{{/parselang}} { + background-position: {{px.offset_x}} {{px.offset_y}}; + + --bgX: {{px.offset_x}}; + background-position: var(--bgX) {{px.offset_y}}; +} +{{/sprites}} diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/big/.css.handlebars b/apps/presentationeditor/main/resources/img/toolbar/1x/big/.css.handlebars new file mode 100644 index 000000000..38942761c --- /dev/null +++ b/apps/presentationeditor/main/resources/img/toolbar/1x/big/.css.handlebars @@ -0,0 +1,26 @@ +{{#spritesheet}} +.btn { + &.x-huge { + &.active, &:active { + &:not(:disabled):not(.disabled) { + .toolbar__icon { + @btn-active-icon-offset: -28px; + background-position-x: @btn-active-icon-offset; + --bgX: @btn-active-icon-offset; + } + } + } + } +} +.x-huge .toolbar__icon { + background-image: url(resources/{{{escaped_image}}}); +} +{{/spritesheet}} +{{#sprites}} +{{#parselang name}}.x-huge .{{name}}{{/parselang}} { + background-position: {{px.offset_x}} {{px.offset_y}}; + + --bgX: {{px.offset_x}}; + background-position: var(--bgX) {{px.offset_y}}; +} +{{/sprites}} diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-addslide.png b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-addslide.png new file mode 100644 index 000000000..bbc3ad159 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-addslide.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-datetime.png b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-datetime.png new file mode 100644 index 000000000..c53184b79 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-datetime.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-pagenum.png b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-pagenum.png new file mode 100644 index 000000000..93d84c966 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/big/btn-pagenum.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-arrange-shape.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-arrange-shape.png new file mode 100644 index 000000000..3325085a9 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-arrange-shape.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-changeslide.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-changeslide.png new file mode 100644 index 000000000..521a8695c Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-changeslide.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-ic-zoomtoslide.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-ic-zoomtoslide.png new file mode 100644 index 000000000..848cb9377 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-ic-zoomtoslide.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-slide.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-slide.png new file mode 100644 index 000000000..58036b783 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-slide.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-thumbs.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-thumbs.png new file mode 100644 index 000000000..1dd039c49 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-menu-thumbs.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-preview.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-preview.png new file mode 100644 index 000000000..f197632c8 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-preview.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-shape-alignleft.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-shape-alignleft.png new file mode 100644 index 000000000..fc54e3170 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-shape-alignleft.png differ diff --git a/apps/presentationeditor/main/resources/img/toolbar/1x/btn-slidesize.png b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-slidesize.png new file mode 100644 index 000000000..2bba946e7 Binary files /dev/null and b/apps/presentationeditor/main/resources/img/toolbar/1x/btn-slidesize.png differ diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 7dc9ae2c6..d5f265ebd 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -126,6 +126,9 @@ @import "advanced-settings.less"; @import "document-preview.less"; +@import "sprites/iconssmall@1x"; +@import "sprites/iconsbig@1x"; + .font-size-small { .fontsize(@font-size-small); } diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less index 6c1b47d5a..b3c5ef74a 100644 --- a/apps/presentationeditor/main/resources/less/leftmenu.less +++ b/apps/presentationeditor/main/resources/less/leftmenu.less @@ -11,18 +11,6 @@ } } -button.notify .btn-menu-chat {background-position: -0*@toolbar-icon-size -54*@toolbar-icon-size;} -button.notify .btn-menu-comments {background-position: -0*@toolbar-icon-size -70*@toolbar-icon-size;} - -.button-normal-icon(btn-menu-file, 49, @toolbar-icon-size); -.button-normal-icon(btn-menu-search, 50, @toolbar-icon-size); -.button-normal-icon(btn-menu-thumbs, 51, @toolbar-icon-size); -.button-normal-icon(btn-menu-comments, 52, @toolbar-icon-size); -.button-normal-icon(btn-menu-chat, 53, @toolbar-icon-size); -.button-normal-icon(btn-menu-about, 55, @toolbar-icon-size); -.button-normal-icon(btn-menu-support, 68, @toolbar-icon-size); -.button-normal-icon(btn-menu-plugin, 73, @toolbar-icon-size); - #left-menu { &+.layout-resizer { border-left: 0 none; diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less index d35ddfd16..37347ad5a 100644 --- a/apps/presentationeditor/main/resources/less/rightmenu.less +++ b/apps/presentationeditor/main/resources/less/rightmenu.less @@ -5,30 +5,6 @@ border-left: 1px solid @gray-dark; background-color: @gray-light; right: 0; - - /*menuText*/ - .button-normal-icon(btn-menu-text, 40, @toolbar-icon-size); - - /*menuImage*/ - .button-normal-icon(btn-menu-image, 43, @toolbar-icon-size); - - /*menuTable*/ - .button-normal-icon(btn-menu-table, 42, @toolbar-icon-size); - - /*menuChart*/ - .button-normal-icon(btn-menu-chart, 44, @toolbar-icon-size); - - /*menuSlide*/ - .button-normal-icon(btn-menu-slide, 56, @toolbar-icon-size); - - /*menuShape*/ - .button-normal-icon(btn-menu-shape, 39, @toolbar-icon-size); - - /*menuTextArt*/ - .button-normal-icon(btn-menu-textart, 57, @toolbar-icon-size); - - /**menuSignature*/ - .button-normal-icon(btn-menu-signature, 77, @toolbar-icon-size); } } @@ -108,25 +84,6 @@ background-size: cover; } -.btn-toolbar:not(.x-huge) .icon:not(svg).btn-borders-small { - .background-ximage-v2('right-panels/SmallBorders.png', 84px); -} - -.button-normal-icon(btn-position-all, 0, 21px); -.button-normal-icon(btn-position-inner, 1, 21px); -.button-normal-icon(btn-position-bottom, 2, 21px); -.button-normal-icon(btn-position-inner-hor, 3, 21px); -.button-normal-icon(btn-position-top, 4, 21px); -.button-normal-icon(btn-position-none, 5, 21px); -.button-normal-icon(btn-position-outer, 6, 21px); -.button-normal-icon(btn-position-left, 7, 21px); -.button-normal-icon(btn-position-inner-vert, 8, 21px); -.button-normal-icon(btn-position-right, 9, 21px); - -.button-otherstates-icon2(btn-category, @toolbar-icon-size); - -.button-otherstates-icon(btn-borders-small, 21px); - .btn-edit-table, .btn-change-shape { .background-ximage('@{common-image-path}/right-panels/rowscols_icon.png', '@{common-image-path}/right-panels/rowscols_icon@2x.png', 84px); diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less index 1932b4fcd..595a0bdea 100644 --- a/apps/presentationeditor/main/resources/less/statusbar.less +++ b/apps/presentationeditor/main/resources/less/statusbar.less @@ -39,24 +39,14 @@ } #btn-zoom-topage { - .btn-tpl(-1160px); margin-right: 9px; margin-left: 6px; } #btn-zoom-towidth { - .btn-tpl(-1180px); margin-right: 9px; } - #btn-zoom-down { - .btn-tpl(-1200px); - } - - #btn-zoom-up { - .btn-tpl(-1220px); - } - #btn-doc-lang { margin-right: 9px; } @@ -197,5 +187,3 @@ } } } - -.button-normal-icon(spellcheck-lang, 76, @toolbar-icon-size); \ No newline at end of file diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less index 649d58319..6232fb3b1 100644 --- a/apps/presentationeditor/main/resources/less/toolbar.less +++ b/apps/presentationeditor/main/resources/less/toolbar.less @@ -238,83 +238,6 @@ background-position: -150px -300px; } -@toolbar-icon-size: 20px; -.button-normal-icon(btn-changeslide, 7, @toolbar-icon-size); -.button-normal-icon(btn-preview, 8, @toolbar-icon-size); -.button-normal-icon(btn-print, 9, @toolbar-icon-size); -.button-normal-icon(btn-save, 10, @toolbar-icon-size); -.button-normal-icon(btn-synch, 11, @toolbar-icon-size); -.button-normal-icon(btn-copy, 12, @toolbar-icon-size); -.button-normal-icon(btn-decfont, 12, @toolbar-icon-size); -.button-normal-icon(btn-paste, 13, @toolbar-icon-size); -.button-normal-icon(btn-bold, 14, @toolbar-icon-size); -.button-normal-icon(btn-italic, 15, @toolbar-icon-size); -.button-normal-icon(btn-underline, 16, @toolbar-icon-size); -.button-normal-icon(btn-strikeout, 17, @toolbar-icon-size); -.button-normal-icon(btn-fontcolor, 18, @toolbar-icon-size); -.button-normal-icon(btn-superscript, 19, @toolbar-icon-size); -.button-normal-icon(btn-subscript, 20, @toolbar-icon-size); -.button-normal-icon(btn-undo, 21, @toolbar-icon-size); -.button-normal-icon(btn-redo, 22, @toolbar-icon-size); -.button-normal-icon(btn-clearstyle, 23, @toolbar-icon-size); -.button-normal-icon(btn-copystyle, 24, @toolbar-icon-size); -.button-normal-icon(btn-setmarkers, 25, @toolbar-icon-size); -.button-normal-icon(btn-numbering, 26, @toolbar-icon-size); -.button-normal-icon(btn-align-center, 27, @toolbar-icon-size); -.button-normal-icon(btn-align-just, 28, @toolbar-icon-size); -.button-normal-icon(btn-align-left, 29, @toolbar-icon-size); -.button-normal-icon(btn-align-right, 30, @toolbar-icon-size); -.button-normal-icon(btn-align-top, 31, @toolbar-icon-size); -.button-normal-icon(btn-align-middle, 32, @toolbar-icon-size); -.button-normal-icon(btn-align-bottom, 33, @toolbar-icon-size); -.button-normal-icon(btn-decoffset, 34, @toolbar-icon-size); -.button-normal-icon(btn-incoffset, 35, @toolbar-icon-size); -.button-normal-icon(btn-linespace, 36, @toolbar-icon-size); -.button-normal-icon(btn-arrange-shape, 37, @toolbar-icon-size); -.button-normal-icon(btn-align-shape, 38, @toolbar-icon-size); - -.button-normal-icon(btn-colorschemas, 45, @toolbar-icon-size); -.button-normal-icon(btn-slidesize, 46, @toolbar-icon-size); -.button-normal-icon(btn-hidebars, 47, @toolbar-icon-size); -.button-normal-icon(btn-settings, 48, @toolbar-icon-size); -.button-normal-icon(btn-zoomin, 61, @toolbar-icon-size); -.button-normal-icon(btn-zoomout, 60, @toolbar-icon-size); -.button-normal-icon(btn-save-coauth, 69, @toolbar-icon-size); - -.button-normal-icon(rotate-90, 79, @toolbar-icon-size); -.button-normal-icon(rotate-270, 80, @toolbar-icon-size); -.button-normal-icon(flip-hor, 81, @toolbar-icon-size); -.button-normal-icon(flip-vert, 82, @toolbar-icon-size); - -.button-normal-icon(btn-ic-doclang, 75, @toolbar-icon-size); -.button-normal-icon(btn-ic-docspell, 76, @toolbar-icon-size); - -@menu-icon-size: 22px; -.menu-btn-icon(mnu-align-center, 0, @menu-icon-size); -.menu-btn-icon(mnu-align-just, 1, @menu-icon-size); -.menu-btn-icon(mnu-align-right, 2, @menu-icon-size); -.menu-btn-icon(mnu-align-left, 3, @menu-icon-size); -.menu-btn-icon(mnu-align-middle, 4, @menu-icon-size); -.menu-btn-icon(mnu-align-bottom, 5, @menu-icon-size); -.menu-btn-icon(mnu-align-top, 6, @menu-icon-size); -.menu-btn-icon(mnu-arrange-front, 7, @menu-icon-size); -.menu-btn-icon(mnu-arrange-back, 8, @menu-icon-size); -.menu-btn-icon(mnu-arrange-forward, 9, @menu-icon-size); -.menu-btn-icon(mnu-arrange-backward, 10, @menu-icon-size); -.menu-btn-icon(mnu-group, 11, @menu-icon-size); -.menu-btn-icon(mnu-ungroup, 12, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-left, 13, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-center, 14, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-right, 15, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-top, 16, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-middle, 17, @menu-icon-size); -.menu-btn-icon(mnu-shape-align-bottom, 18, @menu-icon-size); -.menu-btn-icon(mnu-distrib-hor, 19, @menu-icon-size); -.menu-btn-icon(mnu-distrib-vert, 20, @menu-icon-size); -.menu-btn-icon(mnu-direct-horiz, 21, @menu-icon-size); -.menu-btn-icon(mnu-direct-rup, 22, @menu-icon-size); -.menu-btn-icon(mnu-direct-rdown, 23, @menu-icon-size); - .username-tip { background-color: #ee3525; border: none;