Merge branch 'interface' of github.com:martini/zammad into interface
This commit is contained in:
commit
0dec19b5e5
12 changed files with 68 additions and 31 deletions
|
@ -24,7 +24,10 @@ class Content extends App.ControllerContent
|
|||
|
||||
for avatar in @$('.user.avatar')
|
||||
avatar = $(avatar)
|
||||
size = if avatar.hasClass('big') then 50 else 40
|
||||
size = switch
|
||||
when avatar.hasClass('size-80') then 80
|
||||
when avatar.hasClass('size-50') then 50
|
||||
else 40
|
||||
@createUniqueAvatar avatar, size, avatar.data('firstname'), avatar.data('lastname'), avatar.data('userid')
|
||||
|
||||
createUniqueAvatar: (holder, size, firstname, lastname, id) ->
|
||||
|
@ -576,4 +579,15 @@ class ImportWizard extends App.ControllerContent
|
|||
|
||||
App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' )
|
||||
|
||||
class UserZoom extends App.ControllerContent
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/user_zoom')()
|
||||
|
||||
App.Config.set( 'layout_ref/user_zoom', UserZoom, 'Routes' )
|
||||
|
||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||
|
|
|
@ -52,24 +52,24 @@ class App.User extends App.Model
|
|||
else
|
||||
return '??'
|
||||
|
||||
avatar: (big = false, placement = '', cssClass = '') ->
|
||||
if big
|
||||
cssClass += ' big'
|
||||
avatar: (size = 40, placement = '', cssClass = '') ->
|
||||
cssClass += " size-#{ size }"
|
||||
|
||||
if placement
|
||||
placement = "data-placement=\"#{placement}\""
|
||||
|
||||
if @image is 'none'
|
||||
return @uniqueAvatar(big, placement, cssClass)
|
||||
return @uniqueAvatar(size, placement, cssClass)
|
||||
else
|
||||
"<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>"
|
||||
|
||||
uniqueAvatar: (big = false, placement = '', cssClass = '') ->
|
||||
if big
|
||||
cssClass += ' big'
|
||||
uniqueAvatar: (size = 40, placement = '', cssClass = '') ->
|
||||
if size and !cssClass
|
||||
cssClass += " size-#{ size }"
|
||||
|
||||
width = 300
|
||||
height = 226
|
||||
size = if big then 50 else 40
|
||||
size = parseInt(size, 10)
|
||||
|
||||
rng = new Math.seedrandom(@id)
|
||||
x = rng() * (width - size)
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
<div class="page-header horizontal">
|
||||
<div class="flex vertical center">
|
||||
<span class="avatar unique user-popover big" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
|
||||
<span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
|
||||
<div class="ticket-title">
|
||||
<h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
|
||||
</div>
|
||||
|
|
|
@ -16,6 +16,21 @@
|
|||
|
||||
<h2>Avatars</h2>
|
||||
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
|
||||
<p><code>.avatar</code></p>
|
||||
|
||||
<div class="avatar size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
|
||||
<p><code>.avatar.size-50</code></p>
|
||||
|
||||
<div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
|
||||
<p><code>.avatar.size-80</code></p>
|
||||
|
||||
|
||||
<h2>Unique Avatars</h2>
|
||||
|
||||
<p>
|
||||
Users and customers might not have a profile images because:
|
||||
</p>
|
||||
|
@ -36,9 +51,12 @@
|
|||
<span class="user avatar" data-firstname="Stefanie" data-lastname="Lingerl" data-userid="7"></span>
|
||||
<span class="user avatar" data-firstname="Igor" data-lastname="Kaufer" data-userid="8"></span>
|
||||
<span class="user avatar" data-firstname="Ina" data-lastname="Lingerl" data-userid="12"></span>
|
||||
<span class="big user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
|
||||
<span class="big user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
|
||||
<span class="big user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
|
||||
<span class="size-50 user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
|
||||
<span class="size-50 user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
|
||||
<span class="size-50 user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
|
||||
<span class="size-80 user avatar" data-firstname="Christian" data-lastname="Jonga" data-userid="12"></span>
|
||||
<span class="size-80 user avatar" data-firstname="Rando" data-lastname="Bauer" data-userid="13"></span>
|
||||
<span class="size-80 user avatar" data-firstname="Korinna" data-lastname="Jung" data-userid="14"></span>
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
|
@ -7,12 +7,6 @@
|
|||
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
|
||||
<div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
<div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="avatar-holder">
|
||||
<span class="avatar big" style="background-image: url(<%- @src %>)"></span>
|
||||
<span class="avatar size-50" style="background-image: url(<%- @src %>)"></span>
|
||||
<div class="avatar-delete"><div class="delete icon"></div></div>
|
||||
</div>
|
|
@ -11,13 +11,13 @@
|
|||
</div>
|
||||
<div class="avatar-gallery horizontal wrap">
|
||||
<div class="avatar-holder">
|
||||
<%- App.Session.get().uniqueAvatar(true) %>
|
||||
<%- App.Session.get().uniqueAvatar("50") %>
|
||||
</div>
|
||||
<div class="avatar-holder">
|
||||
<%- App.Session.get().avatar(true, undefined, 'is-active') %>
|
||||
<%- App.Session.get().avatar("50", undefined, 'is-active') %>
|
||||
<div class="avatar-delete"><div class="delete icon"></div></div>
|
||||
</div>
|
||||
<!-- <div class="active">
|
||||
<div class="big avatar avatar--new centered"><div class="white plus icon"></div></div>
|
||||
<div class="size-50 avatar avatar--new centered"><div class="white plus icon"></div></div>
|
||||
</div> -->
|
||||
</div>
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
<div class="page-header horizontal">
|
||||
<div class="flex vertical center">
|
||||
<%- @ticket.customer.avatar(true) %>
|
||||
<%- @ticket.customer.avatar("50") %>
|
||||
<div class="ticket-title"></div>
|
||||
<div class="ticket-meta"></div>
|
||||
</div>
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
<% else: %>
|
||||
<% position = 'right' %>
|
||||
<% end %>
|
||||
<%- article.created_by.avatar(false, position) %>
|
||||
<%- article.created_by.avatar("40", position) %>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<input type="hidden" name="form_id" value="<%= @article.form_id %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="editControls">
|
||||
<%- App.User.fullLocal( @S('id') ).avatar(false, 'right', 'zIndex-5') %>
|
||||
<%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
|
||||
<div class="dark pop-select zIndex-7 editControls-item">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @article.type %> channel icon"></div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div class="userInfo">
|
||||
<div class="userInfo-entry">
|
||||
<td>
|
||||
<%- @user.avatar(true) %>
|
||||
<%- @user.avatar("50") %>
|
||||
<div class="userInfo-name">
|
||||
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
|
||||
<%= @user.displayName() %>
|
||||
|
|
|
@ -5,12 +5,13 @@ body {
|
|||
background: hsl(210,17%,98%);
|
||||
}
|
||||
|
||||
ol,
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
color: #bcbcbb;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #bcbcbb;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
|
@ -2100,11 +2101,16 @@ footer {
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.big.avatar {
|
||||
.avatar.size-50 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.avatar.size-80 {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
|
||||
.unique.avatar {
|
||||
background-image: image_url("avatar-bg.png");
|
||||
background-size: auto;
|
||||
|
@ -2117,11 +2123,16 @@ footer {
|
|||
text-shadow: 0 1px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.unique.big.avatar {
|
||||
.unique.avatar.size-50 {
|
||||
font-size: 16px;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
.unique.avatar.size-80 {
|
||||
font-size: 20px;
|
||||
line-height: 84px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 32%;
|
||||
max-width: 300px;
|
||||
|
|
Loading…
Reference in a new issue