Improved text module.

app/assets/javascripts/app/controllers/text_modules.js.coffee

@@ -5,6 +5,7 @@ class App.TextModuleUI extends App.Controller
     'click [data-type=save]':   'create',
     'click [data-type=text_module_delete]': 'delete',
     'click [data-type=edit]':               'select',
+    'click .close':                         'close',
     'dblclick [data-type=edit]':            'paste',
 
   constructor: ->
@@ -40,13 +41,32 @@ class App.TextModuleUI extends App.Controller
 
     # remember active text element
     inputElement.bind('focusin', ->
+      @uiWidget = ui
       ui.area = $(@)
+      update = =>
+
+        left = @uiWidget.area.offset().left
+        top  = @uiWidget.area.offset().top
+        width = @uiWidget.area.width()
+        console.log 'TEXTAREA', left, top, width
+        @uiWidget.el.offset( left: left + width + 20, top: top )
+        @uiWidget.el.find('.well').removeClass('hide')
+
+        topWindow = $(window).scrollTop() + 50
+        if top < topWindow
+          @uiWidget.el.offset( top: topWindow )
+      ui.interval( update, 150, 'text_module_box' )
+    )
+    inputElement.bind('focusout', ->
+      ui.clearInterval( 'text_module_box' )
     )
 
     inputElement.bind('keydown', (e) ->
 
       # lisen if crtl is pressed
       if ui.Capture
+
+        # lookup key
         key = App.ClipBoard.keycode( e.keyCode )
 
         # remove one char
@@ -64,9 +84,15 @@ class App.TextModuleUI extends App.Controller
             ui.renderTable()
 
         # add char to search selection
+        else if key is 'space' || key.length is 1
+          if key is 'space'
+            ui.CaptureList = ui.CaptureList + ' '
           else
             ui.CaptureList = ui.CaptureList + key
 
+          # prevent default key action
+          e.preventDefault()
+
         console.log 'CTRL+', ui.CaptureList
         ui.el.find('#text-module-search').val( ui.CaptureList )
         ui.renderTable( ui.CaptureList )
@@ -115,13 +141,32 @@ class App.TextModuleUI extends App.Controller
     @el.find('#form-text-module').html('')
     new App.ControllerTable(
       el: @el.find('#form-text-module'),
-#      header:   ['Name'],
+      header:   [],
       overview: ['name'],
       model:    App.TextModule,
       objects:  objects,
 #      radio:    true,
     )
 
+    # remove old popovers
+#    @el.find('.popover-inner').parent().remove()
+    $('.popover').remove()
+
+    # show user popup    
+    @el.find('#form-text-module').find('.item').popover(
+      delay: { show: 500, hide: 1200 },
+#      placement: 'top',
+      placement: 'right',
+      title: ->
+        id = $(@).data('id')
+        text_module = App.Collection.find( 'TextModule', id )
+        text_module.name
+      content: ->
+        id = $(@).data('id')
+        text_module = App.Collection.find( 'TextModule', id )
+        text_module.content
+    )
+
   paste: (e) =>
     e.preventDefault()
     id = $(e.target).parents('tr').data('id')
@@ -181,6 +226,11 @@ class App.TextModuleUI extends App.Controller
           ui.log 'save failed!'
       )
 
+  close: (e) =>
+    e.preventDefault()
+    @el.find('.well').addClass('hide')
+    @clearInterval( 'text_module_box' )
+
   _insert: (contentNew, ui) ->
     position = ui.area.prop('selectionStart')
     content = ui.area.val()

app/assets/javascripts/app/lib/clipboard.js.coffee

@@ -84,6 +84,7 @@ class _Singleton
       'shift' : 16,
       'ctrl' : 17,
       'alt' : 18,
+      'space' : 32,
       'pause_break' : '19',
       'caps_lock' : '20',
       'escape' : '27',

app/assets/javascripts/app/views/agent_ticket_zoom.jst.eco

@@ -1,7 +1,7 @@
 <div class="page-header">
   <div class="row">
     <div class="span10">
-      <h1><span contenteditable="true" class="title_update"><%= @P( @ticket.title ) %></span> <small><%= @ticket.number %></small></h1>
+      <h1><span contenteditable="true" class="title_update inline-edit"><%= @P( @ticket.title ) %></span> <small><%= @ticket.number %></small></h1>
     </div>
     <div class="span2">
       <% if window.Config['LastOverview'] && @nav: %>

app/assets/javascripts/app/views/generic/admin/edit.jst.eco

@@ -1,6 +1,6 @@
 <form class="form-horizontal">
   <div class="modal-header">
-    <a href="#" class="close">&times;</a>
+    <a href="#" class="close" title="<%- @T( 'close' ) -%>">&times;</a>
     <h3><%- @T( 'Edit' ) %>: <%- @T( @head ) %></h3>
   </div>
   <div class="modal-body" id="object_edit"></div>

app/assets/javascripts/app/views/text_module.jst.eco

@@ -1,20 +1,25 @@
-<div class="well">
+<div class="well hide">
+<!--
   <h3><%- @T( 'Text Modules' ) %></h3>
   <%- @T( 'Search' ) %>
   <br>
+-->
   <input type="text" name="" id="text-module-search" class="span2" value="<%= @search %>" autocomplete="off"/>
+  <a href="#" class="close">&times;</a>
   <br>
-  <div id="form-text-module"></div>
+  <div id="form-text-module" class="max-size-scroll"></div>
   <!--<button type="submit" class="btn" data-type="text_module_edit"><%- @T( 'Edit' ) %></button>-->
 <!--
   <button type="submit" class="btn" data-type="text_module_delete"><%- @T( 'Delete' ) %></button>
 -->
+<!--
   <%- @T( 'Preview ') %>
   <br>
   <textarea id="text-module-preview-content" class="span2"></textarea>
+-->
   <hr>
   <form>
-    <label class="" for="text_module_name"><%- @T( 'Save as Text Module' ) %></label>
+    <label class="" for="text_module_name"><%- @T( 'Save as' ) %></label>
     <input type="text" name="name" id="text_module_name" class="span2" value=""/>
     <button type="submit" class="btn" data-type="save"><%- @T( 'Save' ) %></button>
   </form>

app/assets/stylesheets/zzz.css

@@ -19,7 +19,6 @@ label, input, button, select, textarea {
 
 table {
   table-layout: fixed;
-  
 }
 table th, table td {
   overflow: hidden;
@@ -27,6 +26,11 @@ table th, table td {
   white-space: nowrap;
 }
 
+.max-size-scroll {
+  max-height: 240px;
+  overflow-y: scroll;
+}
+
 /*
 #content > *:not(.active) {
   display: none !important;
@@ -272,6 +276,17 @@ footer {
   padding-right: 10px;
 }
 
+.inline-edit {
+  padding: 4px;
+}
+.inline-edit:hover {
+  padding: 3px;
+  border: 1px dotted #F92;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+
 .translation {
   border: 1px dotted #F92;
   -webkit-border-radius: 3px;