TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Feature/18329 foundation apps framework forms refactor timelines
pull/2549/head
Alex Coles 10 years ago
parent d72147813e 82b3e7b60c
commit 0324b5cd39
10 changed files with 262 additions and 115 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 66
      app/views/timelines/_comparison.html.erb
  6. 25
      app/views/timelines/_general.html.erb
  7. 69
      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

39
app/assets/stylesheets/content/_forms.md
Unescape View File

@ -234,6 +234,45 @@
One never lies about one's age. One never lies about one's age.
</div> </div>
</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> </fieldset>
</form> </form>
``` ```

19
app/assets/stylesheets/content/_forms.sass
Unescape View File

@ -350,6 +350,25 @@ fieldset.form--fieldset
.form & .form &
margin-bottom: 0.5rem 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 .form--table
border: 0 none border: 0 none
background: none background: none

18
app/assets/stylesheets/timelines.css.sass
Unescape View File

@ -85,30 +85,18 @@ li.select2-result.select2-visible-selected-parent
.select2-choices .select2-choices
width: 500px 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 #project-search-container .select2-container
margin-left: 0 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 .timelines_edit_form
.calendar-trigger .calendar-trigger
margin-right: 1em margin-right: 1em
input input
margin-left: 1em margin-left: 1em
#timeline_options_compare_to_relative /* Hack for as long as select2 is in there.
padding-right: 5px .select2-container.form--select
text-align: right border: none
width: 40px
/* ╭───────────────────────────────────────────────────────────────────╮ * /* ╭───────────────────────────────────────────────────────────────────╮ *
* │ Timeline toolbar & icons. │ * * │ Timeline toolbar & icons. │ *

7
app/helpers/timelines_helper.rb
Unescape View File

@ -81,6 +81,13 @@ module TimelinesHelper
s s
end 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 def options_for_project_types
ProjectType.all.map { |t| [t.name, t.id] } ProjectType.all.map { |t| [t.name, t.id] }
end end

66
app/views/timelines/_comparison.html.erb
Unescape View File

@ -35,33 +35,75 @@ See doc/COPYRIGHT.rdoc for more details.
<div style="display:none;"> <div style="display:none;">
<%= f.fields_for :options, timeline_options do |ff| %> <%= f.fields_for :options, timeline_options do |ff| %>
<div class="form--field"> <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"> <div class="form--field-container">
<div class="form--radio-button-container">
<%= ff.radio_button :comparison, "none", no_label: true %> <%= ff.radio_button :comparison, "none", no_label: true %>
</div> </div>
</div> </div>
</div>
<div class="form--field"> <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"> <div class="form--field-container">
<%= ff.radio_button :comparison, "relative", no_label: true %> <%= ff.radio_button :comparison, "relative" %>
<%= ff.label :compare_to_relative, l('timelines.filter.comparison.compare_relative', timespan: "") %> </div>
<%= ff.text_field :compare_to_relative, no_label: true %> </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, <%= ff.select :compare_to_relative_unit,
[ [l('timelines.filter.time_relative.days'), 0], options_for_timeunits(nil),
[l('timelines.filter.time_relative.weeks'), '1'], no_label: true %>
[l('timelines.filter.time_relative.months'), '2'] <span class="form-label -transparent"><%=l('timelines.filter.comparison.compare_relative_suffix')%></span>
], label: "" # FIXME: this breaks with no_label: true </div>
%> </div>
</div> </div>
</div> </div>
<div class="form--field"> <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"> <div class="form--field-container">
<%= ff.radio_button :comparison, "absolute", no_label: true %> <%= 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: "") %> <%= ff.text_field :compare_to_absolute, label: l('timelines.filter.comparison.compare_absolute', date: "") %>
<%= calendar_for('timeline_options_compare_to_absolute') %> <%= calendar_for('timeline_options_compare_to_absolute') %>
</div> </div>
</div> </div>
</div>
<% end %> <% end %>
</div> </div>
</fieldset> </fieldset>

25
app/views/timelines/_general.html.erb
Unescape View File

@ -32,6 +32,7 @@ See doc/COPYRIGHT.rdoc for more details.
<a href="javascript:"><%= l('timelines.filter.timeline') %></a> <a href="javascript:"><%= l('timelines.filter.timeline') %></a>
</legend> </legend>
<div>
<div class="form--field"> <div class="form--field">
<%= f.text_field :name, required: true %> <%= f.text_field :name, required: true %>
</div> </div>
@ -56,9 +57,13 @@ See doc/COPYRIGHT.rdoc for more details.
label: l("timelines.filter.outline")) %> label: l("timelines.filter.outline")) %>
</div> </div>
<h4> <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') %> <%= l('timelines.filter.timeframe') %>
</h4> </div>
<div class="form--grouping-row">
<div class="form--field"> <div class="form--field">
<%= ff.text_field :timeframe_start, label: l('timelines.filter.timeframe_start') %> <%= ff.text_field :timeframe_start, label: l('timelines.filter.timeframe_start') %>
<%= calendar_for('timeline_options_timeframe_start') %> <%= calendar_for('timeline_options_timeframe_start') %>
@ -67,6 +72,8 @@ See doc/COPYRIGHT.rdoc for more details.
<%= ff.text_field :timeframe_end, label: l('timelines.filter.timeframe_end') %> <%= ff.text_field :timeframe_end, label: l('timelines.filter.timeframe_end') %>
<%= calendar_for('timeline_options_timeframe_end') %> <%= calendar_for('timeline_options_timeframe_end') %>
</div> </div>
</div>
</div>
<div class="form--field"> <div class="form--field">
<% if User.current.impaired? %> <% if User.current.impaired? %>
<%= ff.select :columns, internationalized_columns_select(timeline.available_columns), <%= ff.select :columns, internationalized_columns_select(timeline.available_columns),
@ -74,12 +81,22 @@ See doc/COPYRIGHT.rdoc for more details.
{:multiple => true, {:multiple => true,
:size => 12} %> :size => 12} %>
<% else %> <% else %>
<%= ff.label :columns, l("timelines.filter.columns") %> <%= ff.label :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 %> 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 %> <% end %>
</div> </div>
<div class="form--field"> <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') %> <%= ff.select :project_sort, [[l('timelines.filter.sort.date'), 0], [l('timelines.filter.sort.alphabet'), '1']], label: l('timelines.filter.sort.project_sortation') %>
</div> </div>
<% end %> <% end %>
</div>
</fieldset> </fieldset>

69
app/views/timelines/filter/_projects.html.erb
Unescape View File

@ -147,38 +147,73 @@ See doc/COPYRIGHT.rdoc for more details.
}) %> }) %>
<% end %> <% end %>
</div> </div>
<h4><%= l('timelines.filter.project_time_filter_absolute_timeframe') %></h4>
<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"> <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' %> <%= ff.radio_button :planning_element_time, 'absolute' %>
</div> </div>
<div class="form--field-container"> </div>
<%= ff.label :planning_element_time_absolute_one %> </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') %> <%= 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 %> <%= 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') %> <%= 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 %> <%= calendar_for :timeline_options_planning_element_time_absolute_two %>
</div> </div>
<h4><%= l('timelines.filter.project_time_filter_relative_timeframe') %></h4> </div>
<div class="form--grouping-row">
<hr class="form--separator">
</div>
<div class="form--grouping-row">
<div class="form--field"> <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' %> <%= ff.radio_button :planning_element_time, 'relative' %>
</div> </div>
<div class="form--field-container"> </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') %> <%= 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, <%= ff.select :planning_element_time_relative_one_unit,
[ [l('timelines.filter.time_relative.days'), 0], options_for_timeunits(timeline.options['planning_element_time_relative_one_unit']),
[l('timelines.filter.time_relative.weeks'), '1'], no_label: true %>
[l('timelines.filter.time_relative.months'), '2'] </div>
], <div class="form--field">
{ :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.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, <%= ff.select :planning_element_time_relative_two_unit,
[ [l('timelines.filter.time_relative.days'), 0], options_for_timeunits(timeline.options['planning_element_time_relative_two_unit']),
[l('timelines.filter.time_relative.weeks'), '1'], no_label: true %>
[l('timelines.filter.time_relative.months'), '2'] </div>
], </div>
{ :selected => timeline.options['planning_element_time_relative_one_unit'], label: "" },
{ :multiple => false, :size => 1} %>
</div> </div>
<% end %> <% end %>
</div> </div>

6
config/locales/de.yml
Unescape View File

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

6
config/locales/en.yml
Unescape View File

@ -1477,7 +1477,8 @@ en:
absolute: "Absolute" absolute: "Absolute"
none: "None" none: "None"
relative: "Relative" 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}" compare_absolute: "Compare current planning to %{date}"
time_relative: time_relative:
days: "days" days: "days"
@ -1505,8 +1506,7 @@ en:
status: "Show status" status: "Show status"
project_time_filter: "Projects with a work package of a certain type in a certain timeframe" 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_timeframe: "Timeframe"
project_time_filter_relative_timeframe: "Relative timeframe"
project_time_filter_historical_from: "from" project_time_filter_historical_from: "from"
project_time_filter_historical_to: "to" project_time_filter_historical_to: "to"
project_time_filter_historical: "%{start_label} %{startdate} %{end_label} %{enddate}" project_time_filter_historical: "%{start_label} %{startdate} %{end_label} %{enddate}"

2
lib/tabular_form_builder.rb
Unescape View File

@ -151,7 +151,7 @@ class TabularFormBuilder < ActionView::Helpers::FormBuilder
# Returns a label tag for the given field # Returns a label tag for the given field
def label_for_field(field, options = {}, translation_form = nil) def label_for_field(field, options = {}, translation_form = nil)
options = options.dup 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 = 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 ||= @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) text += @template.content_tag('span', ' *', class: 'required') if options.delete(:required)

Write Preview
Loading…
Cancel
Save