Upgrade to bootstrap 2.2.1 (moved to new bootstrap classes).

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

@@ -297,7 +297,7 @@ class App.ControllerForm extends App.Controller
             params:
               form_id: @form_id
           )
-        @delay( u, 200 )
+        @delay( u, 100 )
 
     # tag
     else if attribute.tag is 'tag'
@@ -326,7 +326,7 @@ class App.ControllerForm extends App.Controller
         )
         siteUpdate(true)
 
-      @delay( a, 600 )
+      @delay( a, 100 )
 
 
     # autocompletion
@@ -369,7 +369,7 @@ class App.ControllerForm extends App.Controller
 #            @log 'selected', event, ui
             b(event, ui.item.id)
         )
-      @delay( a, 600 )
+      @delay( a, 100 )
 
     # input
     else
@@ -403,7 +403,7 @@ class App.ControllerForm extends App.Controller
                   item = $( ui.formGenItem(attribute, classname, attributes_clean) )
                   ui.log item, classname
                 )
-              @delay(b, 800)
+              @delay(b, 100)
 #            if attribute.onchange[]
 
     ui = @

app/assets/javascripts/app/controllers/_dashboard/ticket.js.coffee

@@ -153,8 +153,8 @@ class Settings extends App.ControllerModal
     @configure_attributes_article = [
 #      { name: 'from',                     display: 'From',     tag: 'input',    type: 'text', limit: 100, null: false, class: 'span8',  },
 #      { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
-#      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: 'keepleft' },
+#      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: 'pull-left' },
-#      { name: 'internal',                 display: 'Visability',  tag: 'radio',  default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: 'keepleft' },
+#      { name: 'internal',                 display: 'Visability',  tag: 'radio',  default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: 'pull-left' },
       {
         name:     'per_page',
         display:  'Items per page',
@@ -169,7 +169,7 @@ class Settings extends App.ControllerModal
           20: 20,
         },
         class: 'medium',
-#        item_class: 'keepleft',
+#        item_class: 'pull-left',
       },
       { 
         name:    'attributes',
@@ -193,7 +193,7 @@ class Settings extends App.ControllerModal
           close_time:             'Close Time',
         },
         class:      'medium',
-#        item_class: 'keepleft',
+#        item_class: 'pull-left',
       },
       { 
         name:    'order_by',

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

@@ -244,10 +244,10 @@ class Index extends App.Controller
 
   bulk_form: =>
     @configure_attributes_ticket = [
-      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'keepleft' },
+      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'pull-left' },
-      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'keepleft' },
+      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @bulk, translate: true, nulloption: true, default: '', class: 'span2', item_class: 'pull-left' },
-      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @bulk, nulloption: true, class: 'span2', item_class: 'keepleft'  },
+      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @bulk, nulloption: true, class: 'span2', item_class: 'pull-left'  },
-      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @bulk, nulloption: true, class: 'span2', item_class: 'keepleft' },
+      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @bulk, nulloption: true, class: 'span2', item_class: 'pull-left' },
     ]
 
     # render init page
