From 33577fa13d06035c3aae2e65d0a92e8f8130fd7a Mon Sep 17 00:00:00 2001
From: Timo Stollenwerk <timo@zmag.de>
Date: Tue, 30 Jun 2009 23:49:32 +0000
Subject: [PATCH] make filters look like Plone formTabs.

svn path=/plone.app.discussion/trunk/; revision=27753
---
 plone/app/discussion/browser/moderation.pt    | 210 ++++++++++--------
 .../browser/stylesheets/discussion.css        |  40 ++--
 2 files changed, 143 insertions(+), 107 deletions(-)

diff --git a/plone/app/discussion/browser/moderation.pt b/plone/app/discussion/browser/moderation.pt
index dd77ea8..f759448 100644
--- a/plone/app/discussion/browser/moderation.pt
+++ b/plone/app/discussion/browser/moderation.pt
@@ -20,27 +20,27 @@
             Moderate comments
         </h1>
 
-        <ul class="filter">
-            <li class="all">
+        <ul class="filter formTabs">
+            <li class="all formTab firstFormTab">
                 <form method="post"
                       action="#"
                       tal:attributes="action string:${context/absolute_url}/@@moderate-comments">
-                    <input type="submit" value="All" class="context"
-                           tal:attributes="class python: not filter and 'context selected' or 'context'" />
+                    <input type="submit" value="All" class=""
+                           tal:attributes="class python: not filter and 'selected' or ''" />
                 </form>
             </li>
-            <li class="pending">
+            <li class="pending formTab">
                 <form method="post" action="#" tal:attributes="action string:${context/absolute_url}/@@moderate-comments">
                     <input type="hidden" name="form.button.Filter" value="pending" />
-                    <input type="submit" value="Pending" class="context"
-                           tal:attributes="class python:filter == 'pending' and 'context selected' or 'context'"/>
+                    <input type="submit" value="Pending" class=""
+                           tal:attributes="class python:filter == 'pending' and 'selected' or ''"/>
                 </form>
             </li>
-            <li class="approved">
+            <li class="approved formTab lastFormTab">
                 <form method="post" action="#" tal:attributes="action string:${context/absolute_url}/@@moderate-comments">
                     <input type="hidden" name="form.button.Filter" value="published" />
-                    <input type="submit" value="Published" class="context"
-                           tal:attributes="class python:filter == 'published' and 'context selected' or 'context'"/>
+                    <input type="submit" value="Published" class=""
+                           tal:attributes="class python:filter == 'published' and 'selected' or ''"/>
                 </form>
             </li>
             <!--
@@ -51,99 +51,123 @@
             </li>
             -->
         </ul>
+        <!--
+        <ul class="formTabs">
+            <li class="formTab firstFormTab">
+                <a id="" class="selected" href="#">
+                    <span>All</span>
+                </a>
+            </li>
+            <li class="formTab">
+                <a id="filter-pending" class="" href="#filter-pending">
+                    <span>Pending</span>
+                </a>
+            </li>
+            <li class="formTab lastFormTab">
+                <a id="filter-published" class="" href="#filter-published">
+                    <span>Published</span>
+                </a>
+            </li>
+        </ul>
+        -->
+
         <form method="post"
               action="#"
               tal:attributes="action string:${context/absolute_url}/@@bulk-actions"
               tal:condition="items"
               tal:define="batch python:Batch(items, b_size, int(b_start), orphan=1);">
 
-            <div id="bulkactions">
-                <select name="form.select.BulkAction">
-                    <option selected="selected" value="-1" i18n:translate="title_bulkactions">Bulk Actions</option>
-                    <!--<option value="retract" i18n:translate="bulkactions_retract">Retract</option>-->
-                    <option value="publish"
-                            i18n:translate="bulkactions_publish"
-                            tal:condition="python: filter != 'published'">Publish</option>
-                    <!--<option value="mark_as_spam" i18n:translate="bulkactions_markasspam">Mark as Spam</option>-->
-                    <option value="delete" i18n:translate="bulkactions_delete">Delete</option>
-                </select>
-                <input type="hidden" name="form.button.Filter" tal:attributes="value filter" value="" />
-                <input id="dobulkaction"
-                       type="submit"
-                       class="standalone allowMultiSubmit"
-                       value="Apply"
-                       name="form.button.BulkAction"
-                       i18n:attributes="value label_apply;" />
-            </div>
+            <fieldset id="fieldset-moderate-comments" class="formPanel">
 
