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

format sidebar info, style orga member section

Browse source 
create .sidebar-block for generic sidebar blocks
This commit is contained in:
Felix Niklas 2014-11-15 17:05:03 +01:00
parent 00a3536740
commit 177dc4464b
4 changed files with 115 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/assets/javascripts/app/views/widget/organization.jst.eco
View file

@ -1,31 +1,45 @@
<div class="userInfo">
<div class="userInfo-entry">
<div class="sidebar-block">
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @organization.displayName() %>
</div>
<% for row in @organizationData: %>
<% if @organization[row.name] || row.name is 'note': %>
<div class="userInfo-entry">
<% if row.tag isnt 'textarea': %>
<div class="userInfo-label"><%- @T( row.display ) %></div>
<div class="userInfo-value"><%- @L( @P( @organization[row.name] ) ) %></div>
<% else: %>
<div class="userInfo-label"><%- @T( row.display ) %></div>
<div class="userInfo-value">
<div contenteditable="true" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% if @organization.members: %>
<h3><%- @T('Member') %></h3>
<ul>
<% for user in @organization.members: %>
<li><a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>"><%= user.displayName() %></a></li>
<% end %>
</ul>
<% end %>
</h3>
</div>
<% for row in @organizationData: %>
<% if @organization[row.name] || row.name is 'note': %>
<div class="sidebar-block">
<% if row.tag isnt 'textarea': %>
<label><%- @T( row.display ) %></label>
<%- @L( @P( @organization[row.name] ) ) %>
<% else: %>
<label><%- @T( row.display ) %></label>
<div contenteditable="true" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div>
<% end %>
</div>
<% end %>
<% end %>
<% if @organization.members: %>
<hr>
<user class="sidebar-block">
<label><%- @T('Member') %></label>
<ul class="userList">
<% for user in @organization.members: %>
<li>
<%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
<%= user.displayName() %>
</a>
<li>
<%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
<%= user.displayName() %>
</a>
<li>
<%- user.avatar("40") %>
<a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>">
<%= user.displayName() %>
</a>
<% end %>
</ul>
</div>
<% end %>

36
app/assets/javascripts/app/views/widget/user.jst.eco
View file

@ -1,43 +1,36 @@
<div class="userInfo">
<div class="userInfo-entry">
<%- @user.avatar("50") %>
<div class="userInfo-name">
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<div class="sidebar-block">
<%- @user.avatar("50", "", "userInfo-avatar") %>
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %>
</div>
</div>
</h3>
</div>
<% for row in @userData: %>
<% if @user[row.name] || row.name is 'note': %>
<div class="userInfo-entry">
<div class="sidebar-block">
<% if row.tag isnt 'textarea': %>
<div class="userInfo-label"><%- @T( row.display ) %></div>
<div class="userInfo-value"><%- @L( @P( @user[row.name] ) ) %></div>
<label><%- @T( row.display ) %></label>
<%- @L( @P( @user[row.name] ) ) %>
<% else: %>
<div class="userInfo-label"><%- @T( row.display ) %></div>
<div class="userInfo-value">
<label><%- @T( row.display ) %></label>
<div contenteditable="true" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></div>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% if !_.isEmpty(@user['accounts']): %>
<div class="userInfo-entry">
<div class="userInfo-label"><%- @T( 'Linked Accounts' ) %></div>
<div class="userInfo-value">
<div class="sidebar-block">
<label><%- @T( 'Linked Accounts' ) %></label>
<% for account of @user['accounts']: %>
<a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
<% end %>
</div>
</div>
<% end %>
<% if !_.isEmpty(@user['links']): %>
<% for link in @user['links']: %>
<div class="userInfo-entry">
<div class="userInfo-label"><%- @T( link['title'] ) %></div>
<div class="userInfo-value">
<% for item in link['items']: %>
<div class="sidebar-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 %>>
<% else: %>
@ -50,8 +43,7 @@
</span>
<% end %>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% end %>
</div>

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

@ -523,11 +523,11 @@ label,
.checkbox.form-group label {
text-transform: uppercase;
color: #999;
display: block;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
padding: 0 2px;
margin-bottom: 6px;
margin-bottom: 4px;
}
fieldset {
@ -552,6 +552,11 @@ fieldset > *:not(.form-group) .form-control {
margin-top: 0;
}
.form-group label {
padding: 0 2px;
margin-bottom: 6px;
}
.form-group .controls .richtext {
position: relative;
height: auto;
@ -669,7 +674,6 @@ textarea,
text-transform: inherit;
vertical-align: baseline;
letter-spacing: inherit;
display: block;
}
@ -2244,6 +2248,7 @@ footer {
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,.2);
cursor: default;
}
.unique.avatar.size-50 {
@ -2269,6 +2274,23 @@ footer {
margin-top: 5px;
}
.sidebar h3 {
margin: 0;
color: rgba(0,8,14,.73);
font-weight: normal;
font-size: 16px;
text-transform: initial;
letter-spacing: 0;
}
.sidebar-block {
margin: 20px 0;
&:first-child {
margin-top: 0;
}
}
.main + .sidebar {
border-right: none;
border-left: 1px solid #e6e6e6;
@ -3352,7 +3374,7 @@ footer {
@extend .vertical;
}
.tabsSidebar hr {
.tabsSidebar .sidebar > hr {
margin: 20px;
}
@ -3918,12 +3940,12 @@ footer {
right: 0;
}
.userInfo .avatar {
.userInfo-avatar {
float: right;
position: relative;
}
.userInfo .avatar:after {
.userInfo-avatar:after {
content: "";
background: image_url("sprite.svg");
background-position: -236px 0;
@ -3934,42 +3956,25 @@ footer {
position: absolute;
}
.userInfo-name {
color: rgba(0,8,14,.73);
font-size: 16px;
}
.userInfo-entry {
margin: 20px 0;
}
.userInfo-entry:first-child {
margin-top: 0;
}
.userInfo-label {
text-transform: uppercase;
color: #999;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.userInfo-value {
word-wrap: break-word;
}
.userInfo-value textarea {
width: 100%;
height: auto;
line-height: 20px;
border: none;
.userList {
list-style: none;
padding: 0;
outline: none;
resize: none;
li {
@extend .horizontal;
@extend .center;
margin: 10px 0;
}
a {
@extend .u-textTruncate;
}
.avatar {
margin-right: 7px;
}
}
.checkbox.form-group .checkbox {
margin-top: 0;
margin-bottom: 15px;
@ -3985,7 +3990,6 @@ footer {
.checkbox.form-group .controls label {
padding: 3px 0 3px 20px;
display: block;
font: inherit;
font-size: 13px;
margin-bottom: 0;