From cd1136e283749b498a24b21baf7e47a63ccd97a3 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Mon, 15 Sep 2014 13:19:51 +0200
Subject: [PATCH] Moved to generic sidebar with tabs.

---
 .../_application_controller_generic.js.coffee |  89 ++++++++++
 .../controllers/agent_ticket_create.js.coffee |  77 +++++++--
 .../app/controllers/ticket_zoom.js.coffee     | 158 +++++++++++-------
 .../app/controllers/widget/link.js.coffee     |  36 +---
 .../app/controllers/widget/user.js.coffee     |  12 +-
 .../app/views/generic/sidebar_tabs.jst.eco    |  22 +++
 .../javascripts/app/views/link/info.jst.eco   |  11 +-
 .../javascripts/app/views/ticket_zoom.jst.eco |  39 -----
 .../app/views/ticket_zoom/actions.jst.eco     |   1 -
 .../app/views/ticket_zoom/edit.jst.eco        |   2 +-
 .../app/views/ticket_zoom/widgets.jst.eco     |   3 -
 .../app/views/widget/organization.jst.eco     |  13 +-
 .../javascripts/app/views/widget/user.jst.eco |   2 +-
 13 files changed, 294 insertions(+), 171 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
 delete mode 100644 app/assets/javascripts/app/views/ticket_zoom/widgets.jst.eco

diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
index 53eb612ce..6b7aca1a2 100644
--- a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
@@ -415,3 +415,92 @@ class App.GenericHistory extends App.ControllerModal
     else
       @render( @historyListCache.reverse(), 'down' )
 
+class App.Sidebar extends App.Controller
+  events:
+    'click .sidebar-tabs':  'toggleTab'
+    'click .close-sidebar': 'toggleSidebar'
+
+  constructor: ->
+    super
+    @render()
+
+    # get first tab
+    name = @el.find('.sidebar-tab').first().data('content')
+
+    # activate first tab
+    @toggleTabAction(name)
+
+  render: =>
+    @html App.view('generic/sidebar_tabs')( items: @items )
+
+    # init content callback
+    for item in @items
+      if item.callback
+        item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
+
+  toggleSidebar: ->
+    $('.content.active > div').toggleClass('state--sidebar-hidden')
+
+  showSidebar: ->
+    # show sidebar if not shown
+    if $('.content.active > div').hasClass('state--sidebar-hidden')
+      $('.content.active > div').removeClass('state--sidebar-hidden')
+
+  toggleTab: (e) ->
+
+    # get selected tab
+    name = $(e.target).closest('.sidebar-tab').data('content')
+
+    if name
+
+      # if current tab is selected again, toggle side bar
+      if name is @currentTab
+        @toggleSidebar()
+
+      # toggle content tab
+      else
+        @toggleTabAction(name)
+
+
+  toggleTabAction: (name) ->
+    return if !name
+
+    # remove active state
+    @el.find('.sidebar-tab').removeClass('active')
+
+    # add active state
+    @el.find('.sidebar-tab[data-content=' + name + ']').addClass('active')
+
+    # hide all content tabs
+    @el.find('.sidebar-content').addClass('hide')
+
+    # show active tab content
+    tabContent = @el.find('.sidebar-content[data-content=' + name + ']')
+    tabContent.removeClass('hide')
+
+    # set content tab title
+    title = tabContent.data('title')
+    @el.find('.sidebar h2').html(title)
+
+    # set tab actions
+    @el.find('.sidebar-tab-actions').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('.sidebar-tab-actions').append("<div class='sidebar-tab-action #{action.class}'></div>").find(".sidebar-tab-action").last().bind(
+                'click'
+                (e) =>
+                  e.stopPropagation()
+                  e.preventDefault()
+                  action.callback(e)
+              )
+
+    # remember current tab
+    @currentTab = name
+
+    # show sidebar if not shown
+    @showSidebar()
\ No newline at end of file
diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
index 6cf21898c..cea22c336 100644
--- a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
+++ b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
@@ -245,7 +245,7 @@ class App.TicketCreate extends App.Controller
         formChanges
       ]
       filter:     @form_meta.filter
-      params:    params
+      params:     params
       noFieldset: true
     )
     new App.ControllerForm(
@@ -258,8 +258,8 @@ class App.TicketCreate extends App.Controller
       handlers: [
         formChanges
       ]
-      filter:     @form_meta.filter
-      params:    params
+      filter:   @form_meta.filter
+      params:   params
     )
 
     # show template UI
