From 88d17a75dc49f34cdb47c0696654460aecc2b5ae Mon Sep 17 00:00:00 2001
From: tbekos <tbekos@gmail.com>
Date: Fri, 24 May 2013 16:44:05 +0300
Subject: [PATCH] feat(tabs): add support for vertical option

---
 src/tabs/docs/demo.html   |  7 +++++++
 src/tabs/docs/readme.md   | 26 ++++++++++++++++++++++++--
 src/tabs/tabs.js          |  5 ++++-
 src/tabs/test/tabsSpec.js | 20 +++++++++++++-------
 template/tabs/tabset.html |  2 +-
 5 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index f910358aab..a747b1c3e1 100644
--- a/src/tabs/docs/demo.html
+++ b/src/tabs/docs/demo.html
@@ -18,4 +18,11 @@
       I've got an HTML heading, and a select callback. Pretty cool!
     </tab>
   </tabset>
+
+  <hr />
+
+  <tabset vertical="true">
+    <tab heading="Vertical 1">Vertical content 1</tab>
+    <tab heading="Vertical 2">Vertical content 2</tab>
+  </tabset>
 </div>
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index 150856c5fe..dda14d1ed2 100644
--- a/src/tabs/docs/readme.md
+++ b/src/tabs/docs/readme.md
@@ -1,5 +1,27 @@
 AngularJS version of the tabs directive.
 
-Allows a `select` callback attribute, `active` binding attribute and `disabled` binding attribute.
+### Settings ###
 
-Allows either `heading` text-heading as an attribute, or a `<tab-heading>` element inside as the heading.
+#### `<tabset>` ####
+
+ * `vertical`
+ 	_(Defaults: false)_ :
+ 	Whether tabs appear vertically stacked.
+
+#### `<tab>` ####
+
+ * `heading` or `<tab-heading>`
+ 	:
+ 	Heading text or HTML markup.
+
+ * `active` <i class="icon-eye-open"></i>
+ 	_(Defaults: false)_ :
+ 	Whether tab is currently selected.
+
+ * `disabled` <i class="icon-eye-open"></i>
+ 	_(Defaults: false)_ :
+ 	Whether tab is clickable and can be activated.
+
+ * `select()`
+ 	_(Defaults: null)_ :
+ 	An optional expression called when tab is activated.
\ No newline at end of file
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index e47a7ab48d..7b56fd4679 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -43,7 +43,10 @@ function TabsetCtrl($scope, $element) {
     transclude: true,
     scope: {},
     controller: 'TabsetController',
-    templateUrl: 'template/tabs/tabset.html'
+    templateUrl: 'template/tabs/tabset.html',
+    link: function(scope, element, attrs) {
+      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
+    }
   };
 })
 
diff --git a/src/tabs/test/tabsSpec.js b/src/tabs/test/tabsSpec.js
index 3ca08ac9f9..b95c5529bf 100644
--- a/src/tabs/test/tabsSpec.js
+++ b/src/tabs/test/tabsSpec.js
@@ -404,13 +404,6 @@ describe('tabs', function() {
       scope.$apply();
     }));
 
-    function titles() {
-      return elm.find('ul.nav-tabs li');
-    }
-    function contents() {
-      return elm.find('div.tab-content div.tab-pane');
-    }
-
     function expectTabActive(activeTab) {
       var _titles = titles();
       angular.forEach(scope.tabs, function(tab, i) {
@@ -454,4 +447,17 @@ describe('tabs', function() {
     });
   });
 
+  describe('vertical', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+
+      elm = $compile('<tabset vertical="true"></tabset>')(scope);
+      scope.$apply();
+    }));
+
+    it('to stack tabs', function() {
+      expect(elm.find('ul.nav-tabs')).toHaveClass('nav-stacked');
+    });
+  });
+
 });
diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html
index 08d3212835..70c4fa84e8 100644
--- a/template/tabs/tabset.html
+++ b/template/tabs/tabset.html
@@ -1,6 +1,6 @@
 
 <div class="tabbable">
-  <ul class="nav nav-tabs" ng-transclude>
+  <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical}" ng-transclude>
   </ul>
   <div class="tab-content">
     <div class="tab-pane"