Merge pull request #5283 from opf/fix/24909-improve-styling-of-custom-field-value-list

[24909] Improve styling of custom field value list

app/assets/stylesheets/content/_table.sass

@@ -37,6 +37,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
 .generic-table--container
   position:     relative
   height:       100%
+  width:        100%
   overflow:
     x: auto
     y: hidden

app/assets/stylesheets/content/_tables.sass

@@ -260,3 +260,10 @@ tr.-checked
     border: 0
   td.checkbox
     display: none
+
+#custom-options-table
+  .custom-option-value
+    display: inline-block
+    width: calc(100% - 5rem)
+  .icon-toggle:before
+    vertical-align: middle

app/assets/stylesheets/layout/_base.sass

@@ -116,3 +116,6 @@ body
     height: 0
     clear: both
     visibility: hidden
+
+.-draggable
+  cursor: move

app/views/custom_fields/_custom_options.html.erb

@@ -9,11 +9,11 @@
       </colgroup>
       <thead>
         <tr>
-          <th style="width: 70%;">
+          <th>
             <div class="generic-table--sort-header-outer">
               <div class="generic-table--sort-header">
                 <span>
-                  Value
+                  <%= t('activerecord.attributes.custom_value.value') %>
                 </span>
               </div>
             </div>
@@ -21,7 +21,9 @@
           <th>
             <div class="generic-table--sort-header-outer">
               <div class="generic-table--sort-header">
-                <span>Default</span>
+                <span>
+                  <%= t(:label_default) %>
+                </span>
               </div>
             </div>
           </th>
@@ -45,24 +47,18 @@
         <tr
           id="custom-option-row-<%= i + 1 %>"
           draggable="true"
-          class="custom-option-row"
+          class="custom-option-row -draggable"
           ondrop="CustomFields.drop(event)"
           ondragstart="CustomFields.drag(event)"
           ondragover="CustomFields.allowDrop(event)"
         >
           <td>
-            <table border="0">
-              <td style="min-width: 25px; cursor: pointer; padding-right: 0px;">
-                <span class="icon icon-toggle"></span>
-              </td>
-              <td style="width: 100%;">
-                <input style="float: left;"
-                  class="form--text-field custom-option-value" type="text"
-                  name="custom_field[custom_options][<%= custom_option.id %>][value]"
-                  value="<%= custom_option.value %>"
-                >
-              </td>
-            </table>
+            <span class="icon icon-table icon-toggle"></span>
+            <input class="form--text-field custom-option-value"
+              type="text"
+              name="custom_field[custom_options][<%= custom_option.id %>][value]"
+              value="<%= custom_option.value %>"
+            >
           </td>
           <td>
             <input
@@ -98,6 +94,6 @@
         </tr>
       <% end %>
     </table>
-    
+
   </div>
 </div>

app/views/custom_fields/_form.html.erb

@@ -77,21 +77,15 @@ See doc/COPYRIGHT.rdoc for more details.
     <% end %>
   </div>
 
-  <div class="form--field" id="custom_field_possible_values_attributes">
-    <% if @custom_field.new_record? || @custom_field.field_format == 'list' %>
-      <label
-        class="form--label"
-        title="<%= I18n.t("activerecord.attributes.custom_field.possible_values") %>"
-        for="custom_field_possible_values"
-      >
-        <%= I18n.t("activerecord.attributes.custom_field.possible_values") %>
-      </label>
-      <span class="form--field-container">
-        <%= render partial: "custom_fields/custom_options", locals: { custom_options: @custom_field.custom_options, f: f } %>
-      </span>
-      <a id="add-custom-option" href="#" class="form--field-extra-actions icon icon-add">Add</a>
-    <% end %>
-  </div>
+  <% if @custom_field.new_record? || @custom_field.field_format == 'list' %>
+    <fieldset class="form--fieldset">
+      <legend class="form--fieldset-legend"><%= I18n.t("activerecord.attributes.custom_field.possible_values") %></legend>
+      <div class="form--field" id="custom_field_possible_values_attributes">
+          <%= render partial: "custom_fields/custom_options", locals: { custom_options: @custom_field.custom_options, f: f } %>
+          <a id="add-custom-option" href="#" class="icon icon-add"><%= t(:button_add) %></a>
+      </div>
+    </fieldset>
+  <% end %>
   <div id="custom_field_default_value_attributes">
     <div class="form--field" id="default_value_text">
       <% if @custom_field.new_record? || @custom_field.field_format != 'bool' %>