Uses icon font for column order selection

app/assets/javascripts/select_list_move.js

@@ -26,17 +26,6 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-function swapOptions(theSel, index1, index2)
-{
-	var text, value;
-  text = theSel.options[index1].text;
-  value = theSel.options[index1].value;
-  theSel.options[index1].text = theSel.options[index2].text;
-  theSel.options[index1].value = theSel.options[index2].value;
-  theSel.options[index2].text = text;
-  theSel.options[index2].value = value;
-}
-
 function moveOptions(sourceId, destId) {
   var sourceSelection = jQuery('#' + sourceId);
   var destSelection = jQuery('#' + destId);
@@ -52,20 +41,24 @@ function moveOptions(sourceId, destId) {
   });
 }
 
-function moveOptionUp(theSel) {
+function swapOptions(option1, option2) {
-	var index = theSel.selectedIndex;
+  if (option1.length == 1 && option2.length == 1) {
-	if (index > 0) {
+    option2.after(option1);
-		swapOptions(theSel, index-1, index);
-  	theSel.selectedIndex = index-1;
   }
 }
 
-function moveOptionDown(theSel) {
+function moveOptionUp(selectionId) {
-	var index = theSel.selectedIndex;
+  var selection = jQuery('#' + selectionId);
-	if (index < theSel.length - 1) {
+  var selectedOptions = selection.find('option:selected');
-		swapOptions(theSel, index, index+1);
+
-  	theSel.selectedIndex = index+1;
+  swapOptions(selectedOptions.prev(), selectedOptions);
 }
+
+function moveOptionDown(selectionId) {
+  var selection = jQuery('#' + selectionId);
+  var selectedOptions = selection.find('option:selected');
+
+  swapOptions(selectedOptions, selectedOptions.next());
 }
 
 function selectAllOptions(id)

app/views/queries/_columns.html.erb

@@ -54,10 +54,14 @@ See doc/COPYRIGHT.rdoc for more details.
 		          :id => 'selected_columns', :multiple => true, :size => 10, :style => "width:150px" %>
 		</td>
 		<td class="table-buttons" align="center" valign="middle">
-			<input type="button" value="&#8593;" onclick="moveOptionUp(this.form.selected_columns);"
+      <%= link_to icon_wrapper('icon icon-arrow-right5-3', l(:label_sort_higher)), {},
-       title="<%= l(:label_sort_higher) %>" /><br />
+                               { title: l(:label_sort_higher),
-			<input type="button" value="&#8595;" onclick="moveOptionDown(this.form.selected_columns);"
+                                 onclick: "moveOptionUp('selected_columns'); return false;" } %>
-       title="<%= l(:label_sort_lower) %>" />
+      <br />
+      <%= link_to icon_wrapper('icon icon-arrow-right5-2', l(:label_sort_lower)), {},
+                               { title: l(:label_sort_lower),
+                                 style: "margin-right: 3px",
+                                 onclick: "moveOptionDown('selected_columns'); return false;" } %>
 		</td>
 	</tr>
 </table>