Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved tabSidebar.

Browse source
This commit is contained in:
Martin Edenhofer 2014-09-16 23:41:24 +02:00
parent c7a45064b6
commit bb8f5958e6
6 changed files with 73 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
View file

@ -420,7 +420,7 @@ class App.Sidebar extends App.Controller
@render()
# get first tab
name = @el.find('.tabsSidebar-tab').first().data('content')
name = @el.find('.tabsSidebar-tab').first().data('tab')
# activate first tab
@toggleTabAction(name)
@ -431,7 +431,20 @@ class App.Sidebar extends App.Controller
# init content callback
for item in @items
if item.callback
item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
item.callback( @el.find( '.sidebar[data-tab="' + item.name + '"] .sidebar-content' ) )
# add item acctions
for item in @items
if item.actions
for action in item.actions
do (action) =>
@el.find('.sidebar[data-tab="' + item.name + '"] .tabsSidebar-tabActions .tabsSidebar-tabAction[data-name="' + action.name + '"]').bind(
'click'
(e) =>
e.stopPropagation()
e.preventDefault()
action.callback(e)
)
toggleSidebar: ->
@el.parent().find('.tabsSidebarSpace').toggleClass('is-closed')
@ -444,7 +457,7 @@ class App.Sidebar extends App.Controller
toggleTab: (e) ->
# get selected tab
name = $(e.target).closest('.tabsSidebar-tab').data('content')
name = $(e.target).closest('.tabsSidebar-tab').data('tab')
if name
@ -456,7 +469,6 @@ class App.Sidebar extends App.Controller
else
@toggleTabAction(name)
toggleTabAction: (name) ->
return if !name
@ -464,36 +476,15 @@ class App.Sidebar extends App.Controller
@el.find('.tabsSidebar-tab').removeClass('active')
# add active state
@el.find('.tabsSidebar-tab[data-content=' + name + ']').addClass('active')
@el.find('.tabsSidebar-tab[data-tab=' + name + ']').addClass('active')
# hide all content tabs
@el.find('.sidebar-content').addClass('hide')
@el.find('.sidebar').addClass('hide')
# show active tab content
tabContent = @el.find('.sidebar-content[data-content=' + name + ']')
tabContent = @el.find('.sidebar[data-tab=' + name + ']')
tabContent.removeClass('hide')
# set content tab title
title = tabContent.data('title')
@el.find('.sidebar h2').html(title)
# set tab actions
@el.find('.tabsSidebar-tabActions').html('')
# add item acctions
for item in @items
if item.name is name
if item.actions
for action in item.actions
do (action) =>
@el.find('.tabsSidebar-tabActions').append("<div class='tabsSidebar-tabAction #{action.class}'></div>").find(".tabsSidebar-tabAction").last().bind(
'click'
(e) =>
e.stopPropagation()
e.preventDefault()
action.callback(e)
)
# remember current tab
@currentTab = name

