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

[all] header svg icons go to png

Browse source
This commit is contained in:
Maxim Kadushkin 2019-11-27 19:43:44 +03:00
parent 3b6ef99b92
commit a5eccc9c82
3 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/common/main/lib/view/Header.js
View file

@ -86,10 +86,6 @@ define([
// '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' +
'<div class="btn-users">' +
'<svg class="icon">' +
'<use class="zoom-int" xlink:href="#svg-btn-users"></use>' +
'<use class="zoom-grit" xlink:href="#svg-btn-users-150"></use>' +
'</svg>' +
'<label class="caption">&plus;</label>' +
'</div>' +
'<div class="cousers-menu dropdown-menu">' +
@ -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');

21
apps/common/main/resources/less/header.less
View file

@ -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

4
apps/common/main/resources/less/toolbar.less
View file

@ -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;
}