#2 sort icons on column headers

way ugly code, though. Must be a neater way to do this
robfletcher · Oct 18, 2012 · 027e01e · 027e01e
1 parent 5764e4b
commit 027e01e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/templates/scaffolding/list.html b/src/templates/scaffolding/list.html
@@ -15,7 +15,10 @@ <h1>${className} List</h1>
 					if (p.isAssociation()) { %>
 			<th>${p.naturalName}</th>
 		<%  	    } else { %>
-            <th data-ng-click="sort('${p.name}')" data-ng-class="{sorted: isSortedBy('${p.name}'), desc: isSortedDescending('${p.name}')}">${p.naturalName}</th>
+            <th data-ng-click="sort('${p.name}')" data-ng-class="{sorted: isSortedBy('${p.name}'), desc: isSortedDescending('${p.name}')}">
+                ${p.naturalName}
+                <i data-ng-class="{'icon-sort-up': !isSortedDescending('${p.name}'), 'icon-sort-down': isSortedDescending('${p.name}')}" data-ng-show="isSortedBy('${p.name}')"></i>
+            </th>
 		<%  } } } %>
         </tr>
     </thead>

diff --git a/test/apps/grails-ng/src/templates/scaffolding/list.html b/test/apps/grails-ng/src/templates/scaffolding/list.html
@@ -15,7 +15,10 @@ <h1>${className} List</h1>
 					if (p.isAssociation()) { %>
 			<th>${p.naturalName}</th>
 		<%  	    } else { %>
-			<th data-ng-click="sort('${p.name}')" data-ng-class="{sorted: isSortedBy('${p.name}'), desc: isSortedDescending('${p.name}')}">${p.naturalName}</th>
+			<th data-ng-click="sort('${p.name}')" data-ng-class="{sorted: isSortedBy('${p.name}'), desc: isSortedDescending('${p.name}')}">
+                ${p.naturalName}
+                <i data-ng-class="{'icon-sort-up': !isSortedDescending('${p.name}'), 'icon-sort-down': isSortedDescending('${p.name}')}" data-ng-show="isSortedBy('${p.name}')"></i>
+            </th>
 		<%  } } } %>
         </tr>
     </thead>

diff --git a/test/apps/grails-ng/web-app/ng-templates/album/list.html b/test/apps/grails-ng/web-app/ng-templates/album/list.html
@@ -7,9 +7,15 @@ <h1>Album List</h1>
     <thead>
         <tr>
 
-			<th data-ng-click="sort('artist')" data-ng-class="{sorted: isSortedBy('artist'), desc: isSortedDescending('artist')}">Artist</th>
+			<th data-ng-click="sort('artist')" data-ng-class="{sorted: isSortedBy('artist'), desc: isSortedDescending('artist')}">
+                Artist
+                <i data-ng-class="{'icon-sort-up': !isSortedDescending('artist'), 'icon-sort-down': isSortedDescending('artist')}" data-ng-show="isSortedBy('artist')"></i>
+            </th>
 
-			<th data-ng-click="sort('title')" data-ng-class="{sorted: isSortedBy('title'), desc: isSortedDescending('title')}">Title</th>
+			<th data-ng-click="sort('title')" data-ng-class="{sorted: isSortedBy('title'), desc: isSortedDescending('title')}">
+                Title
+                <i data-ng-class="{'icon-sort-up': !isSortedDescending('title'), 'icon-sort-down': isSortedDescending('title')}" data-ng-show="isSortedBy('title')"></i>
+            </th>
 
         </tr>
     </thead>