Use the fonticon picker component to pick custom button icons

ManageIQ · Aug 2, 2017 · 501f7e2 · 501f7e2
1 parent 8629df2
commit 501f7e2
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/app/assets/javascripts/angular_modules/module_fonticon_picker.js b/app/assets/javascripts/angular_modules/module_fonticon_picker.js
@@ -0,0 +1,3 @@
+miqHttpInject(
+  angular.module('ManageIQ.fonticonPicker', ['miqStaticAssets.fonticonPicker'])
+);
diff --git a/app/assets/javascripts/controllers/fonticon_picker_controller.js b/app/assets/javascripts/controllers/fonticon_picker_controller.js
@@ -0,0 +1,18 @@
+/* global add_flash */
+(function() {
+  var CONTROLLER_NAME = 'fonticonPickerController';
+
+  var FonticonPickerController = function($element) {
+    var vm = this;
+    // This is an ugly hack to be able to use this component in a non-angular context with miq-observe
+    // FIXME: Remove this when the form is converted to angular
+    var hidden = $($element[0]).find('input[type="hidden"]');
+    vm.select = function(icon) {
+      hidden.val(icon);
+      hidden.trigger('change');
+    };
+  };
+
+  FonticonPickerController.$inject = ['$element'];
+  window.miqHttpInject(angular.module('ManageIQ.fonticonPicker')).controller(CONTROLLER_NAME, FonticonPickerController);
+})();
diff --git a/app/views/shared/buttons/_ab_form.html.haml b/app/views/shared/buttons/_ab_form.html.haml
@@ -47,11 +47,11 @@
     .form-group
       %label.control-label.col-md-2
         = _('Icon')
-      .col-md-8
-        = text_field_tag("button_icon", @edit[:new][:button_icon],
-                        :maxlength         => 30,
-                        :class             => "form-control",
-                        "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
+      .col-md-8#button-icon-picker{'ng-controller' => 'fonticonPickerController as vm'}
+        %miq-fonticon-picker{'input-name' => 'button_icon', :selected => @edit[:new][:button_icon], 'icon-changed' => 'vm.select(selected);'}
+          %miq-fonticon-family{:selector => 'ff', :title => 'Font Fabulous'}
+          %miq-fonticon-family{:selector => 'pficon', :title => 'PatternFly'}
+          %miq-fonticon-family{:selector => 'fa', :title => 'Font Awesome'}
     .form-group
       %label.control-label.col-md-2
         = _('Icon Color')
@@ -103,3 +103,15 @@
   miqSelectPickerEvent('dialog_id', '#{url}');
   miqSelectPickerEvent('display_for', '#{url}');
   miqSelectPickerEvent('submit_how', '#{url}');
+  miq_bootstrap('#button-icon-picker', 'ManageIQ.fonticonPicker');
+
+  // This is an ugly hack to be able to use this component in a non-angular context with miq-observe
+  // FIXME: Remove this when the form is converted to angular
+  $(function() {
+    $('#button-icon-picker input[type="hidden"]').on('change', _.debounce(function() {
+      miqObserveRequest('#{url}', {
+        no_encoding: true,
+        data: 'button_icon' + '=' + $(this).val(),
+      });
+    }, 700, {leading: true, trailing: true}));
+  });
diff --git a/app/views/shared/buttons/_group_form.html.haml b/app/views/shared/buttons/_group_form.html.haml
@@ -31,11 +31,11 @@
     .form-group
       %label.control-label.col-md-2
         = _('Icon')
-      .col-md-8
-        = text_field_tag("button_icon", @edit[:new][:button_icon],
-                        :maxlength         => 30,
-                        :class             => "form-control",
-                        "data-miq_observe" => {:interval => '.5', :url => url}.to_json)
+      .col-md-8#button-icon-picker{'ng-controller' => 'fonticonPickerController as vm'}
+        %miq-fonticon-picker{'input-name' => 'button_icon', :selected => @edit[:new][:button_icon], 'icon-changed' => 'vm.select(selected);'}
+          %miq-fonticon-family{:selector => 'ff', :title => 'Font Fabulous'}
+          %miq-fonticon-family{:selector => 'pficon', :title => 'PatternFly'}
+          %miq-fonticon-family{:selector => 'fa', :title => 'Font Awesome'}
     .form-group
       %label.control-label.col-md-2
         = _('Icon Color')
@@ -51,3 +51,16 @@
     %h3
       = _('Assign Buttons')
     = render :partial => "shared/buttons/column_lists"
+
+:javascript
+  miq_bootstrap('#button-icon-picker', 'ManageIQ.fonticonPicker');
+  // This is an ugly hack to be able to use this component in a non-angular context with miq-observe
+  // FIXME: Remove this when the form is converted to angular
+  $(function() {
+    $('#button-icon-picker input[type="hidden"]').on('change', _.debounce(function() {
+      miqObserveRequest('#{url}', {
+        no_encoding: true,
+        data: 'button_icon' + '=' + $(this).val(),
+      });
+    }, 700, {leading: true, trailing: true}));
+  });