-            <div metal:use-macro="here/batch_macros/macros/navigation" />
+                <div metal:use-macro="here/batch_macros/macros/navigation" />
 
-            <table id="review-comments" class="listing" style="width: 100%">
-                <thead>
-                    <tr>
-                        <th class="nosort"><input name="check_all" type="checkbox" value="0" /></th>
-                        <th i18n:translate="heading_author">Commenter</th>
-                        <th i18n:translate="heading_date">Date</th>
-                        <th i18n:translate="heading_context">In Response To</th>
-                        <th i18n:translate="heading_subject">Subject</th>
-                        <th i18n:translate="heading_comment">Comment</th>
-                        <th class="nosort" i18n:translate="heading_action">Action</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tal:block repeat="item batch">
-                        <tr style="vertical-align: top" class="commentrow"
-                            tal:define="odd repeat/item/odd"
-                            tal:attributes="class python: odd and 'odd' or 'even'">
-                            <td class="notDraggable">
-                                <input type="checkbox"
-                                       class="noborder"
-                                       name="paths:list" id="#"
-                                       value="#"
-                                       tal:attributes="value   item/getPath;
-                                                       id      string:cb_${item/id};
-                                                       checked item/checked|nothing;
-                                                       alt     string:Select ${item/Title};
-                                                       title   string:Select ${item/Title}" />
-                                <input type="hidden" name="selected_obj_paths:list" value="#"
-                                       tal:attributes="value item/getURL" />
-                            </td>
-                            <td tal:content="item/Creator" />
-                            <td tal:content="python:toLocalizedTime(item.ModificationDate, long_format=1)" />
-                            <td>
-                                <a tal:attributes="href item/getURL"
-                                   tal:content="item/@@plone_context_state/parent|nothing" />
-                            </td>
-                            <td>
-                                <a tal:attributes="href item/getURL"
-                                   tal:content="item/Title" />
-                            </td>
-
-                            <td tal:content="structure python:view.cook(item.Description)" />
-                            <td style="width: 11em;">
-                                <input id=""
-                                       class="context comment-publish-button"
+                <table id="review-comments" class="listing" style="width: 100%">
+                    <thead>
+                        <tr>
+                            <th id="bulkactions" class="nosort" colspan="7">
+                                <select name="form.select.BulkAction">
+                                    <option selected="selected" value="-1" i18n:translate="title_bulkactions">Bulk Actions</option>
+                                    <!--<option value="retract" i18n:translate="bulkactions_retract">Retract</option>-->
+                                    <option value="publish"
+                                            i18n:translate="bulkactions_publish"
+                                            tal:condition="python: filter != 'published'">Publish</option>
+                                    <!--<option value="mark_as_spam" i18n:translate="bulkactions_markasspam">Mark as Spam</option>-->
+                                    <option value="delete" i18n:translate="bulkactions_delete">Delete</option>
+                                </select>
+                                <input type="hidden" name="form.button.Filter" tal:attributes="value filter" value="" />
+                                <input id="dobulkaction"
                                        type="submit"
-                                       value="Publish"
-                                       name="form.button.Publish"
-                                       i18n:attributes="value label_publish"
-                                       tal:attributes="id item/id"
-                                       tal:condition="python:item.review_state == 'pending'"
-                                       />
-                                <input id=""
-                                       class="destructive comment-delete-button"
-                                       type="submit"
-                                       value="Delete"
-                                       name="form.button.Delete"
-                                       i18n:attributes="value label_delete;"
-                                       tal:attributes="id item/id"
-                                       />
-                            </td>
+                                       class="standalone allowMultiSubmit"
+                                       value="Apply"
+                                       name="form.button.BulkAction"
+                                       i18n:attributes="value label_apply;" />
+                            </th>
                         </tr>
