Moved to new @Icon('icon-name', 'icon-size') helper for .eco files.

This commit is contained in:
Martin Edenhofer 2015-09-04 14:59:31 +02:00
parent 0100b38386
commit 7aa121341e
71 changed files with 175 additions and 170 deletions

View file

@ -229,6 +229,10 @@ class App extends Spine.Controller
humanTime = App.PrettyDate.humanTime(time, escalation) humanTime = App.PrettyDate.humanTime(time, escalation)
"<time class=\"humanTimeFromNow #{cssClass}\" data-time=\"#{time}\" data-tooltip=\"#{timestamp}\">#{humanTime}</time>" "<time class=\"humanTimeFromNow #{cssClass}\" data-time=\"#{time}\" data-tooltip=\"#{timestamp}\">#{humanTime}</time>"
# define icon helper
params.Icon = (name, className = '') ->
"<svg class=\"#{className}\"><use xlink:href=\"##{name}\" /></svg>"
# define template # define template
JST["app/views/#{name}"](params) JST["app/views/#{name}"](params)
template template

View file

@ -9,17 +9,17 @@
<ul class="horizontal tabs type-tabs"> <ul class="horizontal tabs type-tabs">
<li class="tab u-textTruncate" data-type="phone-in"> <li class="tab u-textTruncate" data-type="phone-in">
<svg class="tab-icon"><use xlink:href="#icon-received-calls" /></svg> <%- @Icon('icon-received-calls', 'tab-icon') %>
<%- @T('Received Call') %> <%- @T('Received Call') %>
</li> </li>
<li class="tab u-textTruncate" data-type="phone-out"> <li class="tab u-textTruncate" data-type="phone-out">
<svg class="tab-icon"><use xlink:href="#icon-outbound-calls" /></svg> <%- @Icon('icon-outbound-calls', 'tab-icon') %>
<%- @T('Outbound Call') %> <%- @T('Outbound Call') %>
</li> </li>
<li class="tab u-textTruncate" data-type="email-out"> <li class="tab u-textTruncate" data-type="email-out">
<svg class="tab-icon"><use xlink:href="#icon-email" /></svg> <%- @Icon('icon-email', 'tab-icon') %>
<%- @T('Send Email') %> <%- @T('Send Email') %>
</li> </li>
</ul> </ul>

View file

@ -3,7 +3,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T( @head ) %></h1> <h1 class="modal-title"><%- @T( @head ) %></h1>
</div> </div>

View file

@ -59,10 +59,10 @@
<li><%- @T('none') %></li> <li><%- @T('none') %></li>
<% end %> <% end %>
</ul> </ul>
<a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><svg class="icon-trash"><use xlink:href="#icon-plus"></use></svg></a> <a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><%- @Icon('icon-plus', 'icon-trash') %></a>
</td> </td>
<td> <td>
<a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><svg class="icon-trash"><use xlink:href="#icon-trash"></use></svg></a> <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('icon-trash', 'icon-trash') %></a>
</td> </td>
</tr> </tr>
<% if channel.status_in is 'error': %> <% if channel.status_in is 'error': %>

View file

@ -7,7 +7,7 @@
<!-- /dummy to prevent chrome to ask for password save --> <!-- /dummy to prevent chrome to ask for password save -->
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Account') %></h1> <h1 class="modal-title"><%- @T('Email Account') %></h1>
</div> </div>
@ -40,7 +40,7 @@
<form class="modal-content setup wizard hide js-probe"> <form class="modal-content setup wizard hide js-probe">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Account') %></h1> <h1 class="modal-title"><%- @T('Email Account') %></h1>
</div> </div>
@ -57,7 +57,7 @@
<form class="modal-content setup wizard hide js-test"> <form class="modal-content setup wizard hide js-test">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Account') %></h1> <h1 class="modal-title"><%- @T('Email Account') %></h1>
</div> </div>
@ -74,7 +74,7 @@
<form class="modal-content setup wizard hide js-verify"> <form class="modal-content setup wizard hide js-verify">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Account') %></h1> <h1 class="modal-title"><%- @T('Email Account') %></h1>
</div> </div>
@ -96,7 +96,7 @@
<!-- /dummy to prevent chrome to ask for password save --> <!-- /dummy to prevent chrome to ask for password save -->
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Inbound') %></h1> <h1 class="modal-title"><%- @T('Email Inbound') %></h1>
</div> </div>
@ -123,7 +123,7 @@
<!-- /dummy to prevent chrome to ask for password save --> <!-- /dummy to prevent chrome to ask for password save -->
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Outbound') %></h1> <h1 class="modal-title"><%- @T('Email Outbound') %></h1>
</div> </div>

View file

@ -3,7 +3,7 @@
<form class="modal-content setup wizard hide js-probe"> <form class="modal-content setup wizard hide js-probe">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Notification') %></h1> <h1 class="modal-title"><%- @T('Email Notification') %></h1>
</div> </div>
@ -20,7 +20,7 @@
<form class="modal-content setup wizard hide js-test"> <form class="modal-content setup wizard hide js-test">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Notification') %></h1> <h1 class="modal-title"><%- @T('Email Notification') %></h1>
</div> </div>
@ -41,7 +41,7 @@
<!-- /dummy to prevent chrome to ask for password save --> <!-- /dummy to prevent chrome to ask for password save -->
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title"><%- @T('Email Notification') %></h1> <h1 class="modal-title"><%- @T('Email Notification') %></h1>
</div> </div>

View file

@ -1,7 +1,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-arrow js-arrow"></div> <div class="modal-arrow js-arrow"></div>
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<div class="modal-header"><%- @T(@headline) %></div> <div class="modal-header"><%- @T(@headline) %></div>
<div class="modal-body"><%- @text %></div> <div class="modal-body"><%- @text %></div>

View file

@ -1,10 +1,10 @@
<div class="dropdown dropdown--actions"> <div class="dropdown dropdown--actions">
<div class="dropdown-toggle" id="userAction" data-toggle="dropdown"> <div class="dropdown-toggle" id="userAction" data-toggle="dropdown">
<% if @type isnt 'small': %> <% if @type isnt 'small': %>
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <%- @Icon('icon-cog', 'dropdown-icon') %>
<label><%- @T('Action') %></label> <label><%- @T('Action') %></label>
<% end %> <% end %>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction"> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
<% for item in @items: %> <% for item in @items: %>

View file

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

View file

@ -2,6 +2,6 @@
<div class="attachment-name"><%= @fileName %></div> <div class="attachment-name"><%= @fileName %></div>
<div class="attachment-size"><%= @fileSize %></div> <div class="attachment-size"><%= @fileSize %></div>
<div class="attachment-delete js-delete" data-id="<%= @store_id %>"> <div class="attachment-delete js-delete" data-id="<%= @store_id %>">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
</div> </div>
</div> </div>

View file

@ -9,7 +9,7 @@
<% end %> <% end %>
<% if @attribute.note: %> <% if @attribute.note: %>
<div class="help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"> <div class="help-message" title="<%- @Ti( @attribute.note ) + ' ' %>">
<svg class="icon-help"><use xlink:href="#icon-help" /></svg> <%- @Icon('icon-help', 'icon-help') %>
</div> </div>
<% end %> <% end %>
</div> </div>

View file

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

View file

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

View file

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

View file

@ -2,8 +2,8 @@
<% for row in @attribute.options: %> <% for row in @attribute.options: %>
<label> <label>
<input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %> <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %>
<svg class="icon-radio"><use xlink:href="#icon-radio" /></svg> <%- @Icon('icon-radio', 'icon-radio') %>
<svg class="icon-radio-checked"><use xlink:href="#icon-radio-checked" /></svg> <%- @Icon('icon-radio-checked', 'icon-radio-checked') %>
</label> </label>
<% end %> <% end %>
</div> </div>

View file

@ -16,7 +16,7 @@
<span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span> <span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span>
<span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span> <span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span>
</div> </div>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
<div class="small loading icon"></div> <div class="small loading icon"></div>
</div> </div>
<ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu"> <ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu">

View file

@ -7,6 +7,6 @@
<% end %> <% end %>
</select> </select>
<% if not @attribute.multiple: %> <% if not @attribute.multiple: %>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
<% end %> <% end %>
</div> </div>

View file

@ -4,7 +4,7 @@
<h2 class="sidebar-header-headline js-headline"><%- @T( item.head ) %></h2> <h2 class="sidebar-header-headline js-headline"><%- @T( item.head ) %></h2>
<div class="sidebar-header-actions js-actions"></div> <div class="sidebar-header-actions js-actions"></div>
<div class="tabsSidebar-close"> <div class="tabsSidebar-close">
<svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg> <%- @Icon('icon-long-arrow-right', 'icon icon-long-arrow-right') %>
</div> </div>
</div> </div>
<hr> <hr>
@ -16,7 +16,7 @@
<div class="tabsSidebar-tabs vertical justified"> <div class="tabsSidebar-tabs vertical justified">
<% for item in @items: %> <% for item in @items: %>
<div class="tabsSidebar-tab" data-tab="<%= item.name %>"> <div class="tabsSidebar-tab" data-tab="<%= item.name %>">
<svg class="icon"><use xlink:href="#icon-<%= item.icon %>" /></svg> <%- @Icon("icon-#{item.icon}", 'icon') %>
</div> </div>
<% end %> <% end %>
</div> </div>

View file

@ -5,8 +5,8 @@
<th style="width: 40px" class="no-padding"> <th style="width: 40px" class="no-padding">
<label class="input-replacement"> <label class="input-replacement">
<input type="checkbox" value="" name="bulk_all"/> <input type="checkbox" value="" name="bulk_all"/>
<svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg> <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
<svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg> <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
</label> </label>
</th> </th>
<% end %> <% end %>
@ -42,8 +42,8 @@
<td class="no-padding"> <td class="no-padding">
<label class="input-replacement"> <label class="input-replacement">
<input type="checkbox" value="<%= object.id %>" name="bulk"/> <input type="checkbox" value="<%= object.id %>" name="bulk"/>
<svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg> <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
<svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg> <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
</label> </label>
</td> </td>
<% end %> <% end %>
@ -51,8 +51,8 @@
<td class="no-padding"> <td class="no-padding">
<label class="input-replacement"> <label class="input-replacement">
<input type="radio" value="<%= object.id %>" name="radio"/> <input type="radio" value="<%= object.id %>" name="radio"/>
<svg class="icon-radio icon-unchecked"><use xlink:href="#icon-radio" /></svg> <%- @Icon('icon-radio', 'icon-radio icon-unchecked') %>
<svg class="icon-radio-checked icon-checked"><use xlink:href="#icon-radio-checked" /></svg> <%- @Icon('icon-radio-checked', 'icon-radio-checked icon-checked') %>
</label> </label>
</td> </td>
<% end %> <% end %>
@ -73,9 +73,7 @@
<td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %>> <td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %>>
<% if item.name is 'icon': %> <% if item.name is 'icon': %>
<svg class="<%- item.class %>"> <%- @Icon('icon-priority', item.class) %>
<use xlink:href="#icon-priority" />
</svg>
<% else: %> <% else: %>
<% if item.link: %> <% if item.link: %>
<a href="<%- item.link %>" <% if item.target: %>target="<%= item.target %>"<% end %>> <a href="<%- item.link %>" <% if item.target: %>target="<%= item.target %>"<% end %>>
@ -92,7 +90,7 @@
</td> </td>
<% end %> <% end %>
<% if @destroy: %> <% if @destroy: %>
<td><svg class="icon-trash" data-type="destroy"><use xlink:href="#icon-trash" /></svg></td> <td data-type="destroy"><%- @Icon('icon-trash', 'icon-trash') %></td>
<% end %> <% end %>
</tr> </tr>
<% end %> <% end %>

