Moved to generic actions.

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

@@ -464,6 +464,7 @@ class App.ActionRow extends App.Controller
   render: ->
     @html App.view('generic/actions')(
       items: @items
+      type:  @type
     )
 
     for item in @items
@@ -501,15 +502,11 @@ class App.Sidebar extends App.Controller
     # add item acctions
     for item in @items
       if item.actions
-        for action in item.actions
-          do (action) =>
-            @el.find('.sidebar[data-tab="' + item.name + '"] .tabsSidebar-tabActions .tabsSidebar-tabAction[data-name="' + action.name + '"]').bind(
-              'click'
-              (e) =>
-                e.stopPropagation()
-                e.preventDefault()
-                action.callback(e)
-            )
+        new App.ActionRow(
+          el:    @el.find('.sidebar[data-tab="' + item.name + '"] .js-actions')
+          items: item.actions
+          type:  'small'
+        )
 
   toggleSidebar: ->
     @el.parent().find('.tabsSidebar-sidebarSpacer').toggleClass('is-closed')

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

@@ -112,7 +112,7 @@ class App.OrganizationProfile extends App.Controller
     ]
 
     new App.ActionRow(
-      el:    @el.find('.action')
+      el:    @el.find('.js-action')
       items: actions
     )
 

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

@@ -1,7 +1,7 @@
 class App.TicketZoom extends App.Controller
   elements:
     '.main': 'main'
-  
+
   events:
     'click .js-submit': 'submit'
 
@@ -270,34 +270,38 @@ class App.TicketZoom extends App.Controller
             object:       @ticket
             links:        @links
           )
-          el.append('<div class="action"></div>')
-          showHistory = =>
-            new App.TicketHistory( ticket_id: @ticket.id )
-          showMerge = =>
-            new App.TicketMerge( ticket: @ticket, task_key: @task_key )
-          actions = [
-            {
-              name:     'history'
-              title:    'History'
-              callback: showHistory
-            },
-            {
-              name:     'merge'
-              title:    'Merge'
-              callback: showMerge
-            },
-          ]
-          new App.ActionRow(
-            el:    @el.find('.action')
-            items: actions
-          )
 
+      showTicketHistory = =>
+        new App.TicketHistory( ticket_id: @ticket.id )
+      showTicketMerge = =>
+        new App.TicketMerge( ticket: @ticket, task_key: @task_key )
+      changeCustomer = (e, el) =>
+        new App.TicketCustomer(
+          ticket: @ticket
+        )
       items = [
         {
           head: 'Ticket Settings'
           name: 'ticket'
           icon: 'message'
           callback: editTicket
+          actions: [
+            {
+              name:     'ticket-history'
+              title:    'History'
+              callback: showTicketHistory
+            },
+            {
+              name:     'ticket-merge'
+              title:    'Merge'
+              callback: showTicketMerge
+            },
+            {
+              title:    'Change Customer'
+              name:     'customer-change'
+              callback: changeCustomer
+            },
+          ]
         }
       ]
       if !@isRole('Customer')
@@ -311,10 +315,6 @@ class App.TicketZoom extends App.Controller
               object: 'User'
               objects: 'Users'
           )
-        changeCustomer = (e, el) =>
-          new App.TicketCustomer(
-            ticket: @ticket
-          )
         showCustomer = (el) =>
           new App.WidgetUser(
             el:       el
@@ -326,13 +326,13 @@ class App.TicketZoom extends App.Controller
           icon: 'person'
           actions: [
             {
-              name:  'Change Customer'
-              class: 'glyphicon glyphicon-transfer'
+              title:    'Change Customer'
+              name:     'customer-change'
               callback: changeCustomer
             },
             {
-              name:  'Edit Customer'
-              class: 'glyphicon glyphicon-edit'
+              title:    'Edit Customer'
+              name:     'customer-edit'
               callback: editCustomer
             },
           ]
@@ -359,8 +359,8 @@ class App.TicketZoom extends App.Controller
             icon: 'group'
             actions: [
               {
-                name:     'Edit Organization'
-                class:    'glyphicon glyphicon-edit'
+                title:    'Edit Organization'
+                name:     'organization-edit'
                 callback: editOrganization
               },
             ]
@@ -394,7 +394,7 @@ class App.TicketZoom extends App.Controller
     @autosaveStart()
 
     @scrollToBottom()
-  
+
     @bindScrollPageHeader()
 
   scrollToBottom: =>

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

@@ -115,7 +115,7 @@ class App.UserProfile extends App.Controller
     ]
 
     new App.ActionRow(
-      el:    @el.find('.action')
+      el:    @el.find('.js-action')
       items: actions
     )
 

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

@@ -1,8 +1,12 @@
-<div class="dropdown dropup dropdown--actions">
-  <button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
-  <ul class="dropdown-menu">
+<div class="dropdown dropdown--actions">
+  <div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
+    <div class="light cog icon"></div>
+    <% if @type isnt 'small': %><label><%- @T('Action') %></label><% end %>
+    <span class="select-arrow icon"></span>
+  </div>
+  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
     <% for item in @items: %>
-    <li><a href="#" data-type="<%= item.name %>"><%- @T( item.title ) %></a></li>
+      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-type="<%= item.name %>"><%- @T( item.title ) %></a>
     <% end %>
   </ul>
 </div>

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

@@ -2,16 +2,12 @@
 <div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>">
   <div class="horizontal center">
     <h2 class="flex u-textTruncate"><%- @T( item.head ) %></h2>
+    <div class="js-actions"></div>
+    <!--
     <div class="tabsSidebar-close centered u-clickable">
-      <div class="tabsSidebar-tabActions">
-      <% if item.actions: %>
-        <% for action in item.actions: %>
-          <div class="tabsSidebar-tabAction <%- action.class %>" data-name="<%- action.name %>"></div>
-        <% end %>
-      <% end %>
-      </div>
       <div class="arrow-right icon"></div>
     </div>
+    -->
   </div>
   <hr>
 

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

@@ -2,7 +2,7 @@
 
   <div class="profile-window">
     <div class="profile-section vertical centered">
-      <div class="align-right profile-action dropdown dropdown--actions action"></div>
+      <div class="align-right profile-action js-action"></div>
       <h1><%= @organization.displayName() %></h1>
     </div>
     <div class="profile-section">

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

@@ -2,7 +2,7 @@
 
   <div class="profile-window">
     <div class="profile-section vertical centered">
-      <div class="align-right profile-action dropdown dropdown--actions action"></div>
+      <div class="align-right profile-action js-action"></div>
       <%- @user.avatar("80") %>
       <h1><%= @user.displayName() %></h1>
       <% if @user.organization: %>