Project

General

Profile

« Previous | Next » 

Revision e5f912f7

Added by Amos Benari over 11 years ago

  • ID e5f912f70e6ee61578b017a014bed940868af34d

puppet class form ui fixes.

View differences:

app/views/lookup_keys/_fields.html.erb
<%= param_type_selector f %>
<%= textarea_f f, :default_value, :value => f.object.default_value_before_type_cast , :disabled => (f.object.is_param && !f.object.override), :class => "span6", :rows => :auto, :help_inline => popover("?","value to use when there is no match", :title => "Default Value") %>
<div <%= "id=#{(f.object.key || 'new_lookup_keys').to_s.gsub(' ','_')}_lookup_key_override_value" %> <%= "style='display:none;'" if (f.object.is_param && !f.object.override) %>>
<div <%= "id=#{(f.object.key || 'new_lookup_keys').to_s.gsub(' ','_')}_lookup_key_override_value" %> style=<%= "display:none;" if (f.object.is_param && !f.object.override) %>>
<legend>Optional Input Validator</legend>
<%= checkbox_f(f, :required, :disabled => !f.object.override,
:help_inline => popover("?", "If checked, will raise an error if there is no default value and no matcher provide a value.",
app/views/puppetclasses/_form.html.erb
<%= multiple_checkboxes f, :hostgroups, @puppetclass, Hostgroup, :label => "Hostgroups" %>
</div>
<div class="tab-pane" id="smart_class_param">
<div class="tab-pane lookup-keys-container" id="smart_class_param">
<% if @puppetclass.class_params.empty? -%>
<div class="alert alert-message alert-success">
<a class="close" href="#" data-dismiss="alert">&times;</a>
......
To update the class signature, go to the Puppet Classes page and select 'Import'.</p>
</div>
<% else -%>
<div class="undo-smart-vars alert alert-message hide">
Undo remove
</div>
<div class="control-group">
<label class="control-label">Filter By Environment</label>
<div class="controls">
......
<div class="tabbable tabs-left">
<ul class="nav nav-tabs smart-var-tabs span2" data-tabs="pills">
<% @puppetclass.class_params.each do |key| -%>
<li data-used-environments=<%= key.environments.map(&:to_s).to_json %>><a data-toggle="tab" id="pill_<%= key.to_s.gsub(' ','_') %>" href="#<%= key.to_s.gsub(' ','_') %>"><%= key %><span class="label label-important fr">&times;</span></a></li>
<li data-used-environments=<%= key.environments.map(&:to_s).to_json %> >
<a data-toggle="tab" id="pill_<%= key.to_s.gsub(' ','_') %>" href="#<%= key.to_s.gsub(' ','_') %>" ><%= icon_text((key.override ? "flag": ""), key.to_s.gsub('_',' ')) %><span class="delete fr">&times;</span></a>
</li>
<% end -%>
</ul>
......
</div>
<% end -%>
</div>
<div class="tab-pane" id="smart_vars">
<div class="tab-pane lookup-keys-container" id="smart_vars">
<% if @puppetclass.lookup_keys.empty? -%>
<div class="alert alert-message alert-warning">
<a class="close" href="#" data-dismiss="alert">&times;</a>
<p><strong>Help!</strong> What is a <a href=http://theforeman.org/projects/foreman/wiki/Smart_Variables rel="external">Smart variable</a>?</p>
</div>
<% end -%>
<div class="undo-smart-vars alert alert-message hide">
Undo remove
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs smart-var-tabs span2" data-tabs="pills">
<% @puppetclass.lookup_keys.each do |key| -%>
<li><a data-toggle="tab" id="pill_<%= key.to_s.gsub(' ','_') %>" href="#<%= key.to_s.gsub(' ','_') %>"><%= key %><span class="label label-important fr">&times;</span></a></li>
<li><a data-toggle="tab" id="pill_<%= key.to_s.gsub(' ','_') %>" href="#<%= key.to_s.gsub(' ','_') %>"><%= key %><span class="delete fr">&times;</span></a></li>
<% end -%>
<li><%= link_to_function "+ Add Variable", "add_child_node(this);" ,:class=>"btn btn-success",:style=>":hover{}", :"data-association" => :lookup_keys %></li>
</ul>
app/views/puppetclasses/edit.html.erb
<% title "Edit Puppet Class" %>
<% title "Edit Puppet Class #{@puppetclass}" %>
<%= render :partial => 'form' %>
public/javascripts/lookup_keys.js
$('.smart-var-tabs li a span').hide();
select_first_tab();
//make the remove variable button visible only on the active pill
$('.smart-var-tabs li a').on('click',function(){ show_delete_button(this);});
$(document).on('click', '.smart-var-tabs li a', function(){ show_delete_button(this);});
//remove variable click event
$('.smart-var-tabs li a span').on('click',function(){ remove_node(this);});
$(document).on('click', '.smart-var-tabs li a span', function(){ remove_node(this);});
})
function select_first_tab(){
......
var field = '';
if (assoc == 'lookup_keys') {
$('#smart_vars .smart-var-tabs .active, #smart_vars .smart-var-content .active').removeClass('active');
var pill = "<li class='active'><a onclick='show_delete_button(this);' data-toggle='pill' href='#new_" + new_id + "' id='pill_new_" + new_id + "'>new<span onclick='remove_node(this);' class='label label-important fr'>&times;</span></a></li>"
var pill = "<li class='active'><a data-toggle='pill' href='#new_" + new_id + "' id='pill_new_" + new_id + "'>new<span class='delete fr'>&times;</span></a></li>"
$('#smart_vars .smart-var-tabs').prepend(pill);
field = $('#smart_vars .smart-var-content').prepend($(content).addClass('active'));
$('#smart_vars .smart-var-tabs li.active a').show('highlight', 500);
......
$(item).closest('.fields').hide();
if($(item).parent().hasClass('fields')) {
$('#pill_' + $(item).closest('.fields').attr('id')).empty().remove();
var pill = $('#pill_' + $(item).closest('.fields').attr('id'));
var undo_link = $("<a href='#'>" +pill.html()+"</a>").attr("data-pill", "#"+pill.attr("id"));
pill.parent().hide();
undo_link.on('click', function(){ undo_remove_child_node(this);});
undo_link.find('span').remove();
$(item).closest('.lookup-keys-container').find('.undo-smart-vars').append(undo_link).show();
}
$(item).closest("form").trigger('nested:fieldRemoved');
return false;
}
function undo_remove_child_node(item){
var container = $(item).closest('.lookup-keys-container');
var link = container.find($(item).attr("data-pill"));
var fields = container.find(link.attr("href"));
var hidden_field = fields.find('input[type=hidden]').first()[0];
if(hidden_field) {
hidden_field.value = '0';
}
container.find('.smart-var-tabs li.active').removeClass('active');
container.find('.fields.active').hide().removeClass('active');
fields.show().addClass('active');
link.parent().show();
link.click();
$(item).remove();
if (container.find('.undo-smart-vars a').size() == 0) {
container.find('.undo-smart-vars').hide();
}
return false;
}
function toggleOverrideValue(item) {
var override = $(item).is(':checked');
var mandatory = $(item).closest('.fields').find("[id$='_required']");
var type_field = $(item).closest('.fields').find("[id$='_key_type']");
var validator_type_field = $(item).closest('.fields').find("[id$='_validator_type']");
var default_value_field = $(item).closest('.fields').find("[id$='_default_value']");
var override_value_div = $(item).closest('.fields').find("[id$='lookup_key_override_value']");
var fields = $(item).closest('.fields');
var mandatory = fields.find("[id$='_required']");
var type_field = fields.find("[id$='_key_type']");
var validator_type_field = fields.find("[id$='_validator_type']");
var default_value_field = fields.find("[id$='_default_value']");
var override_value_div = fields.find("[id$='lookup_key_override_value']");
var pill_icon = $('#pill_' + fields.attr('id') +' i');
mandatory.attr('disabled', override ? null : 'disabled');
type_field.attr('disabled', override ? null : 'disabled');
validator_type_field.attr('disabled', override ? null : 'disabled');
default_value_field.attr('disabled', override ? null : 'disabled' );
pill_icon.attr("class", override ? 'icon-flag' : "icon- ");
override_value_div.toggle(override);
}
public/stylesheets/style.css
.table th{background: rgba(0, 0, 0, 0.08);}
.delete{color: #b94a48 !important;}
.delete{color: #b94a48 !important; cursor: auto;}
.setting_value form { margin: 0 !important;}
.form-actions{
background-color: #f5f5f5;
}
.form-actions{background-color: #f5f5f5;}
.ignore-subnet{margin-right: 10px;margin-top: -25px;float: right;}
.tabs-left .nav-tabs>li>a.btn:hover{background:inherit;background-color: #408140;}
......
.btn-toolbar-condensed{margin: 0;}
.grey{color: #d3d3d3 !important;}
.black{
color: #000 !important;
}
.black{color: #000 !important;}
.control-group.condensed{margin-bottom: 0;}
.control-group.condensed textarea {
border-color: #f5f5f5;

Also available in: Unified diff