View file

@ -1,7 +1,7 @@
<div class="u-positionOrigin"> <div class="u-positionOrigin">
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>"> <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">

View file

@ -1,10 +1,10 @@
<li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>"> <li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
<%= @organization.displayName() %> <%= @organization.displayName() %>
<span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span> <span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span>
</div> </div>
<svg class="recipientList-arrow icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'recipientList-arrow icon-arrow-right') %>
</li> </li>

View file

@ -1,7 +1,7 @@
<ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>"> <ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>">
<li class="recipientList-controls js-back"> <li class="recipientList-controls js-back">
<div class="btn btn--action btn--onDark"> <div class="btn btn--action btn--onDark">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
<span class="btn-label"><%- @T('Back') %></span> <span class="btn-label"><%- @T('Back') %></span>
</div> </div>
</ul> </ul>

View file

@ -1,6 +1,6 @@
<li class="recipientList-entry js-user" data-user-id="<%= @user.id %>"> <li class="recipientList-entry js-user" data-user-id="<%= @user.id %>">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
<%= @user.displayName() %> <%= @user.displayName() %>

View file

@ -1,6 +1,6 @@
<li class="recipientList-entry recipientList--new js-user-new" data-user-id="new"> <li class="recipientList-entry recipientList--new js-user-new" data-user-id="new">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-plus" /></svg> <%- @Icon('icon-plus', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
<%- @T('Create new Customer') %> <%- @T('Create new Customer') %>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-admin"> <form class="setup wizard js-admin">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Administrator Account') %></h2> <h2><%- @T('Administrator Account') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-agent"> <form class="setup wizard js-agent">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Invite Colleagues') %></h2> <h2><%- @T('Invite Colleagues') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<div class="setup wizard"> <div class="setup wizard">
<div class="wizard-slide"> <div class="wizard-slide">
<div class="wizard-body vertical centered"> <div class="wizard-body vertical centered">

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<div class="setup wizard"> <div class="setup wizard">
<div class="wizard-slide"> <div class="wizard-slide">
<div class="wizard-body vertical centered"> <div class="wizard-body vertical centered">

View file

@ -1,3 +1,3 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
</div> </div>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-base"> <form class="setup wizard js-base">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Organization') %></h2> <h2><%- @T('Organization') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-channel"> <form class="setup wizard js-channel">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Connect Channels') %></h2> <h2><%- @T('Connect Channels') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-intro"> <form class="setup wizard js-intro">
<!-- dummy to prevent chrome to ask for password save --> <!-- dummy to prevent chrome to ask for password save -->

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-outbound"> <form class="setup wizard js-outbound">
<!-- dummy to prevent chrome to ask for password save --> <!-- dummy to prevent chrome to ask for password save -->

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard js-channel"> <form class="setup wizard js-channel">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Connect Channels') %></h2> <h2><%- @T('Connect Channels') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<form class="setup wizard"> <form class="setup wizard">
<div class="wizard-slide"> <div class="wizard-slide">
<h2><%- @T('Setup Finished') %></h2> <h2><%- @T('Setup Finished') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<div class="setup wizard js-start"> <div class="setup wizard js-start">
<div class="wizard-slide"> <div class="wizard-slide">
<div class="wizard-body vertical centered"> <div class="wizard-body vertical centered">

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<div class="import wizard"> <div class="import wizard">
<div class="wizard-slide vertical"> <div class="wizard-slide vertical">
<h2><%- @T('Import from') %></h2> <h2><%- @T('Import from') %></h2>

View file

@ -1,5 +1,5 @@
<div class="main flex vertical centered darkBackground"> <div class="main flex vertical centered darkBackground">
<svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg> <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
<div class="import wizard"> <div class="import wizard">
<div class="wizard-slide vertical" data-slide="otrs-prepare"> <div class="wizard-slide vertical" data-slide="otrs-prepare">
<h2><%- @T('Create OTRS Migration Plugin') %></h2> <h2><%- @T('Create OTRS Migration Plugin') %></h2>
@ -18,7 +18,7 @@
<p> <p>
<%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>: <%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>:
</p> </p>
<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> <a class="btn btn--primary btn--download js-download" download><%- @Icon('icon-download', 'icon-download') %> <%- @T('Personal Migration Plugin') %></a>
</div> </div>
<div class="wizard-controls horizontal center"> <div class="wizard-controls horizontal center">
<a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a> <a class="btn btn--text btn--secondary" 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"> <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.example.com" name="url">
<div class="input-feedback centered"> <div class="input-feedback centered">
<div class="small loading icon"></div> <div class="small loading icon"></div>
<svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon icon-error') %>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg> <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
</div> </div>
</div> </div>
<div class="error otrs-link-error"></div> <div class="error otrs-link-error"></div>
@ -60,7 +60,7 @@
<td class="progressTable-progressCell"> <td class="progressTable-progressCell">
<div class="horizontal center"> <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="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('icon-checkmark', 'icon icon-checkmark') %>
</div> </div>
</tr> </tr>
<tr class="js-base"> <tr class="js-base">
@ -69,7 +69,7 @@
<td class="progressTable-progressCell"> <td class="progressTable-progressCell">
<div class="horizontal center"> <div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div> <div class="flex"><progress max="42" value="42"></progress></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg> <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
</div> </div>
</tr> </tr>
<tr class="js-user"> <tr class="js-user">
@ -78,7 +78,7 @@
<td class="progressTable-progressCell"> <td class="progressTable-progressCell">
<div class="horizontal center"> <div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div> <div class="flex"><progress max="42" value="42"></progress></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg> <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
</div> </div>
</tr> </tr>
<tr class="js-ticket"> <tr class="js-ticket">
@ -87,7 +87,7 @@
<td class="progressTable-progressCell"> <td class="progressTable-progressCell">
<div class="horizontal center"> <div class="horizontal center">
<div class="flex"><progress max="134318" value="134318"></progress></div> <div class="flex"><progress max="134318" value="134318"></progress></div>
<svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg> <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
</div> </div>
</tr> </tr>
</table> </table>

