ticket zoom: make title into dropdown-toggle

This commit is contained in:
Felix Niklas 2014-11-17 11:13:44 +01:00
parent 09b0ef24db
commit 5c88907e56
3 changed files with 34 additions and 17 deletions

View file

@ -477,16 +477,21 @@ class App.ActionRow extends App.Controller
)
class App.Sidebar extends App.Controller
elements:
'.tabsSidebar-tab': 'tabs'
'.sidebar': 'sidebars'
events:
'click .tabsSidebar-tab': 'toggleTab'
'click .tabsSidebar-close': 'toggleSidebar'
'click .sidebar-header h2': 'toggleDropdown'
constructor: ->
super
@render()
# get first tab
name = @el.find('.tabsSidebar-tab').first().data('tab')
name = @tabs.first().data('tab')
# activate first tab
@toggleTabAction(name)
@ -508,7 +513,11 @@ class App.Sidebar extends App.Controller
type: 'small'
)
toggleSidebar: ->
toggleDropdown: (e) =>
e.stopPropagation()
$(e.currentTarget).next('.js-actions').find('.dropdown-toggle').dropdown('toggle')
toggleSidebar: =>
@el.parent().find('.tabsSidebar-sidebarSpacer').toggleClass('is-closed')
@el.parent().find('.tabsSidebar').toggleClass('is-closed')
@el.parent().next('.attributeBar').toggleClass('is-closed')
@ -518,7 +527,7 @@ class App.Sidebar extends App.Controller
@el.parent().find('.tabsSidebar').removeClass('is-closed')
@el.parent().next('.attributeBar').addClass('is-closed')
toggleTab: (e) ->
toggleTab: (e) =>
# get selected tab
name = $(e.target).closest('.tabsSidebar-tab').data('tab')
@ -537,13 +546,13 @@ class App.Sidebar extends App.Controller
return if !name
# remove active state
@el.find('.tabsSidebar-tab').removeClass('active')
@tabs.removeClass('active')
# add active state
@el.find('.tabsSidebar-tab[data-tab=' + name + ']').addClass('active')
# hide all content tabs
@el.find('.sidebar').addClass('hide')
@sidebars.addClass('hide')
# show active tab content
tabContent = @el.find('.sidebar[data-tab=' + name + ']')

View file

@ -2,7 +2,7 @@
<div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>">
<div class="sidebar-header">
<h2 class="u-textTruncate"><%- @T( item.head ) %></h2>
<div class="sidebar-actions js-actions flex"></div>
<div class="js-actions flex"></div>
<div class="tabsSidebar-close centered u-clickable">
<div class="arrow-right icon"></div>
</div>

View file

@ -3452,18 +3452,26 @@ footer {
.tabsSidebar .sidebar-header {
@extend .horizontal;
@extend .center;
padding: 20px 20px 0;
margin: 20px 20px 0;
padding: 0 0 5px;
position: relative;
h2 {
margin: 0 0 -1px;
line-height: 1;
padding-right: 8px;
@extend .u-clickable;
}
+ hr {
margin-top: 15px;
}
.dropdown {
position: static;
}
}
.tabsSidebar .sidebar h2 {
margin: 0 0 -1px;
line-height: 1;
}
.tabsSidebar .sidebar-actions {
padding-left: 8px;
}
.tabsSidebar-close {
padding: 20px;
margin: -15px;