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

[PE] svg icon in button

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-20 16:36:15 +03:00
parent a578e3c31e
commit 2bbfe4d1f4
5 changed files with 44 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/component/Button.js
View file

@ -125,7 +125,11 @@ define([
'<% if ( iconImg ) { %>' +
'<img src="<%= iconImg %>">' +
'<% } else { %>' +
'<i class="icon <%= iconCls %>">&nbsp;</i>' +
'<% if (/svgicon/.test(iconCls)) {' +
'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
'} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
// '<i class="icon <%= iconCls %>">&nbsp;</i>' +
'<% } %>' +
'</div>' +
'<span class="caption"><%= caption %></span>' +
@ -182,7 +186,13 @@ define([
template: _.template([
'<% var applyicon = function() { %>',
'<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
'<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
// '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
'<% if (iconCls != "") { ' +
' if (/svgicon/.test(iconCls)) {' +
'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
'} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
'}} %>',
'<% } %>',
'<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',

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

@ -281,7 +281,7 @@ define([
me.btnGoBack = new Common.UI.Button({
id: 'btn-goback',
cls: 'btn-toolbar',
iconCls: 'btn-goback',
iconCls: 'svgicon svg-btn-goback',
split: true,
menu: new Common.UI.Menu({
style: 'min-width: 60px;',

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

@ -229,3 +229,17 @@
width: 100%;
z-index: 995;
}
.btn-toolbar {
&:active {
svg.icon {
fill: #fff;
}
}
svg.icon {
background-image: none;
fill: @gray-deep;
}
}

2
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -2059,7 +2059,7 @@ define([
var button = new Common.UI.Button({
cls: _cls,
iconCls: 'btn-menu-comments',
iconCls: 'svgicon svg-btn-comments',
caption: 'Comment'
}).render( slots.eq(index) );

17
apps/presentationeditor/main/index.html
View file

@ -258,13 +258,28 @@
<div id="viewport"></div>
<svg style="display: none;">
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
<rect x="6" y="7" width="8" height="1"/>
<rect x="6" y="9" width="8" height="1"/>
<rect x="6" y="11" width="8" height="1"/>
</symbol>
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
</symbol>
</svg>
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
<script type="text/javascript">
window.g_debug_mode = true;
</script>
<!-- debug begin -->
<script type="text/javascript">var less=less||{};less.env='development';</script>
<script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>