@@ -279,6 +279,11 @@ class App.TicketCreate extends App.Controller
       el: @el.find('form').find('textarea')
     )
 
+    new Sidebar(
+      el:     @el
+      params: @formDefault
+    )
+
     $('#tags').tokenfield()
 
     # start auto save
@@ -288,18 +293,9 @@ class App.TicketCreate extends App.Controller
 
     params = App.ControllerForm.params( $(e.target).closest('form') )
 
-    # update text module UI
-    callback = (user) =>
-      if @textModule
-        @textModule.reload(
-          ticket:
-            customer: user
-        )
-
-    @userInfo(
-      user_id:  params.customer_id
-      el:       @el.find('.customer_info')
-      callback: callback
+    new Sidebar(
+      el:     @el
+      params: params
     )
 
   userNew: (e) =>
@@ -425,6 +421,57 @@ class App.TicketCreate extends App.Controller
           ui.formEnable(e)
       )
 
+class Sidebar extends App.Controller
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+
+
+    items = []
+    if @params['customer_id']
+
+      showCustomer = (el) =>
+        # update text module UI
+        callback = (user) =>
+          if @textModule
+            @textModule.reload(
+              ticket:
+                customer: user
+            )
+
+        @userInfo(
+          user_id:  @params.customer_id
+          el:       el
+          callback: callback
+        )
+
+      items.push {
+        head: 'Customer'
+        name: 'customer'
+        icon: 'person'
+        actions: [
+          {
+            class: 'glyphicon glyphicon-edit'
+            #callback: editCustomer
+          },
+        ]
+        callback: showCustomer
+      }
+
+
+    items.push {
+      head: 'Templates'
+      name: 'template'
+      icon: 'templates'
+      #callback: showCustomer
+    }
+
+    new App.Sidebar(
+      el:     @el.find('.sidebar-holder')
+      items:  items
+    )
 
 class UserNew extends App.ControllerModal
   constructor: ->
diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index 183b3f72a..7332edcb4 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -140,10 +140,106 @@ class App.TicketZoom extends App.Controller
         isCustomer: @isRole('Customer')
       )
       @TicketTitle()
-      new Sidebar(el: @el)
-      required = 'edit'
-      if @isRole('Customer')
-        required = 'customer'
+
+      editTicket = (el) =>
+        el.append('<div class="edit"></div>')
+        new App.ControllerForm(
+          el:         el.find('.edit')
+          model:      App.Ticket
+          screen:     'edit'
+          params:     App.Ticket.find(@ticket.id)
+        )
+        if !@isRole('Customer')
+          el.append('<div class="tags"></div>')
+          new App.WidgetTag(
+            el:           el.find('.tags')
+            object_type:  'Ticket'
+            object:       @ticket
+          )
+          el.append('<div class="links"></div>')
+          new App.WidgetLink(
+            el:           el.find('.links')
+            object_type:  'Ticket'
+            object:       @ticket
+          )
+      items = [
+        {
+          head: 'Ticket Settings'
+          name: 'ticket'
+          icon: 'message'
+          callback: editTicket
+        }
+      ]
+      if !@isRole('Customer')
+        editCustomer = (e, el) =>
+          new App.ControllerGenericEdit(
+            id: @ticket.customer_id
+            genericObject: 'User'
+            screen: 'edit'
+            pageData:
+              title: 'Users'
+              object: 'User'
+              objects: 'Users'
+          )
+        changeCustomer = (e, el) =>
+          new App.TicketCustomer(
+            ticket: @ticket
+          )
+        showCustomer = (el) =>
+          new App.WidgetUser(
+            el:       el
+            user_id:  @ticket.customer_id
+          )
+        items.push {
+          head: 'Customer'
+          name: 'customer'
+          icon: 'person'
+          actions: [
+            {
+              class: 'glyphicon glyphicon-transfer'
+              callback: changeCustomer
+            },
+            {
+              class: 'glyphicon glyphicon-edit'
+              callback: editCustomer
+            },
+          ]
+          callback: showCustomer
+        }
+        if @ticket.organization_id
+          editOrganization = (e, el) =>
+            new App.ControllerGenericEdit(
+              id: @ticket.organization_id,
+              genericObject: 'Organization'
+              pageData:
+                title: 'Organizations'
+                object: 'Organization'
+                objects: 'Organizations'
+            )
+          showOrganization = (el) =>
+            new App.WidgetOrganization(
+              el:               el
+              organization_id:  @ticket.organization_id
+            )
+          items.push {
+            head: 'Organization'
+            name: 'organization'
+            icon: 'group'
+            actions: [
+              {
+                class: 'glyphicon glyphicon-edit'
+                callback: editOrganization
+              },
+            ]
+            callback: showOrganization
+          }
+
+      new App.Sidebar(
+        el:     @el.find('.sidebar-holder')
+        items:  items
+      )
+
+      ###
       new App.ControllerForm(
         el:         @el.find('.edit')
         model:      App.Ticket
@@ -174,6 +270,7 @@ class App.TicketZoom extends App.Controller
           params:     App.Organization.find(@ticket.organitaion_id)
           screen:   'edit'
         )
