Merge pull request #2648 from ulferts/fix/work_package_attributes_in_ie

Fix/work package attributes in ie

app/assets/stylesheets/_misc_legacy.sass

@@ -230,15 +230,6 @@ div
     text-align: right
     white-space: nowrap
 
-form .attributes
-  margin-bottom: 8px
-  overflow: auto
-  p
-    padding-top: 1px
-    padding-bottom: 2px
-  select
-    min-width: 50%
-
 ul.projects
   margin: 0
   padding-left: 1em

app/assets/stylesheets/content/_forms.md

@@ -73,6 +73,9 @@
         <div class="form--text-field-container">
           <input type="number" class="form--text-field">
         </div>
+        <a href="#" class="form--field-inline-action">
+          <span class="">Add 5</span>
+        </a>
       </div>
       <div class="form--field-instructions">
         Any number from 1 to 10!
@@ -387,6 +390,78 @@
 </form>
 ```
 
+## Forms: Column layout
+
+```
+@full-width
+
+<form class="form">
+  <div class="grid-block">
+    <div class="form--column">
+      <div class="form--field -required">
+        <label class="form--label">Text:</label>
+        <div class="form--field-container">
+          <div class="form--text-field-container">
+            <input type="text" class="form--text-field">
+          </div>
+        </div>
+        <div class="form--field-instructions">
+          Write anything you like.
+        </div>
+      </div>
+      <div class="form--field">
+        <label class="form--label">Email:</label>
+        <div class="form--field-container">
+          <div class="form--text-field-container">
+            <input type="email" class="form--text-field" placeholder="a valid email">
+          </div>
+        </div>
+        <div class="form--field-extra-actions">
+          <a href="#">Request new email</a>
+        </div>
+      </div>
+      <div class="form--field -required">
+        <label class="form--label">Number:</label>
+        <div class="form--field-container">
+          <div class="form--text-field-container">
+            <input type="number" class="form--text-field">
+          </div>
+          <a href="#" class="form--field-inline-action">
+            <span class="">Add 5</span>
+          </a>
+        </div>
+        <div class="form--field-instructions">
+          Any number from 1 to 10!
+        </div>
+      </div>
+    </div>
+    <div class="form--column">
+      <div class="form--field -required">
+        <label class="form--label">Long text:</label>
+        <div class="form--field-container">
+          <div class="form--text-area-container">
+            <textarea class="form--text-area">El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.</textarea>
+          </div>
+        </div>
+        <div class="form--field-instructions">
+          Write more about anything.
+        </div>
+      </div>
+      <div class="form--field -required -no-label">
+        <div class="form--field-container">
+          <div class="form--text-field-container">
+            <input type="text" class="form--text-field">
+          </div>
+        </div>
+        <div class="form--field-instructions">
+          This field has no label, which means you really can write what you like.
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+```
+
 # Forms: Attachment fieldsets
 
 ```
@@ -434,7 +509,7 @@
     </span>
   </div>
 </fieldset>
