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

in button added icon for 150% of zoom

Browse source
This commit is contained in:
Maxim Kadushkin 2018-02-01 17:15:56 +03:00
parent 1497eae9d2
commit e2f86ace35
5 changed files with 71 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -190,7 +190,8 @@ define([
// '<% 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>\');' +
'print(\'<svg class=\"icon\"><use class=\"zoom-int\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use>' +
'<use class=\"zoom-grit\" xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'-150\"></use></svg>\');' +
'} else ' +
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
'}} %>',

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

@ -83,7 +83,10 @@ 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 xlink:href="#svg-btn-users"></use></svg>' +
'<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">' +

24
apps/common/main/resources/img/header/buttons150.svg Normal file
View file

@ -0,0 +1,24 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<symbol id="svg-btn-users-150" viewBox="0 0 30 30">
<path display="inline" d="M11.051,6c2.205,0,4,1.794,4,4s-1.795,4-4,4c-2.206,0-4-1.794-4-4S8.845,6,11.051,6 M11.051,5
c-2.761,0-5,2.238-5,5c0,2.76,2.239,5,5,5c2.762,0,5-2.24,5-5C16.051,7.238,13.813,5,11.051,5L11.051,5z"/>
<path display="inline" d="M11,18c6.825,0,7.887,3.874,8,4.407V25H3v-2.593C3.11,21.895,4.176,18,11,18 M11,17
c-8.216,0-9,5.316-9,5.316V26h18v-3.684C20,22.316,19.216,17,11,17L11,17z"/>
<circle cx="21.041" cy="13" r="4"/>
<path d="M21,18c-0.728,0-1,0-2,0c1.635,1.63,2,2,2,2v6h7v-3.146C28,22.854,27.572,18,21,18z"/>
</symbol>
<symbol id="svg-btn-goback-150" viewBox="0 0 30 30">
<polygon display="inline" points="19.5,16.5 15,12 15,15 9,15 9,18 15,18 15,21 "/>
<path display="inline" d="M15,7v3h11v14H4V7H15 M15,6H4C3.45,6,3,6.45,3,7v17c0,0.55,0.45,1,1,1h22
c0.55,0,1-0.45,1-1V10c0-0.55-0.45-1-1-1H16V7C16,6.45,15.55,6,15,6L15,6z"/>
</symbol>
<symbol id="svg-btn-comments-150" viewBox="0 0 30 30">
<rect x="9" y="11" width="12" height="1"/>
<rect x="9" y="14" width="12" height="1"/>
<rect x="9" y="17" width="9" height="1"/>
<path d="M23.375,8C23.65,8,24,8.386,24,8.641V20c0,0.448-0.552,1-1,1h-6h-0.333L16.4,21.2L13,23.75L9.6,21.2
L9.333,21H9H7c-0.449,0-1-0.552-1-1V8.656C6,8.401,6.318,8,6.594,8 M23.5,7h-17C5.671,7,5,7.653,5,8.462V20c0,1,1,2,2,2h2l4,3l4-3
h6c1,0,2-1,2-2V8.462C25,7.653,24.329,7,23.5,7L23.5,7z"/>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

40
apps/common/main/resources/less/buttons.less
View file

@ -674,3 +674,43 @@
min-width: 86px;
}
}
@class100: zoom-int;
@class150: zoom-grit;
svg.icon {
.@{class150} {
display: none;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 2.5dppx),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 240dpi) {
.@{class100} {
display: none;
}
.@{class150} {
display: block;
}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),
only screen and (-webkit-min-device-pixel-ratio: 4),
only screen and (min-resolution: 2dppx) and (max-resolution: 2.4dppx),
only screen and (min-resolution: 4dppx),
only screen and (min-resolution: 192dpi) and (max-resolution: 239dpi),
only screen and (min-resolution: 384dpi) {
.@{class100} {
display: block;
}
.@{class150} {
display: none;
}
}
}

1
apps/documenteditor/main/index.html
View file

@ -262,6 +262,7 @@
<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
<img class="inline-svg" src="../../common/main/resources/img/header/buttons150.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);