From 9bfa9f2e4b90959a5691a73318317a0cdda296a8 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 5 Jul 2021 14:24:52 +0200
Subject: [PATCH] render tab bar in content section

---
 .../content/umbtabbedcontent.directive.js     | 24 +++++++++++++----
 .../editor/umbeditortabbar.directive.js       | 22 ++++++++++++++++
 .../src/less/components/editor.less           | 22 ++++++++++++++++
 .../content/umb-tabbed-content.html           | 26 ++++++++++++++++++-
 .../components/editor/umb-editor-tab-bar.html |  3 +++
 5 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortabbar.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-tab-bar.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
index c060f7cc3b..914196be94 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
@@ -2,7 +2,7 @@
     'use strict';
 
     /** This directive is used to render out the current variant tabs and properties and exposes an API for other directives to consume  */
-    function tabbedContentDirective($timeout) {
+    function tabbedContentDirective($timeout, $filter) {
 
         function link($scope, $element) {
             
@@ -15,7 +15,8 @@
             scrollableNode.addEventListener("scroll", onScroll);
             scrollableNode.addEventListener("mousewheel", cancelScrollTween);
 
-            $scope.activeAppId = '1';
+            $scope.activeTabKey = '';
+            $scope.tabs = []; 
             
             function onScroll(event) {
                 
@@ -97,6 +98,22 @@
             $scope.registerPropertyGroup = function(element, appAnchor) {
                 propertyGroupNodesDictionary[appAnchor] = element;
             };
+
+            $scope.setActiveTab = function(tab) {
+                $scope.activeTabKey = tab.key;
+                $scope.content.tabs.forEach(tab => tab.active = false);
+                tab.active = true;
+            };
+
+            $scope.$watchCollection('content.tabs', () => {
+                $scope.tabs = $filter("filter")($scope.content.tabs, (tab) => {
+                    return tab.type === 1;
+                });
+
+                if ($scope.tabs.length > 0 && !$scope.activeTabKey) {
+                    $scope.activeTabKey = $scope.tabs[0].key;
+                }
+            });
             
             $scope.$on("editors.apps.appChanged", function($event, $args) {
                 // if app changed to this app, then we want to scroll to the current anchor
@@ -104,9 +121,6 @@
                     var activeAnchor = getActiveAnchor();
                     $timeout(jumpTo.bind(null, [activeAnchor.id]));
                 }
-
-                $scope.activeAppId = $args.app.id;
-                $scope.$evalAsync();
             });
             
             $scope.$on("editors.apps.appAnchorChanged", function($event, $args) {
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortabbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortabbar.directive.js
new file mode 100644
index 0000000000..17e0bbf43e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortabbar.directive.js
@@ -0,0 +1,22 @@
+(function () {
+  'use strict';
+
+  /**
+   * A component to render the editor tab bar
+   */
+  
+  function umbEditorTabBarController() {
+
+    const vm = this;
+
+  }
+
+  const umbEditorTabBarComponent = {
+    templateUrl: 'views/components/editor/umb-editor-tab-bar.html',
+    controllerAs: 'vm',
+    transclude: true,
+    controller: umbEditorTabBarController
+  };
+
+  angular.module('umbraco.directives').component('umbEditorTabBar', umbEditorTabBarComponent);
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index bab009bd8b..51db153b4c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -160,6 +160,28 @@ input.umb-editor-header__name-input:disabled {
     }
 }
 
+// Tab bar
+.umb-editor-tab-bar {
+	position: sticky;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: @zIndexEditor;
+	margin: -20px -20px 20px -20px;
+	padding: 0 20px;
+	background: white;
+
+	.umb-tabs-nav {
+		border-bottom: none;
+	}
+
+	.umb-tab {
+		button {
+			padding: 15px 20px;
+		}
+	}
+}
+
 // container
 .umb-editor-container {
 	position: absolute;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
index a466c8c86b..570b27f1ab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
@@ -1,6 +1,30 @@
 <div>
     <ng-form name="tabbedContentForm">
-        <div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs track by group.id">
+
+        <umb-editor-tab-bar>
+            <umb-tabs-nav tabs="tabs" on-tab-change="setActiveTab(tab)"></umb-tabs-nav>
+        </umb-editor-tab-bar>
+
+        <umb-box ng-repeat="tab in tabs" ng-show="tab.key === activeTabKey && tab.properties.length > 0">
+            <umb-box-content>
+                <umb-property
+                    data-element="property-{{property.alias}}"
+                    ng-repeat="property in tab.properties track by property.alias"
+                    property="property"
+                    show-inherit="propertyEditorDisabled(property)"
+                    inherits-from="defaultVariant.displayName">
+
+                    <div ng-class="{'o-40 cursor-not-allowed': propertyEditorDisabled(property) }">
+                        <umb-property-editor
+                            model="property"
+                            preview="propertyEditorDisabled(property)">
+                        </umb-property-editor>
+                    </div>
+                </umb-property>
+            </umb-box-content>
+        </umb-box>
+        
+        <div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs track by group.id" ng-show="group.parentKey === activeTabKey || tabs.length === 0">
             <div class="umb-group-panel__header">
                 <div id="group-{{group.id}}">{{ group.label }}</div>
             </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-tab-bar.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-tab-bar.html
new file mode 100644
index 0000000000..99b8790420
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-tab-bar.html
@@ -0,0 +1,3 @@
+<div data-element="editor-tab-bar" class="umb-editor-tab-bar">
+  <ng-transclude></ng-transclude>
+</div>