render tabs in media section

src/Umbraco.Web.UI.Client/src/views/media/apps/content/content.controller.js

@@ -1,10 +1,40 @@
 (function () {
     "use strict";
 
-    function MediaAppContentController($scope) {
+    function MediaAppContentController($scope, $filter, contentEditingHelper) {
 
         var vm = this;
 
+        vm.tabs = [];
+        vm.activeTabAlias = null;
+
+        vm.setActiveTab = setActiveTab;
+
+        $scope.$watchCollection('content.tabs', () => {
+
+            // Add parentAlias property to all groups aka. tabs.
+            $scope.content.tabs.forEach((group) => {
+                group.parentAlias = contentEditingHelper.getParentAlias(group.alias);
+            });
+
+            vm.tabs = $filter("filter")($scope.content.tabs, (tab) => {
+                return tab.type === 1;
+            });
+
+            if (vm.tabs.length > 0) {
+                // if we have tabs and some groups that doesn't belong to a tab we need to render those on an "Other" tab.
+                contentEditingHelper.registerGenericTab($scope.content.tabs);
+
+                setActiveTab($scope.content.tabs[0]);
+            }
+        });
+
+        function setActiveTab (tab) {
+            vm.activeTabAlias = tab.alias;
+            vm.tabs.forEach(tab => tab.active = false);
+            tab.active = true;
+        }
+
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ContentController", MediaAppContentController);

src/Umbraco.Web.UI.Client/src/views/media/apps/content/content.html

@@ -1,12 +1,37 @@
 <div class="form-horizontal" ng-controller="Umbraco.Editors.Media.Apps.ContentController as vm">
-    <div class="umb-group-panel" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs | filter: { hide : '!' + true } track by group.id">
+    
+    <umb-editor-tab-bar ng-if="vm.tabs.length > 0">
+        <umb-tabs-nav tabs="vm.tabs" on-tab-change="vm.setActiveTab(tab)"></umb-tabs-nav>
+    </umb-editor-tab-bar>
+
+    <umb-box ng-repeat="tab in vm.tabs track by tab.key" ng-show="tab.alias === vm.activeTabAlias && tab.properties.length > 0">
+        <umb-box-content data-element="tab-content-{{tab.alias}}">
+            <umb-property
+                data-element="property-{{property.alias}}"
+                ng-repeat="property in tab.properties track by property.alias"
+                property="property">
+
+                    <umb-property-editor model="property"></umb-property-editor>
+
+            </umb-property>
+        </umb-box-content>
+    </umb-box>
+    
+    <div 
+        class="umb-group-panel"
+        data-element="group-{{group.alias}}"
+        ng-repeat="group in content.tabs | filter: { hide : '!' + true } track by group.id"
+        ng-show="(group.parentAlias === vm.activeTabAlias && group.type === 0) || vm.tabs.length === 0">
 
         <div class="umb-group-panel__header">
             <div>{{ group.label }}</div>
         </div>
 
-        <div class="umb-group-panel__content">
-            <umb-property data-element="property-{{property.alias}}" ng-repeat="property in group.properties" property="property">
+        <div class="umb-group-panel__content" data-element="tab-content-{{group.parentAlias}}">
+            <umb-property
+                data-element="property-{{property.alias}}"
+                ng-repeat="property in group.properties"
+                property="property">
                 <umb-property-editor model="property"></umb-property-editor>
             </umb-property>
         </div>