Introducing custom and colored fonticons for CustomButtons

app/assets/stylesheets/icon_customizations.scss

@@ -60,67 +60,3 @@ opacity:0.6;
 }
 
 /*end icon class customizations*/
-
-/* custom button customizations*/
-
-/* custom button icons */
-.miq-custom-button-1 {
-  @extend .ff, .ff-hexagon;
-  color: #2d7623; // pf-green-500
-}
-.miq-custom-button-2 {
-  @extend .ff, .ff-wavy-lines;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-3 {
-  @extend .ff, .ff-diamond;
-  color: #f5c12e; //pf-gold-300
-}
-.miq-custom-button-4 {
-  @extend .fa, .fa-star;
-  color: #2d7623; //pf-green-500
-}
-.miq-custom-button-5 {
-  @extend .fa, .fa-circle;
-  color: #ec7a08; //pf-orange-400
-}
-.miq-custom-button-6 {
-  @extend .ff, .ff-database-squeezed;
-}
-.miq-custom-button-7 {
-  @extend .ff, .ff-broom;
-}
-.miq-custom-button-8 {
-  @extend .ff, .ff-triangle;
-  color: #cc0000; //pf-red-100
-}
-.miq-custom-button-9 {
-  @extend .fa, .fa-angle-double-down;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-10 {
-  @extend .fa, .fa-angle-double-up;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-11 {
-  @extend .fa, .fa-angle-double-left;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-12 {
-  @extend .fa, .fa-angle-double-right;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-13 {
-  @extend .ff, .ff-synchronize;
-  color: #00659c; //pf-blue-500
-}
-.miq-custom-button-14 {
-  @extend .fa, .fa-refresh;
-  color: #2d7623; //pf-green-500
-}
-.miq-custom-button-15 {
-  @extend .fa, .fa-power-off;
-  color: #cc0000; //pf-red-100
-}
-
-/* end custom button icons */

app/controllers/application_controller/buttons.rb

@@ -109,7 +109,8 @@ def automate_button_field_changed
       @edit[:new][:display_for] = params[:display_for] if params[:display_for]
       @edit[:new][:submit_how] = params[:submit_how] if params[:submit_how]
       @edit[:new][:description] = params[:description] if params[:description]
-      @edit[:new][:button_image] = params[:button_image].to_i if params[:button_image]
+      @edit[:new][:button_icon] = params[:button_icon] if params[:button_icon]
+      @edit[:new][:button_color] = params[:button_color] if params[:button_color]
       @edit[:new][:dialog_id] = params[:dialog_id] if params[:dialog_id]
       visibility_box_edit
     end
@@ -353,7 +354,7 @@ def group_button_add_save(typ)
       render_flash(_("Description is required"), :error)
       return
     end
-    if @edit[:new][:button_image].blank? || @edit[:new][:button_image] == 0
+    if @edit[:new][:button_icon].blank?
       render_flash(_("Button Image must be selected"), :error)
       return
     end
@@ -689,9 +690,9 @@ def group_set_form_vars
     @edit[:new][:name] = @custom_button_set[:name].split("|").first unless @custom_button_set[:name].blank?
     @edit[:new][:applies_to_class] = @custom_button_set[:set_data] && @custom_button_set[:set_data][:applies_to_class] ? @custom_button_set[:set_data][:applies_to_class] : @sb[:applies_to_class]
     @edit[:new][:description] = @custom_button_set.description
-    @edit[:new][:button_image] = @custom_button_set[:set_data] && @custom_button_set[:set_data][:button_image] ? @custom_button_set[:set_data][:button_image] : ""
+    @edit[:new][:button_icon] = @custom_button_set[:set_data] && @custom_button_set[:set_data][:button_icon] ? @custom_button_set[:set_data][:button_icon] : ""
+    @edit[:new][:button_color] = @custom_button_set[:set_data] && @custom_button_set[:set_data][:button_color] ? @custom_button_set[:set_data][:button_color] : ""
     @edit[:new][:display] = @custom_button_set[:set_data] && @custom_button_set[:set_data].key?(:display) ? @custom_button_set[:set_data][:display] : true
-    @edit[:new][:button_images] = build_button_image_options
     @edit[:new][:fields] = []
     button_order = @custom_button_set[:set_data] && @custom_button_set[:set_data][:button_order] ? @custom_button_set[:set_data][:button_order] : nil
     if button_order     # show assigned buttons in order they were saved
@@ -726,8 +727,8 @@ def group_get_form_vars
       @edit[:new][:name] = params[:name] if params[:name]
       @edit[:new][:description] = params[:description] if params[:description]
       @edit[:new][:display] = params[:display] == "1" if params[:display]
-      @edit[:new][:button_image] = params[:button_image].to_i if params[:button_image]
-      @edit[:new][:button_images] = build_button_image_options
+      @edit[:new][:button_icon] = params[:button_icon] if params[:button_icon]
+      @edit[:new][:button_color] = params[:button_color] if params[:button_color]
     end
   end
 
@@ -788,7 +789,7 @@ def ab_button_name(button_hash = @edit[:new])
   def button_valid?(button_hash = @edit[:new])
     add_flash(_("Button Text is required"), :error) if button_hash[:name].strip.blank?
 
-    if button_hash[:button_image].blank? || button_hash[:button_image].to_i.zero?
+    if button_hash[:button_icon].blank?
       add_flash(_("Button Image must be selected"), :error)
     end
 
@@ -825,10 +826,8 @@ def button_set_record_vars(button)
     #   button[:options][:target_attr_name] = @edit[:new][:target_attr_name]
     button.uri_path, button.uri_attributes, button.uri_message = CustomButton.parse_uri(@edit[:uri])
     button.uri_attributes["request"] = @edit[:new][:object_request]
-    if !@edit[:new][:button_image].blank? && @edit[:new][:button_image] != ""
-      button[:options][:button_image] ||= {}
-      button[:options][:button_image] = @edit[:new][:button_image]
-    end
+    button.options[:button_icon] = @edit[:new][:button_icon] unless @edit[:new][:button_icon].blank?
+    button.options[:button_color] = @edit[:new][:button_color] unless @edit[:new][:button_color].blank?
 
     %i(display open_url display_for submit_how).each do |key|
       button[:options][key] = @edit[:new][key]
@@ -861,10 +860,6 @@ def button_set_resource_action(button)
     end
   end
 
-  def build_button_image_options
-    (1..15).collect { |i| ["Button Image #{i}", i, {"data-icon" => "miq-custom-button-#{i}"}] }
-  end
-
   # Set form variables for button add/edit
   def button_set_form_vars
     @sb[:buttons_node] = true
@@ -917,7 +912,8 @@ def button_set_form_vars
       :target_class   => @resolve[:target_class],
       :name           => @custom_button.name,
       :description    => @custom_button.description,
-      :button_image   => @custom_button.options.try(:[], :button_image).to_s,
+      :button_icon    => @custom_button.options.try(:[], :button_icon),
+      :button_color   => @custom_button.options.try(:[], :button_color),
       :display        => @custom_button.options.try(:[], :display).nil? ? true : @custom_button.options[:display],
       :open_url       => @custom_button.options.try(:[], :open_url) ? @custom_button.options[:open_url] : false,
       :display_for    => @custom_button.options.try(:[], :display_for) ? @custom_button.options[:display_for] : 'single',
@@ -926,8 +922,6 @@ def button_set_form_vars
     )
     @edit[:current] = copy_hash(@edit[:new])
 
-    @edit[:new][:button_images] = @edit[:current][:button_images] = build_button_image_options
-
     @edit[:visibility_types] = [["<To All>", "all"], ["<By Role>", "role"]]
     # Visibility Box
     if @custom_button.visibility && @custom_button.visibility[:roles]
@@ -961,10 +955,8 @@ def group_set_record_vars(group)
     group.name = "#{@edit[:new][:name]}|#{@edit[:new][:applies_to_class]}|#{to_cid(applies_to_id)}" unless @edit[:new][:name].blank?
     group.set_data ||= {}
     group.set_data[:button_order] = @edit[:new][:fields].collect { |field| field[1] }
-    if !@edit[:new][:button_image].blank? && @edit[:new][:button_image] != ""
-      group.set_data[:button_image] ||= {}
-      group.set_data[:button_image] = @edit[:new][:button_image]
-    end
+    group.set_data[:button_icon] = @edit[:new][:button_icon] unless @edit[:new][:button_icon].blank?
+    group.set_data[:button_color] = @edit[:new][:button_color] unless @edit[:new][:button_color].blank?
     group.set_data[:display] = @edit[:new][:display]
     group.set_data[:applies_to_class] ||= {}
     group.set_data[:applies_to_class] = @edit[:new][:applies_to_class]
@@ -1002,7 +994,8 @@ def buttons_get_node_info(node)
               group[:id] = g.id
               group[:name] = g.name
               group[:description] = g.description
-              group[:button_image] = g.kind_of?(CustomButton) ? g.options[:button_image] : g.set_data[:button_image]
+              group[:button_icon] = g.kind_of?(CustomButton) ? g.options[:button_icon] : g.set_data[:button_icon]
+              group[:button_color] = g.kind_of?(CustomButton) ? g.options[:button_color] : g.set_data[:button_color]
               group[:typ] = g.kind_of?(CustomButton) ? "CustomButton" : "CustomButtonSet"
               @sb[:button_groups].push(group) unless @sb[:button_groups].include?(group)
             end
@@ -1025,7 +1018,8 @@ def buttons_get_node_info(node)
               button[:name] = b.name
               button[:id] = b.id
               button[:description] = b.description
-              button[:button_image] = b.options[:button_image]
+              button[:button_icon] = b.options[:button_icon]
+              button[:button_color] = b.options[:button_color]
               @sb[:buttons].push(button) unless @sb[:buttons].include?(button)
             end
           end

app/controllers/miq_ae_customization_controller/custom_buttons.rb

@@ -47,7 +47,8 @@ def ab_get_node_info(node)
           group[:id] = aset.id
           group[:name] = aset.name
           group[:description] = aset.description
-          group[:button_image] = aset.set_data[:button_image]
+          group[:button_icon] = aset.set_data[:button_icon]
+          group[:button_color] = aset.set_data[:button_color]
           @sb[:button_groups].push(group) unless @sb[:button_groups].include?(group)
         end
       end
@@ -63,7 +64,8 @@ def ab_get_node_info(node)
             button[:name] = b.name
             button[:id] = b.id
             button[:description] = b.description
-            button[:button_image] = b.options[:button_image]
+            button[:button_icon] = b.options[:button_icon]
+            button[:button_color] = b.options[:button_color]
             @sb[:buttons].push(button)
           end
         end
@@ -119,7 +121,8 @@ def ab_get_node_info(node)
               button[:name] = b.name
               button[:id] = b.id
               button[:description] = b.description
-              button[:button_image] = b.options[:button_image]
+              button[:button_icon] = b.options[:button_icon]
+              button[:button_color] = b.options[:button_color]
               @sb[:buttons].push(button) unless @sb[:buttons].include?(button)
             end
           end

app/decorators/custom_button_decorator.rb

@@ -1,5 +1,5 @@
 class CustomButtonDecorator < MiqDecorator
   def fonticon
-    options && options[:button_image] ? "miq-custom-button-#{options[:button_image]}" : 'fa fa-file-o'
+    options && options[:button_icon] ? options[:button_icon] : 'fa fa-file-o'
   end
 end

app/decorators/custom_button_set_decorator.rb

@@ -1,5 +1,5 @@
 class CustomButtonSetDecorator < MiqDecorator
   def fonticon
-    set_data && set_data[:button_image] ? "miq-custom-button-#{set_data[:button_image]}" : 'pficon pficon-folder-close'
+    set_data && set_data[:button_icon] ? set_data[:button_icon] : 'pficon pficon-folder-close'
   end
 end

app/helpers/application_helper/toolbar_builder.rb

@@ -244,7 +244,7 @@ def create_custom_button(input, model, record, options = {})
     button = {
       :id        => "custom__custom_#{button_id}",
       :type      => :button,
-      :icon      => "miq-custom-button-#{input[:image]} fa-lg",
+      :icon      => "#{input[:image]} fa-lg",
       :title     => input[:description].to_s,
       :enabled   => options[:enabled],
       :klass     => ApplicationHelper::Button::ButtonWithoutRbacCheck,
@@ -262,7 +262,8 @@ def create_raw_custom_button_hash(cb, record)
       :class         => cb.applies_to_class,
       :description   => cb.description,
       :name          => cb.name,
-      :image         => cb.options[:button_image],
+      :image         => cb.options[:button_icon],
+      :color         => cb.options[:button_color],
       :text_display  => cb.options.key?(:display) ? cb.options[:display] : true,
       :target_object => record_id
     }
@@ -273,7 +274,7 @@ def custom_button_selects(model, record, toolbar_result)
       props = {
         :id      => "custom_#{group[:id]}",
         :type    => :buttonSelect,
-        :icon    => "miq-custom-button-#{group[:image]} fa-lg",
+        :icon    => "#{group[:image]} fa-lg",
         :title   => group[:description],
         :enabled => true,
         :items   => group[:buttons].collect { |b| create_custom_button(b, model, record) }
@@ -338,7 +339,8 @@ def get_custom_buttons(model, record, toolbar_result)
         :id           => cbs.id,
         :text         => cbs.name.split("|").first,
         :description  => cbs.description,
-        :image        => cbs.set_data[:button_image],
+        :image        => cbs.set_data[:button_icon],
+        :color        => cbs.set_data[:button_color],
         :text_display => cbs.set_data.key?(:display) ? cbs.set_data[:display] : true
       }
 

app/presenters/tree_node/custom_button.rb

@@ -1,5 +1,6 @@
 module TreeNode
   class CustomButton < Node
     set_attribute(:tooltip) { _("Button: %{button_description}") % {:button_description => @object.description} }
+    set_attribute(:color) { @object.options.key?(:button_color) ? @object.options[:button_color] : nil }
   end
 end

app/presenters/tree_node/custom_button_set.rb

@@ -8,13 +8,14 @@ class CustomButtonSet < Node
       end
     end
 
-
     set_attribute(:tooltip) do
       if @object.description
         _("Button Group: %{button_group_description}") % {:button_group_description => @object.description}
       else
         @object.name.split("|").first
       end
     end
+
+    set_attribute(:color) { @object.set_data.try(:[], :button_color) }
   end
 end

app/presenters/tree_node/node.rb

@@ -34,6 +34,10 @@ def selected
       nil
     end
 
+    def color
+      nil
+    end
+
     def checkable
       true
     end
@@ -73,6 +77,7 @@ def to_h
         :text         => escape(text),
         :tooltip      => escape(tooltip),
         :icon         => icon,
+        :iconColor    => color,
         :expand       => expand,
         :hideCheckbox => hide_checkbox ? hide_checkbox : nil,
         :addClass     => klass,

app/views/shared/buttons/_ab_form.html.haml

@@ -46,11 +46,21 @@
                           "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
     .form-group
       %label.control-label.col-md-2
-        = _('Image')
+        = _('Icon')
       .col-md-8
-        = select_tag('button_image',
-                        options_for_select([[_("No Image"), nil]] + @edit[:new][:button_images], @edit[:new][:button_image].to_s),
-                        :class => "selectpicker")
+        = text_field_tag("button_icon", @edit[:new][:button_icon],
+                        :maxlength         => 30,
+                        :class             => "form-control",
+                        "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
+    .form-group
+      %label.control-label.col-md-2
+        = _('Icon Color')
+      .col-md-8
+        -# Remove the default #4d5258 value when using a color picker with nil support
+        = color_field_tag("button_color", @edit[:new][:button_color] || '#4d5258',
+                          :maxlength         => 30,
+                          :class             => "form-control",
+                          "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
     .form-group
       %label.control-label.col-md-2
         = _('Dialog')
@@ -90,7 +100,6 @@
            :locals  => {:rec_id => @custom_button ? @custom_button.id : 'new', :action => "automate_button_field_changed"})
 :javascript
   miqInitSelectPicker();
-  miqSelectPickerEvent('button_image', '#{url}');
   miqSelectPickerEvent('dialog_id', '#{url}');
   miqSelectPickerEvent('display_for', '#{url}');
   miqSelectPickerEvent('submit_how', '#{url}');

app/views/shared/buttons/_ab_list.html.haml

@@ -43,15 +43,13 @@
             - tree_id = x_node
             - if obj[:typ] == "CustomButton"
               - typ = "cb"
-              - img = obj[:button_image]
               - rec_type = "Button"
             - else
               - typ = "cbg"
-              - img = obj[:button_image]
               - rec_type = "Group"
             %tr{:title => _("Click to view details"), :onclick => "miqTreeActivateNode('#{tree_box}', '#{tree_id}_#{typ}-#{to_cid(obj[:id])}')"}
               %td.table-view-pf-select
-                %i{:class => "miq-custom-button-#{img}"}
+                %i{:class => obj[:button_icon], :style => obj.key?(:button_color) ? "color: #{obj[:button_color]};" : nil}
               %td
                 = obj[:name].split("|").first
               - if x_active_tree == :sandt_tree
@@ -88,7 +86,7 @@
         %label.control-label.col-md-2
           = _('Image')
         .col-md-8
-          %span{:class => "miq-custom-button-#{@record.set_data[:button_image]}"}
+          %span{:class => @record.set_data[:button_icon], :style => @record.set_data.key?(:button_color) ? "color: #{@record.set_data[:button_color]};" : nil}
   - if @sb[:buttons].blank?
     %hr
     = render :partial => 'layouts/info_msg', :locals => {:message => _("No Buttons found.")}
@@ -107,7 +105,7 @@
           - id = @nodetype[0].split('-')[1] == "ub" ? "#{@nodetype[0]}_cb-#{to_cid(obj[:id])}" : "#{x_node}_cb-#{to_cid(obj[:id])}"
           %tr{:title => _("Click to view details"), :onclick => "miqTreeActivateNode('#{tree_box}', '#{id}')"}
             %td.table-view-pf-select
-              %i{:class => "miq-custom-button-#{obj[:button_image]}"}
+              %i{:class => obj[:button_icon], :style => obj.key?(:button_color) ? "color: #{obj[:button_color]};" : nil}
             %td
               = obj[:name]
             %td

app/views/shared/buttons/_ab_show.html.haml

@@ -24,7 +24,7 @@
     %label.control-label.col-md-2
       = _('Image')
     .col-md-8
-      %span{:class => "miq-custom-button-#{@custom_button.options[:button_image]}"}
+      %span{:class => @custom_button.options[:button_icon], :style => @custom_button.options.key?(:button_color) ? "color: #{@custom_button.options[:button_color]};" : nil}
   .form-group
     %label.control-label.col-md-2
       = _('Dialog')