@@ -348,8 +348,8 @@ class Settings extends App.ControllerModal
     @configure_attributes_article = [
 #      { name: 'from',                     display: 'From',     tag: 'input',    type: 'text', limit: 100, null: false, class: 'span8',  },
 #      { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
-#      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: 'keepleft' },
+#      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: 'pull-left' },
-#      { name: 'internal',                 display: 'Visability',  tag: 'radio',  default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: 'keepleft' },
+#      { name: 'internal',                 display: 'Visability',  tag: 'radio',  default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: 'pull-left' },
       {
         name:     'per_page'
         display:  'Items per page'
@@ -364,7 +364,7 @@ class Settings extends App.ControllerModal
           30: 30
           35: 35
         class: 'medium'
-#        item_class: 'keepleft'
+#        item_class: 'pull-left'
       },
       { 
         name:    'attributes'
@@ -447,7 +447,7 @@ class Settings extends App.ControllerModal
 #        relation: 'TicketArticleType',
 #        default: '9',
 #        class: 'medium', 
-#        item_class: 'keepleft',
+#        item_class: 'pull-left',
 #      },
     ]
 

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

@@ -89,15 +89,15 @@ class Index extends App.Controller
     # set title
     @title 'Ticket Zoom ' + @ticket.number
     @configure_attributes_ticket = [
-      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'keepleft' },
+      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
-      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'keepleft' },
+      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
-      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @edit_form, class: 'span2', item_class: 'keepleft'  },
+      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @edit_form, class: 'span2', item_class: 'pull-left'  },
-      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @edit_form, nulloption: true, class: 'span2', item_class: 'keepleft' },
+      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @edit_form, nulloption: true, class: 'span2', item_class: 'pull-left' },
     ]
     if @isRole('Customer')
       @configure_attributes_ticket = [
-        { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'keepleft' },
+        { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
-        { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'keepleft' },
+        { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
       ]
 
     @configure_attributes_article = [

app/assets/javascripts/app/lib/base/fileuploader.js

@@ -485,8 +485,8 @@ qq.FileUploader = function(o){
         listElement: null,
                 
         template: '<div class="qq-uploader">' + 
-                '<div class="qq-upload-icon qq-upload-drop-area btn keepright"><i class="icon-attachment"></i> Drop to attach files</div>' +
+                '<div class="qq-upload-icon qq-upload-drop-area btn pull-right"><i class="icon-attachment"></i> Drop to attach files</div>' +
-                '<div class="qq-upload-icon qq-upload-button btn keepright"><i class="icon-attachment"></i></div>' +
+                '<div class="qq-upload-icon qq-upload-button btn pull-right"><i class="icon-attachment"></i></div>' +
                 '<ul class="qq-upload-list"></ul>' + 
              '</div>',
 

app/assets/javascripts/app/lib/bootstrap/bootstrap-button.js

@@ -0,0 +1,94 @@
+/* ============================================================
+ * bootstrap-button.js v2.2.1
+ * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Button = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.button.defaults, options)
+  }
+
+  Button.prototype.setState = function (state) {
+    var d = 'disabled'
+      , $el = this.$element
+      , data = $el.data()
+      , val = $el.is('input') ? 'val' : 'html'
+
+    state = state + 'Text'
+    data.resetText || $el.data('resetText', $el[val]())
+
+    $el[val](data[state] || this.options[state])
+
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d)
+    }, 0)
+  }
+
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
+
+    $parent && $parent
+      .find('.active')
+      .removeClass('active')
+
+    this.$element.toggleClass('active')
+  }
+
+
+ /* BUTTON PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.button = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('button')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('button', (data = new Button(this, options)))
+      if (option == 'toggle') data.toggle()
+      else if (option) data.setState(option)
+    })
+  }
+
+  $.fn.button.defaults = {
+    loadingText: 'loading...'
+  }
+
+  $.fn.button.Constructor = Button
+
+
+ /* BUTTON DATA-API
+  * =============== */
+
+  $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) {
+    var $btn = $(e.target)
+    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
+    $btn.button('toggle')
+  })
+
+}(window.jQuery);

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

@@ -1,5 +1,15 @@
 <div class="page-header">
-  <h1><%- @T( 'New Ticket' ) %> <small></small></h1>
+  <div class="row">
+    <div class="span9">
+      <h1 class="pull-left"><%- @T( 'New Ticket' ) %> <small></small></h1>
+    </div>
+    <div class="span3">
+      <div class="btn-group pull-right" data-toggle="buttons-radio">
+        <button type="button" class="btn article-type-phone active"><i class="icon-headphones"></i></button>
+        <button type="button" class="btn article-type-email"><i class="icon-envelope"></i></button>
+      </div>
+    </div>
+  </div>
 </div>
 <form class="form-horizontal">
   <div class="row">

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

@@ -4,7 +4,7 @@
       <h1><%- @T( @overview.meta.name ) %> <% if @edit: %><small><a href="#" data-type="settings" class="icon-edit"></a></small><% end %></h1>
     </div>
     <div class="span3">
-      <div class="pagination pagination-small keepright">
+      <div class="pagination pagination-small pagination-right">
         <ul>
           <% for item in @view_modes: %>
             <li class="<%= item.class %>">
@@ -17,7 +17,7 @@
   </div>
 </div>
 <!--
-  <div class="pagination keepleft">
+  <div class="pagination pull-left">
     <ul>
       <% if @start_page != 1: %>
         <li><a href="#" data-id="<%= @start_page - 1 %>" data-type="page">«</a></li>

app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco

@@ -1,4 +1,4 @@
-<form class="form-stacked keepleft update-box bulk-action-form">
+<form class="form-stacked pull-left update-box bulk-action-form">
   <div id="form-ticket-bulk"></div>
   <input type="submit" class="btn primary submit" value="update">
 </form>

app/assets/javascripts/app/views/agent_ticket_view/detail.jst.eco

@@ -8,7 +8,7 @@
 <% for ticket in @objects: %>
   <tr data-id="<%= ticket.id %>">
     <td class="" style="width: 10px;">
-      <input type="checkbox" value="<%= ticket.id %>" name="bulk" class="keepleft"/>
+      <input type="checkbox" value="<%= ticket.id %>" name="bulk" class="pull-left"/>
     </td>
     <td class="span1">
       <img class="thumbnail user-data" data-id="<%= ticket.customer_id %>" src="<%= ticket.customer.image %>" alt="">

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

@@ -5,7 +5,7 @@
     </div>
     <div class="span2">
       <% if @C( 'LastOverview' ) && @nav: %>
-      <div class="pagination pagination-small">
+      <div class="pagination pagination-small pagination-right">
         <span class="count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
         <% base_url ="#ticket_view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
         <ul>
@@ -78,7 +78,7 @@
         <img class="thumbnail user-data" data-id="<%= @S('id') %>"" src="<%- @S('image') %>" alt="">
       </div>
       <div class="span8 well-muted article-message">
-        <form class="form-stacked keepleft">
+        <form class="form-stacked pull-left">
           <div id="form-ticket-update"></div>
           <div id="form-article-update"></div>
           <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>

app/assets/javascripts/application.js

@@ -21,6 +21,7 @@
 //= require ./app/lib/bootstrap/bootstrap-modal.js
 //= require ./app/lib/bootstrap/bootstrap-tab.js
 //= require ./app/lib/bootstrap/bootstrap-transition.js
+//= require ./app/lib/bootstrap/bootstrap-button.js
 
 //= require_tree ./app/lib/base
 

app/assets/stylesheets/zzz.css

@@ -198,14 +198,6 @@ footer {
   width: 160px;
 }
 
-.keepleft {
-  float: left;
-}
-
-.keepright {
-  float: right;
-}
-
 .can-move {
   cursor: move;
 }