Moved to new sidebar, added drox widget and fixed autosize of tags.

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

@@ -244,7 +244,7 @@ class App.Controller extends Spine.Controller
     el.unbind()
 
     # start customer info controller
-    new App.UserInfo(
+    new App.UserWidget(
       el:       el
       user_id:  data.user_id
       callback: data.callback

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

@@ -383,7 +383,8 @@ class App.ControllerForm extends App.Controller
           container = document.getElementById( attribute.id + "_tagsinput" )
           if reorder
             $('#' + attribute.id + "_tagsinput" ).height( 20 )
-          height = container.scrollHeight
+          height = container.scrollHeight || 45
+          console.log('siteUpdate', height)
           $('#' + attribute.id + "_tagsinput" ).height( height - 16 )
 
         onAddTag = =>
@@ -393,10 +394,9 @@ class App.ControllerForm extends App.Controller
           siteUpdate(true)
 
         $('#' + attribute.id + '_tagsinput').remove()
-        w = $('#' + attribute.id).width()
         h = $('#' + attribute.id).height()
         $('#' + attribute.id).tagsInput(
-          width: w + 'px'
+          width: '100%'
 #          height: (h + 30 )+ 'px'
           onAddTag:    onAddTag
           onRemoveTag: onRemoveTag

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

@@ -199,6 +199,16 @@ class DestroyConfirm extends App.ControllerModal
     @modalHide()
     @item.destroy()
 
+class App.ControllerDrox extends App.Controller
+  constructor: ->
+    super
+
+  template: (data) ->
+    drox = $( App.view('generic/drox')(data) )
+    content = App.view(data.file)(data.params)
+    drox.find('.drox-body').append(content)
+    drox
+
 class App.ControllerLevel2 extends App.ControllerContent
   events:
     'click [data-toggle="tabnav"]': 'toggle',

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

@@ -1,4 +1,4 @@
-class App.LinkInfo extends App.Controller
+class App.LinkInfo extends App.ControllerDrox
   events:
     'click [data-type=add]': 'add',
     'click [data-type=edit]': 'edit',
@@ -8,7 +8,7 @@ class App.LinkInfo extends App.Controller
     super
     @fetch()
 
-  fetch: () =>
+  fetch: =>
     # fetch item on demand
     # get data
     @ajax(
@@ -29,7 +29,7 @@ class App.LinkInfo extends App.Controller
         @render()
     )
 
-  render: () =>
+  render: =>
 
     list = {}
     for item in @links
@@ -43,8 +43,12 @@ class App.LinkInfo extends App.Controller
         list[ item['link_type'] ].push ticket
 
     # insert data
-    @html App.view('link/info')(
+    @html @template(
-      links: list,
+      file:   'link/info'
+      header: 'Links'
+      edit:   true
+      params:
+        links: list
     )
 
     # show edit mode once enabled
@@ -61,12 +65,12 @@ class App.LinkInfo extends App.Controller
   edit: (e) =>
     e.preventDefault()
     @edit_mode = true
-    if $(e.target).parent().parent().find('[data-type=add]').hasClass('hide')
+    if $(e.target).parents().find('[data-type=add]').hasClass('hide')
-      $(e.target).parent().parent().find('[data-type=remove]').removeClass('hide')
+      $(e.target).parents().find('[data-type=remove]').removeClass('hide')
-      $(e.target).parent().parent().find('[data-type=add]').removeClass('hide')
+      $(e.target).parents().find('[data-type=add]').removeClass('hide')
     else
-      $(e.target).parent().parent().find('[data-type=remove]').addClass('hide')
+      $(e.target).parents().find('[data-type=remove]').addClass('hide')
-      $(e.target).parent().parent().find('[data-type=add]').addClass('hide')
+      $(e.target).parents().find('[data-type=add]').addClass('hide')
 
   remove: (e) =>
     e.preventDefault()

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

@@ -0,0 +1,78 @@
+class App.OrganizationWidget extends App.Controller
+  events:
+    'focusout [data-type=update-org]':  'update',
+    'click [data-type=edit-org]':       'edit'
+
+  constructor: ->
+    super
+
+    # show organization
+    callback = (organization) =>
+      @render(organization)
+      if @callback
+        @callback(organization)
+
+      # subscribe and reload data / fetch new data if triggered
+      @subscribeId = organization.subscribe(@render)
+
+    App.Organization.retrieve( @organization_id, callback )
+
+  release: =>
+    App.Organization.unsubscribe(@subscribeId)
+
+  render: (organization) =>
+    if !organization
+      organization = @u
+
+    # get display data
+    organizationData = []
+    for item2 in App.Organization.configure_attributes
+      item = _.clone( item2 )
+
+      # check if value for _id exists
+      itemNameValue = item.name
+      itemNameValueNew = itemNameValue.substr( 0, itemNameValue.length - 3 )
+      if itemNameValueNew of organization
+        item.name = itemNameValueNew
+
+      # add to show if value exists
+      if organization[item.name] || item.tag is 'textarea'
+
+        # do not show name / already show via diplayName()
+        if item.name isnt 'name'
+          if item.info
+            organizationData.push item
+
+    # insert userData
+    @html App.view('organization_widget')(
+      organization:     organization
+      organizationData: organizationData
+    )
+
+    ###
+    @userTicketPopups(
+      selector: '.user-tickets'
+      user_id:  user.id
+      position: 'right'
+    )
+    ###
+
+  update: (e) =>
+    note   = $(e.target).parent().find('[data-type=update]').val()
+    organization = App.Organization.find( @organization_id )
+    if organization.note isnt note
+      organization.updateAttributes( note: note )
+      @log 'notice', 'update', e, note, organization
+
+  edit: (e) =>
+    e.preventDefault()
+    new App.ControllerGenericEdit(
+      id: @organization_id,
+      genericObject: 'Organization',
+      pageData: {
+        title: 'Organizations',
+        object: 'Organization',
+        objects: 'Organizations',
+      },
+      callback: @render
+    )

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

@@ -6,6 +6,8 @@ class App.TagWidget extends App.Controller
     # update box size
     @bind 'ui:rerender:content', =>
       @siteUpdate()
+    @bind 'ui:rerender:task', =>
+      @siteUpdate()
 
   load: =>
     @attribute_id = 'tags_' + @object.id + '_' + @object_type
@@ -29,11 +31,11 @@ class App.TagWidget extends App.Controller
       tag_id: @attribute_id
     )
     @el.find('#' + @attribute_id ).tagsInput(
-      width:       '236px'
+      width:       '100%'
       defaultText: App.i18n.translateContent('add a Tag')
       onAddTag:    @onAddTag
       onRemoveTag: @onRemoveTag
-#      height: '65px'
+      height:      '45px'
     )
     @delay @siteUpdate, 250
 

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

@@ -1,4 +1,4 @@
-class App.TemplateUI extends App.Controller
+class App.TemplateUI extends App.ControllerDrox
   events:
     'click [data-type=template_save]':   'create',
     'click [data-type=template_select]': 'select',
@@ -21,8 +21,11 @@ class App.TemplateUI extends App.Controller
       template = App.Template.find( @template_id )
 
     # insert data
-    @html App.view('template_widget')(
+    @html @template(
-      template: template,
+      file:   'template_widget'
+      header: 'Templates'
+      params:
+        template: template
     )
     new App.ControllerForm(
       el:        @el.find('#form-template')

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

@@ -140,7 +140,6 @@ class App.TicketZoom extends App.Controller
     @frontendTimeUpdate()
 
     @TicketTitle()
-    @TicketInfo()
     @TicketAction()
     @ArticleView()
 
@@ -177,13 +176,6 @@ class App.TicketZoom extends App.Controller
       el:       @el.find('.ticket-title')
     )
 
-  TicketInfo: =>
-    # show ticket info
-    new TicketInfo(
-      ticket:   @ticket
-      el:       @el.find('.ticket-info')
-    )
-
   ArticleView: =>
     # show article
     new ArticleView(
@@ -248,16 +240,27 @@ class TicketTitle extends App.Controller
     App.Event.trigger 'task:render'
 
 
-class TicketInfo extends App.Controller
+class TicketInfo extends App.ControllerDrox
   constructor: ->
     super
     @render()
 
   render: ->
-    @html App.view('ticket_zoom/ticket_info')(
+    @html @template(
-      ticket: @ticket
+      file:   'ticket_zoom/ticket_info'
+      header: '#' + @ticket.number
+      params:
+        ticket: @ticket
     )
 
+    # start tag controller
+    if !@isRole('Customer')
+      new App.TagWidget(
+        el:           @el.find('.tag_info')
+        object_type:  'Ticket'
+        object:        @ticket
+      )
+
 class TicketAction extends App.Controller
   constructor: ->
     super
@@ -267,30 +270,29 @@ class TicketAction extends App.Controller
 
     @html App.view('ticket_zoom/ticket_action')()
 
+    # show ticket info
+    new TicketInfo(
+      ticket:   @ticket
+      el:       @el.find('.ticket_info')
+    )
+
     # start customer info controller
     if !@isRole('Customer')
-      new App.UserInfo(
+      new App.UserWidget(
         el:      @el.find('.customer_info')
         user_id: @ticket.customer_id
         ticket:  @ticket
       )
 
     # start action controller
+    ###
     if !@isRole('Customer')
       new TicketActionRow(
         el:      @el.find('.action_info')
         ticket:  @ticket
         zoom:    @ui
       )
-
+    ###
-    # start tag controller
-    if !@isRole('Customer')
-      new App.TagWidget(
-        el:           @el.find('.tag_info')
-        object_type:  'Ticket'
-        object:        @ticket
-      )
-
     # start link info controller
     if !@isRole('Customer')
       new App.LinkInfo(
@@ -423,9 +425,9 @@ class Edit extends App.Controller
       if !@autosaveLast || ( diff && !_.isEmpty( diff ) )
         @autosaveLast = currentData
         @log 'notice', 'form hash changed', diff, currentData
-        @el.find('.ticket-update').parent().addClass('form-changed')
+        @el.find('.edit-ticket').addClass('form-changed')
-        @el.find('.ticket-update').parent().parent().find('.reset-message').show()
+        @el.find('.edit-ticket').find('.reset-message').show()
-        @el.find('.ticket-update').parent().parent().find('.reset-message').removeClass('hide')
+        @el.find('.edit-ticket').find('.reset-message').removeClass('hide')
         App.TaskManager.update( @task_key, { 'state': currentData })
     @interval( update, 3000, 'autosave' )
 

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

@@ -1,132 +0,0 @@
-class App.UserInfo extends App.Controller
-  events:
-    'focusout [data-type=update-user]': 'update_user',
-    'focusout [data-type=update-org]':  'update_org',
-    'click [data-type=edit-user]':      'edit_user'
-    'click [data-type=edit-org]':       'edit_org'
-    'click .nav li > a':                'toggle'
-
-  constructor: ->
-    super
-
-    # show user
-    callback = (user) =>
-      @render(user)
-      if @callback
-        @callback(user)
-
-      # subscribe and reload data / fetch new data if triggered
-      @subscribeId = user.subscribe(@render)
-
-    App.User.retrieve( @user_id, callback )
-
-  release: =>
-    App.User.unsubscribe(@subscribeId)
-
-  toggle: (e) ->
-    e.preventDefault()
-    @el.find('.nav li.active').removeClass('active')
-    $(e.target).parent('li').addClass('active')
-    area = $(e.target).data('area')
-    @el.find('.user-info, .org-info').addClass('hide')
-    @el.find('.' + area ).removeClass('hide')
-
-  render: (user) =>
-    if !user
-      user = @u
-
-    # get display data
-    userData = []
-    for item2 in App.User.configure_attributes
-      item = _.clone( item2 )
-
-      # check if value for _id exists
-      itemNameValue = item.name
-      itemNameValueNew = itemNameValue.substr( 0, itemNameValue.length - 3 )
-      if itemNameValueNew of user
-        item.name = itemNameValueNew
-
-      # add to show if value exists
-      if user[item.name] || item.tag is 'textarea'
-
-        # do not show firstname and lastname / already show via diplayName()
-        if item.name isnt 'firstname' && item.name isnt 'lastname' && item.name isnt 'organization'
-          if item.info
-            userData.push item
-
-    if user.organization_id
-      organization = App.Organization.find( user.organization_id )
-      organizationData = []
-      for item2 in App.Organization.configure_attributes
-        item = _.clone( item2 )
-
-        # check if value for _id exists
-        itemNameValue = item.name
-        itemNameValueNew = itemNameValue.substr( 0, itemNameValue.length - 3 )
-        if itemNameValueNew of user
-          item.name = itemNameValueNew
-
-        # add to show if value exists
-        if organization[item.name] || item.tag is 'textarea'
-
-          # do not show name / already show via diplayName()
-          if item.name isnt 'name'
-            if item.info
-              organizationData.push item
-
-    # insert userData
-    @html App.view('user_info')(
-      user:             user
-      userData:         userData
-      organization:     organization
-      organizationData: organizationData
-    )
-
-    @userTicketPopups(
-      selector: '.user-tickets'
-      user_id:  user.id
-      position: 'right'
-    )
-
-  update_user: (e) =>
-    note = $(e.target).parent().find('[data-type=update-user]').val()
-    user = App.User.find( @user_id )
-    if user.note isnt note
-      user.updateAttributes( note: note )
-      @log 'notice', 'update', e, note, user
-
-  edit_user: (e) =>
-    e.preventDefault()
-    new App.ControllerGenericEdit(
-      id: @user_id,
-      genericObject: 'User',
-      required: 'quick',
-      pageData: {
-        title: 'Users',
-        object: 'User',
-        objects: 'Users',
-      },
-      callback: @render
-    )
-
-  update_org: (e) =>
-    note   = $(e.target).parent().find('[data-type=update-org]').val()
-    org_id = $(e.target).parents().find('[data-type=edit-org]').data('id')
-    organization = App.Organization.find( org_id )
-    if organization.note isnt note
-      organization.updateAttributes( note: note )
-      @log 'notice', 'update', e, note, organization
-
-  edit_org: (e) =>
-    e.preventDefault()
-    id = $(e.target).data('id')
-    new App.ControllerGenericEdit(
-      id: id,
-      genericObject: 'Organization',
-      pageData: {
-        title: 'Organizations',
-        object: 'Organization',
-        objects: 'Organizations',
-      },
-      callback: @render
-    )

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

@@ -0,0 +1,89 @@
+class App.UserWidget extends App.ControllerDrox
+  events:
+    'focusout [data-type=update]': 'update',
+    'click [data-type=edit]':      'edit'
+
+  constructor: ->
+    super
+
+    # show user
+    callback = (user) =>
+      @render(user)
+      if @callback
+        @callback(user)
+
+      # subscribe and reload data / fetch new data if triggered
+      @subscribeId = user.subscribe(@render)
+
+    App.User.retrieve( @user_id, callback )
+
+  release: =>
+    App.User.unsubscribe(@subscribeId)
+
+  render: (user) =>
+    if !user
+      user = @u
+
+    # get display data
+    userData = []
+    for item2 in App.User.configure_attributes
+      item = _.clone( item2 )
+
+      # check if value for _id exists
+      itemNameValue = item.name
+      itemNameValueNew = itemNameValue.substr( 0, itemNameValue.length - 3 )
+      if itemNameValueNew of user
+        item.name = itemNameValueNew
+
+      # add to show if value exists
+      if user[item.name] || item.tag is 'textarea'
+
+        # do not show firstname and lastname / already show via diplayName()
+        if item.name isnt 'firstname' && item.name isnt 'lastname'
+          if item.info
+            userData.push item
+
+    # insert userData
+    @html @template(
+      file:   'user_widget'
+      header: 'Customer'
+      edit:   true
+      params:
+        user:     user
+        userData: userData
+    )
+
+    @userTicketPopups(
+      selector: '.user-tickets'
+      user_id:  user.id
+      position: 'right'
+    )
+
+
+    if user.organization_id
+      @el.append('<div class="org-info"></div>')
+      new App.OrganizationWidget(
+        organization_id: user.organization_id
+        el:              @el.find('.org-info')
+      )
+
+  update: (e) =>
+    note = $(e.target).parent().find('[data-type=update]').val()
+    user = App.User.find( @user_id )
+    if user.note isnt note
+      user.updateAttributes( note: note )
+      @log 'notice', 'update', e, note, user
+
+  edit: (e) =>
+    e.preventDefault()
+    new App.ControllerGenericEdit(
+      id: @user_id,
+      genericObject: 'User',
+      required: 'quick',
+      pageData: {
+        title: 'Users',
+        object: 'User',
+        objects: 'Users',
+      },
+      callback: @render
+    )

app/assets/javascripts/app/lib/app_post/task_manager.js.coffee

@@ -208,6 +208,7 @@ class _taskManagerSingleton extends App.Controller
     worker = @worker( key )
     if worker && worker.activate
       worker.activate()
+      App.Event.trigger('ui:rerender:task')
 
     # return if controller is already started
     return if @workersStarted[key]

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

@@ -10,7 +10,6 @@
       <div id="form_create"></div>
       <div class="form-actions">
         <button type="reset" class="btn btn-default cancel"><%- @T( 'Cancel' ) %></button>
-        &nbsp;
         <button type="submit" class="btn btn-primary submit"><%- @T( 'Create' ) %></button>
       </div>
     </form>

app/assets/javascripts/app/views/generic/drox.jst.eco

@@ -0,0 +1,12 @@
+<div class="drox">
+  <div class="drox-header">
+    <h3>
+      <%- @T( @header ) %>
+      <% if @edit: %>
+      <a href="" data-type="edit" class="pull-right glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a>
+      <% end %>
+    </h3>
+  </div>
+  <div class="drox-body">
+  </div>
+</div>

app/assets/javascripts/app/views/link/info.jst.eco

@@ -1,14 +1,11 @@
-<div class="">
+<% for type of @links: %>
-  <h2><%- @T( 'Links' ) %> <a href="" data-type="edit" class="glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a></h2>
+  <strong><%- @T( type ) %></strong>
-  <% for type of @links: %>
+  <ul>
-    <strong><%- @T( type ) %></strong>
+    <% for item in @links[type]: %>
-    <ul>
+    <li><a href="#ticket/zoom/<%= item.id %>" data-type="" title="<%= item.title %>" class="<%= item.css %>">T:<%= item.number %> <%= item.title %></a> <a href="" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove" class="glyphicon glyphicon-remove hide" title="<%- @Ti('remove') %>"></a></li>
-      <% for item in @links[type]: %>
+    <% end %>
-      <li><a href="#ticket/zoom/<%= item.id %>" data-type="" title="<%= item.title %>" class="<%= item.css %>">T:<%= item.number %> <%= item.title %></a> <a href="" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove" class="glyphicon glyphicon-remove hide" title="<%- @Ti('remove') %>"></a></li>
+  </ul>
-      <% end %>
+<% end %>
-    </ul>
+<div>
-  <% end %>
+  <a href="" data-type="add" class="glyphicon glyphicon-plus hide" title="<%- @Ti('add') %>"></a>
-  <div>
+</div>
-    <a href="" data-type="add" class="glyphicon glyphicon-plus hide" title="<%- @Ti('add') %>"></a>
-  </div>
-</div>

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

@@ -0,0 +1,26 @@
+<div class="drox">
+  <div class="drox-header">
+    <h3>
+      <%- @T( 'Organization' ) %>
+      <a href="#" data-type="edit-org" data-id="<%- @organization.id %>" class="pull-right glyphicon glyphicon-edit"></a>
+    </h3>
+  </div>
+  <div class="drox-body">
+
+  <%= @organization.displayName() %>
+
+  <% for row in @organizationData: %>
+    <% if @organization[row.name] || row.name is 'note': %>
+      <% if row.tag isnt 'textarea': %>
+        <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @organization[row.name] ) ) %></div>
+      <% else: %>
+        <div class="customer-info" title="<%- @Ti( row.display ) %>">
+          <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update-org" placeholder="<%- @T( row.display ) %>"><%= @organization[row.name] %></textarea>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  </div>
+</div>
+

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

@@ -1,4 +1,4 @@
 <div class="">
-  <h3><%- @T( 'Tags' ) %></h3>
+  <h6><%- @T( 'Tags' ) %></h6>
   <input type="text" name="tags" id="<%- @tag_id %>" class="form-control" value="<% for tag in @tags: %><%= tag %>,<% end %>"/>
 </div>

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

@@ -1,10 +1,9 @@
 <div class="">
-  <h3><%- @T( 'Templates' ) %></h3>
   <form>
     <div id="form-template"></div>
-    <!--<button type="submit" class="btn" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
+    <!--<button type="submit" class="btn btn-default" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
-    <button type="submit" class="btn" data-type="template_delete"><%- @T( 'Delete' ) %></button>
+    <button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
-    <button type="submit" class="btn" data-type="template_select"><%- @T( 'Apply' ) %></button>
+    <button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
   </form>
   <br>
   <form>
@@ -12,6 +11,6 @@
       <label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
       <input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
     </fieldset>
-    <button type="submit" class="btn" data-type="template_save"><%- @T( 'Save' ) %></button>
+    <button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
   </form>
 </div>

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

@@ -1,13 +1,12 @@
 <div class="content-two">
   <div class="sidebar">
-    <div class="ticket-action"></div>
+    <div class="ticket-action panel-group"></div>
   </div>
   <div class="main">
 
     <div class="page-header ticket-zoom clearfix">
       <div class="page-header-title">
         <div class="ticket-title"></div>
-        <div class="ticket-info"></div>
       </div>
       <div class="page-header-meta">
         <% if @C( 'LastOverview' ) && @nav: %>
@@ -25,7 +24,7 @@
 
     <div class="ticket-answer">
       <div class="article-view"></div>
-      <div class="edit well"></div>
+      <div class="edit"></div>
     </div>
 
   </div>

app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco

@@ -4,19 +4,20 @@
   <img class="thumbnail user-data" data-id="<%= @S('id') %>" src="<%- @S('image') %>" alt="">
 </div>
 -->
-<div class="article-message <% if @formChanged: %>form-changed<% end %>">
+<div class="well edit-ticket <% if @formChanged: %>form-changed<% end %>">
-  <h5><%- @T('Message') %> <a href="#" class="close">&times;</a></h5>
+  <div class="edit-title">
-  <div class="article-message-edit">
+    <h4><%- @T('Edit') %>
-  <div class="reset-message<% if !@formChanged: %> hide<% end %>">
+    <small class="reset-message<% if !@formChanged: %> hide<% end %>">
-    <div>
       <a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
-    </div>
+    </small>
+    </h4>
   </div>
-  <form class="form-stacked pull-left ticket-update">
+  <div class="edit-content">
-    <div class="form-ticket-update"></div>
+    <form class="form-stacked ticket-update">
-    <div class="form-article-update"></div>
+      <div class="form-ticket-update"></div>
-    <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+      <div class="form-article-update"></div>
-  </form>
+      <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
+    </form>
   <div>
 </div>
 </div>

app/assets/javascripts/app/views/ticket_zoom/ticket_action.jst.eco

@@ -1,4 +1,4 @@
+  <div class="ticket_info"></div>
   <div class="customer_info"></div>
   <div class="action_info"></div>
-  <div class="tag_info"></div>
+  <div class="link_info"></div>
-  <div class="link_info"></div>

app/assets/javascripts/app/views/ticket_zoom/ticket_info.jst.eco

@@ -1,10 +1,22 @@
-<div>
+<table>
-  <%= @ticket.group.name %> -
+  <tr>
-  <%- @T( @ticket.ticket_state.name ) %> -
+    <td><%- @T('Group') %></td><td><%= @ticket.group.name %></td>
-  <%- @T( @ticket.ticket_priority.name ) %> -
+  </tr>
-  <span class="humanTimeFromNow" data-time="<%- @ticket.created_at %>">?</span>
+  <tr>
+    <td><%- @T('State') %></td><td><%- @T( @ticket.ticket_state.name ) %></td>
+  </tr>
+  <tr>
+    <td><%- @T('Priority') %></td><td><%- @T( @ticket.ticket_priority.name ) %></td>
+  </tr>
+  <tr>
+    <td><%- @T('Age') %></td><td><span class="humanTimeFromNow" data-time="<%- @ticket.created_at %>">?</span></td>
+  </tr>
   <% if !@isCustomer && @ticket.escalation_time: %>
-  - <%- @T('Escalation in') %>
+    <tr>
-  <span class="humanTimeFromNow escalation" data-time="<%- @ticket.escalation_time %>">?</span>
+      <td><%- @T('Escalation in') %></td>
+      <td><span class="humanTimeFromNow escalation" data-time="<%- @ticket.escalation_time %>">?</span></td>
+    </tr>
   <% end %>
-</div>
+</table>
+
+<div class="tag_info"></div>

app/assets/javascripts/app/views/ticket_zoom/ticket_title.jst.eco

@@ -1 +1 @@
-<h1><span contenteditable="true" class="ticket-title-update inline-edit"><%= @P( @ticket.title ) %></span> <small><%= @ticket.number %></small></h1>
+<h1><span contenteditable="true" class="ticket-title-update inline-edit"><%= @P( @ticket.title ) %></span></h1>

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

@@ -1,22 +1,5 @@
-
-<ul class="nav nav-tabs" style="font-size: 12px;">
-  <li class="active"><a href="#" data-area="user-info"><%- @T('Customer') %></a></li>
-<% if @organization: %>
-  <li><a href="#" data-area="org-info"><%- @T( 'Organization' ) %></a></li>
-<% end %>
-<!--
-  <li class="active"><a href="#" data-area="user-info"><%= @user.displayName() %></a></li>
-<% if @organization: %>
-  <li><a href="#" data-area="org-info"><%- @P( @organization.displayName() ) %></a></li>
-<% end %>
--->
-</ul>
-
 <div class="user-info">
-  <a href="#" data-type="edit-user" data-id="<%- @user.id %>" class="pull-right glyphicon glyphicon-edit"></a>
+
-  <!--
-  <h3><%- @T( 'Customer' ) %> <a href="#" data-type="edit" class="glyphicon glyphicon-edit"></a></h3>
-  -->
 <% if @user.image: %>
   <img class="thumbnail" src="<%- @user.image %>" alt="">
 <% end %>
@@ -62,21 +45,4 @@
 <% end %>
 </div>
 
-
-<% if @organization: %>
-<div class="org-info hide">
-  <a href="#" data-type="edit-org" data-id="<%- @organization.id %>" class="pull-right glyphicon glyphicon-edit"></a>
-  <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></div>
-<% for row in @organizationData: %>
-  <% if @organization[row.name] || row.name is 'note': %>
-    <% if row.tag isnt 'textarea': %>
-      <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @organization[row.name] ) ) %></div>
-    <% else: %>
-      <div class="customer-info" title="<%- @Ti( row.display ) %>">
-        <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update-org" placeholder="<%- @T( row.display ) %>"><%= @organization[row.name] %></textarea>
-      </div>
-    <% end %>
-  <% end %>
-<% end %>
 </div>
-<% end %>

app/assets/stylesheets/zzz.css

@@ -433,7 +433,8 @@ h5 {
 }
 
 .page-header {
-  margin: 0 0 12px
+  margin: 0 0 12px;
+  padding-bottom: 5px;
 }
 
 .page-header-title {
@@ -539,13 +540,42 @@ form.form-inline input[type="password"] {
   padding: 14px 20px 20px;
 }
 
-.edit {
+.drox {
-  min-height:30px;
+  margin-bottom: 6px;
-  bottom: 0;
+}
-/*  position: fixed; */
+
-  padding: 2px 14px;
+.drox-header {
+  padding: 8px 13px;
+  background-color: #f5f5f5;
+  color: #333333;
+  border-radius: 5px;
+}
+
+.drox-header .glyphicon {
+  display: none;
+}
+.drox-header:hover .glyphicon, .drox-header:focus .glyphicon {
+  display: inline-block;
+  color: #005580;
+  text-decoration: none;
+}
+.drox-header h3 {
+  font-size: 13px;
+  font-weight: 200;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.drox-body {
+  padding: 8px 13px;  
+}
+
+
+.edit-ticket {
+  padding: 4px 14px 10px;
   width: 720px;
-  margin-bottom: 0;
+}
+.edit {
 }
 .edit .form-group {
   margin-bottom: 2px;
@@ -553,11 +583,19 @@ form.form-inline input[type="password"] {
 .edit .form-control {
   height: 30px;
 }
-
 .edit:focus {
   color: #000000;
   outline: 0;
 }
+.edit-title {
+
+}
+.edit-title small {
+  font-size: 12px;
+}
+.edit-content {
+  margin-top: 20px;
+}
 
 .delete {
   background:url("../assets/close.png") no-repeat;
@@ -593,8 +631,6 @@ footer {
 }
 
 .customer_info {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eeeeee;
 }
 
 .customer_info ul.nav > li {
@@ -607,8 +643,7 @@ footer {
 }
 .customer_info .thumbnail {
   position: absolute;
-  right: 14px;
+  right: 20px;
-  top: 50px;
 }
 .customer_info textarea {
   padding-left: 10px;
@@ -781,8 +816,6 @@ footer {
 .customer-info {
   width: 100%;
   padding-top: 7px;
-  padding-left: 7px;
-  padding-right: 10px;
 }
 
 .inline-edit {