refactor icons

fully switch to the @Icon method
This commit is contained in:
Felix Niklas 2015-10-19 16:38:13 +02:00
parent 2e51c25b1a
commit 20e6283bb2
17 changed files with 61 additions and 61 deletions

View file

@ -14,7 +14,7 @@
<option value="<%= url %>" <% if @attribute.value is url: %>selected<%end%>><%- @T(name) %></option>
<% end %>
</select>
<%- @Icon('arrow-down', 'dropdown-arrow') %>
<%- @Icon('arrow-down') %>
</div>
<span class="text-small text-muted">(<%- @T('iCalendar links from Google, will get fetched once a day') %>)</span>
</div>

View file

@ -9,7 +9,7 @@
<div class="controls">
<div class="u-positionOrigin js-operator">
<select></select>
<%- @Icon('arrow-down', 'dropdown-arrow') %>
<%- @Icon('arrow-down') %>
</div>
</div>
<div class="controls js-value"></div>

View file

@ -7,6 +7,6 @@
<% end %>
</select>
<% if not @attribute.multiple: %>
<%- @Icon('arrow-down', 'dropdown-arrow') %>
<%- @Icon('arrow-down') %>
<% end %>
</div>

View file

@ -22,11 +22,11 @@
<ul class="pagination">
<li>
<a class="btn btn--action btn--split--first" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<svg class="arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
<%- @Icon('arrow-left') %>
</a>
<li>
<a class="btn btn--action btn--split--last" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<svg class="arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('arrow-left') %>
</a>
</ul>
</div>
@ -229,7 +229,7 @@ Oliver<br>
</div>
</div>
<div class="attachments">
<svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
<%- @Icon('paperclip') %>
<div class="attachments-title">2 <%- @T('Attached Files') %></div>
<div class="attachment">
<div class="attachment-name u-highlight">midinotes_view.jpg</div>

View file

@ -45,7 +45,7 @@
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div>
<div class="attachmentUpload-cancel js-cancel">
<%- @Icon('diagonal-cross') %></svg><%- @T('Cancel Upload') %>
<%- @Icon('diagonal-cross') %> <%- @T('Cancel Upload') %>
</div>
</div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div>

View file

@ -30,15 +30,15 @@
<h2>VIP Avatars</h2>
<div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
<p><code>.avatar</code></p>
<div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
<p><code>.avatar.size-50</code></p>
<div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
<div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
<p><code>.avatar.size-80</code></p>

View file

@ -26,7 +26,7 @@
Download and install this personalised OTRS Migration Plugin on your OTRS System:
</p>
<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>
<%- @Icon('download') %> Personal Migration Plugin</a>
</div>
<div class="wizard-controls horizontal center">
<a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
@ -45,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>
<svg class="icon icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
<%- @Icon('icon-diagonal-cross', 'icon-error') %>
<%- @Icon('checkmark') %>
</div>
</div>
</div>
@ -66,7 +66,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
<%- @Icon('checkmark') %>
</div>
</tr>
<tr class="is-done">
@ -75,7 +75,7 @@
<td class="progressTable-progressCell">
<div class="horizontal center">
<div class="flex"><progress max="134318" value="134318"></progress></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
<%- @Icon('checkmark') %>
</div>
</tr>
<tr>
@ -84,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 -->
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
<%- @Icon('checkmark') %>
</div>
</tr>
</table>

View file

@ -120,7 +120,7 @@
</select>
<svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('icon-arrow-down') %>
</div>
@ -212,7 +212,7 @@
<div class="help-message" title="Notes are visible to agents only, never to customers. ">
<svg class="icon-help"><use xlink:href="#icon-help" /></svg>
<%- @Icon('help') %>
</div>
</div>
@ -279,7 +279,7 @@
</select>
<svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('icon-arrow-down') %>
</div>
@ -302,9 +302,9 @@
<div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<%- @Icon('cog', 'dropdown-icon') %>
<label>Aktion</label>
<svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('arrow-down') %>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profileAction">
<li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>

View file

@ -83,7 +83,7 @@
Where <b>State</b> is <b>open</b>.<br>
In <b>Folder</b> <b>Spam</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('arrow-right', 'action-flow-icon') %>
<div class="action-block">
<h3>Actions</h3>
Set <b>State</b> to <b>closed</b>.
@ -106,7 +106,7 @@
Where <b>State</b> is <b>open</b>.<br>
In <b>Folder</b> <b>Spam</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('arrow-right', 'action-flow-icon') %>
<div class="action-block">
<h3>Actions</h3>
Set <b>State</b> to <b>closed</b>.

View file

@ -4,7 +4,7 @@
</div>
</aside>
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
<%- @Icon('full-logo', 'wizard-logo') %>
<div class="setup wizard">
<div class="wizard-slide" data-slide="home">
<div class="wizard-body vertical centered">
@ -142,7 +142,7 @@
<option selected>IMAP</option>
<option>POP3</option>
</select>
<svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('arrow-down') %>
</div>
</div>
<div class="form-group">

View file

@ -83,7 +83,7 @@
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
Where <b>Priority</b> is <b>high</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('icon-arrow-right', 'action-flow-icon') %>
<div class="action-block">
<h3>Repsonse Times</h3>
00:30 hours First Response Time<br>
@ -108,7 +108,7 @@
Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
Where <b>Priority</b> is <b>high</b>.
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('icon-arrow-right', 'action-flow-icon') %>
<div class="action-block">
<h3>Repsonse Times</h3>
00:30 hours First Response Time<br>

View file

