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>' + // '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' + '<section id="tlb-box-users" class="box-cousers dropdown"">' +
'<div class="btn-users">' + '<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>' + '<label class="caption">&plus;</label>' +
'</div>' + '</div>' +
'<div class="cousers-menu dropdown-menu">' + '<div class="cousers-menu dropdown-menu">' +
@ -400,7 +396,7 @@ define([
me.btnGoBack = new Common.UI.Button({ me.btnGoBack = new Common.UI.Button({
id: 'btn-goback', id: 'btn-goback',
cls: 'btn-header', cls: 'btn-header',
iconCls: 'svgicon svg-btn-goback', iconCls: 'toolbar__icon icon--inverse btn-goback',
split: true split: true
}); });
@ -413,7 +409,7 @@ define([
me.btnOptions = new Common.UI.Button({ me.btnOptions = new Common.UI.Button({
cls: 'btn-header no-caret', cls: 'btn-header no-caret',
iconCls: 'svgicon svg-btn-options', iconCls: 'toolbar__icon icon--inverse btn-options',
menu: true menu: true
}); });
@ -440,7 +436,7 @@ define([
function createTitleButton(iconid, slot, disabled) { function createTitleButton(iconid, slot, disabled) {
return (new Common.UI.Button({ return (new Common.UI.Button({
cls: 'btn-header', cls: 'btn-header',
iconCls: 'svgicon ' + iconid, iconCls: iconid,
disabled: disabled === true disabled: disabled === true
})).render(slot); })).render(slot);
} }
@ -492,13 +488,13 @@ define([
if ( !config.isEdit ) { if ( !config.isEdit ) {
if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline ) 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 ) 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 ) 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')); me.btnOptions.render($html.find('#slot-btn-options'));
@ -522,12 +518,12 @@ define([
me.setUserName(me.options.userName); me.setUserName(me.options.userName);
if ( config.canPrint && config.isEdit ) { 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.btnSave = createTitleButton('toolbar__icon icon--inverse btn-save', $html.findById('#slot-btn-dt-save'), true);
me.btnUndo = createTitleButton('svg-btn-undo', $html.findById('#slot-btn-dt-undo'), true); me.btnUndo = createTitleButton('toolbar__icon icon--inverse btn-undo', $html.findById('#slot-btn-dt-undo'), true);
me.btnRedo = createTitleButton('svg-btn-redo', $html.findById('#slot-btn-dt-redo'), true); me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true);
if ( me.btnSave.$icon.is('svg') ) { if ( me.btnSave.$icon.is('svg') ) {
me.btnSave.$icon.addClass('icon-save'); me.btnSave.$icon.addClass('icon-save');

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

@ -70,16 +70,20 @@
.btn-users, .btn-users,
.btn-header { .btn-header {
&:hover { &:hover {
&:not(.disabled) { &:not(.disabled):not(.icon) {
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);
} }
} }
&:active, &.active { &:active, &.active {
&:not(.disabled) { &:not(.disabled):not(.icon) {
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
} }
&.icon {
pointer-events:none;
}
} }
#box-doc-name { #box-doc-name {
@ -183,6 +187,12 @@
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-repeat: no-repeat;
padding: 0;
&.icon--inverse {
background-position-x: -20px;
}
} }
.caption { .caption {
@ -286,10 +296,15 @@
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block;
position: relative;
&.icon--inverse {
background-position-x: -20px;
}
} }
svg.icon { svg.icon {
display: inline-block;
vertical-align: middle; vertical-align: middle;
@media @media

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

@ -383,6 +383,10 @@
// TODO: move to appropriate module // TODO: move to appropriate module
.btn-header, .btn-users { .btn-header, .btn-users {
&:not(:active) .icon--inverse {
background-position-x: 0;
}
svg.icon { svg.icon {
fill: @gray-deep; fill: @gray-deep;
} }