View file

@ -1,7 +1,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-arrow js-arrow"></div> <div class="modal-arrow js-arrow"></div>
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<div class="modal-header"><%= @headline %></div> <div class="modal-header"><%= @headline %></div>
<div class="modal-body"><%- @text %></div> <div class="modal-body"><%- @text %></div>

View file

@ -20,14 +20,14 @@
<div class="attachment-name u-highlight">sega-genesis-box.gif</div> <div class="attachment-name u-highlight">sega-genesis-box.gif</div>
<div class="attachment-size">2.4mb</div> <div class="attachment-size">2.4mb</div>
<div class="attachment-delete js-delete align-right u-clickable"> <div class="attachment-delete js-delete align-right u-clickable">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
</div> </div>
</div> </div>
<div class="attachment"> <div class="attachment">
<div class="attachment-name u-highlight">license-key.txt</div> <div class="attachment-name u-highlight">license-key.txt</div>
<div class="attachment-size">7kb</div> <div class="attachment-size">7kb</div>
<div class="attachment-delete js-delete align-right u-clickable"> <div class="attachment-delete js-delete align-right u-clickable">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
</div> </div>
</div> </div>
</div> --> </div> -->
@ -45,7 +45,7 @@
<%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ... <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
</div> </div>
<div class="attachmentUpload-cancel js-cancel"> <div class="attachmentUpload-cancel js-cancel">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %></svg><%- @T('Cancel Upload') %>
</div> </div>
</div> </div>
<div class="attachmentUpload-progressBar" style="width: 0%"></div> <div class="attachmentUpload-progressBar" style="width: 0%"></div>

View file

@ -81,7 +81,7 @@
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown"> <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
<input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> <input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">
@ -89,26 +89,26 @@
<ul class="recipientList" role="menu"> <ul class="recipientList" role="menu">
<li class="recipientList-entry js-organization" data-organization-id="AlbrechtBertschlerGmbG"> <li class="recipientList-entry js-organization" data-organization-id="AlbrechtBertschlerGmbG">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-team" /></svg> <%- @Icon('icon-team', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Albrecht &amp; Bertschler GmbH Albrecht &amp; Bertschler GmbH
<span class="recipientList-detail">- 4 Personen</span> <span class="recipientList-detail">- 4 Personen</span>
</div> </div>
<svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
<li class="recipientList-entry js-organization" data-organization-id="BENCHMARKhumanresources"> <li class="recipientList-entry js-organization" data-organization-id="BENCHMARKhumanresources">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
BENCHMARK human resources BENCHMARK human resources
<span class="recipientList-detail">- 2 Personen</span> <span class="recipientList-detail">- 2 Personen</span>
</div> </div>
<svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Belinda Matt Belinda Matt
@ -117,7 +117,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Benjamin Wahlers Benjamin Wahlers
@ -126,7 +126,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Benjamin Weiß Benjamin Weiß
@ -135,7 +135,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Benteler SGL Composite Technology GmbH Benteler SGL Composite Technology GmbH
@ -144,37 +144,37 @@
<li class="recipientList-entry js-organization"> <li class="recipientList-entry js-organization">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-team" /></svg> <%- @Icon('icon-team', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Support Team Berlin Support Team Berlin
<span class="recipientList-detail">- 5 Personen</span> <span class="recipientList-detail">- 5 Personen</span>
</div> </div>
<svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
<li class="recipientList-entry js-organization"> <li class="recipientList-entry js-organization">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Bernecker + Rainer Industrie-Elektronik Ges.m.b.H. Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
<span class="recipientList-detail">- 3 Personen</span> <span class="recipientList-detail">- 3 Personen</span>
</div> </div>
<svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
<li class="recipientList-entry js-organization"> <li class="recipientList-entry js-organization">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Bertsch Ecopower GmbH Bertsch Ecopower GmbH
<span class="recipientList-detail">- 1 Person</span> <span class="recipientList-detail">- 1 Person</span>
</div> </div>
<svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
<li class="recipientList-entry recipientList--new u-clickable horizontal center"> <li class="recipientList-entry recipientList--new u-clickable horizontal center">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-plus" /></svg> <%- @Icon('icon-plus', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
<%- @T('Create new Customer') %> <%- @T('Create new Customer') %>
@ -184,13 +184,13 @@
<ul class="recipientList-organizationMembers hide" id="AlbrechtBertschlerGmbG"> <ul class="recipientList-organizationMembers hide" id="AlbrechtBertschlerGmbG">
<li class="recipientList-controls js-back"> <li class="recipientList-controls js-back">
<div class="btn btn--action btn--onDark"> <div class="btn btn--action btn--onDark">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
<span class="btn-label"><%- @T('Back') %></span> <span class="btn-label"><%- @T('Back') %></span>
</div> </div>
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Andreas Kramer Andreas Kramer
@ -199,7 +199,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Belinda Matt Belinda Matt
@ -208,7 +208,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Damian Sprengler Damian Sprengler
@ -217,24 +217,24 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Katharina Nussman Katharina Nussman
<span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span> <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
</div> </div>
</ul> </ul>
<ul class="recipientList-organizationMembers hide" id="BENCHMARKhumanresources"> <ul class="recipientList-organizationMembers hide" id="BENCHMARKhumanresources">
<li class="recipientList-controls js-back"> <li class="recipientList-controls js-back">
<div class="btn btn--action btn--onDark"> <div class="btn btn--action btn--onDark">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
<span class="btn-label"><%- @T('Back') %></span> <span class="btn-label"><%- @T('Back') %></span>
</div> </div>
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Hubert Lang Hubert Lang
@ -243,7 +243,7 @@
<li class="recipientList-entry"> <li class="recipientList-entry">
<div class="recipientList-iconSpacer"> <div class="recipientList-iconSpacer">
<svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg> <%- @Icon('icon-user', 'recipientList-icon') %>
</div> </div>
<div class="recipientList-name"> <div class="recipientList-name">
Mario Steibel Mario Steibel

