Merge branch 'develop' of github.com:martini/zammad into develop
This commit is contained in:
commit
9ea7219463
11 changed files with 116 additions and 99 deletions
|
@ -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' )
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -46,55 +46,57 @@ class App.User extends App.Model
|
|||
return '??'
|
||||
|
||||
avatar: (size = 40, placement = '', cssClass = '', unique = false, avatar, type = undefined) ->
|
||||
cssClass += " size-#{size}"
|
||||
size = parseInt(size, 10)
|
||||
|
||||
cssClass += " " if cssClass
|
||||
cssClass += "size-#{ size }"
|
||||
|
||||
if placement
|
||||
placement = "data-placement=\"#{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>"
|
||||
if !avatar
|
||||
if type is 'personal'
|
||||
vip = false
|
||||
data = " data-id=\"#{@id}\""
|
||||
else
|
||||
cssClass += ' user-popover'
|
||||
data = " data-id=\"#{@id}\""
|
||||
else
|
||||
vip = false
|
||||
data = " data-avatar-id=\"#{avatar.id}\""
|
||||
|
||||
# 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) ->
|
||||
# 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
|
||||
size = parseInt(size, 10)
|
||||
vip = @vip
|
||||
|
||||
rng = new Math.seedrandom(@id)
|
||||
x = rng() * (width - size)
|
||||
y = rng() * (height - size)
|
||||
|
||||
if !avatar
|
||||
if type is 'personal'
|
||||
vip = false
|
||||
data = "data-id=\"#{@id}\""
|
||||
return App.view('avatar_unique')
|
||||
data: data
|
||||
cssClass: cssClass
|
||||
placement: placement
|
||||
vip: vip
|
||||
x: x
|
||||
y: y
|
||||
initials: @initials()
|
||||
else
|
||||
cssClass += ' user-popover'
|
||||
data = "data-id=\"#{@id}\""
|
||||
else
|
||||
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>"
|
||||
return App.view('avatar')
|
||||
data: data
|
||||
cssClass: cssClass
|
||||
placement: placement
|
||||
vip: vip
|
||||
url: @imageUrl()
|
||||
|
||||
imageUrl: ->
|
||||
return if !@image
|
||||
|
|
|
@ -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>
|
3
app/assets/javascripts/app/views/avatar_system.jst.eco
Normal file
3
app/assets/javascripts/app/views/avatar_system.jst.eco
Normal file
|
@ -0,0 +1,3 @@
|
|||
<span class="avatar <%- @cssClass %>" style="background: white">
|
||||
<%- @Icon('logo') %>
|
||||
</span>
|
4
app/assets/javascripts/app/views/avatar_unique.jst.eco
Normal file
4
app/assets/javascripts/app/views/avatar_unique.jst.eco
Normal 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>
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 %>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue