Implemented many new BS3 dialogs.

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

@@ -362,7 +362,7 @@ class App.ControllerForm extends App.Controller
               params:
                 form_id: @form_id
             text:
-              uploadButton: '<i class="glyphicon glyphicon-upload"></i>'
+              uploadButton: '<i class="glyphicon glyphicon-paperclip"></i>'
             template: '<div class="qq-uploader">' +
                         '<pre class="btn qq-upload-icon qq-upload-drop-area"><span>{dragZoneText}</span></pre>' +
                         '<div class="btn btn-default qq-upload-icon2 qq-upload-button pull-right" style="">{uploadButtonText}</div>' +

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

@@ -238,3 +238,66 @@ class App.ControllerTabs extends App.Controller
         new tab.controller( params )
 
     @el.find('.tab-content .tab-pane:first').addClass('active')
+
+class App.ControllerNavSidbar extends App.ControllerContent
+  constructor: (params) ->
+    super
+
+    # get groups
+    groups = App.Config.get(@configKey)
+    groupsUnsorted = []
+    for key, value of groups
+      if !value.controller
+        groupsUnsorted.push value
+
+    @groupsSorted = _.sortBy( groupsUnsorted, (item) -> return item.prio )
+
+    # get items of group
+    for group in @groupsSorted
+      items = App.Config.get(@configKey)
+      itemsUnsorted = []
+      for key, value of items
+        if value.controller
+          if value.parent is group.target
+            itemsUnsorted.push value
+
+      group.items = _.sortBy( itemsUnsorted, (item) -> return item.prio )
+
+
+    # set active item
+    selectedItem = undefined
+    for group in @groupsSorted
+      if group.items
+        for item in group.items
+          if !@target && !selectedItem
+            item.active = true
+            selectedItem = item
+          else if @target && item.target is window.location.hash
+            item.active = true
+            selectedItem = item
+          else
+            item.active = false
+
+    @render(selectedItem)
+
+    if selectedItem
+      new selectedItem.controller(
+        el: @el.find('.main')
+      )
+
+    @bind(
+      'ui:rerender'
+      =>
+        @render(selectedItem, true)
+    )
+
+  render: (selectedItem, force) ->
+    if !$( '.' + @configKey )[0] || force
+      @html App.view('generic/navbar_l2')(
+        groups:     @groupsSorted
+        className:  @configKey
+      )
+    if selectedItem
+      @el.find('li').removeClass('active')
+      @el.find('a[href="' + selectedItem.target + '"]').parent().addClass('active')
+

app/assets/javascripts/app/controllers/_profile/language.js.coffee

@@ -1,4 +1,4 @@
-class App.ProfileLanguage extends App.Controller
+class Index extends App.Controller
   events:
     'submit form': 'update'
 
@@ -66,3 +66,6 @@ class App.ProfileLanguage extends App.Controller
       type: 'error'
       msg:  App.i18n.translateContent( data.message )
     )
+
+App.Config.set( 'Language', { prio: 1000, name: 'Language', parent: '#profile', target: '#profile/language', controller: Index }, 'NavBarProfile' )
+

app/assets/javascripts/app/controllers/_profile/linked_accounts.js.coffee

@@ -1,4 +1,4 @@
-class App.ProfileLinkedAccounts extends App.Controller
+class Index extends App.Controller
   events:
     'click [data-type="remove"]': 'remove'
 
@@ -75,3 +75,6 @@ class App.ProfileLinkedAccounts extends App.Controller
       type: 'error'
       msg:  App.i18n.translateContent( data.message )
     )
+
+App.Config.set( 'LinkedAccounts', { prio: 3000, name: 'Linked Accunts', parent: '#profile', target: '#profile/linked', controller: Index }, 'NavBarProfile' )
+

app/assets/javascripts/app/controllers/_profile/password.js.coffee

@@ -1,4 +1,4 @@
-class App.ProfilePassword extends App.Controller
+class Index extends App.Controller
   events:
     'submit form': 'update'
 
@@ -59,3 +59,6 @@ class App.ProfilePassword extends App.Controller
       type: 'error'
       msg:  App.i18n.translateContent( data.message )
     )
+
+App.Config.set( 'Password', { prio: 2000, name: 'Password', parent: '#profile', target: '#profile/password', controller: Index }, 'NavBarProfile' )
+

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

@@ -190,7 +190,7 @@ class App.TicketCreate extends App.Controller
 
     # show template UI
     new App.TemplateUI(
-      el:          @el.find('[data-id="ticket_template"]')
+      el:          @el.find('.ticket_template')
       template_id: template['id']
     )
 
@@ -216,7 +216,7 @@ class App.TicketCreate extends App.Controller
 
     @userInfo(
       user_id:  params.customer_id
-      el:       @el.find('[data-id="customer_info"]')
+      el:       @el.find('.customer_info')
       callback: callback
     )
 

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

@@ -1,67 +1,5 @@
-class IndexRouter extends App.Controller
+class IndexRouter extends App.ControllerNavSidbar
-  constructor: (params) ->
+  configKey: 'NavBarLevel44'
-    super
-
-    # get groups
-    groups = App.Config.get('NavBarLevel4')
-    groupsUnsorted = []
-    for key, value of groups
-      groupsUnsorted.push value
-
-    @groupsSorted = _.sortBy( groupsUnsorted, (item) -> return item.prio )
-
-    # get items of group
-    for group in @groupsSorted
-      items = App.Config.get('NavBarLevel44')
-      itemsUnsorted = []
-      for key, value of items
-        if value.parent is group.target
-          itemsUnsorted.push value
-
-      group.items = _.sortBy( itemsUnsorted, (item) -> return item.prio )
-
-
-    # set active item
-    selectedItem = undefined
-    for group in @groupsSorted
-      if group.items
-        for item in group.items
-          if !@target && !selectedItem
-            item.active = true
-            selectedItem = item
-          else if @target && item.target is '#manage/' + @target
-            item.active = true
-            selectedItem = item
-          else if @target && item.target is '#settings/' + @target
-            item.active = true
-            selectedItem = item
-          else if @target && item.target is '#channels/' + @target
-            item.active = true
-            selectedItem = item
-          else if @target && item.target is '#system/' + @target
-            item.active = true
-            selectedItem = item
-          else
-            item.active = false
-
-    @render(selectedItem)
-
-    if selectedItem
-      new selectedItem.controller(
-        el: @el.find('.main')
-      )
-
-  render: (selectedItem) ->
-
-    if !$('.nav-manage')[0]
-      @html App.view('generic/navbar_l2')(
-        groups:     @groupsSorted
-        className: 'nav-manage'
-      )
-    if selectedItem
-      @el.find('li').removeClass('active')
-      @el.find('a[href="' + selectedItem.target + '"]').parent().addClass('active')
-
 
 App.Config.set( 'manage', IndexRouter, 'Routes' )
 App.Config.set( 'manage/:target', IndexRouter, 'Routes' )
@@ -69,8 +7,10 @@ App.Config.set( 'settings/:target', IndexRouter, 'Routes' )
 App.Config.set( 'channels/:target', IndexRouter, 'Routes' )
 App.Config.set( 'system/:target', IndexRouter, 'Routes' )
 
-App.Config.set( 'Manage', { prio: 1000, name: 'Manage', target: '#manage', role: ['Admin'] }, 'NavBarLevel4' )
+App.Config.set( 'Manage', { prio: 1000, name: 'Manage', target: '#manage', role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'Channels', { prio: 2500, name: 'Channels', target: '#channels', role: ['Admin'] }, 'NavBarLevel4' )
+App.Config.set( 'Channels', { prio: 2500, name: 'Channels', target: '#channels', role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'Settings', { prio: 7000, name: 'Settings', target: '#settings', role: ['Admin'] }, 'NavBarLevel4' )
+App.Config.set( 'Settings', { prio: 7000, name: 'Settings', target: '#settings', role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'System', { prio: 8000, name: 'System', target: '#system', role: ['Admin'] }, 'NavBarLevel4' )
+App.Config.set( 'System', { prio: 8000, name: 'System', target: '#system', role: ['Admin'] }, 'NavBarLevel44' )
+
+App.Config.set( 'SystemObject', { prio: 1700, parent: '#system', name: 'Objects', target: '#system/objects', controller: true, role: ['Admin'] }, 'NavBarLevel44' )
 

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

@@ -35,6 +35,13 @@ class App.Navigation extends App.Controller
       @recent_viewed_build(data)
       @render()
 
+    # bell on / bell off
+    @bind 'bell', (data) =>
+      if data is 'on'
+        @el.find('.bell').addClass('show')
+      else
+        @el.find('.bell').removeClass('show')
+
   render: () ->
     user      = App.Session.all()
     nav_left  = @getItems( navbar: @Config.get( 'NavBar' ) )

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

@@ -1,32 +1,9 @@
-class Index extends App.ControllerLevel2
+class Index extends App.ControllerNavSidbar
-  toggleable: false
+  configKey: 'NavBarProfile'
-#  toggleable: true
 
-  constructor: ->
-    super
-
-    return if !@authenticate()
-
-    @menu = [
-      { name: 'Password',       'target': 'password', controller: App.ProfilePassword, params: {} },
-      { name: 'Language',       'target': 'language', controller: App.ProfileLanguage, params: {} },
-      { name: 'Link Accounts',  'target': 'accounts', controller: App.ProfileLinkedAccounts, params: {} },
-#      { name: 'Notifications',  'target': 'notify',   controller: App.SettingsArea, params: { area: 'Ticket::Number' } },
-    ] 
-    @page = {
-      title:     'Profile',
-      head:      'Profile',
-      sub_title: 'Settings'
-      nav:       '#profile',
-    }
-
-    # render page
-    @render()
-
-#  render: ->
-#    @html App.view('profile')()
-
-
-App.Config.set( 'profile/:target', Index, 'Routes' )
 App.Config.set( 'profile', Index, 'Routes' )
+App.Config.set( 'profile/:target', Index, 'Routes' )
+
+App.Config.set( 'Profile', { prio: 1000, name: 'Profile', target: '#profile' }, 'NavBarProfile' )
+
 App.Config.set( 'Profile', { prio: 1700, parent: '#current_user', name: 'Profile', target: '#profile', role: [ 'Agent', 'Customer' ] }, 'NavBarRight' )

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

@@ -59,9 +59,8 @@ class Ticket extends App.ControllerTabs
 
     @render()
 
-App.Config.set( 'System', { prio: 1400, parent: '#settings', name: 'System', target: '#settings/system', controller: System, role: ['Admin'] }, 'NavBarLevel44' )
+App.Config.set( 'SettingSystem', { prio: 1400, parent: '#settings', name: 'System', target: '#settings/system', controller: System, role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'Security', { prio: 1500, parent: '#settings', name: 'Security', target: '#settings/security', controller: Security, role: ['Admin'] }, 'NavBarLevel44' )
+App.Config.set( 'SettingSecurity', { prio: 1500, parent: '#settings', name: 'Security', target: '#settings/security', controller: Security, role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'Import', { prio: 1550, parent: '#settings', name: 'Import', target: '#settings/import', controller: Import, role: ['Admin'] }, 'NavBarLevel44' )
+App.Config.set( 'SettingImport', { prio: 1550, parent: '#settings', name: 'Import', target: '#settings/import', controller: Import, role: ['Admin'] }, 'NavBarLevel44' )
-App.Config.set( 'Ticket', { prio: 1600, parent: '#settings', name: 'Ticket', target: '#settings/ticket', controller: Ticket, role: ['Admin'] }, 'NavBarLevel44' )
+App.Config.set( 'SettingTicket', { prio: 1600, parent: '#settings', name: 'Ticket', target: '#settings/ticket', controller: Ticket, role: ['Admin'] }, 'NavBarLevel44' )
 
-#App.Config.set( 'Object', { prio: 1700, parent: '#settings', name: 'Objects', target: '#settings/objects', role: ['Admin'] }, 'NavBar' )

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

@@ -29,7 +29,7 @@ class App.TagWidget extends App.Controller
       tag_id: @attribute_id
     )
     @el.find('#' + @attribute_id ).tagsInput(
-      width:       '150px'
+      width:       '236px'
       defaultText: App.i18n.translateContent('add a Tag')
       onAddTag:    @onAddTag
       onRemoveTag: @onRemoveTag

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

@@ -345,12 +345,12 @@ class Edit extends App.Controller
 
     @configure_attributes_article = [
       { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', filter: @edit_form, default: '9', translate: true, class: 'medium' },
+      { name: 'internal',                 display: 'Visability',  tag: 'select',   null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false },
       { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
       { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
 #      { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
       { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
       { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 6,  limit: 100, null: true, class: 'span7', item_class: '', upload: true },
-      { name: 'internal',                 display: 'Visability',  tag: 'select',   null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false },
     ]
     if @isRole('Customer')
       @configure_attributes_article = [
@@ -435,7 +435,7 @@ class Edit extends App.Controller
         @el.find('.ticket-update').parent().parent().find('.reset-message').show()
         @el.find('.ticket-update').parent().parent().find('.reset-message').removeClass('hide')
         App.TaskManager.update( @task_key, { 'state': currentData })
-    @interval( update, 1500, 'autosave' )
+    @interval( update, 3000, 'autosave' )
 
   update: (e) =>
     e.preventDefault()

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

@@ -1,7 +1,10 @@
 class App.UserInfo extends App.Controller
   events:
-    'focusout [data-type=update]': 'update',
+    'focusout [data-type=update-user]': 'update_user',
-    'click [data-type=edit]': 'edit'
+    '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
@@ -20,12 +23,20 @@ class App.UserInfo extends App.Controller
   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
-    data = []
+    userData = []
     for item2 in App.User.configure_attributes
       item = _.clone( item2 )
 
@@ -36,17 +47,39 @@ class App.UserInfo extends App.Controller
         item.name = itemNameValueNew
 
       # add to show if value exists
-      if user[item.name]
+      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
-            data.push item
+            userData.push item
 
-    # insert data
+    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
+      user:             user
-      data: data
+      userData:         userData
+      organization:     organization
+      organizationData: organizationData
     )
 
     @userTicketPopups(
@@ -55,15 +88,14 @@ class App.UserInfo extends App.Controller
       position: 'right'
     )
 
-  # update changes
+  update_user: (e) =>
-  update: (e) =>
+    note = $(e.target).parent().find('[data-type=update-user]').val()
-    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) =>
+  edit_user: (e) =>
     e.preventDefault()
     new App.ControllerGenericEdit(
       id: @user_id,
@@ -76,3 +108,25 @@ class App.UserInfo extends App.Controller
       },
       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/index.js.coffee

@@ -41,7 +41,9 @@ class App extends Spine.Controller
 
       # define linkify helper
       params.L = ( item ) ->
-        window.linkify( item )
+        if item && typeof item is 'string'
+          return window.linkify( item )
+        item
 
       # define config helper
       params.C = ( key ) ->

app/assets/javascripts/app/models/organization.js.coffee

@@ -3,11 +3,11 @@ class App.Organization extends App.Model
   @extend Spine.Model.Ajax
   @url: 'api/organizations'
   @configure_attributes = [
-    { name: 'name',       display: 'Name',                tag: 'input',     type: 'text', limit: 100, 'null': false, 'class': 'span4' },
+    { name: 'name',       display: 'Name',                tag: 'input',     type: 'text', limit: 100, 'null': false, info: true, 'class': 'span4' },
-    { name: 'shared',     display: 'Shared organiztion',  tag: 'boolean',   note: 'Customers in the organiztion can view each other items.', type: 'boolean', 'default': true, 'null': false, 'class': 'span4' },
+    { name: 'shared',     display: 'Shared organiztion',  tag: 'boolean',   note: 'Customers in the organiztion can view each other items.', type: 'boolean', 'default': true, 'null': false, info: false, 'class': 'span4' },
-    { name: 'note',       display: 'Note',                tag: 'textarea',  note: 'Notes are visible to agents only, never to customers.', limit: 250, 'null': true, 'class': 'span4' },
+    { name: 'note',       display: 'Note',                tag: 'textarea',  note: 'Notes are visible to agents only, never to customers.', limit: 250, 'null': true, info: true, 'class': 'span4' },
-    { name: 'updated_at', display: 'Updated',             type: 'time', readonly: 1 },
+    { name: 'updated_at', display: 'Updated',             type: 'time', readonly: 1, info: false },
-    { name: 'active',     display: 'Active',              tag: 'boolean',   note: 'boolean', 'default': true, 'null': false, 'class': 'span4' },
+    { name: 'active',     display: 'Active',              tag: 'boolean',   note: 'boolean', 'default': true, 'null': false, info: false, 'class': 'span4' },
   ]
   @configure_overview = [
     'name',

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

@@ -1,9 +1,9 @@
 <div class="content-two">
   <div class="sidebar">
     <div class="ticket-action">
-      <div data-id="customer_info"></div>
+      <div class="customer_info"></div>
-      <div data-id="ticket_template"></div>
+      <div class="ticket_template"></div>
-      <div data-id="text_module"></div>
+      <div class="text_module"></div>
     </div>
   </div>
 

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

@@ -1,5 +1,5 @@
 <div class="well chat">
-  <h4><%- @T('Chat') %><a href="#" id="chat_toogle" class="close">&times;</a></h4>
+  <h5><%- @T('Chat') %><a href="#" id="chat_toogle" class="close">&times;</a></h5>
   <div id="chat_content" <% if !@isShown: %>class="hide"<% end %>>
     <div id="chat_log_container" class="max-size-scroll">
       <% for message in @messages: %>

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

@@ -1,7 +1,7 @@
 <div class="form-group <%= @attribute.item_class %>">
   <label for="<%= @attribute.id %>"><%- @T( @attribute.display ) %><% if !@attribute.null: %> *<% end %></label>
   <div class="controls">
-    <%- @item %><% if @attribute.note: %><span class="glyphicon glyphicon-question-sign" title="<%- @Ti( @attribute.note ) + ' ' %>"></span><% end %>
+    <%- @item %><% if @attribute.note: %><span class="glyphicon glyphicon-question-sign help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"></span><% end %>
 	<% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %>
 	<% if @attribute.add: %><span><a href="#" class="glyphicon glyphicon-plus"></a></span><% end %>
     <span class="help-inline"></span>

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

@@ -41,6 +41,8 @@
       </ul>
     </li>
 
+    <li class="bell"><a href="#bell" class="glyphicon glyphicon-bell"></a></li>
+
     <% for item in @navbar_right: %>
       <% if item.child: %>
         <li class="dropdown <% if @open_tab[item.target] : %>open<% end %>">

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

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

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

@@ -1,3 +1,15 @@
+<br>
+<div class="btn-group">
+  <button type="button" class="btn btn-default dropdown-toggle" 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>
+    <li><a href="#" data-type="customer"><%- @T( 'Change Customer' ) %></a></li>
+  </ul>
+</div>
+<br>
+<!--
 <div class="">
   <h3><%- @T( 'Actions' ) %></h3>
   <ul>
@@ -6,3 +18,4 @@
     <li><a href="#" data-type="customer"><%- @T( 'Change Customer' ) %></a></li>
   </ul>
 </div>
+-->

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

@@ -4,29 +4,28 @@
   </div>
   <div class="main">
 
-    <div class="page-header ticket-zoom">
+    <div class="page-header ticket-zoom clearfix">
-      <div class="ticket-title"></div>
+      <div class="page-header-title">
-      <div class="ticket-info"></div>
+        <div class="ticket-title"></div>
-
+        <div class="ticket-info"></div>
-      <div class="span2">
-      <% if @C( 'LastOverview' ) && @nav: %>
-      <div class="pagination pagination-small pagination-right">
-        <span class="count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
-        <% base_url ="#ticket_view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
-        <ul>
-          <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
-          <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
-        </ul>
       </div>
-      <% end %>
+      <div class="page-header-meta">
+        <% if @C( 'LastOverview' ) && @nav: %>
+          <div class="pagination pagination-small pagination-right">
+            <span class="count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
+            <% base_url ="#ticket_view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
+            <ul>
+              <li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
+              <li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
+            </ul>
+          </div>
+        <% end %>
       </div>
-
     </div>
 
-
     <div class="ticket-answer">
       <div class="article-view"></div>
-      <div class="edit"></div>
+      <div class="edit well"></div>
     </div>
 
   </div>

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

@@ -1,5 +1,5 @@
 <% for article in @articles: %>
-  <div class="article" data-id="<%= article.id %>" id="article-<%= article.id %>">
+  <div class="article clearfix" data-id="<%= article.id %>" id="article-<%= article.id %>">
     <div class="avatar thumbnails">
       <img class="thumbnail user-data" data-id="<%= article.created_by_id %>" src="<%= article.created_by.image %>" alt="">
       <ul>
@@ -7,7 +7,8 @@
         <% if article.article_type.name is 'email': %><li style="font-size: 10px;"><a href="api/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a></li><% end %>
       </ul>
     </div>
-    <div class="article-message <% if article.internal is true: %> internal<% end %>">
+    <div class="article-message clearfix <% if article.internal is true: %> internal<% end %>">
+      <div class="article-content">
       <% if article.from: %>
         <div>
           <strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
@@ -36,7 +37,8 @@
         <% end %>
         </div>
       <% end %>
-      <div style="white-space:pre-wrap;" class="article-content"><%- article.html %></div>
+      <div style="white-space:pre-wrap;" class=""><%- article.html %></div>
+      </div>
     </div>
   </div>
 <% end %>

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

@@ -1,7 +1,12 @@
+<div class="">
+<!--
 <div class="avatar thumbnails">
   <img class="thumbnail user-data" data-id="<%= @S('id') %>" src="<%- @S('image') %>" alt="">
 </div>
+-->
 <div class="article-message <% if @formChanged: %>form-changed<% end %>">
+  <h5><%- @T('Message') %> <a href="#" class="close">&times;</a></h5>
+  <div class="article-message-edit">
   <div 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>
@@ -12,4 +17,6 @@
     <div class="form-article-update"></div>
     <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
   </form>
+  <div>
+</div>
 </div>

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

@@ -1,63 +1,82 @@
-<div class="">
+
+<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 %>
-  <div class="row">
+  <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div>
-    <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div>
+<% for row in @userData: %>
-  </div>
-<% for row in @data: %>
   <% if @user[row.name] || row.name is 'note': %>
-    <div class="row">
+    <% if row.tag isnt 'textarea': %>
-      <% if row.tag isnt 'textarea': %>
+      <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @user[row.name] ) ) %></div>
-        <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @user[row.name] ) ) %></div>
+    <% else: %>
-      <% else: %>
+      <div class="customer-info" title="<%- @Ti( row.display ) %>">
-        <div class="customer-info" title="<%- @Ti( row.display ) %>">
+        <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update-user" placeholder="<%- @T( row.display ) %>"><%= @user[row.name] %></textarea>
-          <strong><%- @T( row.display ) %></strong><br/>
+      </div>
-          <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update"><%= @user[row.name] %></textarea>
+    <% end %>
-       </div>
-      <% end %>
-    </div>
   <% end %>
 <% end %>
-<% if @user['organization']: %>
-  <div class="row">
-    <div class="customer-info">
-      <strong><%- @T( 'Organization' ) %></strong><br/>
-      <%- @P( @user['organization'] ) %>
-    </div>
-  </div>
-<% end %>
 <% if !_.isEmpty(@user['accounts']): %>
-  <div class="row">
+  <div class="customer-info">
-    <div class="customer-info">
+    <strong><%- @T( 'Linked Accounts' ) %></strong><br/>
-      <strong><%- @T( 'Linked Accounts' ) %></strong><br/>
   <% for account of @user['accounts']: %>
-      <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
+    <a href="<%= @user['accounts'][account]['link'] %>" target="_blank"><%= account %></a>
   <% end %>
-    </div>
   </div>
 <% end %>
 <% if !_.isEmpty(@user['links']): %>
   <% for link in @user['links']: %>
-  <div class="row">
+  <div class="customer-info">
-    <div class="customer-info">
+    <strong><%- @T( link['title'] ) %></strong><br/>
-      <strong><%- @T( link['title'] ) %></strong><br/>
+    <% for item in link['items']: %>
-      <% for item in link['items']: %>
+      <% if item['url']: %>
-        <% if item['url']: %>
+        <a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>
-          <a href="<%= item['url'] %>" title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>" <% if link.new_window: %>target="_blank"<% end %>>
+      <% else: %>
-        <% else: %>
+        <span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>">
-          <span title="<%- @Ti( item['title'] ) %>" style="<%= item['style'] %>" data-type="<%= item['data'] %>" class="<%= item['class'] %>">
-        <% end %>
-          <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %>
-        <% if item['url']: %>
-          </a>
-        <% else: %>
-          </span>
-        <% end %>
       <% end %>
-    </div>
+        <%- @T( item['name'] ) %> <% if item['count'] isnt undefined: %><span class="count">(<%= item['count'] %>)</span><% end %>
+      <% if item['url']: %>
+        </a>
+      <% else: %>
+        </span>
+      <% end %>
+    <% end %>
   </div>
   <% end %>
 <% 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 %>