collapsible feeds

trgr · Feb 19, 2014 · 772e7ff · 772e7ff
1 parent 083e4c6
commit 772e7ff
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/app/my-feeds.html b/app/my-feeds.html
@@ -31,12 +31,13 @@ <h3><i ng-show="isOrigin()" class="fa fa-rss"></i> My Feeds</h3>
     </div>
 
     <div id="my-feeds" class="row">
-        <div ng-repeat="feed in feeds" class="col-sm-4">
+        <div ng-controller="FeedWidgetController" ng-repeat="feed in feeds" class="col-sm-4">
             <div class="panel panel-default">
                 <div class="panel-heading">
+                    <div ng-include src="'templates/feed-widget-control.html'"></div>
                     <h3 class="panel-title">{{feed.title}}</h3>
                 </div>
-                <div class="panel-body feed-body">
+                <div ng-if="!collapsed" class="panel-body feed-body">
                     <div class="feed-block" feed-widget>
                     </div>
                 </div>

diff --git a/app/scripts/my-feeds.js b/app/scripts/my-feeds.js
@@ -1,6 +1,7 @@
 angular.module('angular-my-feeds', [
     'feeds'
-  ]).controller('MyFeedsController', ['$scope', '$compile', '$http', '$rootScope', function ($scope, $compile, $http, $rootScope) {
+  ])
+  .controller('MyFeedsController', ['$scope', '$compile', '$http', '$rootScope', function ($scope, $compile, $http, $rootScope) {
     $scope.isOrigin = function () {
       var url = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
       return window.parent.location.href.indexOf(url) !== -1;
@@ -19,6 +20,11 @@ angular.module('angular-my-feeds', [
         $element.append($compile(feedHTML)($scope));
       }]
     };
+  }])
+  .controller('FeedWidgetController', ['$scope', function ($scope) {
+    $scope.toggleFeed = function () {
+      $scope.collapsed = !$scope.collapsed;
+    };
   }]);
 
 function feedPostRender(element) {

diff --git a/app/styles/my-feeds.css b/app/styles/my-feeds.css
@@ -14,4 +14,12 @@ body {
 hr {
     margin-bottom: 10px;
     margin-top: 10px;
+}
+
+.fa-chevron-circle-down {
+    cursor: pointer;
+}
+
+.fa-chevron-circle-up {
+    cursor: pointer;
 }
diff --git a/app/templates/feed-control.html → app/templates/feed-code-toggle.html b/app/templates/feed-control.html → app/templates/feed-code-toggle.html
diff --git a/app/templates/feed-widget-control.html b/app/templates/feed-widget-control.html
@@ -0,0 +1,3 @@
+<div class="pull-right feed-control">
+    <i ng-click="toggleFeed();" class="fa {{!collapsed ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up'}}"></i>
+</div>
diff --git a/app/templates/main-page.html b/app/templates/main-page.html
@@ -23,7 +23,7 @@ <h3>Examples</h3>
         <div class="col-sm-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <div ng-include src="'templates/feed-control.html'"></div>
+                    <div ng-include src="'templates/feed-code-toggle.html'"></div>
                     <h3 class="panel-title">Stack Overflow <i>AngularJS</i> Questions</h3>
                 </div>
                 <div class="panel-body">
@@ -42,7 +42,7 @@ <h3 class="panel-title">Stack Overflow <i>AngularJS</i> Questions</h3>
         <div class="col-sm-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <div ng-include src="'templates/feed-control.html'"></div>
+                    <div ng-include src="'templates/feed-code-toggle.html'"></div>
                     <h3 class="panel-title">Wikipedia Featured Articles</h3>
                 </div>
                 <div class="panel-body">
@@ -73,7 +73,7 @@ <h3 class="panel-title">Wikipedia Featured Articles</h3>
         <div class="col-sm-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <div ng-include src="'templates/feed-control.html'"></div>
+                    <div ng-include src="'templates/feed-code-toggle.html'"></div>
                     <h3 class="panel-title">Reddit (<i>/r/programming</i>)</h3>
                 </div>
                 <div class="panel-body">