+        ###
 
     @TicketAction()
     @ArticleView()
@@ -278,52 +375,6 @@ class TicketTitle extends App.Controller
   release: =>
     App.Ticket.unsubscribe( @subscribeId )
 
-class Sidebar extends App.Controller
-  events:
-    'click .sidebar-tabs': 'toggleTab'
-    'click .close-sidebar': 'toggleSidebar'
-
-  constructor: ->
-    super
-    name = @el.find('.sidebar-content').first().data('content')
-    @toggleContent(name)
-
-#  render: =>
-#    @html App.view('ticket_zoom/sidebar')()
-
-  toggleSidebar: ->
-    @el.find('.ticket-zoom').toggleClass('state--sidebar-hidden')
-
-  showSidebar: ->
-    # show sidebar if not shown
-    if @el.find('.ticket-zoom').hasClass('state--sidebar-hidden')
-      @el.find('.ticket-zoom').removeClass('state--sidebar-hidden')
-
-  toggleTab: (e) ->
-
-    name = $(e.target).closest('.sidebar-tab').data('content')
-
-    if name
-      if name is @currentTab
-        @toggleSidebar()
-      else
-        @el.find('.ticket-zoom .sidebar-tab').removeClass('active')
-        $(e.target).closest('.sidebar-tab').addClass('active')
-
-        @toggleContent(name)
-
-        @showSidebar()
-
-
-  toggleContent: (name) ->
-    return if !name
-    @el.find('.sidebar-content').addClass('hide')
-    @el.find('.sidebar-content[data-content=' + name + ']').removeClass('hide')
-    title = @el.find('.sidebar-content[data-content=' + name + ']').data('title')
-    @el.find('.sidebar h2').html(title)
-    @currentTab = name
-
-
 class Edit extends App.Controller
   elements:
     'textarea' :                    'textarea'
@@ -1149,7 +1200,7 @@ class Article extends App.Controller
         actions.push {
           name: 'split'
           type: 'split'
-          href: '#ticket_create/call_inbound/' + @article.ticket_id + '/' + @article.id
+          href: '#ticket/create/' + @article.ticket_id + '/' + @article.id
         }
     @article.actions = actions
 
@@ -1162,7 +1213,6 @@ class ActionRow extends App.Controller
   events:
     'click [data-type=history]':  'history_dialog'
     'click [data-type=merge]':    'merge_dialog'
-    'click [data-type=customer]': 'customer_dialog'
 
   constructor: ->
     super
@@ -1179,10 +1229,6 @@ class ActionRow extends App.Controller
     e.preventDefault()
     new App.TicketMerge( ticket: @ticket, task_key: @ui.task_key )
 
-  customer_dialog: (e) ->
-    e.preventDefault()
-    new App.TicketCustomer( ticket: @ticket )
-
 class TicketZoomRouter extends App.ControllerPermanent
   constructor: (params) ->
     super
diff --git a/app/assets/javascripts/app/controllers/widget/link.js.coffee b/app/assets/javascripts/app/controllers/widget/link.js.coffee
index 5169c696a..d8097e598 100644
--- a/app/assets/javascripts/app/controllers/widget/link.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/link.js.coffee
@@ -1,7 +1,6 @@
-class App.WidgetLink extends App.ControllerDrox
+class App.WidgetLink extends App.Controller
   events:
     'click [data-type=add]': 'add',
-    'click [data-type=edit]': 'toggle',
     'click [data-type=remove]': 'remove',
 
   constructor: ->