View file

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

View file

@ -3,11 +3,11 @@
<div class="ticketZoom"> <div class="ticketZoom">
<div class="ticketZoom-controls"> <div class="ticketZoom-controls">
<div class="btn btn--action btn--split--first js-highlight"> <div class="btn btn--action btn--split--first js-highlight">
<svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg> <%- @Icon('icon-marker', 'icon icon-marker js-highlight-icon') %>
</div> </div>
<div class="dropdown dropdown--actions"> <div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true"> <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<% for entry, i in @colors: %> <% for entry, i in @colors: %>
@ -30,11 +30,11 @@
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a class="btn btn--action btn--split--first" data-from="0" data-type="page"> <a class="btn btn--action btn--split--first" data-from="0" data-type="page">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
</a> </a>
<li> <li>
<a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page"> <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
<svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg> <%- @Icon('icon-arrow-right', 'icon-arrow-right') %>
</a> </a>
</ul> </ul>
</li> </li>
@ -55,11 +55,11 @@
<ul class="pagination"> <ul class="pagination">
<li> <li>
<a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page"> <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
</a> </a>
<li> <li>
<a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page"> <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg> <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
</a> </a>
</ul> </ul>
</div> </div>

View file

@ -57,7 +57,7 @@
<option>Znuny</option> <option>Znuny</option>
<option>Max &amp; Moritz</option> <option>Max &amp; Moritz</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
</div> </div>

View file

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

View file

@ -6,7 +6,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
</div> </div>
<h1 class="modal-title">Edit Customer</h1> <h1 class="modal-title">Edit Customer</h1>
</div> </div>

View file

@ -16,11 +16,11 @@
<div class="merge-control"> <div class="merge-control">
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-left-arrow"><use xlink:href="#icon-line-left-arrow" /></svg> <%- @Icon('icon-line-left-arrow', 'line-arrow icon-line-left-arrow') %>
</div> </div>
<div class="merge-control-input">is equal</div> <div class="merge-control-input">is equal</div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
</div> </div>
@ -38,17 +38,17 @@
<div class="merge-control"> <div class="merge-control">
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
<div class="merge-control-input u-positionOrigin"> <div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small"> <select id="a" class="form-control form-control--small">
<option>replace</option> <option>replace</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
</div> </div>
@ -68,7 +68,7 @@
<div class="merge-controls"> <div class="merge-controls">
<div class="merge-control"> <div class="merge-control">
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
<div class="merge-control-input u-positionOrigin"> <div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small"> <select id="a" class="form-control form-control--small">
@ -76,15 +76,15 @@
<option selected>add</option> <option selected>add</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
</div> </div>
<div class="merge-control"> <div class="merge-control">
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
<div class="merge-control-input u-positionOrigin"> <div class="merge-control-input u-positionOrigin">
<select id="a" class="form-control form-control--small"> <select id="a" class="form-control form-control--small">
@ -92,10 +92,10 @@
<option selected>add</option> <option selected>add</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
</div> </div>
</div> </div>
</div> </div>

View file

@ -4,9 +4,9 @@
<div class="profile-section vertical centered"> <div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions"> <div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown"> <div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <%- @Icon('icon-cog', 'dropdown-icon') %>
<label>Aktion</label> <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('icon-arrow-down', 'icon-arrow-down') %>
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="organizationProfile"> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="organizationProfile">
<li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a> <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
@ -16,7 +16,7 @@
</ul> </ul>
</div> </div>
<div class="profile-organizationIcon"> <div class="profile-organizationIcon">
<svg class="icon-organization"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'icon-organization') %>
</div> </div>
<h1>Steuerbüro C. Kaik</h1> <h1>Steuerbüro C. Kaik</h1>
</div> </div>

View file

@ -6,14 +6,14 @@
<% for item in @links[type]: %> <% for item in @links[type]: %>
<li class="task"> <li class="task">
<div class="icon-holder"> <div class="icon-holder">
<svg class="<%- item.icon() %>"><use xlink:href="#icon-priority" /></svg> <%- @Icon('icon-priority', item.icon()) %>
</div> </div>
<div class="task-text"> <div class="task-text">
<a class="name ticket-popover" data-id="<%- item.id %>" href="#ticket/zoom/<%= item.id %>"><%= item.title %></a> <a class="name ticket-popover" data-id="<%- item.id %>" href="#ticket/zoom/<%= item.id %>"><%= item.title %></a>
<%- @humanTime(item.created_at) %> <%- @humanTime(item.created_at) %>
</div> </div>
<div class="sidebar-list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove"> <div class="sidebar-list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
</div> </div>
<% end %> <% end %>
</ol> </ol>

