convert .sidebar-list to generic .list

This commit is contained in:
Felix Niklas 2015-09-08 00:05:39 +02:00
parent 1dc208ce58
commit d2383fe447
5 changed files with 68 additions and 48 deletions

View file

@ -10,7 +10,7 @@
<% end %> <% end %>
<% if !_.isEmpty(@not_used_email_addresses): %> <% if !_.isEmpty(@not_used_email_addresses): %>
<h3><%- @T('Not linked email addresses') %></h3> <h3><%- @T('Unlinked Email Addresses') %></h3>
<ul> <ul>
<% for email_address in @not_used_email_addresses: %> <% for email_address in @not_used_email_addresses: %>
<li data-id="<%= email_address.id %>"><a href="" data-type="email-address-edit"><%= email_address.email %></a> <li data-id="<%= email_address.id %>"><a href="" data-type="email-address-edit"><%= email_address.email %></a>
@ -18,6 +18,7 @@
</ul> </ul>
<% end %> <% end %>
<h3><%- @T('Linked Email Addresses') %></h3>
<% if _.isEmpty(@account_channels): %> <% if _.isEmpty(@account_channels): %>
<p><%- @T('You have no configured account right now.') %></p> <p><%- @T('You have no configured account right now.') %></p>
<% else: %> <% else: %>
@ -27,41 +28,52 @@
<th><%- @T('Inbound') %></th> <th><%- @T('Inbound') %></th>
<th><%- @T('Outbound') %></th> <th><%- @T('Outbound') %></th>
<th><%- @T('Email Adresses') %></th> <th><%- @T('Email Adresses') %></th>
<th><%- @T('Action') %></th> <th style="width: 20%"><%- @T('Action') %></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% for channel in @account_channels: %> <% for channel in @account_channels: %>
<tr data-id="<%- channel.id %>"> <tr data-id="<%- channel.id %>">
<td class="<% if channel.status_in is 'ok': %>success<% else if channel.status_in is 'error': %>danger<% else: %>warning<% end %>"> <td class="noTruncate">
<%- @T('State') %>: <%- @T(channel.status_in || 'unknown') %><br> <div class="horizontal">
<a href="#" data-type="edit-inbound"> <%- @Icon('status', channel.status_in + " inline") %>
<%= channel.options.inbound.options.user %><br> <a class="flex" href="#" data-type="edit-inbound">
<%= channel.options.inbound.options.host %> (<%= channel.options.inbound.adapter %>) <%= channel.options.inbound.options.user %><br>
</a> <%= channel.options.inbound.options.host %> (<%= channel.options.inbound.adapter %>)
</a>
</div>
</td> </td>
<td class="<% if channel.status_out is 'ok': %>success<% else if channel.status_out is 'error': %>danger<% else: %>warning<% end %>"> <td class="noTruncate">
<%- @T('State') %>: <%- @T(channel.status_out || 'unknown') %><br> <div class="horizontal">
<a href="#" data-type="edit-outbound"> <%- @Icon('status', channel.status_out + " inline") %>
<% if channel.options.outbound && channel.options.outbound.options: %> <a class="flex" href="#" data-type="edit-outbound">
<%= channel.options.outbound.options.user %><br> <% if channel.options.outbound && channel.options.outbound.options: %>
<%= channel.options.outbound.options.host %> <%= channel.options.outbound.options.user %><br>
<% end %> <%= channel.options.outbound.options.host %>
(<%= channel.options.outbound.adapter %>)</a> <% end %>
(<%= channel.options.outbound.adapter %>)
</a>
</div>
</td> </td>
<td> <td class="noTruncate">
<ul> <ul class="list">
<% if !_.isEmpty(channel.email_addresses): %> <% if !_.isEmpty(channel.email_addresses): %>
<% for email_address in channel.email_addresses: %> <% for email_address in channel.email_addresses: %>
<li data-id="<%= email_address.id %>"><a href="" data-type="email-address-edit"><%= email_address.email %></a> <li class="list-item" data-id="<%= email_address.id %>">
<div class="list-item-name">
<a href="" data-type="email-address-edit"><%= email_address.email %></a>
</div>
<div class="list-item-delete js-delete">
<%- @Icon('diagonal-cross') %>
</div>
<% end %> <% end %>
<% else: %> <% else: %>
<li><%- @T('none') %></li> <li class="list-item"><%- @T('none') %>
<% end %> <% end %>
</ul> </ul>
<a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><%- @Icon('plus', 'icon-trash') %></a> <a class="text-muted" href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>">+ <%- @Ti('Add Email') %></a>
</td> </td>
<td> <td class="noTruncate">
<a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a> <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a>
</td> </td>
</tr> </tr>
@ -83,7 +95,7 @@
<a data-type="new" class="btn btn--success"><%- @T('New') %></a> <a data-type="new" class="btn btn--success"><%- @T('New') %></a>
<% if !_.isEmpty(@notification_channels) && !App.Config.get('system_online_service'): %> <% if !_.isEmpty(@notification_channels) && !App.Config.get('system_online_service'): %>
<h2><%- @T('Notification Account') %></h2> <h2><%- @T('Notification Email Account') %></h2>
<table class="table table-hover user-list"> <table class="table table-hover user-list">
<thead> <thead>
@ -94,15 +106,17 @@
<tbody> <tbody>
<% for channel in @notification_channels: %> <% for channel in @notification_channels: %>
<tr data-id="<%- channel.id %>"> <tr data-id="<%- channel.id %>">
<td class="<% if channel.status_out is 'ok': %>success<% else if channel.status_out is 'error': %>danger<% else: %>warning<% end %>"> <td class="noTruncate">
<%- @T('State') %>: <%- @T(channel.status_out || 'unknown') %><br> <div class="horizontal">
<a href="#" data-type="edit-notification-outbound"> <%- @Icon('status', channel.status_out + " inline") %>
<% if channel.options.outbound && channel.options.outbound.options: %> <a class="flex" href="#" data-type="edit-notification-outbound">
<%= channel.options.outbound.options.user %><br> <% if channel.options.outbound && channel.options.outbound.options: %>
<%= channel.options.outbound.options.host %> <%= channel.options.outbound.options.user %><br>
<% end %> <%= channel.options.outbound.options.host %>
(<%= channel.options.outbound.adapter %>)</a> <% end %>
</td> (<%= channel.options.outbound.adapter %>)
</a>
</div>
</tr> </tr>
<% if channel.status_in is 'error': %> <% if channel.status_in is 'error': %>
<tr> <tr>
@ -114,6 +128,7 @@
<td colspan="1"><%= channel.last_log_out %></td> <td colspan="1"><%= channel.last_log_out %></td>
</tr> </tr>
<% end %> <% end %>
<% end %>
</tbody> </tbody>
</table> </table>
<% end %> <% end %>

View file

@ -771,7 +771,7 @@
<div class="tags"> <div class="tags">
<label>Tags</label> <label>Tags</label>
<ul class="sidebar-list"></ul> <ul class="list list--sidebar"></ul>
<div class="text-muted js-newTagLabel u-clickable"> <div class="text-muted js-newTagLabel u-clickable">
+ Add Tag + Add Tag
@ -786,7 +786,7 @@
<label>Links</label> <label>Links</label>
<div class="ticketLinks"> <div class="ticketLinks">
<div class="sidebar-list-title"> <div class="list-title">
child child
</div> </div>
@ -802,7 +802,7 @@
</div> </div>
</div> </div>
<div class="sidebar-list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div> <div class="list-item-delete js-delete" data-link-type="child" data-object="Ticket" data-object-id="3" data-type="remove"></div>
</li> </li>
</ol> </ol>
</div> </div>

View file

@ -1,7 +1,7 @@
<label><%- @T('Links') %></label> <label><%- @T('Links') %></label>
<% for type of @links: %> <% for type of @links: %>
<div class="ticketLinks"> <div class="ticketLinks">
<div class="sidebar-list-title"><%- @T( type ) %></div> <div class="list-title"><%- @T( type ) %></div>
<ol class="tasks tasks--standalone"> <ol class="tasks tasks--standalone">
<% for item in @links[type]: %> <% for item in @links[type]: %>
<li class="task"> <li class="task">
@ -12,7 +12,7 @@
<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="list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
<%- @Icon('diagonal-cross') %> <%- @Icon('diagonal-cross') %>
</div> </div>
<% end %> <% end %>

View file

@ -1,9 +1,9 @@
<label><%- @T( 'Tags' ) %></label> <label><%- @T( 'Tags' ) %></label>
<ul class="sidebar-list"> <ul class="list list--sidebar">
<% for tag in @tags: %> <% for tag in @tags: %>
<li class="sidebar-list-item"> <li class="list-item">
<div class="sidebar-list-item-name"><%= tag %></div> <div class="list-item-name"><%= tag %></div>
<div class="sidebar-list-item-delete js-delete"> <div class="list-item-delete js-delete">
<%- @Icon('diagonal-cross') %> <%- @Icon('diagonal-cross') %>
</div> </div>
<% end %> <% end %>

View file

@ -768,7 +768,8 @@ h5 {
} }
label, label,
.checkbox.form-group label { .checkbox.form-group label,
.label {
text-transform: uppercase; text-transform: uppercase;
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
display: block; display: block;
@ -4089,12 +4090,12 @@ footer {
margin: 20px 0; margin: 20px 0;
} }
.sidebar-list { .list {
padding: 0; padding: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.sidebar-list-title { .list-title {
margin-top: 7px; margin-top: 7px;
margin-bottom: 4px; margin-bottom: 4px;
text-transform: uppercase; text-transform: uppercase;
@ -4105,19 +4106,19 @@ footer {
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
.sidebar-list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
color: hsl(206,7%,28%); color: hsl(206,7%,28%);
border-bottom: 1px solid hsl(240,4%,95%); border-bottom: 1px solid hsl(240,4%,95%);
} }
.sidebar-list-item-name { .list-item-name {
flex: 1; flex: 1;
padding: 4px 1px; padding: 4px 1px;
} }
.sidebar-list-item-delete { .list-item-delete {
padding: 0 10px; padding: 0 10px;
margin-right: -3px; margin-right: -3px;
display: flex; display: flex;
@ -4133,7 +4134,7 @@ footer {
} }
} }
.sidebar-list-item-delete:hover .icon { .list-item-delete:hover .icon {
fill: hsl(1,77%,47%); fill: hsl(1,77%,47%);
} }
@ -4398,6 +4399,10 @@ footer {
tr:hover .switchView { tr:hover .switchView {
visibility: visible; visibility: visible;
} }
td .list {
margin-top: -4px;
}
.switchView { .switchView {
visibility: hidden; visibility: hidden;