[soc2009/admin-ui] Better styling for Selector Inlines, and proper javascript hiding

git-svn-id: http://code.djangoproject.com/svn/django/branches/soc2009/admin-ui@10959 bcc190cf-cafb-0310-a4f2-bffc1f526a37

Author: zain

django/contrib/admin/media/css/forms.css

@@ -334,6 +334,10 @@ fieldset.monospace textarea {
     width: 19%;
 }
 
+.inline-selector a, .inline-selector a:visited {
+    color: #000;
+}
+
 .inline-selector-item {
     background-color: #F6F6F6;
     border: 1px solid #E7E7E7;
@@ -342,17 +346,28 @@ fieldset.monospace textarea {
     font-size: 0.9em;
 }
 
+.inline-selector-item:hover {
+    background-color: #C1DBFD;
+}
+
 .inline-detail {
     float: right;
     width: 80%;
-    background: #c9c;
     border-left: 1px solid #EEE;
 }
 
 .inline-selector-delete {
     float: right;
 }
 
+.inline-selected {
+    background-color: #9EB7D5;
+}
+
+.inline-selected a, .inline-selected a:visited {
+    color: #FFF;
+}
+
 .clear {
     clear: both;
 }

django/contrib/admin/templates/admin/edit_inline/selector.html

@@ -9,49 +9,53 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
             <div class="inline-selector">
                 {% for inline_admin_form in inline_admin_formset %}
                     <div class="inline-selector-item">
+                        <a href="#" class="inline-select" title="{{ inline_admin_formset.opts.verbose_name}}{{ forloop.counter }}">
                         {% if inline_admin_form.original or inline_admin_form.show_url %}
                             {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
                             {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
                         {% else %}
-                            New Inline
+                            [New Inline]
                         {% endif %}
+                        </a>
                     </div>
                 {% endfor %}
             </div>
 
             <div class="inline-detail">
             {% for inline_admin_form in inline_admin_formset %}
-                <h3>
-                    {% if inline_admin_form.original or inline_admin_form.show_url %}
-                        {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
-                        {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
-                    {% else %}
-                        [New Inline]
-                    {% endif %}
-            
-                    {% if inline_admin_formset.formset.can_delete %}
-                        <span class="inline-selector-delete">
-                            {% if inline_admin_form.original %}
-                                {{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}
-                            {% endif %}
-                        </span>
+                <div class="selector-item-detail" id="{{ inline_admin_formset.opts.verbose_name}}{{ forloop.counter }}">
+                    <h3>
+                        {% if inline_admin_form.original or inline_admin_form.show_url %}
+                            {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
+                            {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
+                        {% else %}
+                            [New Inline]
+                        {% endif %}
+
+                        {% if inline_admin_formset.formset.can_delete %}
+                            <span class="inline-selector-delete">
+                                {% if inline_admin_form.original %}
+                                    {{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}
+                                {% endif %}
+                            </span>
+                        {% endif %}
+                    </h3>
+
+                    {% if inline_admin_form.form.non_field_errors %}
+                        {{ inline_admin_form.form.non_field_errors }}
                     {% endif %}
-                </h3>
-                
-                {% if inline_admin_form.form.non_field_errors %}
-                    {{ inline_admin_form.form.non_field_errors }}
-                {% endif %}
-                
-                <div class="selector-item-detail">
+                    
                     {% if inline_admin_form.has_auto_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
+                    
                     {{ inline_admin_form.fk_field.field }}
+                    
                     {% spaceless %}
                     {% for fieldset in inline_admin_form %}
-                      {% for line in fieldset %}
-                     {% for field in line %}
-                       {% if field.is_hidden %} {{ field.field }} {% endif %}
-                     {% endfor %}
-                      {% endfor %}
+                        {% for line in fieldset %}
+                            {% for field in line %}
+                                {% if field.is_hidden %} {{ field.field }} {% endif %}
+                            {% endfor %}
+                        {% endfor %}
                     {% endfor %}
                     {% endspaceless %}
 
@@ -81,4 +85,24 @@ <h3>
             </div>
         <div class="clear"></div>
     </div>
-</div>
+</div>
+
+<script type="text/javascript">
+$(function() {
+    $('.inline-detail .selector-item-detail').hide();
+    $('.inline-detail .selector-item-detail:first').show();
+    $('.inline-selector .inline-selector-item:first').addClass('inline-selected');
+    
+    $('.inline-selector-item').click(function () {
+        $('.inline-detail .selector-item-detail').hide();
+        $('.inline-selector .inline-selector-item').removeClass('inline-selected');
+
+        $(this).addClass('inline-selected');
+        
+        var div_to_show = '#' + $(this).find('a').attr('title');
+        $(div_to_show).fadeIn('normal');
+        
+        return false;
+    });
+});
+</script>