Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

create .icon-error (version of icon-diagonal-cross but with color)

Browse source
This commit is contained in:
Felix Niklas 2015-05-22 09:59:35 +02:00
parent 703ee373ce
commit c1bcf5285c
14 changed files with 87 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/generic/error/generic.jst.eco
View file

@ -1,4 +1,4 @@
<div class="fullscreenMessage">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<h2><%- @T('Status Code') %>: <%= @status %>. <%= @detail %></h2>
</div>

2
app/assets/javascripts/app/views/generic/error/not_found.jst.eco
View file

@ -1,4 +1,4 @@
<div class="flex fullscreenMessage">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<h2><%- @T('Opps.. I\'m sorry, but I can\'t find this %s.', @objectName ) %></h2>
</div>

2
app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco
View file

@ -1,4 +1,4 @@
<div class="flex fullscreenMessage">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<h2><%- @T('Opps.. I\'m sorry, but you have insufficient rights to open this %s.', @objectName ) %></h2>
</div>

14
app/assets/javascripts/app/views/import/otrs.jst.eco
View file

@ -18,7 +18,7 @@
<p>
<%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>:
</p>
<a class="btn btn--primary btn--download js-download" download><span class="download icon"></span> <%- @T('Personal Migration Plugin') %></a>
<a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" href="#import"><%- @T('Go Back') %></a>
@ -37,8 +37,8 @@
<input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.example.com" name="url">
<div class="input-feedback centered">
<div class="small loading icon"></div>
<div class="error icon"></div>
<div class="checkmark icon"></div>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</div>
<div class="error otrs-link-error"></div>
@ -60,7 +60,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
<tr class="js-base">
@ -69,7 +69,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div>
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
<tr class="js-user">
@ -78,7 +78,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div>
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
<tr class="js-ticket">
@ -87,7 +87,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="134318" value="134318"></progress></div>
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
</table>

2
app/assets/javascripts/app/views/layout_ref/error.jst.eco
View file

@ -1,4 +1,4 @@
<div class="fullscreenMessage">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<h2><%- @T('Status Code') %>: 1234. Check your internet connection...</h2>
</div>

13
app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
View file

@ -25,7 +25,8 @@
<p>
Download and install this personalised OTRS Migration Plugin on your OTRS System:
</p>
<a class="btn btn--primary btn--download" download data-action="reveal"><span class="download icon"></span> Personal Migration Plugin</a>
<a class="btn btn--primary btn--download" download data-action="reveal">
<svg class="icon-download"><use xlink:href="#icon-download" /></svg> Personal Migration Plugin</a>
</div>
<div class="wizard-controls horizontal center">
<a class="subtle-link" data-target="home">Go Back</a>
@ -44,8 +45,8 @@
<input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
<div class="input-feedback centered">
<div class="small loading icon"></div>
<div class="error icon"></div>
<div class="checkmark icon"></div>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</div>
</div>
@ -65,7 +66,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div>
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
<tr class="is-done">
@ -74,7 +75,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="134318" value="134318"></progress></div>
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
<tr>
@ -83,7 +84,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
<div class="checkmark icon"></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
</div>
</tr>
</table>

2
app/assets/javascripts/app/views/layout_ref/loading_placeholder.jst.eco
View file

@ -1,3 +1,3 @@
<div class="flex fullscreenMessage">
<div class="fullscreenMessage">
<div class="loading icon"></div><h2>Loading Ticket</h2>
</div>

2
app/assets/stylesheets/svg-dimensions.css
View file