1
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -456,6 +456,7 @@ class Sidebar extends App.Controller
icon: 'person'
actions: [
{
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit'
#callback: editCustomer
},

40
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -41,6 +41,7 @@ class ContentSidebarRightSidebarOptional extends App.ControllerContent
App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSidebarRightSidebarOptional, 'Routes' )
class ModalForm extends App.ControllerModal
constructor: ->
super
@ -63,9 +64,9 @@ class ModalForm extends App.ControllerModal
params = App.ControllerForm.params( $(e.target).closest('form') )
console.log('params', params)
App.Config.set( 'layout_ref/modal_form', ModalForm, 'Routes' )
class ModalText extends App.ControllerModal
constructor: ->
super
@ -78,8 +79,6 @@ class ModalText extends App.ControllerModal
onHide: =>
window.history.back()
App.Config.set( 'layout_ref/modal_text', ModalText, 'Routes' )
@ -92,14 +91,49 @@ class ContentSidebarTabsRight extends App.ControllerContent
super
@render()
changeCustomerTicket = ->
alert('change customer ticket')
editCustomerTicket = ->
alert('edit customer ticket')
changeCustomerCustomer = ->
alert('change customer customer')
editCustomerCustomer = ->
alert('edit customer customer')
items = [
head: 'Ticket Settings'
name: 'ticket'
icon: 'message'
callback: (el) ->
el.html('some ticket')
actions: [
name: 'Change Customer'
class: 'glyphicon glyphicon-transfer'
callback: changeCustomerTicket
,
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit'
callback: editCustomerTicket
]
,
head: 'Customer'
name: 'customer'
icon: 'person'
callback: (el) ->
el.html('some customer')
actions: [
name: 'Change Customer'
class: 'glyphicon glyphicon-transfer'
callback: changeCustomerCustomer
,
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit'
callback: editCustomerCustomer
]
,
head: 'Organization'
name: 'organization'

2
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -196,10 +196,12 @@ class App.TicketZoom extends App.Controller
icon: 'person'
actions: [
{
name: 'Change Customer'
class: 'glyphicon glyphicon-transfer'
callback: changeCustomer
},
{
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit'
callback: editCustomer
},

20
app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
View file

@ -1,21 +1,27 @@
<div class="sidebar bottom-form-shadow flex">
<% for item in @items: %>
<div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>">
<div class="horizontal center">
<h2 class="flex u-textTruncate"></h2>
<h2 class="flex u-textTruncate"><%- @T( item.head ) %></h2>
<div class="tabsSidebar-close centered u-clickable">
<div class="tabsSidebar-tabActions"></div>
<div class="tabsSidebar-tabActions">
<% if item.actions: %>
<% for action in item.actions: %>
<div class="tabsSidebar-tabAction <%- action.class %>" data-name="<%- action.name %>"></div>
<% end %>
<% end %>
</div>
<div class="arrow-right icon"></div>
</div>
</div>
<hr>
<% for item in @items: %>
<div class="sidebar-content" data-content="<%= item.name %>" data-title="<%= @T( item.head ) %>"></div>
<% end %>
<div class="sidebar-content"></div>
</div>
<% end %>
<div class="tabsSidebar-tabs vertical justified">
<% for item in @items: %>
<div class="tabsSidebar-tab centered" data-content="<%= item.name %>">
<div class="tabsSidebar-tab centered" data-tab="<%= item.name %>">
<div class="dark icon <%= item.icon %>"></div>
</div>
<% end %>

73
app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco
View file

@ -14,75 +14,4 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
</p>
</div>
<div class="tabsSidebar vertical">
<!-- ticket information content -->
<div class="sidebar flex" data-tab="ticket">
<div class="horizontal center">
<h2 class="flex u-textTruncate">Ticket Settings</h2>
<div class="close-sidebar centered u-clickable">
<div class="arrow-right icon"></div>
</div>
</div>
<hr>
<p>
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>
</div>
<!-- customer information content -->
<div class="sidebar flex hide" data-tab="customer">
<div class="horizontal center">
<h2 class="flex u-textTruncate">Customer</h2>
<div class="close-sidebar centered u-clickable">
<div class="arrow-right icon"></div>
</div>
</div>
<hr>
<p>
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>
</div>
<!-- organization information content -->
<div class="sidebar flex hide" data-tab="organization">
<div class="horizontal center">
<h2 class="flex u-textTruncate">Organization</h2>
<div class="close-sidebar centered u-clickable">
<div class="arrow-right icon"></div>
</div>
</div>
<hr>
<p>
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>
</div>
<div class="tabsSidebar-tabs vertical justified">
<div class="tabsSidebar-tab centered active" data-tab="ticket">
<div class="dark icon message"></div>
</div>
<div class="tabsSidebar-tab centered" data-tab="customer">
<div class="dark icon person"></div>
</div>
<div class="tabsSidebar-tab centered" data-tab="organization">
<div class="dark icon group"></div>
</div>
</div>
</div>
<div class="tabsSidebar vertical"></div>