Streamline of layout and markup for user/organization in sidebar/widget and user/orzanization/ticket in popovers.

This commit is contained in:
Martin Edenhofer 2015-02-08 14:22:03 +01:00
parent 0cb3055441
commit 9a80a313ac
6 changed files with 77 additions and 53 deletions

View file

@ -1,20 +1,19 @@
<hr>
<div>
<% for row in @organizationData: %>
<% if @organization[row.name]: %>
<div class="column">
<h3><%- @T( row.display ) %></h3>
<div><%- @P( @organization, row.name ) %></div>
<div class="popover-block">
<label><%- @T( row.display ) %></label>
<%- @P( @organization, row.name ) %>
</div>
<% end %>
<% end %>
</div>
<% if @organization.members: %>
<hr>
<h3><%- @T('Members') %></h3>
<% for user in @organization.members: %>
<div class="person">
<%= user.displayName() %>
<div class="popover-block">
<label><%- @T('Members') %></label>
<% for user in @organization.members: %>
<div class="person"><%= user.displayName() %></div>
<% end %>
</div>
<% end %>
<% end %>

View file

@ -2,36 +2,40 @@
<span class="<%- @ticket.icon() %>" title="<%- @ticket.iconTitle() %>"></span> <span class="<%- @ticket.iconTextClass() %>"><%- @ticket.iconTitle() %></span>
</div>
<hr>
<h3><%- @T('Agent') %></h3>
<div class="person">
<%= @ticket.owner.displayName() %>
<% if @ticket.owner.organization: %>
<span class="organization"><%= @ticket.owner.organization.displayName() %></span>
<% end %>
<div class="popover-block">
<label><%- @T('Agent') %></label>
<div class="person">
<%= @ticket.owner.displayName() %>
<% if @ticket.owner.organization: %>
<span class="organization"><%= @ticket.owner.organization.displayName() %></span>
<% end %>
</div>
</div>
<h3><%- @T('Customer') %></h3>
<div class="person">
<%= @ticket.customer.displayName() %>
<% if @ticket.customer.organization: %>
<span class="organization"><%= @ticket.customer.organization.displayName() %></span>
<% end %>
<div class="popover-block">
<label><%- @T('Customer') %></label>
<div class="person">
<%= @ticket.customer.displayName() %>
<% if @ticket.customer.organization: %>
<span class="organization"><%= @ticket.customer.organization.displayName() %></span>
<% end %>
</div>
</div>
<hr>
<div class="horizontal two-columns">
<div class="column">
<h3>#</h3>
<label>#</label>
<div class="u-textTruncate"><%- @P( @ticket, 'number' ) %></div>
</div>
<div class="column">
<h3><%- @T( 'Priority' ) %></h3>
<label><%- @T( 'Priority' ) %></label>
<div class="u-textTruncate"><%- @P( @ticket, 'priority' ) %></div>
</div>
<div class="column">
<h3><%- @T( 'Created' ) %></h3>
<label><%- @T( 'Created' ) %></label>
<div class="u-textTruncate"><%- @P( @ticket, 'created_at' ) %></div>
</div>
<div class="column">
<h3><%- @T( 'Group' ) %></h3>
<label><%- @T( 'Group' ) %></label>
<div class="u-textTruncate"><%- @P( @ticket, 'group' ) %></div>
</div>
</div>

View file

@ -5,15 +5,15 @@
<div>
<% for row in @userData: %>
<% if @user[row.name]: %>
<div class="column">
<h3><%- @T( row.display ) %></h3>
<div><%- @P( @user, row.name ) %></div>
<div class="popover-block">
<label><%- @T( row.display ) %></label>
<%- @P( @user, row.name ) %>
</div>
<% end %>
<% end %>
<% if !_.isEmpty(@user['accounts']): %>
<div class="customer-info">
<h3><%- @T( 'Linked Accounts' ) %></h3>
<div class="popover-block">
<label><%- @T( 'Linked Accounts' ) %></label>
<% for account of @user['accounts']: %>
<a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
<% end %>
@ -21,8 +21,8 @@
<% end %>
<% if !_.isEmpty( @user['links'] ): %>
<% for link in @user['links']: %>
<div class="customer-info">
<h3><%- @T( link['title'] ) %></h3>
<div class="popover-block">
<label><%- @T( link['title'] ) %></label>
<% for item in link['items']: %>
<% if item['url']: %>
<a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>

View file

@ -1,7 +1,8 @@
<div class="sidebar-block">
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @organization.displayName() %>
</h3>
<div class="avatar organizationInfo-avatar size-50">
<a href="<%- @organization.uiUrl() %>" class="organization icon"></a>
</div>
<h3 title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></h3>
</div>
<% for row in @organizationData: %>

View file

@ -1,10 +1,7 @@
<div class="userInfo">
<div class="sidebar-block">
<%- @user.avatar("50", "", "userInfo-avatar") %>
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %>
</h3>
</div>
<div class="sidebar-block">
<%- @user.avatar("50", "", "userInfo-avatar") %>
<h3 title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></h3>
</div>
<% for row in @userData: %>
<% if @user[row.name] || row.name is 'note': %>
<div class="sidebar-block">
@ -45,5 +42,4 @@
</div>
<% end %>
<% end %>
<% end %>
</div>
<% end %>

View file

@ -2572,12 +2572,18 @@ footer {
.sidebar-block {
margin: 20px 0;
word-wrap: break-word;
&:first-child {
margin-top: 0;
}
}
.sidebar-block,
.sidebar-block > * {
@extend .u-textTruncate;
}
.sidebar-block [contenteditable=true] {
white-space: normal; // do no u-textTruncate, we want to edit it inline
}
.main + .sidebar {
border-right: none;
@ -2741,10 +2747,16 @@ footer {
}
.popover .user-organization {
@extend .u-textTruncate;
margin-bottom: 8px;
margin-top: -4px;
}
.popover-block {
@extend .sidebar-block;
margin: 10px 0;
}
.popover hr {
margin: 8px 0;
}
@ -2752,7 +2764,15 @@ footer {
.popover .person .organization:before { content: '('; }
.popover .person .organization:after { content: ')'; }
.popover .column h3 {
.popover label {
font-size: 13px;
color: #a9bcc4;
font-weight: 200;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.popover .column label {
margin: 8px 0 1px;
}
@ -4403,22 +4423,26 @@ footer {
position: relative;
}
.organizationInfo-avatar {
@extend .userInfo-avatar;
padding: 18px 0 0 18px;
}
.userList {
list-style: none;
padding: 0;
li {
@extend .horizontal;
@extend .center;
position: relative;
margin: 10px 0;
}
a {
@extend .u-textTruncate;
}
.avatar {
margin-right: 7px;
position: absolute;
top: 10px;
right: 0px;
left: 48px;
}
}