Project

General

Profile

« Previous | Next » 

Revision b3ac878a

Added by Tomer Brisker over 8 years ago

Fixes #11466, #11462 - Improve layout of textareas

View differences:

app/assets/javascripts/application.js
function set_fullscreen(element){
var exit_button = $('<div class="exit-fullscreen"><a class="btn btn-default btn-lg" href="#" onclick="exit_fullscreen(); return false;" title="'+__('Exit Full Screen')+'"><i class="glyphicon glyphicon-resize-small"></i></a></div>');
element.data('origin',element.parent())
element.before("<span id='fullscreen-placeholder'></span>")
.data('position', $(window).scrollTop())
.addClass('fullscreen')
.appendTo($('#main'))
......
$('#content').removeClass('hidden');
$('.navbar').removeClass('hidden');
element.removeClass('fullscreen')
.prependTo(element.data('origin'))
.insertAfter('#fullscreen-placeholder')
.resize();
$('#fullscreen-placeholder').remove();
$('.exit-fullscreen').remove();
$(window).scrollTop(element.data('position'));
}
app/assets/javascripts/host_edit.js
$(document).on('ContentLoad', function(){onHostEditLoad()});
$(document).on('AddedClass', function(event, link){load_puppet_class_parameters(link)});
$(document).on('click', '#params-tab', function() { resizeTextareas($('#params')); });
function update_nics(success_callback) {
var data = $('form').serialize().replace('method=put', 'method=post');
......
});
}
function resizeTextareas (elem) {
elem.find('textarea').each(function() {
if (this.scrollHeight !== undefined){
if (this.scrollHeight <= 100){
this.style.height = this.scrollHeight+parseInt(this.style.paddingTop)+parseInt(this.style.paddingBottom)+ 'px';
}
else{
this.style.height = 100+'px';
}
}
});
}
function selectedSubnetHasIPAM() {
var subnet = $("#host_subnet_id")
var subnet_id = subnet.val();
app/assets/stylesheets/application.scss
td{
vertical-align: top
}
&.condensed {
margin-bottom: 0;
textarea {
border-color: #f5f5f5;
background-color: #f5f5f5;
@include box-shadow(none);
resize: none;
cursor: text;
}
&.error textarea {
border-color: #b94a48;
}
&.warning textarea {
border-color: #c09853;
}
}
}
.avatar {
......
}
}
.btn-fullscreen{
margin-right: 10px;
}
.error-message{
padding-right: 10px;
}
app/assets/stylesheets/bootstrap_and_overrides.scss
.popover-content {
max-height: 200px;
overflow-y: auto;
color: #737373;
}
}
......
margin-bottom: 10px;
}
textarea.no-stretch {
resize: vertical;
textarea {
overflow-x: hidden; /* fix for FF adding an extra row to textareas */
&.no-stretch {
resize: vertical;
}
}
app/assets/stylesheets/hosts.scss
}
}
}
}
}
app/helpers/common_parameters_helper.rb
def parameter_value_field(value)
source_name = value[:source_name] ? "(#{value[:source_name]})" : nil
content_tag :div, :class => "form-group condensed" do
text_area_tag("value_#{value[:safe_value]}", value[:safe_value], :rows => (value[:safe_value].to_s.lines.count || 1 rescue 1),
:class => "col-md-6", :disabled => true, :'data-hidden-value' => Parameter.hidden_value) +
fullscreen_button +
content_tag(:span, :class => "help-inline") { popover(_("Additional info"), _("<b>Source:</b> %{type} %{name}") % {:type => _(value[:source].to_s), :name => source_name})}
popover_tag = popover('', _("<b>Source:</b> %{type} %{name}") % { :type => _(value[:source].to_s), :name => source_name }, :data => { :placement => 'top' })
parameter_value_content("value_#{value[:safe_value]}", value[:safe_value], :popover => popover_tag)
end
def parameter_value_content(id, value, options)
content_tag :div, :class => 'input-group ' + options[:wrapper_class].to_s do
content_tag(:span, options[:popover], :class => "help-block input-group-addon") +
text_area_tag(id, value, { :rows => 1,
:class => 'form-control no-stretch ' + options[:text_area_class].to_s,
:'data-property' => 'value',
:'data-hidden-value' => Parameter.hidden_value,
:disabled => true }) +
fullscreen_input
end
end
app/helpers/layout_helper.rb
label = add_label(options, f, attr)
if table_field
add_help_to_label(size_class, label, help_inline, '') do
add_help_to_label(size_class, label, help_inline) do
yield
end.html_safe
else
......
content_tag(:div, :class => "clearfix") do
content_tag :div, :class => "form-group #{error.empty? ? "" : 'has-error'}",
:id => options.delete(:control_group_id) do
fullscreen = options[:fullscreen] ? fullscreen_button("$(this).prev().find('textarea')") : ""
add_help_to_label(size_class, label, help_inline, fullscreen) do
yield.html_safe + help_block.html_safe
input = if options[:fullscreen]
content_tag(:div, yield.html_safe + fullscreen_input, :class => "input-group")
else
yield.html_safe
end
add_help_to_label(size_class, label, help_inline) do
input + help_block.html_safe
end
end.html_safe
end
end
end
def add_help_to_label(size_class, label, help_inline, fullscreen)
def add_help_to_label(size_class, label, help_inline)
label.html_safe +
content_tag(:div, :class => size_class) do
yield
end.html_safe + fullscreen + help_inline.html_safe
end.html_safe + help_inline.html_safe
end
# The target should have class="collapse [out|in]" out means collapsed on load and in means expanded.
......
end
def popover(title, msg, options = {})
content_tag(:a, icon_text("info-sign", title), { :rel => "popover",
:data => { :content => msg,
:"original-title" => title,
:trigger => "focus",
:container => 'body',
:html => true },
:role => 'button',
:tabindex => '-1' }.merge(options))
options[:icon] ||= 'info-sign'
content_tag(:a, icon_text(options[:icon], title), { :rel => "popover",
:data => { :content => msg,
:"original-title" => title,
:trigger => "focus",
:container => 'body',
:html => true },
:role => 'button',
:tabindex => '-1' }.deep_merge(options))
end
def will_paginate(collection = nil, options = {})
......
end
def fullscreen_button(element = "$(this).prev()")
button_tag(:type => 'button', :class => 'btn btn-default btn-sm btn-fullscreen', :onclick => "set_fullscreen(#{element})", :title => _("Full screen")) do
button_tag(:type => 'button', :class => 'btn btn-default btn-md btn-fullscreen', :onclick => "set_fullscreen(#{element})", :title => _("Full screen")) do
icon_text('resize-full')
end
end
def fullscreen_input(element = "$(this).parent().prev()")
content_tag(:span, fullscreen_button(element), :class => 'input-group-btn')
end
private
def authorized_associations(associations)
app/helpers/lookup_keys_helper.rb
def hostgroup_key_with_diagnostic(hostgroup, key)
value, origin = hostgroup.inherited_lookup_value key
original_value = key.value_before_type_cast value
diagnostic_helper = popover(_("Additional info"), _("<b>Description:</b> %{desc}<br><b>Type:</b> %{type}<br> <b>Matcher:</b> %{matcher}") % { :desc => key.description, :type => key.key_type, :matcher => origin})
content_tag :div, :class => ['form-group', 'condensed'] do
row_count = original_value.to_s.lines.count rescue 1
text_area_tag("value_#{key.key}", original_value, :rows => row_count == 0 ? 1 : row_count,
:class => ['col-md-6'], :'data-property' => 'value', :disabled => true) +
fullscreen_button +
content_tag(:span, :class => "help-inline") { diagnostic_helper }
end
diagnostic_helper = popover('', _("<b>Description:</b> %{desc}<br><b>Type:</b> %{type}<br> <b>Matcher:</b> %{matcher}") % { :desc => key.description, :type => key.key_type, :matcher => origin}, :data => { :placement => 'top' })
parameter_value_content("value_#{key.key}", original_value, :popover => diagnostic_helper)
end
def host_key_with_diagnostic(host, value_hash, key)
......
original_value = key.value_before_type_cast value
no_value = value.nil? && key.lookup_values.find_by_match("fqdn=#{host.fqdn}")
diagnostic_class = []
diagnostic_helper = popover(_("Additional info"), _("<b>Description:</b> %{desc}<br><b>Type:</b> %{type}<br> <b>Matcher:</b> %{matcher}") % { :desc => key.description, :type => key.key_type, :matcher => matcher})
if no_value
if key.required
diagnostic_class << 'error'
diagnostic_helper = popover(_('No value error'), _("Required parameter without value.<br/><b>Please override!</b> <br><br><b>Description:</b>: %s") % key.description)
diagnostic_class = 'error'
diagnostic_helper = popover('', _("Required parameter without value.<br/><b>Please override!</b> <br><br><b>Description:</b>: %s") % key.description, :icon => "exclamation-sign")
else
diagnostic_class << 'warning'
diagnostic_helper = popover(_('No value warning'), _("Optional parameter without value.<br/><i>Won\'t be given to Puppet.</i> <br><br><b>Description:</b> %s") % key.description)
diagnostic_class = 'warning'
diagnostic_helper = popover('', _("Optional parameter without value.<br/><i>Won\'t be given to Puppet.</i> <br><br><b>Description:</b> %s") % key.description, :icon => "warning-sign")
end
else
diagnostic_helper = popover('', _("<b>Description:</b> %{desc}<br><b>Type:</b> %{type}<br> <b>Matcher:</b> %{matcher}") % { :desc => key.description, :type => key.key_type, :matcher => matcher}, :data => { :placement => 'top' })
end
text_area_class = ['col-md-6']
text_area_class << "override-param" if key.overridden?(host)
content_tag :div, :class => ['form-group', 'condensed'] + diagnostic_class do
row_count = original_value.to_s.lines.count rescue 1
text_area_tag("value_#{key.key}", original_value, :rows => (row_count == 0 ? 1 : row_count),
:class => text_area_class, :'data-property' => 'value', :disabled => true) +
fullscreen_button +
content_tag(:span, :class => "help-inline") { diagnostic_helper }
end
text_area_class = "override-param" if key.overridden?(host)
parameter_value_content("value_#{key.key}", original_value, { :popover => diagnostic_helper,
:wrapper_class => diagnostic_class,
:text_area_class => text_area_class })
end
end
app/views/common_parameters/_parameter.html.erb
<% disabled = (not authorized_via_my_scope("host_editing", "edit_params")) %>
<div class="fields">
<table class="row">
<table class="table-condensed">
<tbody>
<tr class="form-group <%= 'has-error' if f.object.errors.any? %>">
<td class="col-md-4">
<%= f.text_field(:name, :class => "form-control", :disabled => disabled, :placeholder => _("Name")) %>
</td>
<td class="col-md-5 value">
<% if f.object.hidden_value? %>
<%= f.password_field(:value, :class => 'form-control',
:disabled => disabled,
:value => f.object.value) %>
<% else %>
<%= f.text_area(:value,
:class => "form-control no-stretch",
:rows => line_count(f, :value),
:disabled => disabled,
:placeholder => _("Value")) %>
<% end %>
</td>
<td class="col-md-1">
<%= fullscreen_button("$(this).parent().prev().find('textarea')") unless f.object.hidden_value? %>
<td class="col-md-6 value">
<div class="input-group col-md-12">
<% if f.object.hidden_value? %>
<%= f.password_field(:value, :class => 'form-control',
:disabled => disabled,
:value => f.object.value) %>
<% else %>
<%= f.text_area(:value,
:class => "form-control no-stretch",
:rows => 1,
:disabled => disabled,
:placeholder => _("Value")) %>
<% end %>
<%= fullscreen_input %>
</div>
</td>
<td class="col-md-2">
<%= f.check_box(:hidden_value,
app/views/common_parameters/_parent_parameter.html.erb
<div class="fields">
<% @hostgroup.ancestors.map(&:group_parameters).flatten.each_with_index do |parameter, i| %>
<% next if @hostgroup.group_parameters.map(&:name).include? parameter.name %>
<table class="row">
<thead>
<table class="table">
<thead>
<tr>
<th class='col-md-4'><%= _("Name") %></th>
<th class='col-md-8'><%= _("Value") %></th>
</tr>
</thead>
</thead>
<% @hostgroup.ancestors.map(&:group_parameters).flatten.each_with_index do |parameter, i| %>
<% next if @hostgroup.group_parameters.map(&:name).include? parameter.name %>
<tr>
<td class="col-md-4">
<td>
<%= text_field_tag("parent_parameter_#{i}_key", '', :class => "form-control", :placeholder => parameter.name) %>
</td>
<td class="col-md-8">
<%= text_area_tag("parent_parameter_#{i}_value", '', :class => "form-control no-stretch", :rows => 1, :placeholder => parameter.value) %>
<td>
<div class="input-group">
<%= text_area_tag("parent_parameter_#{i}_value", '', :class => "form-control no-stretch", :rows => 1, :placeholder => parameter.value) %>
<%= fullscreen_input %>
</div>
</td>
</tr>
</table>
<% end %>
<% end %>
</table>
</div>
app/views/common_parameters/_puppetclass_parameter.html.erb
<td class="col-md-2">
<%= text_field_tag '', (f.object.lookup_key.key rescue ''), :class => 'form-control', :'data-property' => 'name', :disabled => true, :title => _('Parameter name') %>
</td>
<td class="col-md-4">
<%= f.text_area :value, :rows => line_count(f, :value), :class => 'form-control no-stretch', :'data-property' => 'value',
:disabled => (not authorized_via_my_scope("host_editing", "edit_params")) || f.object.use_puppet_default,
:placeholder => _("Value") %>
<td class="col-md-5">
<div class="input-group">
<%= f.text_area :value, :rows => 1, :class => 'form-control no-stretch', :'data-property' => 'value',
:disabled => (not authorized_via_my_scope("host_editing", "edit_params")) || f.object.use_puppet_default,
:placeholder => _("Value") %>
<%= fullscreen_input %>
</div>
<%= text_field_tag '', (f.object.lookup_key.key_type rescue 'unknown'), :class=> 'hide', :'data-property' => 'type', :disabled => true, :title => _('Parameter type') %>
</td>
<td class="col-md-1">
<%= fullscreen_button("$(this).parent().prev().find('textarea')") %>
</td>
<td class="col-md-4">
<%= f.check_box :use_puppet_default, :'data-property' => 'use_puppet_default',
:disabled => (not authorized_via_my_scope("host_editing", "edit_params")),
app/views/common_parameters/_puppetclasses_parameters.html.erb
<th class='col-md-3'><%= _("Puppet class overrides") %></th>
<th class='col-md-2'><%= _("Name") %></th>
<th class='col-md-4'><%= _("Value") %></th>
<th class='col-md-2'><%= _("Use Puppet default") %></th>
<th><%= _('Actions') %></th>
<th class='col-md-2 ca'><%= _("Use Puppet default") %></th>
<th class='col-md-1 ca'><%= _('Actions') %></th>
</tr>
</thead>
</table>
app/views/lookup_keys/_value.html.erb
<%= text_field_tag '', nil, :class => 'matcher_value' %>
</td>
<td>
<%= f.text_area :value, :rows => line_count(f, :value), :class => 'form-control no-stretch', :'data-property' => 'value',
:disabled => f.object.use_puppet_default,
:placeholder => _("Value") %>
</td>
<td>
<%= fullscreen_button("$(this).parent().prev().find('textarea')") %>
<div class="input-group">
<%= f.text_area :value, :rows => 1, :class => 'form-control no-stretch', :'data-property' => 'value',
:disabled => f.object.use_puppet_default,
:placeholder => _("Value") %>
<%= fullscreen_input %>
</div>
</td>
<td class="ca">
<%= f.check_box :use_puppet_default, :'data-property' => 'use_puppet_default',
app/views/lookup_keys/_values.html.erb
<table class="table table-condensed <%= 'hidden' unless f.object.lookup_values.present? %>">
<thead>
<tr>
<th colspan='2' class='col-md-6'><%= _('Attribute type') %>
<th colspan='2' class='col-md-5'><%= _('Attribute type') %>
<span class="help-inline">
<%= popover("", _("Matcher is a combination of an attribute and its value, if they match, the value below would be provided.<br> You may use any attribute Foreman knows about, such as facts etc for example: <code> domain = example.com </code> or <code> is_virtual = true</code>."),
:title => _("Explain matchers")).html_safe %>
</span></th>
<th class='col-md-4'><%= _('Value') %></th>
<th></th>
<% if is_param %>
<th class='col-md-2'><%= _('Use Puppet default') %>
<th class='col-md-2 ca'><%= _('Use Puppet default') %>
<span class="help-inline"> <%= use_puppet_default_help() %></span>
</th>
<% end %>
app/views/templates/_form.html.erb
<label class="control-label" for="template"><%= _("Template editor") %></label>
<div class="navbar navbar-form">
<div class="btn-group" data-toggle="buttons" >
<label class="btn btn-default btn-sm active" onclick="set_code()">
<label class="btn btn-default btn-md active" onclick="set_code()">
<input type="radio" name="options" id="option1" ><%= _("Code") %>
</label>
<label class="btn btn-default btn-sm" onclick="set_preview()">
<label class="btn btn-default btn-md" onclick="set_preview()">
<input type="radio" name="options" id="option2" ><%= _("Diff") %>
</label>
<label class="btn btn-default btn-sm" onclick="set_render()">
<label class="btn btn-default btn-md" onclick="set_render()">
<input type="radio" name="options" id="option3" ><%= _("Preview") %>
</label>
</div>

Also available in: Unified diff