Merge pull request #1134 from ONLYOFFICE/feature/sprite-to-svg

Feature/sprite to svg
This commit is contained in:
maxkadushkin 2021-08-28 00:56:11 +03:00 committed by GitHub
commit 6fb9d9e072
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 17 deletions

View file

@ -455,7 +455,7 @@ define([
if (!options.width) options.width = 'auto';
var template = '<div class="info-box">' +
'<% if (typeof iconCls !== "undefined") { %><div class="icon img-commonctrl img-colored <%= iconCls %>"></div><% } %>' +
'<% if (typeof iconCls !== "undefined") { %><div class="icon <%= iconCls %>"></div><% } %>' +
'<div class="text" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
'<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
'</div>' +

View file

@ -99,7 +99,7 @@ define([
'<% if (type == Common.Utils.importTextType.DRM) { %>',
'<% if (warning) { %>',
'<div>',
'<div class="icon img-commonctrl warn"></div>',
'<div class="icon warn"></div>',
'<div style="padding-left: 50px;"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
'<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
'<div id="id-password-txt" style="width: 290px;"></div></div>',

View file

@ -0,0 +1,26 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
svg>g {display: none}
:target {display: inline}
</style>
<g id="attention" >
<path d="M3.25245 31.1904L18.366 4.94276C19.0898 3.68575 20.9102 3.68575 21.634 4.94275L36.7475 31.1904C37.4678 32.4412 36.5612 34 35.1136 34H4.88642C3.43881 34 2.53225 32.4412 3.25245 31.1904Z" fill="#FFD112"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 25H19L18 18V12H22V18L21 25ZM22 31H18V27H22V31Z" fill="white"/>
</g>
<g id="done" >
<circle cx="20" cy="20" r="16" fill="#009900"/>
<path d="M12 20L18 26L29 15" stroke="white" stroke-width="4"/>
</g>
<g id="info">
<circle cx="20" cy="20" r="16" fill="#007DF1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 10H18V14H22V10ZM22 17H18V30H22V17Z" fill="white"/>
</g>
<g id="warning">
<circle cx="20" cy="20" r="16" fill="#F62211"/>
<rect x="10" y="17" width="20" height="6" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -77,14 +77,13 @@
}
}
.icon.img-commonctrl {
.icon {
float: left;
width: 35px;
height: 35px;
width: 40px;
height: 40px;
&.warn {
height: 32px;
background-position: @alerts-offset-x @alerts-offset-y - 105px;
background: ~"url('@{common-image-const-path}/controls/warnings.svg#attention')" no-repeat center;
}
}
}

View file

@ -172,26 +172,24 @@
.icon {
&.warn {
width: 35px;
height: 32px;
background-position: @alerts-offset-x @alerts-offset-y - 105px;
background: ~"url('@{common-image-const-path}/controls/warnings.svg#attention')" no-repeat center;
}
&.error, &.info, &.confirm {
width: 35px;
height: 35px;
&.error, &.info, &.confirm, &.warn {
width: 40px;
height: 40px;
}
&.error {
background-position: @alerts-offset-x @alerts-offset-y - 0;
background: ~"url('@{common-image-const-path}/controls/warnings.svg#warning')" no-repeat center;
}
&.info {
background-position: @alerts-offset-x @alerts-offset-y - 35px;
background: ~"url('@{common-image-const-path}/controls/warnings.svg#info')" no-repeat center;
}
&.confirm {
background-position: @alerts-offset-x @alerts-offset-y - 70px;
background: ~"url('@{common-image-const-path}/controls/warnings.svg#done')" no-repeat center;
}
}

View file

@ -89,7 +89,7 @@
<tr>
<td class="padding-small">
<div style="display: inline-block; margin-right: 5px;vertical-align: bottom;">
<div id="data-validation-img-style" class="icon img-commonctrl error" style="margin-bottom: -1px;"></div>
<div id="data-validation-img-style" class="icon error" style="margin-bottom: -1px;"></div>
</div>
<div style="display: inline-block;">
<label class="input-label"><%= scope.textStyle %></label>