-```
+
 
 # Forms: Text fields
 

app/assets/stylesheets/content/_forms.sass

@@ -42,6 +42,8 @@ $form--field-types: (text-field, text-area, select, check-box, range-field, sear
   text-align: left
   font-weight: normal
   vertical-align: middle
+  text-overflow: ellipsis
+  overflow: hidden
 
 // A general CSS class to be applied to forms using the above defined form style.
 // We can't define this on form itself as this would break a lot of existing forms.
@@ -274,6 +276,11 @@ fieldset.form--fieldset
     @include grid-size(shrink)
     max-width: none
 
+.form--field-inline-action
+  @include grid-content(shrink)
+  padding: 0 0 0 0.2rem
+  line-height: 2rem
+
 %form--field-after-container
   @include grid-content(10, 2)
   padding:      0
@@ -413,6 +420,16 @@ fieldset.form--fieldset
   width:        1rem
   text-align:   center
 
+.form--column
+  @include grid-block
+  @include grid-orient(vertical)
+
+  &:nth-last-of-type(n+2)
+    padding-right: $block-padding
+
+  .form--field
+    flex-basis: auto
+
 .inline-label
   > .form-label.-transparent
     margin-bottom: 0

app/helpers/work_packages_helper.rb

@@ -565,22 +565,29 @@ module WorkPackagesHelper
     return if locals[:project].categories.empty?
 
     category_field = work_package_form_field do
-      field = form.select(:category_id,
-                          (locals[:project].categories.map { |c| [c.name, c.id] }),
-                          include_blank: true)
-
-      if authorize_for('categories', 'new')
-
-        field += prompt_to_remote(icon_wrapper('icon icon-add icon4',
-                                               I18n.t(:label_work_package_category_new)),
-                                  I18n.t(:label_work_package_category_new),
-                                  'category[name]',
-                                  project_categories_path(locals[:project]),
-                                  class: 'no-decoration-on-hover grid-block',
-                                  title: I18n.t(:label_work_package_category_new))
+      label = form.label(:category_id)
+
+      field = content_tag(:span, class: 'form--field-container') do
+        field = form.select(:category_id,
+                            (locals[:project].categories.map { |c| [c.name, c.id] }),
+                            include_blank: true,
+                            no_label: true)
+
+        if authorize_for('categories', 'new')
+
+          field += prompt_to_remote(icon_wrapper('icon icon-add icon4',
+                                                 I18n.t(:label_work_package_category_new)),
+                                    I18n.t(:label_work_package_category_new),
+                                    'category[name]',
+                                    project_categories_path(locals[:project]),
+                                    class: 'no-decoration-on-hover form--field-inline-action',
+                                    title: I18n.t(:label_work_package_category_new))
+        end
+
+        field
       end
 
-      field
+      label + field
     end
 
     WorkPackageAttribute.new(:category, category_field)
@@ -590,22 +597,29 @@ module WorkPackagesHelper
     return if work_package.assignable_versions.empty?
 
     version_field = work_package_form_field do
-      field = form.select(:fixed_version_id,
-                          version_options_for_select(work_package.assignable_versions,
-                                                     work_package.fixed_version),
-                          include_blank: true)
-
-      if authorize_for('versions', 'new')
-        field += prompt_to_remote(icon_wrapper('icon icon-add icon4',
-                                               I18n.t(:label_version_new)),
-                                  l(:label_version_new),
-                                  'version[name]',
-                                  project_versions_path(locals[:project]),
-                                  class: 'no-decoration-on-hover grid-block',
-                                  title: l(:label_version_new))
+      label = form.label(:fixed_version_id)
+
+      field = content_tag(:span, class: 'form--field-container') do
+        field = form.select(:fixed_version_id,
+                            version_options_for_select(work_package.assignable_versions,
+                                                       work_package.fixed_version),
+                            include_blank: true,
+                            no_label: true)
+
+        if authorize_for('versions', 'new')
+          field += prompt_to_remote(icon_wrapper('icon icon-add icon4',
+                                                 I18n.t(:label_version_new)),
+                                    l(:label_version_new),
+                                    'version[name]',
+                                    project_versions_path(locals[:project]),
+                                    class: 'no-decoration-on-hover form--field-inline-action',
+                                    title: l(:label_version_new))
+        end
+
+        field
       end
 
-      field
+      label + field
     end
 
     WorkPackageAttribute.new(:fixed_version, version_field)

app/views/work_packages/_two_column_attributes.html.erb

@@ -29,12 +29,12 @@ See doc/COPYRIGHT.rdoc for more details.
 <% left_attributes, right_attributes = attributes.in_groups(2, false) %>
 
 <div class="grid-block">
-  <div class="grid-block vertical">
+  <div class="form--column">
     <% left_attributes.each do |attribute| %>
       <%= attribute.field %>
     <% end %>
   </div>
-  <div class="grid-block vertical">
+  <div class="form--column">
     <% right_attributes.each do |attribute| %>
       <%= attribute.field %>
     <% end %>

spec/helpers/work_packages_helper_spec.rb

@@ -32,7 +32,12 @@ describe WorkPackagesHelper, type: :helper do
   let(:stub_work_package) { FactoryGirl.build_stubbed(:work_package) }
   let(:stub_project) { FactoryGirl.build_stubbed(:project) }
   let(:stub_type) { FactoryGirl.build_stubbed(:type) }
-  let(:form) { double('form', select: '').as_null_object }
+  let(:label_placeholder) { '<label>blubs</label>'.html_safe }
+  let(:form) do
+    double('form',
+           select: '',
+           label: label_placeholder).as_null_object
+  end
   let(:stub_user) { FactoryGirl.build_stubbed(:user) }
 
   def inside_form(&_block)
@@ -273,12 +278,15 @@ describe WorkPackagesHelper, type: :helper do
 
       expect(form).to receive(:select).with(:category_id,
                                             [[stub_category.name, stub_category.id]],
-                                            include_blank: true).and_return(select)
+                                            include_blank: true,
+                                            no_label: true).and_return(select)
 
       expect(helper.work_package_form_category_attribute(form,
                                                          stub_work_package,
                                                          project: stub_project).field)
-        .to eq("<div class=\"form--field \">category html</div>")
+        .to be_html_eql("<div class=\"form--field \">#{label_placeholder}
+                         <span class=\"form--field-container\">category html</span>
+                         </div>")
     end
 
     it 'should add an additional remote link to create new categories if allowed' do