Bootstrap tweaks

app/assets/javascripts/application.js

@@ -3,4 +3,5 @@
 //= require twitter/bootstrap
 //= require jquery.ui.autocomplete
 //= require jquery.bgiframe.min
+//= require bootstrap.filestyle
 //= require_tree .

app/assets/javascripts/bootstrap.js.coffee

@@ -1,4 +1,10 @@
 jQuery ->
   $("a[rel=popover]").popover()
   $(".tooltip").tooltip()
-  $("a[rel=tooltip]").tooltip()
+  $("a[rel=tooltip]").tooltip()
+
+$(document).ready ->
+  $(":file").filestyle
+    icon: true
+    classIcon: "icon-file"
+    buttonText: "Choose file..."

app/assets/stylesheets/bootstrap_and_overrides.css

@@ -4,4 +4,19 @@
   Use Font Awesome icons (default)
   To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
   =require twitter-bootstrap-static/fontawesome
-  */
+  */
+
+.form-horizontal .control-label {
+  float: left;
+  width: 275px;
+  padding-top: 5px;
+  text-align: right;
+}
+
+.form-horizontal .controls {
+  margin-left: 300px;
+}
+
+.form-horizontal .form-actions {
+    padding-left: 300px;
+}

vendor/assets/javascripts/bootstrap.filestyle.js

@@ -0,0 +1,60 @@
+/*! Bootstrap Filestyle - v0.1.0 - 2012-10-17
+* http://markusslima.github.com/bootstrap-filestyle/
+* Copyright (c) 2012 Markus Lima; Licensed MIT */
+
+(function ($) {
+    "use strict";
+    // Register plugin
+    $.fn.filestyle = function (options) {
+    if (typeof options === 'object' || typeof options === 'undefined'){
+      var defaults = {
+          buttonText : 'Choose file',
+          textField : true,
+          icon : false,
+          classButton : '',
+          classText : '',
+          classIcon : 'icon-folder-open'
+        };
+
+      options = $.extend(defaults, options);
+
+      return this.each(function () {
+        var $this = $(this);
+
+        $this.data('filestyle', true);
+
+        $this
+          .css({'position':'fixed','top':'-100px','left':'-100px'})
+          .parent()
+          .addClass("form-search")
+          .append(
+            (options.textField ? '<input type="text" class="'+options.classText+'" disabled size="40" /> ' : '')+
+            '<button type="button" class="btn '+options.classButton+'" >'+
+              (options.icon ? '<i class="'+options.classIcon+'"></i> ' : '')+
+              options.buttonText+
+            '</button>'
+          );
+
+        $this.change(function () {
+          $this.parent().children(':text').val($(this).val());
+        });
+
+
+        // Add event click
+        $this.parent().children(':button').click(function () {
+          $this.click();
+        });
+      });
+    } else {
+      return this.each(function () {
+        var $this = $(this);
+        if ($this.data('filestyle') === true && options === 'clear') {
+          $this.parent().children(':text').val('');
+          $this.val('');
+        } else {
+          window.console.error('Method filestyle not defined!');
+        }
+      });
+    }
+    };
+}(jQuery));