@@ -27,9 +26,6 @@ class App.WidgetLink extends App.ControllerDrox
         App.Collection.loadAssets( data.assets )
 
         @render()
-
-        if _.isEmpty(data.links)
-          @toggle()
     )
 
   render: =>
@@ -46,36 +42,10 @@ class App.WidgetLink extends App.ControllerDrox
         list[ item['link_type'] ].push ticket
 
     # insert data
-    @html @template(
-      file:   'link/info'
-      header: 'Links'
-      edit:   true
-      params:
-        links: list
+    @html App.view('link/info')(
+      links: list
     )
 
-    # show edit mode once enabled
-    if @edit_mode
-      @el.find('[data-type=remove]').removeClass('hide')
-      @el.find('[data-type=add]').removeClass('hide')
-
-#    @ticketPopups(
-#      selector: '.user-tickets',
-#      user_id:  user_id,
-#    )
-
-  # enable/disable edit mode
-  toggle: (e) =>
-    if e
-      e.preventDefault()
-    @edit_mode = true
-    if @el.find('[data-type=add]').hasClass('hide')
-      @el.find('[data-type=remove]').removeClass('hide')
-      @el.find('[data-type=add]').removeClass('hide')
-    else
-      @el.find('[data-type=remove]').addClass('hide')
-      @el.find('[data-type=add]').addClass('hide')
-
   remove: (e) =>
     e.preventDefault()
     link_type   = $(e.target).data('link-type')
diff --git a/app/assets/javascripts/app/controllers/widget/user.js.coffee b/app/assets/javascripts/app/controllers/widget/user.js.coffee
index a6cdf4f7f..5335f1694 100644
--- a/app/assets/javascripts/app/controllers/widget/user.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/user.js.coffee
@@ -1,4 +1,4 @@
-class App.WidgetUser extends App.ControllerDrox
+class App.WidgetUser extends App.Controller
   events:
     'focusout [data-type=update]': 'update',
     'click [data-type=edit]':      'edit'
@@ -66,13 +66,11 @@ class App.WidgetUser extends App.ControllerDrox
         user['links'].push topic
 
     # insert userData
-    @html @template(
-      file:   'widget/user'
+    @html App.view('widget/user')(
       header: 'Customer'
       edit:   true
-      params:
-        user:     user
-        userData: userData
+      user:     user
+      userData: userData
     )
 
     a = =>
@@ -92,12 +90,14 @@ class App.WidgetUser extends App.ControllerDrox
       position: 'right'
     )
 
+    ###
     if user.organization_id
       @el.append('<div class="org-info"></div>')
       new App.WidgetOrganization(
         organization_id: user.organization_id
         el:              @el.find('.org-info')
       )
+    ###
 
   update: (e) =>
     note = $(e.target).val()
diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
new file mode 100644
index 000000000..c5b857797
--- /dev/null
+++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
@@ -0,0 +1,22 @@
+<div class="sidebar bottom-form-shadow flex">
+  <div class="horizontal center">
+    <h2 class="flex u-textTruncate"></h2>
+    <div class="close-sidebar centered u-clickable">
+      <div class="sidebar-tab-actions"></div>
+      <div class="arrow-right icon"></div>
+    </div>
+  </div>
+  <hr>
+
+  <% for item in @items: %>
+    <div class="sidebar-content" data-content="<%= item.name %>" data-title="<%= @T( item.head ) %>"></div>
+  <% end %>
+
+</div>
+<div class="sidebar-tabs vertical justified">
+<% for item in @items: %>
+  <div class="sidebar-tab centered" data-content="<%= item.name %>">
+    <div class="dark icon <%= item.icon %>"></div>
+  </div>
+<% end %>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/link/info.jst.eco b/app/assets/javascripts/app/views/link/info.jst.eco
index 227424335..55580e92a 100644
--- a/app/assets/javascripts/app/views/link/info.jst.eco
+++ b/app/assets/javascripts/app/views/link/info.jst.eco
@@ -1,11 +1,12 @@
+<label><%- @T('Links') %></label>
+<p>
 <% for type of @links: %>
-  <strong><%- @T( type ) %></strong>
+  <label><%- @T( type ) %></label>
   <ul>
     <% for item in @links[type]: %>
-    <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>
+    <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" title="<%- @Ti('remove') %>"></a></li>
     <% end %>
   </ul>
 <% end %>
-<div>
-  <a href="" data-type="add" class="glyphicon glyphicon-plus hide" title="<%- @Ti('add') %>"></a>
-</div>
\ No newline at end of file
+</p>
+<a href="" data-type="add" class="glyphicon glyphicon-plus" title="<%- @Ti('add') %>"></a>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index 19e6bbd7b..ecd0ccbc4 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -30,46 +30,7 @@
     </div>
 
     <div class="sidebar-holder vertical">
-      <div class="sidebar bottom-form-shadow flex">
-        <div class="horizontal center">
-          <h2 class="flex u-textTruncate"></h2>
-          <div class="close-sidebar centered u-clickable">
-            <div class="arrow-right icon"></div>
-          </div>
-        </div>
-        <hr>
-        <form>
 
-        </form>
-        <div class="sidebar-content" data-content="ticket" data-title="<%- @T('Ticket Settings') %>">
-          <div class="edit"></div>
-          <div class="tags"></div>
-          <div class="links"></div>
-          <div class="action"></div>
-        </div>
-        <div class="sidebar-content" data-content="customer" data-title="<%- @T('Customer Settings') %>">
-          <div class="customer-edit"></div>
-        </div>
-        <div class="sidebar-content" data-content="organization" data-title="<%- @T('Organization Settings') %>">
-          <div class="organization-edit"></div>
-        </div>
-
-      </div>
-      <div class="sidebar-tabs vertical justified">
-        <div class="active sidebar-tab centered" data-content="ticket">
-          <div class="dark message icon"></div>
-        </div>
-        <% if !@isCustomer: %>
-        <div class="sidebar-tab centered" data-content="customer">
-          <div class="dark person icon"></div>
-        </div>
-        <% if @ticket.organization_id: %>
-        <div class="sidebar-tab centered" data-content="organization">
-          <div class="dark group icon"></div>
-        </div>
-        <% end %>
-        <% end %>
-      </div>
     </div>
   </div>
 
diff --git a/app/assets/javascripts/app/views/ticket_zoom/actions.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/actions.jst.eco
index 004750203..f16073833 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/actions.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/actions.jst.eco
@@ -4,6 +4,5 @@
   <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>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index bf3f6fb48..b0061d684 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
@@ -1,7 +1,7 @@
 <form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
   <div class="bubble-grid horizontal">
     <div class="vertical center edit-controls">
-      <div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
+      <div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('imageUrl') %>)"></div>
       <div class="dark pop-select zIndex-7 edit-control-item">
         <div class="pop-selected u-clickable centered">
           <div class="gray <%- @type %> channel icon"></div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/widgets.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/widgets.jst.eco
