make filters look like Plone formTabs.

svn path=/plone.app.discussion/trunk/; revision=27753

plone/app/discussion/browser/moderation.pt

@@ -20,27 +20,27 @@
             Moderate comments
         </h1>
 
-        <ul class="filter">
+        <ul class="filter formTabs">
-            <li class="all">
+            <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"
+                    <input type="submit" value="All" class=""
-                           tal:attributes="class python: not filter and 'context selected' or 'context'" />
+                           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"
+                    <input type="submit" value="Pending" class=""
-                           tal:attributes="class python:filter == 'pending' and 'context selected' or 'context'"/>
+                           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"
+                    <input type="submit" value="Published" class=""
-                           tal:attributes="class python:filter == 'published' and 'context selected' or 'context'"/>
+                           tal:attributes="class python:filter == 'published' and 'selected' or ''"/>
                 </form>
             </li>
             <!--
@@ -51,13 +51,40 @@
             </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">
+            <fieldset id="fieldset-moderate-comments" class="formPanel">
+
+                <div metal:use-macro="here/batch_macros/macros/navigation" />
+
+                <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>-->
@@ -74,12 +101,8 @@
                                        value="Apply"
                                        name="form.button.BulkAction"
                                        i18n:attributes="value label_apply;" />
-            </div>
+                            </th>
-
+                        </tr>
-            <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>
@@ -144,6 +167,7 @@
                     </tbody>
                 </table>
                 <div metal:use-macro="here/batch_macros/macros/navigation" />
+            </fieldset>
         </form>
     </tal:main-macro>
 </metal:main>

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 {
+.filter input.selected {
-    background-color: #DEE7EC;
+	background: #DEE7EC;
-    border-bottom: 1px solid #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 {