Make directive for tabs

src/Umbraco.Web.UI.Client/src/common/directives/html/umbtabscontent.directive.js

@@ -0,0 +1,18 @@
+(function() {
+  'use strict';
+
+  function UmbTabsContentDirective() {
+
+    var directive = {
+      restrict: "E",
+      replace: true,
+      transclude: 'true',
+      templateUrl: "views/directives/umb-tabs-content.html"
+    };
+
+    return directive;
+  }
+
+  angular.module('umbraco.directives').directive('umbTabsContent', UmbTabsContentDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/html/umbtabsnav.directive.js

@@ -0,0 +1,56 @@
+(function() {
+  'use strict';
+
+  function UmbTabsNavDirective($timeout) {
+
+    function link(scope, el, attr) {
+
+      function activate() {
+
+        $timeout(function () {
+
+          //use bootstrap tabs API to show the first one
+          el.find("a:first").tab('show');
+
+          //enable the tab drop
+          el.tabdrop();
+
+        });
+
+      }
+
+      var unbindModelWatch = scope.$watch('model', function(newValue, oldValue){
+
+        activate();
+
+      });
+
+
+      scope.$on('$destroy', function () {
+
+          //ensure to destroy tabdrop (unbinds window resize listeners)
+          el.tabdrop("destroy");
+
+          unbindModelWatch();
+
+      });
+
+    }
+
+    var directive = {
+      restrict: "E",
+      replace: true,
+      templateUrl: "views/directives/umb-tabs-nav.html",
+      scope: {
+        model: "=",
+        tabdrop: "="
+      },
+      link: link
+    };
+
+    return directive;
+  }
+
+  angular.module('umbraco.directives').directive('umbTabsNav', UmbTabsNavDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -101,6 +101,7 @@
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
 @import "components/umb-locked-field.less";
+@import "components/umb-tabs.less";
 
 @import "components/umb-file-dropzone.less";
 

src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less

@@ -0,0 +1,15 @@
+.umb-nav-tabs {
+  position: absolute;
+  z-index: 10;
+}
+
+.umb-nav-tabs.-padding-left {
+  padding-left: 20px;
+}
+
+.umb-tab-content {
+  padding-top: 20px;
+  position: relative;
+  top: 22px;
+  border-top: 1px solid @grayLight;
+}

src/Umbraco.Web.UI.Client/src/views/directives/umb-tabs-content.html

@@ -0,0 +1 @@
+<div class="tab-content umb-tab-content" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/directives/umb-tabs-nav.html

@@ -0,0 +1,5 @@
+<ul class="nav nav-tabs umb-nav-tabs">
+  <li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab>
+    <a data-toggle="tab" href="#tab{{tab.id}}">{{ tab.label }}</a>
+  </li>
+</ul>