View file

@ -40,7 +40,7 @@
<div class="auth-providers"> <div class="auth-providers">
<% for auth_provider in @auth_providers: %> <% for auth_provider in @auth_providers: %>
<a class="auth-provider auth-provider--<%= auth_provider.class %>" href="<%= auth_provider.url %>"> <a class="auth-provider auth-provider--<%= auth_provider.class %>" href="<%= auth_provider.url %>">
<svg class="provider-icon"><use xlink:href="#icon-<%= auth_provider.class %>-button" /></svg> <%- @Icon("icon-#{auth_provider.class}-button", 'provider-icon') %>
<span class="provider-name"><%- @T( auth_provider.name ) %></span> <span class="provider-name"><%- @T( auth_provider.name ) %></span>
</a> </a>
<% end %> <% end %>
@ -65,8 +65,8 @@
</div> </div>
</div> </div>
<div class="poweredBy"> <div class="poweredBy">
<svg class="logo icon-logo"><use xlink:href="#icon-logo" /></svg> <%- @Icon('icon-logo', 'logo icon-logo') %>
<%- @T("Powered by") %> <%- @T("Powered by") %>
<svg class="logotype icon-logotype"><use xlink:href="#icon-logotype" /></svg> <%- @Icon('icon-logotype', 'logotype icon-logotype') %>
</div> </div>
</div> </div>

View file

@ -4,7 +4,7 @@
<div class="modal-header"> <div class="modal-header">
<% if @close: %> <% if @close: %>
<div class="modal-close js-close"> <div class="modal-close js-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<% end %> <% end %>
<h1 class="modal-title"><%- @T( @head ) %></h1> <h1 class="modal-title"><%- @T( @head ) %></h1>

View file

@ -1,13 +1,13 @@
<form class="search"> <form class="search">
<div class="search-holder"> <div class="search-holder">
<input id="global-search" type="search" autocomplete="off"> <input id="global-search" type="search" autocomplete="off">
<svg class="icon-magnifier"><use xlink:href="#icon-magnifier" /></svg> <%- @Icon('icon-magnifier', 'icon-magnifier') %>
<div class="empty-search"> <div class="empty-search">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
</div> </div>
<div class="logo js-toggleNavigation"> <div class="logo js-toggleNavigation">
<svg class="icon-logo"><use xlink:href="#icon-logo" /></svg> <%- @Icon('icon-logo', 'icon-logo') %>
<div class="activity-counter js-counter"></div> <div class="activity-counter js-counter"></div>
</div> </div>
<ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul> <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>

View file

@ -2,11 +2,11 @@
<% if item.child: %> <% if item.child: %>
<li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>"> <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"> <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
<svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg> <%- @Icon("icon-#{item.class}", 'nav-icon') %>
<span class="nav-item-name flex"> <span class="nav-item-name flex">
<%- @T( item.name ) %> <%- @T( item.name ) %>
</span> </span>
<svg class="dropdown-icon icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon("icon-arrow-down", 'dropdown-icon icon-arrow-down') %>
</a> </a>
<ul class="dropdown-menu dropdown-menu--light"> <ul class="dropdown-menu dropdown-menu--light">
<% for item in item.child: %> <% for item in item.child: %>
@ -23,7 +23,7 @@
<% else: %> <% else: %>
<li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>"> <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
<a class="horizontal center" href="<%= item.target %>"> <a class="horizontal center" href="<%= item.target %>">
<svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg> <%- @Icon("icon-#{item.class}", 'nav-icon') %>
<span class="nav-item-name flex"> <span class="nav-item-name flex">
<%- @T( item.name ) %> <%- @T( item.name ) %>
</span> </span>

View file

@ -6,7 +6,7 @@
<% if item.class is 'user': %> <% if item.class is 'user': %>
<span class="js-avatar"></span> <span class="js-avatar"></span>
<% else: %> <% else: %>
<svg class="user-menu-icon icon-plus"><use xlink:href="#icon-plus" /></svg> <%- @Icon('icon-plus', 'user-menu-icon icon-plus') %>
<% end %> <% end %>
</a> </a>
<ul class="dropdown-menu dropdown-menu--light" role="menu"> <ul class="dropdown-menu dropdown-menu--light" role="menu">
@ -21,7 +21,7 @@
<a href="<%= item.target %>" class="horizontal center"> <a href="<%= item.target %>" class="horizontal center">
<span class="flex u-textTruncate"><% if item.translate: %><%- @T( item.name ) %><% else: %><%= item.name %><% end %></span> <span class="flex u-textTruncate"><% if item.translate: %><%- @T( item.name ) %><% else: %><%= item.name %><% end %></span>
<% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %> <% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %>
<% if item.iconClass: %><svg class="icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg><% end %> <% if item.iconClass: %><%- @Icon("icon-#{item.iconClass}", "icon-#{item.iconClass}") %><% end %>
</a> </a>
</li> </li>
<% end %> <% end %>
@ -30,7 +30,7 @@
<% else: %> <% else: %>
<li class="settings <% if @active_tab[item.target] : %>active<% end %>"> <li class="settings <% if @active_tab[item.target] : %>active<% end %>">
<a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti( item.name ) %>"> <a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
<svg class="user-menu-icon icon-cog"><use xlink:href="#icon-cog" /></svg> <%- @Icon('icon-cog', 'user-menu-icon icon-cog') %>
</a> </a>
</li> </li>
<% end %> <% end %>

View file

@ -5,7 +5,7 @@
<li> <li>
<a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>"> <a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>">
<div class="nav-tab-icon"> <div class="nav-tab-icon">
<svg class="icon icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg> <%- @Icon("icon-#{item.iconClass}", "icon icon-#{item.iconClass}") %>
</div> </div>
<span class="nav-tab-name flex u-textTruncate"><%= item.display %></span> <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
</a> </a>

