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

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

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

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

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

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

@ -523,11 +523,11 @@ label,
.checkbox.form-group label { .checkbox.form-group label {
text-transform: uppercase; text-transform: uppercase;
color: #999; color: #999;
display: block;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.1em;
padding: 0 2px; margin-bottom: 4px;
margin-bottom: 6px;
} }
fieldset { fieldset {
@ -552,6 +552,11 @@ fieldset > *:not(.form-group) .form-control {
margin-top: 0; margin-top: 0;
} }
.form-group label {
padding: 0 2px;
margin-bottom: 6px;
}
.form-group .controls .richtext { .form-group .controls .richtext {
position: relative; position: relative;
height: auto; height: auto;
@ -669,7 +674,6 @@ textarea,
text-transform: inherit; text-transform: inherit;
vertical-align: baseline; vertical-align: baseline;
letter-spacing: inherit; letter-spacing: inherit;
display: block;
} }
@ -2244,6 +2248,7 @@ footer {
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 1px rgba(0,0,0,.2); text-shadow: 0 1px rgba(0,0,0,.2);
cursor: default;
} }
.unique.avatar.size-50 { .unique.avatar.size-50 {
@ -2269,6 +2274,23 @@ footer {
margin-top: 5px; 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 { .main + .sidebar {
border-right: none; border-right: none;
border-left: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;
@ -3352,7 +3374,7 @@ footer {
@extend .vertical; @extend .vertical;
} }
.tabsSidebar hr { .tabsSidebar .sidebar > hr {
margin: 20px; margin: 20px;
} }
@ -3918,12 +3940,12 @@ footer {
right: 0; right: 0;
} }
.userInfo .avatar { .userInfo-avatar {
float: right; float: right;
position: relative; position: relative;
} }
.userInfo .avatar:after { .userInfo-avatar:after {
content: ""; content: "";
background: image_url("sprite.svg"); background: image_url("sprite.svg");
background-position: -236px 0; background-position: -236px 0;
@ -3934,40 +3956,23 @@ footer {
position: absolute; position: absolute;
} }
.userInfo-name { .userList {
color: rgba(0,8,14,.73); list-style: none;
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;
padding: 0; 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 { .checkbox.form-group .checkbox {
@ -3985,7 +3990,6 @@ footer {
.checkbox.form-group .controls label { .checkbox.form-group .controls label {
padding: 3px 0 3px 20px; padding: 3px 0 3px 20px;
display: block;
font: inherit; font: inherit;
font-size: 13px; font-size: 13px;
margin-bottom: 0; margin-bottom: 0;