Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use the fonticon picker component to pick custom button icons #1801

Merged
merged 1 commit into from Aug 2, 2017
Merged

Use the fonticon picker component to pick custom button icons #1801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/assets/javascripts/angular_modules/module_fonticon_picker.js
View file
Open in desktop
@@ -0,0 +1,3 @@
miqHttpInject(
angular.module('ManageIQ.fonticonPicker', ['miqStaticAssets.fonticonPicker'])
);
18 changes: 18 additions & 0 deletions app/assets/javascripts/controllers/fonticon_picker_controller.js
View file
Open in desktop
@@ -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);
})();
22 changes: 17 additions & 5 deletions app/views/shared/buttons/_ab_form.html.haml
View file
Open in desktop
Expand Up @@ -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')
Expand Down Expand Up @@ -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}));
});
23 changes: 18 additions & 5 deletions app/views/shared/buttons/_group_form.html.haml
View file
Open in desktop
Expand Up @@ -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')
Expand All @@ -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}));
});