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() @render()
# get first tab # get first tab
name = @el.find('.tabsSidebar-tab').first().data('content') name = @el.find('.tabsSidebar-tab').first().data('tab')
# activate first tab # activate first tab
@toggleTabAction(name) @toggleTabAction(name)
@ -431,7 +431,20 @@ class App.Sidebar extends App.Controller
# init content callback # init content callback
for item in @items for item in @items
if item.callback 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: -> toggleSidebar: ->
@el.parent().find('.tabsSidebarSpace').toggleClass('is-closed') @el.parent().find('.tabsSidebarSpace').toggleClass('is-closed')
@ -444,7 +457,7 @@ class App.Sidebar extends App.Controller
toggleTab: (e) -> toggleTab: (e) ->
# get selected tab # get selected tab
name = $(e.target).closest('.tabsSidebar-tab').data('content') name = $(e.target).closest('.tabsSidebar-tab').data('tab')
if name if name
@ -456,7 +469,6 @@ class App.Sidebar extends App.Controller
else else
@toggleTabAction(name) @toggleTabAction(name)
toggleTabAction: (name) -> toggleTabAction: (name) ->
return if !name return if !name
@ -464,36 +476,15 @@ class App.Sidebar extends App.Controller
@el.find('.tabsSidebar-tab').removeClass('active') @el.find('.tabsSidebar-tab').removeClass('active')
# add active state # 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 # hide all content tabs
@el.find('.sidebar-content').addClass('hide') @el.find('.sidebar').addClass('hide')
# show active tab content # show active tab content
tabContent = @el.find('.sidebar-content[data-content=' + name + ']') tabContent = @el.find('.sidebar[data-tab=' + name + ']')
tabContent.removeClass('hide') 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 # remember current tab
@currentTab = name @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' icon: 'person'
actions: [ actions: [
{ {
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit' class: 'glyphicon glyphicon-edit'
#callback: editCustomer #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' ) App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSidebarRightSidebarOptional, 'Routes' )
class ModalForm extends App.ControllerModal class ModalForm extends App.ControllerModal
constructor: -> constructor: ->
super super
@ -63,9 +64,9 @@ class ModalForm extends App.ControllerModal
params = App.ControllerForm.params( $(e.target).closest('form') ) params = App.ControllerForm.params( $(e.target).closest('form') )
console.log('params', params) console.log('params', params)
App.Config.set( 'layout_ref/modal_form', ModalForm, 'Routes' ) App.Config.set( 'layout_ref/modal_form', ModalForm, 'Routes' )
class ModalText extends App.ControllerModal class ModalText extends App.ControllerModal
constructor: -> constructor: ->
super super
@ -78,8 +79,6 @@ class ModalText extends App.ControllerModal
onHide: => onHide: =>
window.history.back() window.history.back()
App.Config.set( 'layout_ref/modal_text', ModalText, 'Routes' ) App.Config.set( 'layout_ref/modal_text', ModalText, 'Routes' )
@ -92,14 +91,49 @@ class ContentSidebarTabsRight extends App.ControllerContent
super super
@render() @render()
changeCustomerTicket = ->
alert('change customer ticket')
editCustomerTicket = ->
alert('edit customer ticket')
changeCustomerCustomer = ->
alert('change customer customer')
editCustomerCustomer = ->
alert('edit customer customer')
items = [ items = [
head: 'Ticket Settings' head: 'Ticket Settings'
name: 'ticket' name: 'ticket'
icon: 'message' 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' head: 'Customer'
name: 'customer' name: 'customer'
icon: 'person' 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' head: 'Organization'
name: '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' icon: 'person'
actions: [ actions: [
{ {
name: 'Change Customer'
class: 'glyphicon glyphicon-transfer' class: 'glyphicon glyphicon-transfer'
callback: changeCustomer callback: changeCustomer
}, },
{ {
name: 'Edit Customer'
class: 'glyphicon glyphicon-edit' class: 'glyphicon glyphicon-edit'
callback: editCustomer 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"> <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-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 class="arrow-right icon"></div>
</div> </div>
</div> </div>
<hr> <hr>
<% for item in @items: %> <div class="sidebar-content"></div>
<div class="sidebar-content" data-content="<%= item.name %>" data-title="<%= @T( item.head ) %>"></div>
<% end %>
</div> </div>
<% end %>
<div class="tabsSidebar-tabs vertical justified"> <div class="tabsSidebar-tabs vertical justified">
<% for item in @items: %> <% 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 class="dark icon <%= item.icon %>"></div>
</div> </div>
<% end %> <% 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> </p>
</div> </div>
<div class="tabsSidebar vertical"> <div class="tabsSidebar vertical"></div>
<!-- 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>