@ -29,7 +29,7 @@
<option>VIP</option>
</optgroup>
</select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('arrow-down') %>
</div>
</div>
<div class="controls">
@ -42,7 +42,7 @@
<option>is</option>
<option>is not</option>
</select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('arrow-down') %>
</div>
</div>
<input id="filter_value_1" type="text" class="form-control">

View file

@ -106,7 +106,7 @@
<div class="horizontal article-meta-row">
<div class="article-meta-key">Kanal</div>
<div class="article-meta-value">
<svg class="article-meta-icon"><use xlink:href="#icon-phone" /></svg>
<%- @Icon('phone', 'article-meta-icon') %>
phone
</div>
</div>
@ -117,11 +117,11 @@
set to internal
</a>
<a href="#" data-type="reply" class="article-action u-clickable">
<svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
<%- @Icon('reply', 'article-meta-icon') %>
reply
</a>
<a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
<svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
<%- @Icon('split', 'article-meta-icon') %>
split
</a>
</div>
@ -154,7 +154,7 @@
<div class="horizontal article-meta-row">
<div class="article-meta-key">Kanal</div>
<div class="article-meta-value">
<svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
<%- @Icon('note', 'article-meta-icon') %>
note
</div>
</div>
@ -206,11 +206,11 @@
set to internal
</a>
<a href="#" data-type="reply" class="article-action u-clickable">
<svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
<%- @Icon('reply', 'article-meta-icon') %>
reply
</a>
<a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
<svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
<%- @Icon('split', 'article-meta-icon') %>
split
</a>
</div>
@ -283,7 +283,7 @@
<div class="horizontal article-meta-row">
<div class="article-meta-key">Kanal</div>
<div class="article-meta-value">
<svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
<%- @Icon('note', 'article-meta-icon') %>
note
</div>
</div>

View file

@ -116,7 +116,7 @@
</div>
<div class="searchfield">
<svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
<%- @Icon('magnifier') %>
<input class="js-search form-control" name="search" placeholder="Search for users" type="search">
</div>
@ -163,7 +163,7 @@
<td><span>Niklas</span></td>
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
<div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -175,7 +175,7 @@
<td><span>Hubermeyerschmidt</span></td>
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
<div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -187,7 +187,7 @@
<td><span>Braun</span></td>
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
<div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -199,7 +199,7 @@
<td><span>Blanko</span></td>
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
<div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
</tbody>

View file

@ -4,9 +4,9 @@
<div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<%- @Icon('cog', 'dropdown-icon') %>
<label>Aktion</label>
<svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
<%- @Icon('arrow-down') %>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profileAction">
<li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
@ -146,14 +146,14 @@
<div class="stat-title">Status</div>
<div class="stat-graphic">
<div class="stat-tickets vertical reverse end">
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
<%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
</div>
<svg class="total-tickets"><use xlink:href="#icon-total-tickets" /></svg>
<%- @Icon('total-tickets', 'total-tickets') %>
</div>
<!--
Achtung: hier müssen wir schauen, dass wir das Widget genauso verwenden wie im Dashboard. Sonst gibt's Verwirrung.
@ -164,7 +164,7 @@
<div class="column mood stat-widget vertical">
<div class="stat-title">Stimmung</div>
<div class="stat-graphic">
<svg class="stat-icon mood-icon"><use xlink:href="#icon-mood-supergood" /></svg>
<%- @Icon('mood-supergood', 'stat-icon') %>
</div>
<div class="stat-label">3% of my tickets escalated.</div>
<div class="stat-detail">Average: 17%</div>

View file

@ -27,7 +27,7 @@
<%- rule %><br>
<% end %>
</div>
<svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
<%- @Icon('arrow-right', 'action-flow-icon') %>
<div class="action-block action-block--flex">
<div class="label"><%- @T('Escalation Times') %></div>
<% if sla.first_response_time: %>

View file

@ -7,24 +7,24 @@
<div class="js-avatar"></div>
<div class="editControls-item is-hidden pop-select">
<div class="editControls-iconHolder centered js-selectedArticleType">
<svg class="editControls-icon js-selectedType"><use xlink:href="#icon-<%= @article.type %>" /></svg>
<%- @Icon(@article.type, 'editControls-icon js-selectedType') %>
</div>
<div class="pop-selector is-hidden js-articleTypes">
<% for articleType in @articleTypes: %>
<div class="editControls-icon pop-selectable js-articleTypeItem" data-value="<%= articleType.name %>">
<svg class="pop-selectable-icon icon-<%= articleType.icon %>"><use xlink:href="#icon-<%= articleType.icon %>" /></svg>
<%- @Icon(articleType.icon, 'pop-selectable-icon') %>
</div>
<% end %>
</div>
</div>
<div class="editControls-item is-hidden js-toggleVisibility">
<div class="editControls-iconHolder">
<svg class="editControls-icon icon-internal" title="<%- @Ti("set to public") %>">
<use xlink:href="#icon-lock" />
</svg>
<svg class="editControls-icon icon-public" title="<%- @Ti("set to internal") %>">
<use xlink:href="#icon-lock-open" />
</svg>
<div class="editControls-icon icon-internal" title="<%- @Ti("set to public") %>">
<%- @Icon('lock') %>
</div>
<div class="editControls-icon icon-public" title="<%- @Ti("set to internal") %>">
<%- @Icon('lock-open') %>
</div>
</div>
</div>
</div>
@ -69,7 +69,7 @@
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div>
<div class="attachmentUpload-cancel js-cancel">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
<%- @Icon('diagonal-cross') %><%- @T('Cancel Upload') %>
</div>
</div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div>