refactor channel list

appdotnet · Apr 24, 2013 · d25b01e · d25b01e
1 parent 1ad496e
commit d25b01e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 33 deletions.
diff --git a/static/js/channels.js b/static/js/channels.js
@@ -172,5 +172,14 @@
         $scope.getRoster = function () {
             return $scope.selectedUsers;
         };
-    }]);
+    }]).directive('channelListEntry', function () {
+        return {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'channel-list-entry.html',
+            link: function (scope, element) {
+
+            }
+        }
+    });
 })();
diff --git a/static/templates/channel-list-entry.html b/static/templates/channel-list-entry.html
@@ -0,0 +1,25 @@
+<a href="{{ channel.detail_url() }}">
+    <div class="row {{channel.has_unread && 'unread'}} channel">
+        <div class='pull-left img-block'>
+            <img width=50 height=50 alt='channel icon {{ channel.get_visible_user().username }}' ng-src="{{ channel.get_visible_user().avatar_image.url }}?w=50">
+        </div>
+        <div class='content-block'>
+            <div class='timestamp pull-right'>
+                <small class='muted'>{{ channel.recent_message.created_at | date:'MMM-d h:mm a' }}</small>
+            </div>
+            <div class='users'>
+                <span ng-repeat="user in channel.get_users()">
+                  <span ng-show="user.is_complete">
+                    {{ user.username }}<span ng-show="!$last">, </span>
+                  </span>
+                </span>
+            </div>
+            <div class='recent-message'>
+                <small class='muted'>
+                    <span ui-if="channel.recent_message.user.id == user_id">&larr; </span>
+                    {{channel.recent_message.text}}
+                </small>
+            </div>
+        </div>
+    </div>
+</a>
diff --git a/static/templates/channel-list.html b/static/templates/channel-list.html
@@ -10,38 +10,25 @@
   </div>
   <div class="channel-list yui3-u-2-3 m-yui3-u-1">
     <div class="row-fluid">
-      <div class='ul-container yui3-u-1'>
-          <ul class='unstyled'>
-              <li ng-repeat="channel in (selectedNav == 'inbox' && channel_list || muted_channel_list) | orderBy:['-has_unread', '-recent_message.created_at'] | limitTo:((selectedNav == 'inbox' && num_channels_to_show) || muted_channel_list.length)" ng-class="{'last':$last}">
-                  <a href="{{ channel.detail_url() }}">
-                      <div class="row {{channel.has_unread && 'unread'}} channel">
-                          <div class='pull-left img-block'>
-                              <img width=50 height=50 alt='channel icon {{ channel.get_visible_user().username }}' ng-src="{{ channel.get_visible_user().avatar_image.url }}?w=50">
-                          </div>
-                          <div class='content-block'>
-                              <div class='timestamp pull-right'>
-                                  <small class='muted'>{{ channel.recent_message.created_at | date:'MMM-d h:mm a' }}</small>
-                              </div>
-                              <div class='users'>
-                                  <span ng-repeat="user in channel.get_users()">
-                                    <span ng-show="user.is_complete">
-                                      {{ user.username }}<span ng-show="!$last">, </span>
-                                    </span>
-                                  </span>
-                              </div>
-                              <div class='recent-message'>
-                                  <small class='muted'>
-                                      <span ui-if="channel.recent_message.user.id == user_id">&larr; </span>
-                                      {{channel.recent_message.text}}
-                                  </small>
-                              </div>
-                          </div>
-                      </div>
-                  </a>
-              </li>
-              <li class='show-older-channels ta-center' ng-show="selectedNav == 'inbox' && has_more_channels() && channel_list.length >= channel_fetch_size"><a href='#' ng-click="loadOlderChannels()">Show Older <i class='icon-chevron-down'></i></a></li>
-              <div class='no-channels' ng-show="!channel_list || channel_list.length == 0">No messages yet</div>
-          </ul>
+      <div class='ul-container yui3-u-1' ng-switch on="selectedNav">
+          <div ng-switch-default>
+              <ul class='unstyled'>
+                  <li ng-repeat="channel in channel_list | orderBy:['-has_unread', '-recent_message.created_at'] | limitTo: num_channels_to_show" ng-class="{'last':$last}">
+                      <channel-list-entry></channel-list-entry>
+                  </li>
+                  <li class='show-older-channels ta-center' ng-show="has_more_channels()">
+                      <a href='#' ng-click="loadOlderChannels()">Show Older <i class='icon-chevron-down'></i></a>
+                  </li>
+                  <div class='no-channels' ng-show="!channel_list || channel_list.length == 0">No messages yet</div>
+              </ul>
+          </div>
+          <div ng-switch-when="muted">
+              <ul class='unstyled'>
+                  <li ng-repeat="channel in muted_channel_list | orderBy:['-has_unread', '-recent_message.created_at']">
+                      <channel-list-entry></channel-list-entry>
+                  </li>
+              </ul>
+          </div>
       </div>
     </div>
   </div>