Add column sort for projects
authorymh <ymh.work@gmail.com>
Thu, 04 Apr 2013 15:35:15 +0200
changeset 136 a822178766ce
parent 135 f3957d594203
child 137 efc0fce30814
Add column sort for projects
server/src/main/webapp/WEB-INF/templates/projectIndex.html
server/src/main/webapp/static/css/index.css
server/src/main/webapp/static/img/sort_arrows.png
--- a/server/src/main/webapp/WEB-INF/templates/projectIndex.html	Wed Apr 03 23:36:05 2013 +0200
+++ b/server/src/main/webapp/WEB-INF/templates/projectIndex.html	Thu Apr 04 15:35:15 2013 +0200
@@ -46,12 +46,12 @@
                     <a href="#?p.page=7">&gt;&gt;</a> 
                 </div>
             </div>
-            <table>
-              <thead>
+            <table th:with="columnSort=${param['p.sort']}?${param['p.sort'][0]}:'updated',sortDir=${param['p.sort.dir']}?${param['p.sort.dir'][0]}:'desc'">
+              <thead th:with="sortDirInv=${sortDir}=='desc'?'asc':'desc'">
                 <tr>
-                    <th th:text="#{renkanIndex.project_name}">Name</th>
-                    <th th:text="#{renkanIndex.project_updated}">Updated</th>
-                    <th th:text="#{renkanIndex.project_creation}">Creation</th>
+                    <th th:with="sorted=(${columnSort}=='title')"><span th:text="#{renkanIndex.project_name}">Name</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="title"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input type="submit" class="proj-sortable-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
+                    <th th:with="sorted=(${columnSort}=='updated')"><span th:text="#{renkanIndex.project_updated}">Updated</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="updated"/><input type="hidden" name="p.sort.dir" th:value="(${sorted})?${sortDirInv}:'desc'"/><input type="submit" class="proj-sort-desc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
+                    <th th:with="sorted=(${columnSort}=='created')"><span th:text="#{renkanIndex.project_creation}" >Creation</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="created"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input type="submit" class="proj-sort-asc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
                     <th th:text="#{renkanIndex.project_edit}">Edit</th>
                     <th th:text="#{renkanIndex.project_copy}">Copy</th>
                     <th th:text="#{renkanIndex.project_delete}">Del.</th>
--- a/server/src/main/webapp/static/css/index.css	Wed Apr 03 23:36:05 2013 +0200
+++ b/server/src/main/webapp/static/css/index.css	Thu Apr 04 15:35:15 2013 +0200
@@ -33,7 +33,7 @@
     border-collapse: collapse; margin: 5px 15px; border: 1px solid #CCCCCC;
 }
 th, td {
-    padding: 4px 16px 4px 4px; border: 1px solid #cccccc;
+    padding: 4px 12px 4px 4px; border: 1px solid #cccccc;
 }
 thead {
     font-size: 16px;
@@ -277,3 +277,30 @@
 #space-delete-confirm-buttons input[type=submit] {
 	margin-right: 12px;
 }
+
+.proj-sort-form {
+	float: right;
+	height: auto;
+}
+
+.proj-sort-form input[type=submit] {
+    width: 16px;
+    height: 16px;
+    border: 0;	
+}
+
+.proj-sort-form input[type=submit]:HOVER {
+	opacity: .5;
+}
+
+.proj-sortable-col {
+	background: url("../img/sort_arrows.png") 0 0;	
+}
+
+.proj-sort-desc-col {
+    background: url("../img/sort_arrows.png") 0 -17px;  
+}
+
+.proj-sort-asc-col {
+    background: url("../img/sort_arrows.png") 0 -33px;  
+}
Binary file server/src/main/webapp/static/img/sort_arrows.png has changed