View file

@ -1,7 +1,7 @@
<div class="profile-section vertical centered"> <div class="profile-section vertical centered">
<div class="align-right profile-action js-action"></div> <div class="align-right profile-action js-action"></div>
<div class="profile-organizationIcon"> <div class="profile-organizationIcon">
<svg class="icon-organization"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'icon-organization') %>
</div> </div>
<h1><%= @organization.displayName() %></h1> <h1><%= @organization.displayName() %></h1>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="avatar-holder"> <div class="avatar-holder">
<span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span> <span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span>
<div class="avatar-delete"> <div class="avatar-delete">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
</div> </div>

View file

@ -22,7 +22,7 @@
<span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span> <span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
<% if avatar.deletable: %> <% if avatar.deletable: %>
<div class="avatar-delete"> <div class="avatar-delete">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -21,7 +21,7 @@
<td><%= device.name %></td> <td><%= device.name %></td>
<td><%= device.location %></td> <td><%= device.location %></td>
<td><%- @humanTime(device.updated_at) %></td> <td><%- @humanTime(device.updated_at) %></td>
<td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><svg class="icon-trash"><use xlink:href="#icon-trash"></use></svg></a></td> <td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><%- @Icon('icon-trash', 'icon-trash') %></a></td>
</tr> </tr>
<% end %> <% end %>
<tbody> <tbody>

View file

@ -20,7 +20,7 @@
<td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td> <td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td>
<td><%- @humanTime(session.created_at) %></td> <td><%- @humanTime(session.created_at) %></td>
<td><%- @humanTime(session.updated_at) %></td> <td><%- @humanTime(session.updated_at) %></td>
<td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><svg class="icon-trash" data-type="destroy"><use xlink:href="#icon-trash"></use></svg></a></td> <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('icon-trash', 'icon-trash') %></a></td>
</tr> </tr>
<% end %> <% end %>
</tbody> </tbody>

View file

@ -1,23 +1,19 @@
<% for item in @item_list: %> <% for item in @item_list: %>
<a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab task <%= item.data.class %><% if item.task.active: %> is-active<% end %><% if item.task.notify: %> is-modified<% end %>" data-key="<%- item.task.key %>"> <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab task <%= item.data.class %><% if item.task.active: %> is-active<% end %><% if item.task.notify: %> is-modified<% end %>" data-key="<%- item.task.key %>">
<div class="nav-tab-icon"> <div class="nav-tab-icon">
<svg class="icon icon-<%= item.data.iconClass %>">
<% if item.task.notify && item.data.iconClass is 'priority': %>
<use xlink:href="#icon-priority-modified-outer-circle" />
<% else: %>
<use xlink:href="#icon-<%= item.data.iconClass %>" />
<% end %>
</svg>
<% if item.task.notify && item.data.iconClass is 'priority': %> <% if item.task.notify && item.data.iconClass is 'priority': %>
<svg class="icon modified-inner-circle icon-<%= item.data.iconClass %>"> <%- @Icon('icon-priority-modified-outer-circle', "icon icon-#{item.data.iconClass}") %>
<use xlink:href="#icon-priority-modified-inner-circle" /> <% else: %>
</svg> <%- @Icon("icon-#{item.data.iconClass}", "icon icon-#{item.data.iconClass}") %>
<% end %>
<% if item.task.notify && item.data.iconClass is 'priority': %>
<%- @Icon('icon-priority-modified-inner-circle', "icon modified-inner-circle icon-#{item.data.iconClass}") %>
<% end %> <% end %>
</div> </div>
<div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div> <div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div>
<div class="nav-tab-close js-close" title="<%- @Ti('close') %>"> <div class="nav-tab-close js-close" title="<%- @Ti('close') %>">
<div class="nav-tab-close-inner"> <div class="nav-tab-close-inner">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
</div> </div>
</a> </a>

View file

@ -35,7 +35,7 @@
<option value="2">open</option> <option value="2">open</option>
<option value="3">pending</option> <option value="3">pending</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="form-group is-changed"> <div class="form-group is-changed">
<label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label> <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
@ -44,7 +44,7 @@
<option value="2" selected="">2 normal</option> <option value="2" selected="">2 normal</option>
<option value="3">3 high</option> <option value="3">3 high</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label> <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
@ -54,7 +54,7 @@
<option value="2">Twitter</option> <option value="2">Twitter</option>
<option value="1" selected="">Users</option> <option value="1" selected="">Users</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label> <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
@ -62,7 +62,7 @@
<option value="">-</option> <option value="">-</option>
<option value="3">Felix Niklas</option> <option value="3">Felix Niklas</option>
</select> </select>
<svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
</div> </div>
</form> </form>
<form class="form-inline"> <form class="form-inline">

View file

@ -48,7 +48,7 @@
</div> </div>
<% if !_.isEmpty( @article.attachments ): %> <% if !_.isEmpty( @article.attachments ): %>
<div class="attachments"> <div class="attachments">
<svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg> <%- @Icon('icon-paperclip', 'icon-paperclip') %>
<h3><%- @article.attachments.length %> <%- @T('Attached Files') %></h3> <h3><%- @article.attachments.length %> <%- @T('Attached Files') %></h3>
<% for attachment in @article.attachments: %> <% for attachment in @article.attachments: %>
<div class="attachment"> <div class="attachment">
@ -69,7 +69,7 @@
<div class="horizontal article-meta-row"> <div class="horizontal article-meta-row">
<div class="article-meta-key"><%- @T( 'Channel' ) %></div> <div class="article-meta-key"><%- @T( 'Channel' ) %></div>
<div class="article-meta-value"> <div class="article-meta-value">
<svg class="article-meta-icon"><use xlink:href="#icon-<%- @article.type.name %>" /></svg> <%- @Icon("icon-#{@article.type.name}", 'article-meta-icon') %>
<%- @T(@article.type.name) %> <%- @T(@article.type.name) %>
<% if @article.type.name is 'email': %> <% if @article.type.name is 'email': %>
<a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= @article.id %>"><%- @T( 'raw' ) %></a> <a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= @article.id %>"><%- @T( 'raw' ) %></a>

