fixed css for select in users groups

rhodecode/templates/admin/users_groups/users_group_edit.html

@@ -1,215 +1,215 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.html"/>
 
 <%def name="title()">
     ${_('Edit users group')} ${c.users_group.users_group_name} - ${c.rhodecode_name}
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.url('admin_home'))} 
     &raquo; 
     ${h.link_to(_('UsersGroups'),h.url('users_groups'))} 
     &raquo;
     ${_('edit')} "${c.users_group.users_group_name}"
 </%def>
 
 <%def name="page_nav()">
     ${self.menu('admin')}
 </%def>
 
 <%def name="main()">
 <div class="box">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}       
     </div>
     <!-- end box / title -->
     ${h.form(url('users_group', id=c.users_group.users_group_id),method='put', id='edit_users_group')}
     <div class="form">
         <!-- fields -->
 	        <div class="fields">
 	             <div class="field">
 	                <div class="label">
 	                    <label for="users_group_name">${_('Group name')}:</label>
 	                </div>
 	                <div class="input">
 	                    ${h.text('users_group_name',class_='small')}
 	                </div>
 	             </div>
 	            
 	             <div class="field">
 	                <div class="label label-checkbox">
 	                    <label for="users_group_active">${_('Active')}:</label>
 	                </div>
 	                <div class="checkboxes">
 	                    ${h.checkbox('users_group_active',value=True)}
 	                </div>
 	             </div>
 	            <div class="field">
                     <div class="label">
                         <label for="users_group_active">${_('Members')}:</label>
                     </div>
                     <div class="select">
 	                    <table> 
 	                            <tr>
 	                                <td>
 	                                    <div>
 	                                        <div style="float:left">
 	                                            <div class="text" style="padding: 0px 0px 6px;">${_('Choosen group members')}</div>
 	                                            ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,style="min-width:210px")}
 	                                           <div  id="remove_all_elements" style="cursor:pointer;text-align:center">
 	                                               ${_('Remove all elements')}
-	                                               <img alt="remove" src="/images/icons/arrow_right.png">
+	                                               <img alt="remove" style="vertical-align:text-bottom" src="/images/icons/arrow_right.png"/>
 	                                           </div>
 	                                        </div>
 	                                        <div style="float:left;width:20px;padding-top:50px">
 	                                            <img alt="add" id="add_element" 
 	                                                style="padding:2px;cursor:pointer" 
-	                                                src="/images/icons/arrow_left.png">
+	                                                src="/images/icons/arrow_left.png"/>
 	                                            <br />
 	                                            <img alt="remove" id="remove_element" 
 	                                                style="padding:2px;cursor:pointer" 
-	                                                src="/images/icons/arrow_right.png">
+	                                                src="/images/icons/arrow_right.png"/>
 	                                        </div>
 	                                        <div style="float:left">
 	                                             <div class="text" style="padding: 0px 0px 6px;">${_('Available members')}</div>
 	                                             ${h.select('available_members',[],c.available_members,multiple=True,size=8,style="min-width:210px")}
 	                                             <div id="add_all_elements" style="cursor:pointer;text-align:center">
-	                                                   <img alt="add" src="/images/icons/arrow_left.png">
+	                                                   <img alt="add" style="vertical-align:text-bottom" src="/images/icons/arrow_left.png"/>
 	                                                    ${_('Add all elements')}
 	                                             </div>	                                        
 	                                        </div>
 	                                    </div>
 	                                </td>           
 	                            </tr>       
 	                    </table>                    
                     </div>	            
 
                 </div>			        
                 <div class="buttons">
                   ${h.submit('save','save',class_="ui-button")}
                 </div>             
             </div>          
     </div>        
 ${h.end_form()}        
 </div>
     
 <script type="text/javascript">
     YAHOO.util.Event.onDOMReady(function(){
             var D = YAHOO.util.Dom;
             var E = YAHOO.util.Event;
             
             //definition of containers ID's
             var available_container = 'available_members';
             var selected_container = 'users_group_members';
             //form containing containers id
             var form_id = 'edit_users_group';
             
             //temp container for selected storage.
             var cache = new Array();
             var c =  D.get(selected_container);
             
             //get only selected options for further fullfilment
             for(var i = 0;node =c.options[i];i++){
                 if(node.selected){
                     //push selected to my temp storage left overs :)
                     cache.push(node);
                 }   
             }
             
             //clear 'selected' select
             c.options.length = 0;
 
             //fill it with remembered options
             for(var i = 0;node = cache[i];i++){
                 c.options[i]=new Option(node.text, node.value, false, false);
             }
             
             function prompts_action_callback(e){
                 
                 var choosen = D.get(selected_container);  
                 var available = D.get(available_container);
                 
                 //get checked and unchecked options from field
                 function get_checked(from_field){
                     //temp container for storage.
                     var sel_cache = new Array();
                     var oth_cache = new Array();
                     
                     for(var i = 0;node = from_field.options[i];i++){
                         if(node.selected){
                             //push selected fields :)
                             sel_cache.push(node);
                         }
                         else{
                         	oth_cache.push(node)
                         }
                     }                    
                     
                     return [sel_cache,oth_cache]
                 }
                 
                 //fill the field with given options
                 function fill_with(field,options){
                 	//clear firtst
                 	field.options.length=0;
                     for(var i = 0;node = options[i];i++){
                             field.options[i]=new Option(node.text, node.value, 
                                     false, false);
                     }
                 	
                 }
                 //adds to current field
                 function add_to(field,options){
                     for(var i = 0;node = options[i];i++){
                             field.appendChild(new Option(node.text, node.value, 
                                     false, false));
                     }
                 }
                 
                 // add action
                 if (this.id=='add_element'){
                     var c = get_checked(available);
                     add_to(choosen,c[0]);
                     fill_with(available,c[1]);
                 }
                 // remove action
                 if (this.id=='remove_element'){
                     var c = get_checked(choosen);
                     add_to(available,c[0]);
                     fill_with(choosen,c[1]);             
                 }                   
                 // add all elements
                 if(this.id=='add_all_elements'){
                     for(var i=0; node = available.options[i];i++){
                             choosen.appendChild(new Option(node.text, 
                                     node.value, false, false));
                     }
                     available.options.length = 0;
                 }
                 //remove all elements
                 if(this.id=='remove_all_elements'){
                     for(var i=0; node = choosen.options[i];i++){
                         available.appendChild(new Option(node.text, 
                                 node.value, false, false));
                     }
                     choosen.options.length = 0;                	
                 }
                 
             }
             
     
             E.addListener(['add_element','remove_element',
                            'add_all_elements','remove_all_elements'],'click',
                            prompts_action_callback)
 
             E.addListener(form_id,'submit',function(){
                 var choosen = D.get(selected_container);
                 for (var i = 0; i < choosen.options.length; i++) {
                     choosen.options[i].selected = 'selected';
                 }
             })  
         });
 </script>    
 
 </%def>  
  No newline at end of file