| Index: trunk/extensions/PageTriage/SpecialPageTriage.php |
| — | — | @@ -69,9 +69,8 @@ |
| 70 | 70 | |
| 71 | 71 | // this template is repeated many times, once for each item in list view. |
| 72 | 72 | $triageInterface .= <<<HTML |
| 73 | | - <div id="backboneTemplates"> |
| 74 | 73 | <script type="text/template" id="listItemTemplate"> |
| 75 | | - <div class="mwe-pt-article-row"> |
| | 74 | + <div id="mwe-pt-article-row"> |
| 76 | 75 | <% if ( afd_status == "1" || blp_prod_status == "1" || csd_status == "1" || prod_status == "1" ) { %> |
| 77 | 76 | <div class="mwe-pt-status-icon mwe-pt-status-icon-deleted"> |
| 78 | 77 | [DEL] <!-- deleted --> |
| — | — | @@ -86,7 +85,11 @@ |
| 87 | 86 | </div> |
| 88 | 87 | <% } %> |
| 89 | 88 | </div> |
| 90 | | - <div class="mwe-pt-info-pane"> |
| | 89 | + <% if ( position % 2 == 0 ) { %> |
| | 90 | + <div class="mwe-pt-info-pane mwe-pt-info-pane-even"> |
| | 91 | + <% } else { %> |
| | 92 | + <div class="mwe-pt-info-pane mwe-pt-info-pane-odd"> |
| | 93 | + <% } %> |
| 91 | 94 | <div class="mwe-pt-article"> |
| 92 | 95 | <span class="mwe-pt-page-title"><a href="<%= partial_url %>"><%= title %></a></span> |
| 93 | 96 | <span class="mwe-pt-histlink"> |
| — | — | @@ -107,17 +110,20 @@ |
| 108 | 111 | · <span class="mwe-pt-metadata-warning"><%= gM("pagetriage-orphan") %></span> |
| 109 | 112 | <% } %> |
| 110 | 113 | </span> |
| | 114 | + <span class="mwe-pt-creation-date"> |
| | 115 | + <!-- TODO: format nicely, but remember to also make localizable... --> |
| | 116 | + <%= creation_date %> |
| | 117 | + </span> |
| 111 | 118 | </div> |
| 112 | 119 | <div class="mwe-pt-author"> |
| | 120 | + Author info goes here... |
| 113 | 121 | </div> |
| 114 | 122 | <div class="mwe-pt-snippet"> |
| 115 | 123 | <%= snippet %> |
| 116 | 124 | </div> |
| 117 | 125 | </div> |
| 118 | 126 | </div> |
| 119 | | - <br/> |
| 120 | 127 | </script> |
| 121 | | - </div> |
| 122 | 128 | HTML; |
| 123 | 129 | |
| 124 | 130 | // Get the list of articles |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.articleListItem.js |
| — | — | @@ -4,6 +4,11 @@ |
| 5 | 5 | // instantiate the collection of articles |
| 6 | 6 | var articles = new mw.pageTriage.ArticleList; |
| 7 | 7 | |
| | 8 | + // set the default sort order. |
| | 9 | + articles.comparator = function( article ) { |
| | 10 | + return -article.get( "creation_date" ); |
| | 11 | + }; |
| | 12 | + |
| 8 | 13 | // single list item |
| 9 | 14 | var ListItem = Backbone.View.extend( { |
| 10 | 15 | tagName: "div", |
| — | — | @@ -30,6 +35,7 @@ |
| 31 | 36 | initialize: function() { |
| 32 | 37 | |
| 33 | 38 | // these events are triggered when items are added to the articles collection |
| | 39 | + this.position = 0; |
| 34 | 40 | articles.bind( 'add', this.addOne, this ); |
| 35 | 41 | articles.bind( 'reset', this.addAll, this ); |
| 36 | 42 | |
| — | — | @@ -41,11 +47,19 @@ |
| 42 | 48 | }, |
| 43 | 49 | |
| 44 | 50 | render: function() { |
| | 51 | + this.position = 0; |
| 45 | 52 | // TODO: refresh the view (show/hide the parts that aren't attached to the ListItem view) |
| 46 | 53 | }, |
| 47 | 54 | |
| 48 | 55 | // add a single article to the list |
| 49 | 56 | addOne: function( article ) { |
| | 57 | + // define position, for making alternating background colors. |
| | 58 | + // this is added at the last minute, so it gets updated when the sort changes. |
| | 59 | + if(! this.position ) { |
| | 60 | + this.position = 0; |
| | 61 | + } |
| | 62 | + article.set( 'position', this.position++ ); |
| | 63 | + |
| 50 | 64 | // pass in the specific article instance |
| 51 | 65 | var view = new ListItem( { model: article } ); |
| 52 | 66 | this.$( "#listView" ).append( view.render().el ); |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.articleListItem.css |
| — | — | @@ -1,8 +1,16 @@ |
| 2 | 2 | |
| 3 | | -.mwe-pt-article-row { |
| 4 | | - width: 100%; |
| | 3 | +.mwe-pt-info-pane-even { |
| | 4 | + background-color: #efefef; |
| 5 | 5 | } |
| 6 | 6 | |
| | 7 | +.mwe-pt-info-pane-odd { |
| | 8 | + background-color: white; |
| | 9 | +} |
| | 10 | + |
| | 11 | +.mwe-pt-info-pane { |
| | 12 | + margin-left: 50px; |
| | 13 | +} |
| | 14 | + |
| 7 | 15 | .mwe-pt-status-icon { |
| 8 | 16 | float: left; |
| 9 | 17 | width: 50px; |
| — | — | @@ -21,10 +29,6 @@ |
| 22 | 30 | background-color: #b3b3b3; |
| 23 | 31 | } |
| 24 | 32 | |
| 25 | | -.mwe-pt-info-pane { |
| 26 | | - margin-left: 50px; |
| 27 | | -} |
| 28 | | - |
| 29 | 33 | /* info about the article */ |
| 30 | 34 | .mwe-pt-article { |
| 31 | 35 | font-size: 1.2em; |
| — | — | @@ -46,6 +50,10 @@ |
| 47 | 51 | font-weight: bold; |
| 48 | 52 | } |
| 49 | 53 | |
| | 54 | +.mwe-pt-creation-date { |
| | 55 | + float: right; |
| | 56 | +} |
| | 57 | + |
| 50 | 58 | /* info about the article's author */ |
| 51 | 59 | .mwe-pt-author { |
| 52 | 60 | } |