View file

@ -1,7 +1,7 @@
<div class="article-content article-actions horizontal stretch"> <div class="article-content article-actions horizontal stretch">
<% for action in @actions: %> <% for action in @actions: %>
<a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>"> <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
<svg class="article-action-icon"><use xlink:href="#icon-<%= action.icon %>" /></svg><%- @T( action.name ) %> <%- @Icon("icon-#{action.icon}", 'article-action-icon') %><%- @T( action.name ) %>
</a> </a>
<% end %> <% end %>
</div> </div>

View file

@ -1,9 +1,9 @@
<div class="btn btn--action btn--split--first js-highlight centered"> <div class="btn btn--action btn--split--first js-highlight centered">
<svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg> <%- @Icon('icon-marker', 'icon icon-marker js-highlight-icon') %>
</div> </div>
<div class="dropdown dropdown--actions"> <div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown" aria-expanded="true"> <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown" aria-expanded="true">
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
</div> </div>
<ul class="dropdown-menu dropdown-menu-right" role="menu"> <ul class="dropdown-menu dropdown-menu-right" role="menu">
<% for entry, i in @colors: %> <% for entry, i in @colors: %>

View file

@ -4,10 +4,18 @@
<ul class="pagination"> <ul class="pagination">
<li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>"> <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>">
<a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>"> <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>">
<svg class="icon icon-arrow-left<% if !@previous: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-left" /></svg> <% if @previous: %>
<%- @Icon('icon-arrow-left', 'icon icon-arrow-left') %>
<% else: %>
<%- @Icon('icon-arrow-left', 'icon icon-arrow-left arrow--disabled') %>
<% end %>
</a> </a>
<li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>"> <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>">
<a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>"> <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>">
<svg class="icon icon-arrow-right<% if !@next: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-right" /></svg> <% if @next: %>
<%- @Icon('icon-arrow-right', 'icon icon-arrow-right') %>
<% else: %>
<%- @Icon('icon-arrow-right', 'icon icon-arrow-right arrow--disabled') %>
<% end %>
</a> </a>
</ul> </ul>

View file

@ -12,7 +12,7 @@
</div> </div>
<div class="searchfield"> <div class="searchfield">
<svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg> <%- @Icon('icon-magnifier', 'icon icon-magnifier') %>
<input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search"> <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
</div> </div>

View file

@ -1,7 +1,7 @@
<div class="sidebar-block"> <div class="sidebar-block">
<div class="avatar organizationInfo-avatar size-50"> <div class="avatar organizationInfo-avatar size-50">
<a href="<%- @organization.uiUrl() %>"> <a href="<%- @organization.uiUrl() %>">
<svg class="icon-organization"><use xlink:href="#icon-organization" /></svg> <%- @Icon('icon-organization', 'icon-organization') %>
</a> </a>
</div> </div>
<h3 title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></h3> <h3 title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></h3>

View file

@ -1,8 +1,8 @@
<svg class="switchBackToUser-icon"><use xlink:href="#icon-switchView" /></svg> <%- @Icon('icon-switchView', 'switchBackToUser-icon') %>
<div class="switchBackToUser-text"><%- @T('Zammad looks like this for "%s"', @S('firstname') + ' ' + @S('lastname') ) %></div> <div class="switchBackToUser-text"><%- @T('Zammad looks like this for "%s"', @S('firstname') + ' ' + @S('lastname') ) %></div>
<div class="align-right horizontal center js-close u-clickable"> <div class="align-right horizontal center js-close u-clickable">
<%- @T('Back to my view') %> <%- @T('Back to my view') %>
<div class="switchBackToUser-close"> <div class="switchBackToUser-close">
<svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
</div> </div>
</div> </div>

Before

Width:  |  Height:  |  Size: 442 B

After

Width:  |  Height:  |  Size: 398 B

View file

@ -3,9 +3,8 @@
<% for tag in @tags: %> <% for tag in @tags: %>
<li class="sidebar-list-item"> <li class="sidebar-list-item">
<div class="sidebar-list-item-name"><%= tag %></div> <div class="sidebar-list-item-name"><%= tag %></div>
<!--<span>3</span>-->
<div class="sidebar-list-item-delete js-delete"> <div class="sidebar-list-item-delete js-delete">
<svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg> <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
</div> </div>
<% end %> <% end %>
</ul> </ul>

View file

@ -5,7 +5,7 @@
<% ticket = App.Ticket.fullLocal(ticket_id) %> <% ticket = App.Ticket.fullLocal(ticket_id) %>
<li class="task"> <li class="task">
<div class="icon-holder"> <div class="icon-holder">
<svg class="<%- ticket.icon() %>"><use xlink:href="#icon-priority" /></svg> <%- @Icon('icon-priority', ticket.icon()) %>
</div> </div>
<div class="task-text"> <div class="task-text">
<a class="name ticket-popover" data-id="<%- ticket_id %>" href="<%- ticket.uiUrl() %>"><%= ticket.title %></a> <a class="name ticket-popover" data-id="<%- ticket_id %>" href="<%- ticket.uiUrl() %>"><%= ticket.title %></a>