Improved modal dialog.
This commit is contained in:
parent
a56da6fbb9
commit
9ee8e5c0c1
16 changed files with 135 additions and 115 deletions
|
@ -438,14 +438,6 @@ class App.ControllerContent extends App.Controller
|
|||
@navShow()
|
||||
|
||||
class App.ControllerModal extends App.Controller
|
||||
className: 'modal fade'
|
||||
|
||||
events:
|
||||
'submit form': 'onSubmit'
|
||||
'click .js-submit': 'onSubmit'
|
||||
'click .js-cancel': 'hide'
|
||||
'click .js-close': 'hide'
|
||||
|
||||
constructor: (options = {}) ->
|
||||
defaults =
|
||||
backdrop: true
|
||||
|
@ -460,38 +452,47 @@ class App.ControllerModal extends App.Controller
|
|||
|
||||
super(options)
|
||||
|
||||
@show()
|
||||
if @shown
|
||||
@show()
|
||||
|
||||
show: (content) ->
|
||||
console.log('M', @message)
|
||||
show: ->
|
||||
console.log('M', @message, @el.length)
|
||||
if @button is true
|
||||
@button = 'Submit'
|
||||
@html App.view('modal')(
|
||||
|
||||
@modalElement = $( '<div class="modal fade"></div>' )
|
||||
@modalElement.append $( App.view('modal')(
|
||||
head: @head
|
||||
message: @message
|
||||
detail: @detail
|
||||
close: @close
|
||||
cancel: @cancel
|
||||
button: @button
|
||||
)
|
||||
if content
|
||||
@el.find('.modal-body').html content
|
||||
@el.modal(
|
||||
) )
|
||||
if @el && !@message && !@detail
|
||||
@modalElement.find('.modal-body').html @el
|
||||
|
||||
@modalElement.find('form').on('submit', (e) => @onSubmit(e) )
|
||||
@modalElement.find('.js-submit').on('click', (e) => @onSubmit(e) )
|
||||
@modalElement.find('.js-cancel').on('click', (e) => @hide(e) )
|
||||
@modalElement.find('.js-close').on('click', (e) => @hide(e) )
|
||||
|
||||
@modalElement.modal(
|
||||
keyboard: @keyboard
|
||||
show: true
|
||||
backdrop: @backdrop
|
||||
)
|
||||
|
||||
@el.bind('hidden.bs.modal', =>
|
||||
).on('show.bs.modal', =>
|
||||
@onShow()
|
||||
).on('hidden.bs.modal', =>
|
||||
@onHide()
|
||||
# remove modal from dom
|
||||
$('.modal').remove();
|
||||
)
|
||||
$('.modal').remove()
|
||||
).find('.js-close').bind('submit', (e) => @hide(e) )
|
||||
|
||||
hide: (e) ->
|
||||
if e
|
||||
e.preventDefault()
|
||||
@el.modal('hide')
|
||||
@modalElement.modal('hide')
|
||||
|
||||
onShow: ->
|
||||
console.log('no nothing')
|
||||
|
|
|
@ -7,14 +7,14 @@ class App.ControllerGenericNew extends App.ControllerModal
|
|||
@button = true
|
||||
|
||||
controller = new App.ControllerForm(
|
||||
el: @el.find('#object_new')
|
||||
model: App[ @genericObject ]
|
||||
params: @item
|
||||
screen: @screen || 'edit'
|
||||
autofocus: true
|
||||
)
|
||||
@el = controller.form
|
||||
|
||||
@show(controller.form)
|
||||
@show()
|
||||
|
||||
onSubmit: (e) ->
|
||||
e.preventDefault()
|
||||
|
@ -57,14 +57,14 @@ class App.ControllerGenericEdit extends App.ControllerModal
|
|||
@button = true
|
||||
|
||||
controller = new App.ControllerForm(
|
||||
el: @el.find('#object_new')
|
||||
model: App[ @genericObject ]
|
||||
params: @item
|
||||
screen: @screen || 'edit'
|
||||
autofocus: true
|
||||
)
|
||||
@el = controller.form
|
||||
|
||||
@show(controller.form)
|
||||
@show()
|
||||
|
||||
onSubmit: (e) ->
|
||||
e.preventDefault()
|
||||
|
@ -192,7 +192,7 @@ class App.ControllerGenericDestroyConfirm extends App.ControllerModal
|
|||
@cancel = true
|
||||
@button = 'Yes'
|
||||
@message = 'Sure to delete this object?'
|
||||
@show(@message)
|
||||
@show()
|
||||
|
||||
onSubmit: (e) ->
|
||||
e.preventDefault()
|
||||
|
@ -354,13 +354,10 @@ class App.ControllerNavSidbar extends App.ControllerContent
|
|||
)
|
||||
|
||||
class App.GenericHistory extends App.ControllerModal
|
||||
events:
|
||||
'click [data-type=sortorder]': 'sortorder',
|
||||
'click .cancel': 'modalHide',
|
||||
'click .close': 'modalHide',
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@head = 'History'
|
||||
@close = true
|
||||
|
||||
render: ( items, orderClass = '' ) ->
|
||||
|
||||
|
@ -392,14 +389,22 @@ class App.GenericHistory extends App.ControllerModal
|
|||
|
||||
@historyListCache
|
||||
)
|
||||
@el.find('a[data-type="sortorder"]').bind(
|
||||
'click',
|
||||
(e) =>
|
||||
e.preventDefault()
|
||||
@sortorder(e)
|
||||
)
|
||||
if !@isShown
|
||||
@isShown = true
|
||||
@show()
|
||||
|
||||
@hide()
|
||||
|
||||
onShow: =>
|
||||
# enable user popups
|
||||
@userPopups()
|
||||
|
||||
# show frontend times
|
||||
@delay( @frontendTimeUpdate, 300, 'ui-time-update' )
|
||||
@delay( @frontendTimeUpdate, 100, 'ui-time-update' )
|
||||
|
||||
sortorder: (e) ->
|
||||
e.preventDefault()
|
||||
|
|
|
@ -73,6 +73,12 @@ class App.ChannelEmailFilter extends App.Controller
|
|||
class App.ChannelEmailFilterEdit extends App.ControllerModal
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@head = 'Postmaster Filter'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
|
||||
if @object
|
||||
@form = new App.ControllerForm(
|
||||
model: App.PostmasterFilter,
|
||||
|
@ -84,11 +90,9 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
|
|||
model: App.PostmasterFilter,
|
||||
autofocus: true,
|
||||
)
|
||||
@head = 'Postmaster Filter'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
@show( @form.form )
|
||||
|
||||
@el = @form.form
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
@ -158,6 +162,12 @@ class App.ChannelEmailAddress extends App.Controller
|
|||
class App.ChannelEmailAddressEdit extends App.ControllerModal
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@head = 'Email-Address'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
|
||||
if @object
|
||||
@form = new App.ControllerForm(
|
||||
model: App.EmailAddress
|
||||
|
@ -169,11 +179,10 @@ class App.ChannelEmailAddressEdit extends App.ControllerModal
|
|||
model: App.EmailAddress,
|
||||
autofocus: true,
|
||||
)
|
||||
@head = 'Email-Address'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
@show( @form.form )
|
||||
|
||||
@el = @form.form
|
||||
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
@ -239,6 +248,12 @@ class App.ChannelEmailSignature extends App.Controller
|
|||
class App.ChannelEmailSignatureEdit extends App.ControllerModal
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@head = 'Signature'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
|
||||
if @object
|
||||
@form = new App.ControllerForm(
|
||||
model: App.Signature
|
||||
|
@ -250,11 +265,10 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
|
|||
model: App.Signature
|
||||
autofocus: true
|
||||
)
|
||||
@head = 'Signature'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
@show( @form.form )
|
||||
|
||||
@el = @form.form
|
||||
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
@ -321,6 +335,12 @@ class App.ChannelEmailInbound extends App.Controller
|
|||
class App.ChannelEmailInboundEdit extends App.ControllerModal
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@head = 'Email Channel'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
|
||||
if @object
|
||||
@form = new App.ControllerForm(
|
||||
model: App.Channel
|
||||
|
@ -332,11 +352,10 @@ class App.ChannelEmailInboundEdit extends App.ControllerModal
|
|||
model: App.Channel
|
||||
autofocus: true
|
||||
)
|
||||
@head = 'Email Channel'
|
||||
@button = true
|
||||
@close = true
|
||||
@cancel = true
|
||||
@show( @form.form )
|
||||
|
||||
@el = @form.form
|
||||
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
|
|
@ -63,9 +63,9 @@ class App.TicketMerge extends App.ControllerModal
|
|||
$(e.target).parents().find('[name="master_ticket_number"]').val( ticket.number )
|
||||
)
|
||||
|
||||
@hide()
|
||||
@show()
|
||||
|
||||
submit: (e) =>
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
||||
# disable form
|
||||
|
|
|
@ -126,12 +126,16 @@ class ModalForm extends App.ControllerModal
|
|||
@cancel = true
|
||||
@button = true
|
||||
|
||||
@render()
|
||||
|
||||
render: ->
|
||||
controller = new App.ControllerForm(
|
||||
model: App.User
|
||||
autofocus: true
|
||||
)
|
||||
@el = controller.form
|
||||
|
||||
@show(controller.form)
|
||||
@show()
|
||||
|
||||
onHide: =>
|
||||
window.history.back()
|
||||
|
@ -149,9 +153,12 @@ class ModalText extends App.ControllerModal
|
|||
super
|
||||
@head = '123 some title'
|
||||
|
||||
form = App.view('layout_ref/content')()
|
||||
@render()
|
||||
|
||||
@show(form)
|
||||
render: ->
|
||||
@html App.view('layout_ref/content')()
|
||||
|
||||
@show()
|
||||
|
||||
onHide: =>
|
||||
window.history.back()
|
||||
|
|
|
@ -1,6 +1,12 @@
|
|||
class App.TicketCustomer extends App.ControllerModal
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@head = 'Change Customer'
|
||||
@close = true
|
||||
@cancel = true
|
||||
@button = true
|
||||
|
||||
configure_attributes = [
|
||||
{ name: 'customer_id', display: 'Customer', tag: 'user_autocompletion', null: false, placeholder: 'Enter Person or Organisation/Company', minLengt: 2, disableCreateUser: true },
|
||||
]
|
||||
|
@ -10,11 +16,10 @@ class App.TicketCustomer extends App.ControllerModal
|
|||
configure_attributes: configure_attributes,
|
||||
autofocus: true
|
||||
)
|
||||
@head = 'Change Customer'
|
||||
@close = true
|
||||
@cancel = true
|
||||
@button = true
|
||||
@show( controller.form )
|
||||
|
||||
@el = controller.form
|
||||
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
|
|
@ -621,7 +621,8 @@ class App.OverviewSettings extends App.ControllerModal
|
|||
model: { configure_attributes: @configure_attributes_article }
|
||||
autofocus: false
|
||||
)
|
||||
@show( controller.form )
|
||||
@el = controller.form
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
|
|
@ -221,7 +221,6 @@ class Sidebar extends App.Controller
|
|||
class ActionRow extends App.Controller
|
||||
events:
|
||||
'click [data-type=history]': 'history_dialog'
|
||||
'click [data-type=merge]': 'merge_dialog'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
@ -234,14 +233,6 @@ class ActionRow extends App.Controller
|
|||
e.preventDefault()
|
||||
new App.UserHistory( user_id: @user.id )
|
||||
|
||||
merge_dialog: (e) ->
|
||||
e.preventDefault()
|
||||
new App.TicketMerge( ticket: @ticket, task_key: @ui.task_key )
|
||||
|
||||
customer_dialog: (e) ->
|
||||
e.preventDefault()
|
||||
new App.TicketCustomer( ticket: @ticket, ui: @ui )
|
||||
|
||||
|
||||
class Router extends App.ControllerPermanent
|
||||
constructor: (params) ->
|
||||
|
|
|
@ -87,12 +87,12 @@ class App.LinkAdd extends App.ControllerModal
|
|||
@button = true
|
||||
@cancel = true
|
||||
|
||||
form = App.view('link/add')(
|
||||
@html App.view('link/add')(
|
||||
link_object: @link_object,
|
||||
link_object_id: @link_object_id,
|
||||
object: @object,
|
||||
)
|
||||
@show( form )
|
||||
@show()
|
||||
|
||||
onSubmit: (e) =>
|
||||
e.preventDefault()
|
||||
|
|
|
@ -36,7 +36,6 @@ class App.OnlineNotificationWidget extends App.Controller
|
|||
return false
|
||||
|
||||
counterUpdate: (count) =>
|
||||
console.log('counter update', count)
|
||||
if !count
|
||||
@el.find('.activity-counter').remove()
|
||||
return
|
||||
|
|
|
@ -47,6 +47,7 @@ class App.Browser
|
|||
close: false
|
||||
backdrop: false
|
||||
keyboard: false
|
||||
shown: true
|
||||
)
|
||||
|
||||
@searchString: (data) ->
|
||||
|
|
|
@ -208,13 +208,14 @@ class UserNew extends App.ControllerModal
|
|||
@button = true
|
||||
|
||||
controller = new App.ControllerForm(
|
||||
el: @el.find('#form-user')
|
||||
model: App.User
|
||||
screen: 'edit'
|
||||
autofocus: true
|
||||
)
|
||||
|
||||
@show( controller.form )
|
||||
@el = controller.form
|
||||
|
||||
@show()
|
||||
|
||||
onSubmit: (e) ->
|
||||
|
||||
|
|
|
@ -239,10 +239,11 @@ class _webSocketSingleton extends App.Controller
|
|||
# show reconnect message
|
||||
@error = new App.ControllerModal(
|
||||
head: 'Lost network connection!'
|
||||
message: 'Lost network connection to system, trying to reconnect...'
|
||||
message: 'Trying to reconnect...'
|
||||
backdrop: false
|
||||
keyboard: false
|
||||
close: false
|
||||
shown: true
|
||||
)
|
||||
if !@tryToConnect
|
||||
App.Delay.set message, 7000, 'websocket-no-connection-try-reconnect-message', 'ws'
|
||||
|
|
|
@ -1,13 +1,7 @@
|
|||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-close js-close">
|
||||
<div class="close icon"></div>
|
||||
</div>
|
||||
<h1 class="modal-title"><%- @T( 'History' ) %></h1>
|
||||
<a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
|
||||
|
||||
<hr>
|
||||
|
||||
<% open = false %>
|
||||
<% for item in @items: %>
|
||||
|
@ -27,7 +21,7 @@
|
|||
<% if ( item['type'] is 'notification' || item['type'] is 'email' ): %>
|
||||
<%- @T( item['type'] ) %>
|
||||
<% if item['value_from']: %>
|
||||
"<%= item['value_from'] %>" <%- @T( 'sent to' ) %>
|
||||
"<%= item['value_from'] %>" <%- @T( 'sent to' ) %>
|
||||
<% end %>
|
||||
<% if item['value_to']: %>
|
||||
"<%= item['value_to'] %>"
|
||||
|
@ -52,10 +46,4 @@
|
|||
<% if open: %>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,16 +1,19 @@
|
|||
<div class="main flex tabsSidebarSpace">
|
||||
<div class="userZoom">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( @head ) %></h1>
|
||||
<div class="flex vertical">
|
||||
<div class="flex u-positionOrigin horizontal">
|
||||
<div class="main flex tabsSidebarSpace">
|
||||
<div class="userZoom">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( @head ) %></h1>
|
||||
</div>
|
||||
|
||||
<div class="main-overviews" id="sortable"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-overviews" id="sortable"></div>
|
||||
|
||||
<div class="tabsSidebar vertical"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabsSidebar vertical"></div>
|
||||
|
||||
<!--
|
||||
<div class="action"></div>
|
||||
-->
|
||||
<form class="bottom-form form-inline horizontal" role="form">
|
||||
<div class="action"></div>
|
||||
</form>
|
||||
</div>
|
|
@ -1,8 +1,6 @@
|
|||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-default dropdown-toggle actions" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown dropup actions">
|
||||
<button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" data-type="history"><%- @T( 'History' ) %></a></li>
|
||||
<li><a href="#" data-type="merge"><%- @T( 'Merge' ) %></a></li>
|
||||
</ul>
|
||||
</div>
|
Loading…
Reference in a new issue