Merge branch 'develop' of github.com:martini/zammad into develop

This commit is contained in:
Martin Edenhofer 2015-10-19 16:07:44 +02:00
commit 9ea7219463
11 changed files with 116 additions and 99 deletions

View file

@ -795,7 +795,7 @@ class TicketZoomRef extends App.ControllerContent
'.article-text': 'articles'
'.js-highlight-icon': 'highlightIcon'
'.buttonDropdown': 'buttonDropdown'
'.js-submitDropdown': 'buttonDropdown'
events:
'click .js-highlight': 'toggleHighlight'
@ -806,6 +806,7 @@ class TicketZoomRef extends App.ControllerContent
'mouseup .js-dropdownAction': 'performTicketMacro'
'mouseenter .js-dropdownAction': 'onActionMouseEnter'
'mouseleave .js-dropdownAction': 'onActionMouseLeave'
'click .js-secondaryAction': 'chooseSecondaryAction'
stopPropagation: (event) ->
event.stopPropagation()
@ -988,6 +989,12 @@ class TicketZoomRef extends App.ControllerContent
onActionMouseLeave: (event) =>
@$(event.currentTarget).removeClass('is-active')
chooseSecondaryAction: (event) =>
target = $(event.currentTarget)
target.siblings().find('.is-selected').removeClass('is-selected')
@$('.js-secondaryActionButtonLabel').text target.find('.js-secondaryActionLabel').text()
target.find('.js-selectedIcon').addClass('is-selected')
App.Config.set( 'layout_ref/ticket_zoom', TicketZoomRef, 'Routes' )

View file

@ -165,8 +165,8 @@ class App.TicketZoomHighlighter extends App.Controller
#@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
pickColor: (e) =>
@$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
$(e.currentTarget).find('.visibility-change').addClass('is-active')
@$('.js-highlightColor .is-selected').removeClass('is-selected')
$(e.currentTarget).find('.js-selectedIcon').addClass('is-selected')
@activeColorIndex = $(e.currentTarget).attr('data-key')
@setColor()

View file

@ -9,12 +9,7 @@ class App.WidgetAvatar extends App.Controller
App.User.unsubscribe(@subscribeId)
render: (user) =>
@html App.view('avatar')(
user: user
size: @size
position: @position
type: @type
)
@html user.avatar @size, @position, undefined, false, false, @type
# start user popups
@userPopups(@position)

View file

@ -46,40 +46,13 @@ class App.User extends App.Model
return '??'
avatar: (size = 40, placement = '', cssClass = '', unique = false, avatar, type = undefined) ->
size = parseInt(size, 10)
cssClass += " " if cssClass
cssClass += "size-#{ size }"
if placement
placement = "data-placement=\"#{placement}\""
# use system avatar for system actions
if @id is 1
return "<span class='avatar' style='background: white'>#{App.Utils.icon('logo')}</span>"
# use generated avatar
if !@image || @image is 'none' || unique
return @uniqueAvatar(size, placement, cssClass, avatar, type)
# use image as avatar
image = @imageUrl()
vip = @vip
if type is 'personal'
vip = false
else
cssClass += ' user-popover'
if vip
return "<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></span>"
"<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
uniqueAvatar: (size, placement = '', cssClass = '', avatar, type) ->
width = 300
height = 226
size = parseInt(size, 10)
vip = @vip
rng = new Math.seedrandom(@id)
x = rng() * (width - size)
y = rng() * (height - size)
placement = " data-placement='#{ placement }'"
if !avatar
if type is 'personal'
@ -92,9 +65,38 @@ class App.User extends App.Model
vip = false
data = " data-avatar-id=\"#{avatar.id}\""
if vip
return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg>#{ @initials() }</span>"
"<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
vip = @vip
if type is 'personal'
vip = false
else
cssClass += ' user-popover'
# use system avatar for system actions
if @id is 1
return App.view('avatar_system')()
else if !@image || @image is 'none' || unique
width = 300
height = 226
rng = new Math.seedrandom(@id)
x = rng() * (width - size)
y = rng() * (height - size)
return App.view('avatar_unique')
data: data
cssClass: cssClass
placement: placement
vip: vip
x: x
y: y
initials: @initials()
else
return App.view('avatar')
data: data
cssClass: cssClass
placement: placement
vip: vip
url: @imageUrl()
imageUrl: ->
return if !@image