deleted file mode 100644
index bcac0e912..000000000
--- a/app/assets/javascripts/app/views/ticket_zoom/widgets.jst.eco
+++ /dev/null
@@ -1,3 +0,0 @@
-  <div class="ticket_info"></div>
-  <div class="customer_info"></div>
-  <div class="link_info"></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/organization.jst.eco b/app/assets/javascripts/app/views/widget/organization.jst.eco
index ff5937b8d..8db62d4c8 100644
--- a/app/assets/javascripts/app/views/widget/organization.jst.eco
+++ b/app/assets/javascripts/app/views/widget/organization.jst.eco
@@ -1,11 +1,4 @@
 <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() %>
 
@@ -22,7 +15,7 @@
   <% end %>
 
   <% if @organization.members: %>
-    <h4><%- @T('Member') %></h4>
+    <h3><%- @T('Member') %></h3>
     <ul>
     <% for user in @organization.members: %>
       <li><a href="<%- user.uiUrl() %>" class="user-popover" data-id="<%- user.id %>"><%= user.displayName() %></a></li>
@@ -30,6 +23,4 @@
     </ul>
   <% end %>
 
-  </div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/user.jst.eco b/app/assets/javascripts/app/views/widget/user.jst.eco
index f9ba2c070..ad23a3343 100644
--- a/app/assets/javascripts/app/views/widget/user.jst.eco
+++ b/app/assets/javascripts/app/views/widget/user.jst.eco
@@ -1,7 +1,7 @@
 <div class="user-info">
 
 <% if @user.imageUrl: %>
-  <img class="thumbnail" src="<%- @user.imageUrl %>" alt="">
+  <div class="big avatar" style="background-image: url(<%- @user.imageUrl %>)"></div>
 <% end %>
   <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div>
 <% for row in @userData: %>