-                    </tal:block>
-                </tbody>
-            </table>
-            <div metal:use-macro="here/batch_macros/macros/navigation" />
+                        <tr>
+                            <th class="nosort"><input name="check_all" type="checkbox" value="0" /></th>
+                            <th i18n:translate="heading_author">Commenter</th>
+                            <th i18n:translate="heading_date">Date</th>
+                            <th i18n:translate="heading_context">In Response To</th>
+                            <th i18n:translate="heading_subject">Subject</th>
+                            <th i18n:translate="heading_comment">Comment</th>
+                            <th class="nosort" i18n:translate="heading_action">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tal:block repeat="item batch">
+                            <tr style="vertical-align: top" class="commentrow"
+                                tal:define="odd repeat/item/odd"
+                                tal:attributes="class python: odd and 'odd' or 'even'">
+                                <td class="notDraggable">
+                                    <input type="checkbox"
+                                           class="noborder"
+                                           name="paths:list" id="#"
+                                           value="#"
+                                           tal:attributes="value   item/getPath;
+                                                           id      string:cb_${item/id};
+                                                           checked item/checked|nothing;
+                                                           alt     string:Select ${item/Title};
+                                                           title   string:Select ${item/Title}" />
+                                    <input type="hidden" name="selected_obj_paths:list" value="#"
+                                           tal:attributes="value item/getURL" />
+                                </td>
+                                <td tal:content="item/Creator" />
+                                <td tal:content="python:toLocalizedTime(item.ModificationDate, long_format=1)" />
+                                <td>
+                                    <a tal:attributes="href item/getURL"
+                                       tal:content="item/@@plone_context_state/parent|nothing" />
+                                </td>
+                                <td>
+                                    <a tal:attributes="href item/getURL"
+                                       tal:content="item/Title" />
+                                </td>
+
+                                <td tal:content="structure python:view.cook(item.Description)" />
+                                <td style="width: 11em;">
+                                    <input id=""
+                                           class="context comment-publish-button"
+                                           type="submit"
+                                           value="Publish"
+                                           name="form.button.Publish"
+                                           i18n:attributes="value label_publish"
+                                           tal:attributes="id item/id"
+                                           tal:condition="python:item.review_state == 'pending'"
+                                           />
+                                    <input id=""
+                                           class="destructive comment-delete-button"
+                                           type="submit"
+                                           value="Delete"
+                                           name="form.button.Delete"
+                                           i18n:attributes="value label_delete;"
+                                           tal:attributes="id item/id"
+                                           />
+                                </td>
+                            </tr>
+                        </tal:block>
+                    </tbody>
+                </table>
+                <div metal:use-macro="here/batch_macros/macros/navigation" />
+            </fieldset>
         </form>
     </tal:main-macro>
 </metal:main>
diff --git a/plone/app/discussion/browser/stylesheets/discussion.css b/plone/app/discussion/browser/stylesheets/discussion.css
index 28615b8..508e76b 100644
--- a/plone/app/discussion/browser/stylesheets/discussion.css
+++ b/plone/app/discussion/browser/stylesheets/discussion.css
@@ -51,39 +51,51 @@
    ---------------------------------------------------------------- */
 
 ul.filter {
-	margin: 1em 0 0 1em;
+	margin-top: 2em;
+}
+
+fieldset {
+	padding: 2em 0;
 }
 
 .filter li {
-	display: inline;
-	margin: 0 0.2em;
 }
 
 .filter li a:link {
-	border-bottom: 0px solid transparent;
 }
 
 .filter form {
 	display: inline;
 }
 
-.filter .selected {
-    background-color: #DEE7EC;
-    border-bottom: 1px solid #DEE7EC;
+.filter input.selected {
+	background: #DEE7EC;
+}
+
+.filter .firstFormTab input {
+    border-left: 1px solid #8CACBB;
+}
+
+.filter .lastFormTab {
+    border-right: 1px solid #8CACBB;
+}
+
+.filter input {
+	background: White;
+    border-bottom: 1px solid #8CACBB;
+    border-left: 1px dotted #8CACBB;
+    border-top: 1px solid #8CACBB;
+    margin: 0;
+    padding: 0.125em 0.75em;
+    text-decoration: none;
 }
 
 #bulkactions {
 	text-align: left;
-	background: #DEE7EC;
-    border: 1px solid #8CACBB;
-}
-
-#bulkactions select {
-    margin: 0.1em 0;
 }
 
 #dobulkaction {
-	margin: 0.45em 0;
+	margin: 0.3em 0;
 }
 
 .comment-publish-button {