View file

@ -1 +1,3 @@
<%- @user.avatar(@size, @position, @class, false, false, @type) %>
<span class="avatar <%- @cssClass %>" style="background-image: url(<%- @url %>)"<%- @placement %><%- @data %>>
<%- @Icon('crown') if @vip %>
</span>

View file

@ -0,0 +1,3 @@
<span class="avatar <%- @cssClass %>" style="background: white">
<%- @Icon('logo') %>
</span>

View file

@ -0,0 +1,4 @@
<span class="avatar <%- @cssClass %> unique" style="background-position: -<%- @x %>px -<%- @y %>px;"<%- @placement %><%- @data %>>
<%- @Icon('crown') if @vip %>
<%= @initials %>
</span>

View file

@ -13,28 +13,6 @@
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
</ul>
</div>
</div>
@ -49,28 +27,6 @@
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
</ul>
</div>
</div>

View file

@ -18,8 +18,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%- @Ti(entry.name) %>
<span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
<span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">
<%- @Icon('checkmark') %>
</span>
</a>
<% end %>
@ -634,8 +634,31 @@
</div>
</div>
<div class="attributeBar">
<div class="btn js-reset">Discard your unsaved changes.</div>
<div class="buttonDropdown dropdown dropup">
<div class="btn js-reset hide">Discard your unsaved changes.</div>
<div class="buttonDropdown dropdown dropdown--actions dropup">
<div class="btn btn--text btn--icon--last" data-toggle="dropdown">
<span class="js-secondaryActionButtonLabel">Stay on Ticket</span> <%- @Icon('arrow-up') %>
</div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="secondaryAction">
<li class="js-secondaryAction" role="menuitem">
<span class="js-secondaryActionLabel">Close tab</span>
<span class="dropdown-selectedSpacer js-selectedIcon is-selected">
<%- @Icon('checkmark') %>
</span>
<li class="js-secondaryAction" role="menuitem">
<span class="js-secondaryActionLabel">Next ticket in view</span>
<span class="dropdown-selectedSpacer js-selectedIcon">
<%- @Icon('checkmark') %>
</span>
<li class="js-secondaryAction" role="menuitem">
<span class="js-secondaryActionLabel">Stay on ticket</span>
<span class="dropdown-selectedSpacer js-selectedIcon">
<%- @Icon('checkmark') %>
</span>
</ul>
</div>
<div class="buttonDropdown dropdown dropup js-submitDropdown">
<div class="btn btn--primary btn--split--first js-submit">Update</div>
<div class="btn btn--primary btn--slim btn--split--last js-openDropdown"><%- @Icon('arrow-up') %></div>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">

View file

@ -13,8 +13,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%- @Ti(entry.name) %>
<span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
<span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">
<%- @Icon('checkmark') %>
</span>
</a>
<% end %>

View file

@ -266,6 +266,10 @@ blockquote {
margin-top: -3px;
}
&.btn--icon--last .icon {
margin-left: 5px; // so far only used in ticket_zoom secondaryAction dropup
}
&:focus {
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
@ -397,6 +401,11 @@ blockquote {
vertical-align: baseline;
text-align: left;
.icon {
fill: currentColor;
opacity: 1;
}
&:active {
color: hsl(203,65%,40%);
}
@ -467,7 +476,8 @@ blockquote {
}
.btn + .btn,
.btn + .buttonDropdown {
.btn + .buttonDropdown,
.buttonDropdown + .buttonDropdown {
margin-left: 10px;
}
@ -533,6 +543,7 @@ blockquote {
.buttonDropdown {
display: flex;
align-items: center;
position: relative;
user-select: none;
@ -543,6 +554,11 @@ blockquote {
&.is-open .dropdown-menu {
display: block;
}
.btn--text {
padding-left: 3px;
padding-right: 3px;
}
}
.status-fields {
@ -5032,7 +5048,7 @@ footer {
}
.dropdown-iconSpacer,
.dropdown-activeSpacer {
.dropdown-selectedSpacer {
display: flex;
align-items: center;
}
@ -5041,10 +5057,19 @@ footer {
width: 25px;
}
.dropdown-activeSpacer {
.dropdown-selectedSpacer {
width: 34px;
margin-left: auto;
justify-content: flex-end;
opacity: 0;
.icon {
fill: white;
}
&.is-selected {
opacity: 1;
}
}
a {