Merge pull request #2612 from opf/feature/18329-foundation-apps-framework-forms-refactor-timelines

Feature/18329 foundation apps framework forms refactor timelines
pull/2549/head
Alex Coles 10 years ago
commit 0324b5cd39
  1. 39
      app/assets/stylesheets/content/_forms.md
  2. 19
      app/assets/stylesheets/content/_forms.sass
  3. 18
      app/assets/stylesheets/timelines.css.sass
  4. 7
      app/helpers/timelines_helper.rb
  5. 74
      app/views/timelines/_comparison.html.erb
  6. 107
      app/views/timelines/_general.html.erb
  7. 99
      app/views/timelines/filter/_projects.html.erb
  8. 6
      config/locales/de.yml
  9. 6
      config/locales/en.yml
  10. 2
      lib/tabular_form_builder.rb

@ -234,6 +234,45 @@
One never lies about one's age.
</div>
</div>
<div class="form--grouping" role="group" aria-labelledby="form-grouping-label">
<div id="form-grouping-label" class="form--grouping-label">Colors:</div>
<div class="form--grouping-row">
<div class="form--field">
<label class="form--label">Most favorite first:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Green">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">Most favorite second:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Blue">
</div>
</div>
</div>
</div>
<div class="form--grouping-row">
<div class="form--field">
<label class="form--label">Least favorite first:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Magenta">
</div>
</div>
</div>
<div class="form--field">
<label class="form--label">Least favorite second:</label>
<div class="form--field-container">
<div class="form--text-field-container">
<input type="text" class="form--text-field" placeholder="Orange">
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
```

@ -350,6 +350,25 @@ fieldset.form--fieldset
.form &
margin-bottom: 0.5rem
.form--grouping
@include grid-block($wrap: true)
align-items: center
.form--grouping-row
@include grid-block(10)
.form--grouping-row + .form--grouping-row
@include grid-offset(2)
.form--grouping-label
@include grid-content(2)
@include label-style
padding: 0 1rem 0 0
font-size: $form-label-fontsize
line-height: $base-line-height
color: $form-label-color
margin-bottom: 0.8rem
.form--table
border: 0 none
background: none

@ -85,30 +85,18 @@ li.select2-result.select2-visible-selected-parent
.select2-choices
width: 500px
#s2id_reporting_reported_project_status_id, #s2id_reporting_reporting_to_project_id, #s2id_timeline_select, #s2id_timeline_options_columns, #s2id_timeline_options_initial_outline_expansion, #s2id_timeline_options_zoom_factor, #s2id_project_association_select_project_b_id, #s2id_timeline_options_grouping_one_sort, #s2id_timeline_options_project_sort, #s2id_timeline_options_grouping_two_sort
width: 250px
#project-search-container .select2-container
margin-left: 0
.select2-container
vertical-align: middle
margin-left: 5px
#s2id_timeline_options_compare_to_relative_unit, #s2id_timeline_options_planning_element_time_relative_one_unit, #s2id_timeline_options_planning_element_time_relative_two_unit
margin-right: 1em
.timelines_edit_form
.calendar-trigger
margin-right: 1em
input
margin-left: 1em
#timeline_options_compare_to_relative
padding-right: 5px
text-align: right
width: 40px
/* Hack for as long as select2 is in there.
.select2-container.form--select
border: none
/* *
* Timeline toolbar & icons. *

@ -81,6 +81,13 @@ module TimelinesHelper
s
end
def options_for_timeunits(selected = nil)
options_for_select([[l('timelines.filter.time_relative.days'), 0],
[l('timelines.filter.time_relative.weeks'), '1'],
[l('timelines.filter.time_relative.months'), '2']],
selected)
end
def options_for_project_types
ProjectType.all.map { |t| [t.name, t.id] }
end

@ -35,31 +35,73 @@ See doc/COPYRIGHT.rdoc for more details.
<div style="display:none;">
<%= f.fields_for :options, timeline_options do |ff| %>
<div class="form--field">
<%= ff.label :comparison, l('timelines.filter.comparison.none'), for: :timeline_options_comparison_none %>
<%= ff.label :comparison, l('timelines.filter.comparison.none'),
for: :timeline_options_comparison_none,
class: "form--label" %>
<div class="form--field-container">
<%= ff.radio_button :comparison, "none", no_label: true %>
<div class="form--radio-button-container">
<%= ff.radio_button :comparison, "none", no_label: true %>
</div>
</div>
</div>
<div class="form--field">
<%= ff.label :comparison, l('timelines.filter.comparison.relative'), for: :timeline_options_comparison_relative %>
<%= ff.label :comparison, l('timelines.filter.comparison.relative'),
for: :timeline_options_comparison_relative,
class: "form--label" %>
<div class="form--field-container">
<%= ff.radio_button :comparison, "relative", no_label: true %>
<%= ff.label :compare_to_relative, l('timelines.filter.comparison.compare_relative', timespan: "") %>
<%= ff.text_field :compare_to_relative, no_label: true %>
<%= ff.select :compare_to_relative_unit,
[ [l('timelines.filter.time_relative.days'), 0],
[l('timelines.filter.time_relative.weeks'), '1'],
[l('timelines.filter.time_relative.months'), '2']
], label: "" # FIXME: this breaks with no_label: true
%>
<%= ff.radio_button :comparison, "relative" %>
</div>
</div>
<div class="form--grouping">
<div id="timeline--form--project-filter-timeframe"
class="form--grouping-label">
<span class="hidden-for-sighted">
<%= l('timelines.filter.comparison.relative') %>
</span>
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.text_field :compare_to_relative, label: l('timelines.filter.comparison.compare_relative_prefix') %>
</div>
<div class="form--field">
<div class="form--field-container inline-label">
<%= ff.select :compare_to_relative_unit,
options_for_timeunits(nil),
no_label: true %>
<span class="form-label -transparent"><%=l('timelines.filter.comparison.compare_relative_suffix')%></span>
</div>
</div>
</div>
</div>
<div class="form--field">
<%= ff.label :comparison, l('timelines.filter.comparison.absolute'), for: :timeline_options_comparison_absolute %>
<%= ff.label :comparison,
l('timelines.filter.comparison.absolute'),
for: :timeline_options_comparison_absolute,
class: "form--label" %>
<div class="form--field-container">
<%= ff.radio_button :comparison, "absolute", no_label: true %>
<%= ff.text_field :compare_to_absolute, label: l('timelines.filter.comparison.compare_absolute', date: "") %>
<%= calendar_for('timeline_options_compare_to_absolute') %>
<%= ff.radio_button :comparison, "absolute" %>
</div>
</div>
<div class="form--grouping">
<div id="timeline--form--project-filter-timeframe"
class="form--grouping-label">
<span class="hidden-for-sighted">
<%= l('timelines.filter.comparison.absolute') %>
</span>
</div>
<div class="form--grouping-row">
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.text_field :compare_to_absolute, label: l('timelines.filter.comparison.compare_absolute', date: "") %>
<%= calendar_for('timeline_options_compare_to_absolute') %>
</div>
</div>
</div>
<% end %>

@ -32,54 +32,71 @@ See doc/COPYRIGHT.rdoc for more details.
<a href="javascript:"><%= l('timelines.filter.timeline') %></a>
</legend>
<div class="form--field">
<%= f.text_field :name, required: true %>
</div>
<%= f.fields_for :options, timeline_options do |ff| %>
<div>
<div class="form--field">
<%= ff.hidden_field :exist %>
<%= ff.check_box :hide_chart, { label: l('timelines.filter.hide_chart') }, "yes", "no" %>
<%= f.text_field :name, required: true %>
</div>
<%= f.fields_for :options, timeline_options do |ff| %>
<div class="form--field">
<%= ff.hidden_field :exist %>
<%= ff.check_box :hide_chart, { label: l('timelines.filter.hide_chart') }, "yes", "no" %>
</div>
<div class="form--field">
<%= ff.select(:zoom_factor,
filter_select_i18n_array_with_index_and_none(
timeline.available_zoom_factors,
'timelines.zoom.'), label: l("timelines.filter.zoom")) %>
</div>
<div class="form--field">
<%= ff.select(:zoom_factor,
filter_select_i18n_array_with_index_and_none(
timeline.available_zoom_factors,
'timelines.zoom.'), label: l("timelines.filter.zoom")) %>
</div>
<div class="form--field">
<%= ff.select(:initial_outline_expansion,
filter_select_i18n_array_with_index_and_none(
timeline.available_initial_outline_expansions,
'timelines.outlines.'),
label: l("timelines.filter.outline")) %>
<div class="form--field">
<%= ff.select(:initial_outline_expansion,
filter_select_i18n_array_with_index_and_none(
timeline.available_initial_outline_expansions,
'timelines.outlines.'),
label: l("timelines.filter.outline")) %>
</div>
<h4>
<%= l('timelines.filter.timeframe') %>
</h4>
<div class="form--field">
<%= ff.text_field :timeframe_start, label: l('timelines.filter.timeframe_start') %>
<%= calendar_for('timeline_options_timeframe_start') %>
</div>
<div class="form--field">
<%= ff.text_field :timeframe_end, label: l('timelines.filter.timeframe_end') %>
<%= calendar_for('timeline_options_timeframe_end') %>
</div>
<div class="form--field">
<% if User.current.impaired? %>
<%= ff.select :columns, internationalized_columns_select(timeline.available_columns),
{:selected => timeline.selected_columns},
{:multiple => true,
:size => 12} %>
<% else %>
<%= ff.label :columns, l("timelines.filter.columns") %>
<%= ff.hidden_field :columns, name: "timeline[options][columns][]", id: "timeline_options_columns_", value: timeline.selected_columns.join(","), :"data-values" => internationalized_columns_select_object(timeline.available_columns).concat(timeline.custom_field_columns).to_json %>
<% end %>
</div>
<div class="form--field">
<%= ff.select :project_sort, [[l('timelines.filter.sort.date'), 0], [l('timelines.filter.sort.alphabet'), '1']], label: l('timelines.filter.sort.project_sortation') %>
</div>
<% end %>
</div>
<div class="form--grouping" role="group" aria-labelledby="timeline--form--timeframe">
<div id="timeline--form--timeframe"
class="form--grouping-label"
title="<%= l('timelines.filter.timeframe') %>">
<%= l('timelines.filter.timeframe') %>
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.text_field :timeframe_start, label: l('timelines.filter.timeframe_start') %>
<%= calendar_for('timeline_options_timeframe_start') %>
</div>
<div class="form--field">
<%= ff.text_field :timeframe_end, label: l('timelines.filter.timeframe_end') %>
<%= calendar_for('timeline_options_timeframe_end') %>
</div>
</div>
</div>
<div class="form--field">
<% if User.current.impaired? %>
<%= ff.select :columns, internationalized_columns_select(timeline.available_columns),
{:selected => timeline.selected_columns},
{:multiple => true,
:size => 12} %>
<% else %>
<%= ff.label :columns,
l("timelines.filter.columns"),
for: "timeline_options_columns_",
class: "form--label" %>
<div class="form--field-container">
<%= ff.hidden_field :columns,
name: "timeline[options][columns][]",
id: "timeline_options_columns_",
value: timeline.selected_columns.join(","),
:"data-values" => internationalized_columns_select_object(timeline.available_columns).concat(timeline.custom_field_columns).to_json %>
</div>
<% end %>
</div>
<div class="form--field">
<%= ff.select :project_sort, [[l('timelines.filter.sort.date'), 0], [l('timelines.filter.sort.alphabet'), '1']], label: l('timelines.filter.sort.project_sortation') %>
</div>
<% end %>
</div>
</fieldset>

@ -147,38 +147,73 @@ See doc/COPYRIGHT.rdoc for more details.
}) %>
<% end %>
</div>
<h4><%= l('timelines.filter.project_time_filter_absolute_timeframe') %></h4>
<div class="form--field">
<%= ff.radio_button :planning_element_time, 'absolute' %>
</div>
<div class="form--field-container">
<%= ff.label :planning_element_time_absolute_one %>
<%= ff.text_field :planning_element_time_absolute_one, label: l('timelines.filter.project_time_filter_historical_from') %>
<%= calendar_for :timeline_options_planning_element_time_absolute_one %>
<%= ff.text_field :planning_element_time_absolute_two, label: l('timelines.filter.project_time_filter_historical_to') %>
<%= calendar_for :timeline_options_planning_element_time_absolute_two %>
</div>
<h4><%= l('timelines.filter.project_time_filter_relative_timeframe') %></h4>
<div class="form--field">
<%= ff.radio_button :planning_element_time, 'relative' %>
</div>
<div class="form--field-container">
<%= ff.text_field :planning_element_time_relative_one, label: l('timelines.filter.project_time_filter_historical_from') %>
<%= ff.select :planning_element_time_relative_one_unit,
[ [l('timelines.filter.time_relative.days'), 0],
[l('timelines.filter.time_relative.weeks'), '1'],
[l('timelines.filter.time_relative.months'), '2']
],
{ :selected => timeline.options['planning_element_time_relative_one_unit'], label: "" },
{ :multiple => false, :size => 1 } %>
<%= ff.text_field :planning_element_time_relative_two, label: l('timelines.filter.project_time_filter_historical_to') %>
<%= ff.select :planning_element_time_relative_two_unit,
[ [l('timelines.filter.time_relative.days'), 0],
[l('timelines.filter.time_relative.weeks'), '1'],
[l('timelines.filter.time_relative.months'), '2']
],
{ :selected => timeline.options['planning_element_time_relative_one_unit'], label: "" },
{ :multiple => false, :size => 1} %>
<div class="form--grouping" role="group" aria-labelledby="timeline--form--project-filter-timeframe">
<div id="timeline--form--project-filter-timeframe"
class="form--grouping-label">
<%= l('timelines.filter.project_time_filter_timeframe') %>
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.label :planning_element_time_absolute,
l('timelines.filter.comparison.absolute'),
class: "form--label" %>
<div class="form--field-container">
<div class="form--radio-button-container">
<%= ff.radio_button :planning_element_time, 'absolute' %>
</div>
</div>
</div>
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.text_field :planning_element_time_absolute_one, label: l('timelines.filter.project_time_filter_historical_from') %>
<%= calendar_for :timeline_options_planning_element_time_absolute_one %>
</div>
<div class="form--field">
<%= ff.text_field :planning_element_time_absolute_two, label: l('timelines.filter.project_time_filter_historical_to') %>
<%= calendar_for :timeline_options_planning_element_time_absolute_two %>
</div>
</div>
<div class="form--grouping-row">
<hr class="form--separator">
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.label :planning_element_time_relative,
l('timelines.filter.comparison.relative'),
class: "form--label" %>
<div class="form--field-container">
<div class="form--radio-button-container">
<%= ff.radio_button :planning_element_time, 'relative' %>
</div>
</div>
</div>
</div>
<div class="form--grouping-row">
<div class="form--field">
<%= ff.text_field :planning_element_time_relative_one, label: l('timelines.filter.project_time_filter_historical_from') %>
</div>
<div class="form--field">
<%= ff.select :planning_element_time_relative_one_unit,
options_for_timeunits(timeline.options['planning_element_time_relative_one_unit']),
no_label: true %>
</div>
<div class="form--field">
<%= ff.text_field :planning_element_time_relative_two, label: l('timelines.filter.project_time_filter_historical_to') %>
</div>
<div class="form--field">
<%= ff.select :planning_element_time_relative_two_unit,
options_for_timeunits(timeline.options['planning_element_time_relative_two_unit']),
no_label: true %>
</div>
</div>
</div>
<% end %>
</div>

@ -1480,7 +1480,8 @@ de:
absolute: "Absolut"
none: "Kein Planungsvergleich"
relative: "Relativ"
compare_relative: "Vergleiche aktuelle Planung mit vor %{timespan}"
compare_relative_prefix: "Vergleiche aktuelle Planung mit vor"
compare_relative_suffix: ""
compare_absolute: "Vergleiche aktuelle Planung mit %{date}"
time_relative:
days: "Tagen"
@ -1506,8 +1507,7 @@ de:
work_package_assignee: "Zugewiesen an"
project_time_filter: "Projekte mit Arbeitspaket eines Typs in einem Zeitfenster"
project_time_filter_absolute_timeframe: "Absolutes Zeitfenster"
project_time_filter_relative_timeframe: "Relatives Zeitfenster"
project_time_filter_absolute_timeframe: "Zeitfenster"
project_time_filter_historical_from: "von"
project_time_filter_historical_to: "bis"
project_time_filter_historical: "%{start_label} %{startdate} %{end_label} %{enddate}"

@ -1477,7 +1477,8 @@ en:
absolute: "Absolute"
none: "None"
relative: "Relative"
compare_relative: "Compare current planning to %{timespan} ago"
compare_relative_prefix: "Compare current planning to"
compare_relative_suffix: "ago"
compare_absolute: "Compare current planning to %{date}"
time_relative:
days: "days"
@ -1505,8 +1506,7 @@ en:
status: "Show status"
project_time_filter: "Projects with a work package of a certain type in a certain timeframe"
project_time_filter_absolute_timeframe: "Absolute timeframe"
project_time_filter_relative_timeframe: "Relative timeframe"
project_time_filter_timeframe: "Timeframe"
project_time_filter_historical_from: "from"
project_time_filter_historical_to: "to"
project_time_filter_historical: "%{start_label} %{startdate} %{end_label} %{enddate}"

@ -151,7 +151,7 @@ class TabularFormBuilder < ActionView::Helpers::FormBuilder
# Returns a label tag for the given field
def label_for_field(field, options = {}, translation_form = nil)
options = options.dup
return '' if options.delete(:no_label)
return ''.html_safe if options.delete(:no_label)
text = options[:label].is_a?(Symbol) ? l(options[:label]) : options[:label]
text ||= @object.class.human_attribute_name(field.to_sym) if @object.is_a?(ActiveRecord::Base)
text += @template.content_tag('span', ' *', class: 'required') if options.delete(:required)

Loading…
Cancel
Save