CHE-5853: add auto scroll feature on workspace creation page. (#6625)

Signed-off-by: Oleksii Kurinnyi <okurinnyi@codenvy.com>
eclipse-che · Oct 11, 2017 · a6faa9a · a6faa9a
1 parent 3b7e8ec
commit a6faa9a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/...workspaces/create-workspace/project-source-selector/project-source-selector.controller.ts b/...workspaces/create-workspace/project-source-selector/project-source-selector.controller.ts
@@ -52,6 +52,11 @@ export class ProjectSourceSelectorController {
    * ID of active button.
    */
   private activeButtonId: string;
+  /**
+   * <code>true</code> if content has to be scrolled to bottom.
+   * @type {boolean}
+   */
+  private scrollToBottom: boolean = true;
 
   /**
    * Default constructor that is using resource injection
@@ -142,7 +147,8 @@ export class ProjectSourceSelectorController {
     this.activeActionType = actionType;
     this.selectedProjectTemplate = angular.copy(template);
 
-    this.$scope.updateWidget(this.activeButtonId);
+    this.$scope.updateWidget(this.activeButtonId, this.scrollToBottom);
+    this.scrollToBottom = false;
   }
 
   /**

diff --git a/.../workspaces/create-workspace/project-source-selector/project-source-selector.directive.ts b/.../workspaces/create-workspace/project-source-selector/project-source-selector.directive.ts
@@ -11,7 +11,7 @@
 'use strict';
 
 export interface IProjectSourceSelectorScope extends ng.IScope {
-  updateWidget(activeButtonId: string): void;
+  updateWidget: (activeButtonId: string, scrollWidgetInView: boolean) => void;
 }
 
 /**
@@ -42,8 +42,8 @@ export class ProjectSourceSelector implements ng.IDirective {
     this.$timeout = $timeout;
   }
 
-link($scope: IProjectSourceSelectorScope, $element: ng.IAugmentedJQuery): void {
-    $scope.updateWidget = (activeButtonId: string) => {
+  link($scope: IProjectSourceSelectorScope, $element: ng.IAugmentedJQuery): void {
+    $scope.updateWidget = (activeButtonId: string, scrollToBottom: boolean) => {
       this.$timeout(() => {
         const popover = $element.find('.project-source-selector-popover'),
               arrow = popover.find('.arrow'),
@@ -54,7 +54,7 @@ link($scope: IProjectSourceSelectorScope, $element: ng.IAugmentedJQuery): void {
           return;
         }
         const widgetHeight = $element.height();
-        let top = selectButton.position().top + (selectButton.height() / 2);
+        const top = selectButton.position().top + (selectButton.height() / 2);
 
         const popoverHeight = popover.height();
         if (popoverHeight < top) {
@@ -69,6 +69,16 @@ link($scope: IProjectSourceSelectorScope, $element: ng.IAugmentedJQuery): void {
           popover.attr('style', 'top: 0px;');
           arrow.attr('style', `top: ${top}px;`);
         }
+
+        if (scrollToBottom === false) {
+          return;
+        }
+
+        // scroll to bottom of the page
+        // to make 'Create' button visible
+        const mdContent = $element.closest('md-content'),
+              mdContentHeight = mdContent.height();
+        mdContent.scrollTop(mdContentHeight);
       });
     };
   }