admin: tweak usergroup settings ui for clarity

rhodecode/templates/admin/user_groups/user_group_edit_settings.html

@@ -1,131 +1,131 b''
 <div class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">${_('User Group: %s') % c.user_group.users_group_name}</h3>
     </div>
     <div class="panel-body">
     ${h.secure_form(url('update_users_group', user_group_id=c.user_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_='medium')}
                         </div>
                      </div>
                      <div class="field">
                         <div class="label">
                             <label for="user">${_('Owner')}:</label>
                         </div>
                         <div class="input">
                                ${h.text('user', class_="medium", autocomplete="off")}
                                <span class="help-block">${_('Change owner of this user group.')}</span>
                         </div>
                      </div>
                      <div class="field">
                         <div class="label label-textarea">
                             <label for="user_group_description">${_('Description')}:</label>
                         </div>
                         <div class="textarea textarea-small editor">
                             ${h.textarea('user_group_description',cols=23,rows=5,class_="medium")}
                             <span class="help-block">${_('Short, optional description for this user group.')}</span>
                         </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>
+                            <label for="users_group_active">${_('Search')}:</label>
                                ${h.text('from_user_group',
-                                        placeholder="select only users",
+                                        placeholder="user/usergroup",
                                         class_="medium")}
                         </div>
                         <div class="select side-by-side-selector">
                             <div class="left-group">
-                                <label class="text" >${_('Chosen group members')}</label>
+                                <label class="text"><strong>${_('Chosen group members')}</strong></label>
                                 ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,)}
                                <div class="btn" id="remove_all_elements" >
                                    ${_('Remove all elements')}
                                    <i  class="icon-chevron-right"></i>
                                </div>
                             </div>
                             <div class="middle-group">
                                 <i  id="add_element" class="icon-chevron-left"></i>
                                 <br />
                                 <i  id="remove_element" class="icon-chevron-right"></i>
                             </div>
                             <div class="right-group">
-                                 <label class="text" >${_('Available members')}
+                                 <label class="text" >${_('Available users')}
                                  </label>
                                  ${h.select('available_members',[],c.available_members,multiple=True,size=8,)}
                                  <div  class="btn" id="add_all_elements" >
                                      <i  class="icon-chevron-left"></i>${_('Add all elements')}
                                  </div>
                             </div>
                         </div>
                     </div>
                     <div class="buttons">
                       ${h.submit('Save',_('Save'),class_="btn")}
                     </div>
                 </div>
         </div>
     ${h.end_form()}
     </div>
 </div>
 <script>
     $(document).ready(function(){
         MultiSelectWidget('users_group_members','available_members','edit_users_group');
 
         $("#group_parent_id").select2({
             'containerCssClass': "drop-menu",
             'dropdownCssClass': "drop-menu-dropdown",
             'dropdownAutoWidth': true
         });
 
         $('#from_user_group').autocomplete({
             serviceUrl: pyroutes.url('user_autocomplete_data'),
             minChars:2,
             maxHeight:400,
             width:300,
             deferRequestBy: 300, //miliseconds
             showNoSuggestionNotice: true,
             params: { user_groups:true },
             formatResult: autocompleteFormatResult,
             lookupFilter: autocompleteFilterResult,
             onSelect: function(element, suggestion){
 
                 function preSelectUserIds(uids) {
                     $('#available_members').val(uids);
                     $('#users_group_members').val(uids);
                 }
 
                 if (suggestion.value_type == 'user_group') {
                     $.getJSON(
                         pyroutes.url('edit_user_group_members',
                                     {'user_group_id': suggestion.id}),
                         function(data) {
                             var uids = [];
                             $.each(data.members, function(idx, user) {
                                 var userid = user[0],
                                     username = user[1];
                                 uids.push(userid.toString());
                             });
                             preSelectUserIds(uids)
                         }
                     );
                 } else if (suggestion.value_type == 'user') {
                     preSelectUserIds([suggestion.id.toString()]);
                 }
             }
         });
         UsersAutoComplete('user', '${c.rhodecode_user.user_id}');
     })
 </script>