making overflow work

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -5,7 +5,7 @@
         $filter, iconHelper, $q, $timeout, notificationsService,
         localizationService, editorService, eventsService, overlayService, contentEditingHelper) {
 
-        function link(scope) {
+        function link(scope, element) {
 
             const TYPE_GROUP = 0;
             const TYPE_TAB = 1;
@@ -519,6 +519,17 @@
                 scope.overflow = { left: overflowLeft, right: overflowRight };
             };
 
+            scope.moveTabsOverflowLeft = function() {
+                //TODO: optimize this...
+                const el = element[0].querySelector(".umb-group-builder__tabs-list");
+                el.scrollLeft -= el.clientWidth * 0.5;
+            }
+            scope.moveTabsOverflowRight = function() {
+                //TODO: optimize this...
+                const el = element[0].querySelector(".umb-group-builder__tabs-list");
+                el.scrollLeft += el.clientWidth * 0.5;
+            }
+
             scope.onChangeTabSortOrderValue = function () {
                 scope.tabs = $filter('orderBy')(scope.tabs, 'sortOrder');
             };

src/Umbraco.Web.UI.Client/src/common/directives/util/umboverflowchecker.directive.js

@@ -1,7 +1,7 @@
 angular.module("umbraco.directives")
     .directive('umbOverflowChecker', function ($parse, $timeout, windowResizeListener) {
         return {
-          restrict: 'A',            
+          restrict: 'A',
           link: function (scope, element, attrs) {
             const overflow = $parse(attrs.onOverflow);
 
@@ -12,10 +12,10 @@ angular.module("umbraco.directives")
               $timeout(() => {
                 const scrollElementScrollWidth = scrollElement.scrollWidth;
                 const containerScrollWidth = container.scrollWidth;
-  
+
                 const overflowLeft = scrollElement.scrollLeft;
                 const overflowRight = containerScrollWidth - scrollElementScrollWidth + overflowLeft;
-  
+
                 scope.$evalAsync(() => overflow(scope, {overflowLeft, overflowRight}));
               }, 50);
             }
@@ -39,9 +39,11 @@ angular.module("umbraco.directives")
               scrollElement.removeEventListener('scroll', checkOverflow);
               windowResizeListener.unregister(checkOverflow);
             });
-            
+
             scope.$on('umbOverflowChecker.checkOverflow', checkOverflow);
             scope.$on('umbOverflowChecker.scrollTo', scrollTo);
+
+            checkOverflow();
           }
         }
     });

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -5,9 +5,9 @@
         <umb-editor-sub-header-content-left class="left">
 
             <div class="umb-group-builder__tabs" ng-if="(sortingMode && tabs.length > 0) || (!sortingMode)">
-                <div ng-show="overflow.left > 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--left">
+                <button ng-show="overflow.left > 0" class="btn-reset umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--left" ng-click="moveTabsOverflowLeft()">
                     <span class="caret"></span>
-                </div>
+                </button>
                 <ul class="umb-group-builder__tabs-list" ui-sortable="sortableOptionsTab" ng-model="tabs" umb-overflow-checker on-overflow="setTabOverflowState(overflowLeft, overflowRight)">
                     <li ng-if="hasGenericTab" umb-droppable="droppableOptionsTab" data-tab-alias="{{genericTab.alias}}">
                         <umb-content-type-tab
@@ -42,9 +42,9 @@
                         </button>
                     </li>
                 </ul>
-                <div ng-show="overflow.right < 0" class="umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--right">
+                <button ng-if="overflow.right < 0" class="btn-reset umb-group-builder__tabs-overflow umb-group-builder__tabs-overflow--right" ng-click="moveTabsOverflowRight()">
                     <span class="caret"></span>
-                </div>
+                </button>
             </div>
 
         </umb-editor-sub-header-content-left>