From 1fbbd7a57675d4cda9fa65c7c66ab34539dd9985 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 20 Jun 2018 14:14:24 +0200
Subject: [PATCH] use new tab components on dashboard

---
 .../src/views/common/dashboard.controller.js  | 24 ++++++++---
 .../src/views/common/dashboard.html           | 40 ++++++++++---------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js
index e722817959..e1262fdea8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.controller.js
@@ -10,9 +10,9 @@
  
 function DashboardController($scope, $routeParams, dashboardResource, localizationService) {
 
-   $scope.page = {};
-   $scope.page.nameLocked = true;
-   $scope.page.loading = true;
+    $scope.page = {};
+    $scope.page.nameLocked = true;
+    $scope.page.loading = true;
 
     $scope.dashboard = {};
     localizationService.localize("sections_" + $routeParams.section).then(function(name){
@@ -20,9 +20,23 @@ function DashboardController($scope, $routeParams, dashboardResource, localizati
     });
     
     dashboardResource.getDashboard($routeParams.section).then(function(tabs){
-   		$scope.dashboard.tabs = tabs;
-         $scope.page.loading = false;
+        $scope.dashboard.tabs = tabs;
+        
+        // set first tab to active
+        if($scope.dashboard.tabs && $scope.dashboard.tabs.length > 0) {
+            $scope.dashboard.tabs[0].active = true;
+        }
+
+        $scope.page.loading = false;
     });
+
+    $scope.changeTab = function(tab) {
+        $scope.dashboard.tabs.forEach(function(tab) {
+            tab.active = false;
+        });
+        tab.active = true;
+    };
+
 }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html
index 7925db7000..9028edbaaf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dashboard.html
@@ -7,30 +7,32 @@
         <div class="umb-dashboard" ng-if="!page.loading">
 
             <div class="umb-dashboard__header" ng-show="dashboard.tabs.length > 1">
-                <umb-tabs-nav ng-if="dashboard.tabs" model="dashboard.tabs" style="margin-bottom: 0;"></umb-tabs-nav>
+                <umb-tabs-nav
+                    ng-if="dashboard.tabs"
+                    tabs="dashboard.tabs"
+                    on-tab-change="changeTab(tab)">
+                </umb-tabs-nav>
             </div>
 
             <div class="umb-dashboard__content">
 
-                <umb-tabs-content view="true">
-                    <umb-tab id="tab{{tab.id}}" ng-repeat="tab in dashboard.tabs" rel="{{tab.id}}" class="row-fluid">
-        
-                        <div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
-        
-                            <div class="clearfix" ng-switch-when="false">
-                                <h3 ng-show="property.caption">{{property.caption}}</h3>
-                                <div ng-include="property.path"></div>
-                            </div>
-        
-                            <div class="umb-dashboard-control clearfix" ng-switch-when="true">
-                                <h3 ng-show="property.caption">{{property.caption}}</h3>
-                                <iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
-                            </div>
-        
+                <umb-tab-content ng-repeat="tab in dashboard.tabs" ng-if="tab.active" class="row-fluid">
+    
+                    <div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
+    
+                        <div class="clearfix" ng-switch-when="false">
+                            <h3 ng-show="property.caption">{{property.caption}}</h3>
+                            <div ng-include="property.path"></div>
                         </div>
-        
-                    </umb-tab>
-                </umb-tabs-content>
+    
+                        <div class="umb-dashboard-control clearfix" ng-switch-when="true">
+                            <h3 ng-show="property.caption">{{property.caption}}</h3>
+                            <iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
+                        </div>
+
+                    </div>
+                    
+                </umb-tab-content>
 
             </div>