Merge pull request #8 from agpchil/custom_btn_css

Allow custom css for action buttons

README.md

@@ -74,6 +74,8 @@ Create config variables in your app's /config/initializers/ct_table_for.rb
 CtTableFor.setup do |config|
   config.table_for_wrapper_default_class = "table-responsive"
   config.table_for_default_class = "table table-striped table-bordered table-condensed table-hover"
+  config.table_for_default_action_base_class = "btn btn-sm"
+  config.table_for_action_class = {show: "btn-primary", edit: "btn-success", destroy: "btn-danger", other: "btn-default"}
   config.table_for_breakpoint = "992px" # or could be done by sass
   config.table_for_icon_font = "fa"
   config.table_for_action_icons = {show: "eye", edit: "pencil", destroy: "trash"}

app/helpers/ct_table_for/application_helper.rb

@@ -18,6 +18,10 @@ module ApplicationHelper
     #   id: "my-id",                         // String: adds custom id to <table> element
     #   class: "my-custom-css",              // String: add custom class to <table> element
     #   tr_class: "my-custom-css"            // String: add custom class to <tr> element
+    #   btn_class: {                         // Hash: add custom class to action buttons
+    #     show: "my-custom-css",
+    #     edit: "my-custom-css"
+    #   }
     #  clickable: true || Array              // Boolean or Array of nested resources for polymorphic_url
     #}
     ####################################################################################
@@ -170,23 +174,24 @@ def table_for_actions(record, options: {} )
         buttons.each do |action|
           return "" if defined?(CanCanCan) and cannot?(action, record)
           label = I18n.t(action.to_sym, scope: [:table_for, :buttons]).capitalize
+          custom_action_class = %Q{#{CtTableFor.table_for_default_action_base_class} #{options.dig(:btn_class, action.to_sym) || CtTableFor.table_for_action_class[action.to_sym]}}
           case action.to_sym
           when :show
             if options[:actions][:icons] != false
               label = %Q{<i class="#{CtTableFor.table_for_icon_font_base_class} #{CtTableFor.table_for_icon_font_base_class}-#{CtTableFor.table_for_action_icons[:show]}"></i>}
             end
-            html << link_to(label.html_safe, polymorphic_path(nesting), class: "btn btn-primary btn-sm")
+            html << link_to(label.html_safe, polymorphic_path(nesting), class: custom_action_class)
           when :edit
             if options[:actions][:icons] != false
               label = %Q{<i class="#{CtTableFor.table_for_icon_font_base_class} #{CtTableFor.table_for_icon_font_base_class}-#{CtTableFor.table_for_action_icons[:edit]}"></i>}
             end
-            html << link_to(label.html_safe, edit_polymorphic_path(nesting), class: "btn btn-success btn-sm")
+            html << link_to(label.html_safe, edit_polymorphic_path(nesting), class: custom_action_class)
           when :destroy
             if options[:actions][:icons] != false
               label = %Q{<i class="#{CtTableFor.table_for_icon_font_base_class} #{CtTableFor.table_for_icon_font_base_class}-#{CtTableFor.table_for_action_icons[:destroy]}"></i>}
             end
             html << link_to(label.html_safe, polymorphic_path(nesting),
-                    method: :delete, class: "btn btn-danger btn-sm",
+                    method: :delete, class: custom_action_class,
                     data: { confirm: I18n.t('table_for.messages.are_you_sure').capitalize })
           else
             # TODO:

docs/index.html

@@ -152,15 +152,23 @@ <h4>Atribut amb parametre <code>:l</code></h4>
     <hr>
 
     <h4>CSS class i id</h4>
-    <p> Al hash d'opcions, es pot passar <code>id</code>, <code>class</code> o <code>tr_class</code> amb un string per afegir una clase, o id personalitzada.</p>
-    <p> <code>id</code> i <code>class</code> s'aplicarà a l'element <code>&#x3C;table&#x3E;</code> i <code>tr_class</code> als <code>&#x3C;tr&#x3E;</code>.</p>
-    <p> Per exemple, <code>&#x3C;%= table_for User, @users, options: {id: "my-id", class: "my-class", tr_class: "my-tr-class"} %&#x3E;</code></p>
+    <p> Al hash d'opcions, es pot passar: </p>
+    <p><ul>
+      <li><code>id</code> (String): s'aplicarà a l'element <code>&#x3C;table&#x3E;</code>.</li>
+      <li><code>class</code> (String): s'aplicarà a l'element <code>&#x3C;table&#x3E;</code>.</li>
+      <li><code>tr_class</code> (String): s'aplicarà a l'element <code>&#x3C;tr&#x3E;</code>.</li>
+      <li><code>btn_class</code> (Hash): s'aplicarà als elements <code>&#x3C;a&#x3E;</code> de les accions juntament amb el valor per defecte de <code>table_for_default_action_base_class</code>.</li>
+      </ul>
+    </p>
+    <p> Per exemple, <code>&#x3C;%= table_for User, @users, options: {id: "my-id", class: "my-class", tr_class: "my-tr-class", btn_class: { show: "btn-primary" } %&#x3E;</code></p>
 <div class="row">
   <div class="col-md-6">
 <pre>
 &#x3C;table id=&#x22;my-id&#x22; class=&#x22;my-class&#x22;&#x3E;
   &#x3C;tbody&#x3E;
-    &#x3C;tr class=&#x22;my-tr-class&#x22;&#x3E;&#x3C;/tr&#x3E;
+    &#x3C;tr class=&#x22;my-tr-class&#x22;&#x3E;
+    &#x3C;td&#x3E;&#x3C;a class="btn btn-primary"...&#x3E;...&#x3C;/a&#x3E;&#x3C;/td&#x3E;
+    &#x3C;/tr&#x3E;
   &#x3C;/tbody&#x3E;
 &#x3C;/table&#x3E;
 </pre>

lib/ct_table_for/engine.rb

@@ -2,6 +2,8 @@ module CtTableFor
   class << self
     mattr_accessor :table_for_default_class
     mattr_accessor :table_for_wrapper_default_class
+    mattr_accessor :table_for_default_action_base_class
+    mattr_accessor :table_for_action_class
     mattr_accessor :table_for_breakpoint
     mattr_accessor :table_for_icon_font_base_class
     mattr_accessor :table_for_action_icons
@@ -13,6 +15,8 @@ class << self
 
     self.table_for_wrapper_default_class = "table-responsive"
     self.table_for_default_class = "table table-striped table-bordered table-condensed table-hover"
+    self.table_for_default_action_base_class = "btn btn-sm"
+    self.table_for_action_class = {show: "btn-primary", edit: "btn-success", destroy: "btn-danger", other: "btn-default"}
     self.table_for_breakpoint = "992px"
     self.table_for_icon_font_base_class = "fa"
     self.table_for_action_icons = {show: "eye", edit: "pencil", destroy: "trash", custom: "gear"}