diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 156b67cde..790e62386 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -86,10 +86,6 @@ define([ // '' + '' + '' + - '' + - '' + - '' + - '' + '+' + '' + '' + @@ -400,7 +396,7 @@ define([ me.btnGoBack = new Common.UI.Button({ id: 'btn-goback', cls: 'btn-header', - iconCls: 'svgicon svg-btn-goback', + iconCls: 'toolbar__icon icon--inverse btn-goback', split: true }); @@ -413,7 +409,7 @@ define([ me.btnOptions = new Common.UI.Button({ cls: 'btn-header no-caret', - iconCls: 'svgicon svg-btn-options', + iconCls: 'toolbar__icon icon--inverse btn-options', menu: true }); @@ -440,7 +436,7 @@ define([ function createTitleButton(iconid, slot, disabled) { return (new Common.UI.Button({ cls: 'btn-header', - iconCls: 'svgicon ' + iconid, + iconCls: iconid, disabled: disabled === true })).render(slot); } @@ -492,13 +488,13 @@ define([ if ( !config.isEdit ) { if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline ) - this.btnDownload = createTitleButton('svg-btn-download', $html.findById('#slot-hbtn-download')); + this.btnDownload = createTitleButton('toolbar__icon icon--inverse btn-download', $html.findById('#slot-hbtn-download')); if ( config.canPrint ) - this.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-hbtn-print')); + this.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-hbtn-print')); if ( config.canEdit && config.canRequestEditRights ) - this.btnEdit = createTitleButton('svg-btn-edit', $html.findById('#slot-hbtn-edit')); + this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit')); } me.btnOptions.render($html.find('#slot-btn-options')); @@ -522,12 +518,12 @@ define([ me.setUserName(me.options.userName); if ( config.canPrint && config.isEdit ) { - me.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-btn-dt-print'), true); + me.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-btn-dt-print'), true); } - me.btnSave = createTitleButton('svg-btn-save', $html.findById('#slot-btn-dt-save'), true); - me.btnUndo = createTitleButton('svg-btn-undo', $html.findById('#slot-btn-dt-undo'), true); - me.btnRedo = createTitleButton('svg-btn-redo', $html.findById('#slot-btn-dt-redo'), true); + me.btnSave = createTitleButton('toolbar__icon icon--inverse btn-save', $html.findById('#slot-btn-dt-save'), true); + me.btnUndo = createTitleButton('toolbar__icon icon--inverse btn-undo', $html.findById('#slot-btn-dt-undo'), true); + me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true); if ( me.btnSave.$icon.is('svg') ) { me.btnSave.$icon.addClass('icon-save'); diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index d81d23c55..2c5497d8f 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -70,16 +70,20 @@ .btn-users, .btn-header { &:hover { - &:not(.disabled) { + &:not(.disabled):not(.icon) { background-color: rgba(255,255,255,0.2); } } &:active, &.active { - &:not(.disabled) { + &:not(.disabled):not(.icon) { background-color: rgba(0,0,0,0.2); } } + + &.icon { + pointer-events:none; + } } #box-doc-name { @@ -183,6 +187,12 @@ display: inline-block; width: 20px; height: 20px; + background-repeat: no-repeat; + padding: 0; + + &.icon--inverse { + background-position-x: -20px; + } } .caption { @@ -286,10 +296,15 @@ .icon { width: 20px; height: 20px; + display: inline-block; + position: relative; + + &.icon--inverse { + background-position-x: -20px; + } } svg.icon { - display: inline-block; vertical-align: middle; @media diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 720fcbd72..ab26033de 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -383,6 +383,10 @@ // TODO: move to appropriate module .btn-header, .btn-users { + &:not(:active) .icon--inverse { + background-position-x: 0; + } + svg.icon { fill: @gray-deep; }