@ -1 +1 @@
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-mail { width: 17px; height: 17px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-happy { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-super-happy { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox { width: 10px; height: 10px; } .icon-checkmark { width: 16px; height: 14px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-download { width: 14px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-mail { width: 17px; height: 17px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-happy { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-super-happy { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }

41
app/assets/stylesheets/zammad.css.scss
View file

@ -397,11 +397,12 @@ span[data-tooltip]:hover:before {
margin-top: 10px;
}
.btn--download .download.icon {
.btn--download .icon-download {
margin-right: 6px;
margin-top: 3px;
margin-top: 4px;
margin-left: -10px;
vertical-align: top;
fill: white;
}
.btn-label {
@ -871,7 +872,6 @@ textarea,
.icon {
margin-right: 14px;
fill: #F35910;
}
h2 {
@ -1322,6 +1322,16 @@ ol.tabs li {
height: 13px;
}
.icon-checkmark {
fill: #38AE6A;
}
.icon-error {
fill: #F35910;
width: 13px;
height: 13px;
}
.add.icon,
.remove.icon {
@ -1861,22 +1871,6 @@ ol.tabs li {
background-position: -103px -345px;
}
.download.icon {
width: 14px;
height: 13px;
background-position: -120px -349px;
}
.checkmark.icon {
width: 17px;
height: 15px;
background-position: -135px -348px;
}
.white.checkmark.icon {
background-position: -135px -364px;
}
.error.icon {
width: 13px;
height: 13px;
@ -1884,6 +1878,7 @@ ol.tabs li {
}
.loading.icon {
display: inline-block;
width: 30px;
height: 30px;
background: hsl(145,51%,45%);
@ -4949,8 +4944,8 @@ label + .wizard-buttonList {
}
.input-feedback[data-state=loading] .loading.icon,
.input-feedback[data-state=error] .error.icon,
.input-feedback[data-state=success] .checkmark.icon {
.input-feedback[data-state=error] .icon-error,
.input-feedback[data-state=success] .icon-checkmark {
display: block;
}
@ -4979,12 +4974,12 @@ label + .wizard-buttonList {
display: block;
}
.progressTable .checkmark {
.progressTable .icon-checkmark {
margin-left: 10px;
opacity: 0;
}
.progressTable tr.is-done .checkmark {
.progressTable tr.is-done .icon-checkmark {
opacity: 1;
}

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 37 KiB

12
public/assets/images/icons/checkbox-checked.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>checkbox-checked</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="checkbox-checked" sketch:type="MSArtboardGroup" fill="#000000">
<path d="M9,1 L9,9 L1,9 L1,1 L9,1 Z M0,0 L0,0.5 L0,9.5 L0,10 L0.5,10 L9.5,10 L10,10 L10,9.5 L10,0.5 L10,0 L9.5,0 L0.5,0 L0,0 Z M3.79999999,5.89999999 L2.09999999,4.39999999 L1.39999999,5.09999999 L4.29999999,8.59999999 C4.79999999,7.09999999 6.39999999,4.19999999 8.29999999,2.09999999 L8.09999999,1.49999999 C5.99999999,2.99999999 4.39999999,4.89999999 3.79999999,5.89999999 L3.79999999,5.89999999 L3.79999999,5.89999999 Z" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
public/assets/images/icons/checkbox.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>checkbox</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="checkbox" sketch:type="MSArtboardGroup" fill-opacity="0.2" fill="#000000">
<path d="M9,9 L1,9 L1,1 L9,1 L9,9 Z M10,0 L0,0 L0,10 L10,10 L10,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 772 B

12
public/assets/images/icons/checkmark.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>checkmark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="checkmark" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M6.476597,13.837073 C10.286418,5.701257 15.863199,1.595794 15.863199,1.595794 L15.863199,0 C15.863199,0 9.949658,2.606564 5.367566,8.72169 C5.367566,8.72169 3.233543,6.417349 2.015964,5.847399 C0.798385,5.277449 0,7.235263 0,7.235263 C0,7.235263 3.028698,10.053302 6.476597,13.837073 L6.476597,13.837073 Z" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 991 B

12
public/assets/images/icons/download.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>download</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="download" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M4,0 L4,6 L10,6 L10,0 L4,0 L4,0 Z M14,6 L0,6 L7,13 L14,6 L14,6 Z" id="download-white" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 768 B