CHE-1095: add new UD/IDE navigation experience

dashboard/src/app/colors/che-color.constant.js

@@ -21,6 +21,7 @@ export class CheColorsConfig {
   '$che-green-color': '#60AB0A',
   '$che-purple-color': '#4E5A96',
   '$che-white-color' : '#FFFFFF',
+  '$che-black-color' : '#000000',
   '$che-ide-background-color' : '#292C2F ',
   '$che-logo-yellow-color' : '#FDB940',
   '$che-logo-blue-color' : '#525C86',

dashboard/src/app/colors/che-colors.json

@@ -5,6 +5,7 @@
   "$che-green-color": "#60AB0A",
   "$che-purple-color": "#4E5A96",
   "$che-white-color" : "#FFFFFF",
+  "$che-black-color" : "#000000",
   "$che-ide-background-color" : "#292C2F ",
   "$che-logo-yellow-color" : "#FDB940",
   "$che-logo-blue-color" : "#525C86",

dashboard/src/app/colors/che-colors.styl

@@ -13,6 +13,7 @@ $error-color = $red-lipstick-color
 $list-separator-color = $cat-gray-color
 $form-element-border-color = $mouse-gray-color
 $white-color = $che-white-color
+$black-color = $che-black-color
 $link-color = $che-medium-blue-color
 $frame-notlogged-color = $che-green-color
 $frame-notlogged-bg-color = alpha($che-green-color, 0.2)
@@ -55,7 +56,6 @@ $che-loader-active-title-color = $che-navy-color
 $che-loader-background-color = darken($che-medium-blue-color, 75%)
 $che-loader-logs-background-color = darken($stroke-color,65%)
 
-
 // box shadows
 box-shadow-simple()
   box-shadow 0 2px 1px 0 rgba(0, 0, 0, 0.15)

dashboard/src/app/dashboard/dashboard.controller.js

@@ -23,9 +23,8 @@ export class DashboardController {
    * Default constructor
    * @ngInject for Dependency injection
    */
-  constructor() {
+  constructor($rootScope) {
+    'ngInject';
+    $rootScope.showIDE = false;
   }
-
-
 }
-

dashboard/src/app/ide/ide-config.js

@@ -15,17 +15,10 @@
 import IdeCtrl from './ide.controller';
 import IdeSvc from './ide.service';
 
-import IdeLoaderCtrl from './ide-loader/ide-loader.controller';
-import IdeLoader from './ide-loader/ide-loader.directive';
-import IdeLoaderSvc from './ide-loader/ide-loader.service';
-
 import IdeIFrameCtrl from './ide-iframe/ide-iframe.controller';
 import IdeIFrame from './ide-iframe/ide-iframe.directive';
 import IdeIFrameSvc from './ide-iframe/ide-iframe.service';
 
-import IdeListItemNavbarCtrl from './ide-list-item-navbar/ide-list-item-navbar.controller';
-import IdeListItemNavbar from './ide-list-item-navbar/ide-list-item-navbar.directive';
-
 import IdeIFrameButtonLinkCtrl from './ide-iframe-button-link/ide-iframe-button-link.controller';
 import IdeIFrameButtonLink from './ide-iframe-button-link/ide-iframe-button-link.directive';
 
@@ -35,19 +28,10 @@ export class IdeConfig {
     register.service('ideSvc', IdeSvc);
     register.controller('IdeCtrl', IdeCtrl);
 
-
-    register.service('ideLoaderSvc', IdeLoaderSvc);
-    register.controller('IdeLoaderCtrl', IdeLoaderCtrl);
-    register.directive('ideLoader', IdeLoader);
-
     register.service('ideIFrameSvc', IdeIFrameSvc);
     register.controller('IdeIFrameCtrl', IdeIFrameCtrl);
     register.directive('ideIframe', IdeIFrame);
 
-    register.controller('IdeListItemNavbarCtrl', IdeListItemNavbarCtrl);
-    register.directive('ideListItemNavbar', IdeListItemNavbar);
-
-
     register.controller('IdeIFrameButtonLinkCtrl', IdeIFrameButtonLinkCtrl);
     register.directive('ideIframeButtonLink', IdeIFrameButtonLink);
 

dashboard/src/app/ide/ide-iframe-button-link/ide-iframe-button-link.controller.js

@@ -20,10 +20,23 @@ class IdeIFrameButtonLinkCtrl {
    * Default constructor that is using resource
    * @ngInject for Dependency injection
    */
-  constructor() {
+  constructor($mdSidenav, $rootScope) {
+    this.$mdSidenav = $mdSidenav;
+    this.$rootScope = $rootScope;
   }
 
+  toggleLeftMenu() {
+    let isLockedOpen = this.$mdSidenav('left').isLockedOpen(),
+      isOpen  = this.$mdSidenav('left').isOpen();
 
+    if (isOpen || isLockedOpen) {
+      this.$rootScope.hideNavbar = true;
+      this.$mdSidenav('left').close();
+    } else {
+      this.$rootScope.hideNavbar = isLockedOpen;
+      this.$mdSidenav('left').toggle();
+    }
+  }
 }
 
 

dashboard/src/app/ide/ide-iframe-button-link/ide-iframe-button-link.html

@@ -1,3 +1,4 @@
-<div id="ide-iframe-button-link" ng-click="ideIFrameCtrl.restoreHistory(); showIDE = false">
-    &nbsp;
+<div id="ide-iframe-button-link" ng-click="ideIFrameButtonLinkCtrl.toggleLeftMenu()">
+  <i class="fa fa-chevron-left" aria-hidden="true" ng-show="!hideNavbar"></i>
+  <i class="fa fa-chevron-right" aria-hidden="true" ng-show="hideNavbar"></i>
 </div>

dashboard/src/app/ide/ide-iframe-button-link/ide-iframe-button-link.styl

@@ -2,5 +2,13 @@
   position absolute
   cursor pointer
   outline none
-  width 71px
-  height 24px
+  width 24px
+  height 16px
+  top 4px
+  background-color $navbar-ide-iframe-button-background-color
+  color $light-gray-color
+  font-size 8px
+  padding 0px
+  line-height 16px
+  text-align center
+  z-index 1

dashboard/src/app/ide/ide-iframe/ide-iframe.controller.js

@@ -26,27 +26,6 @@ class IdeIFrameCtrl {
     this.$rootScope = $rootScope;
   }
 
-
-  /**
-   * Redirect user to the last page in history or to dashboard if user came into IDE page directly
-   */
-  restoreHistory() {
-    // user has restored IDE page so avoid to go in history
-    if (this.$rootScope.restoringIDE) {
-      this.$rootScope.restoringIDE = false;
-      return;
-    }
-    let paths = this.routeHistory.getPaths();
-    let redirectPath;
-    // do we have at least two history in the path ?
-    if (paths.length > 2) {
-      redirectPath = paths[paths.length - 2];
-    } else {
-      // redirect to dashboard if user was coming directly on this IDE page
-      redirectPath = '/';
-    }
-    this.$location.path(redirectPath);
-  }
 }
 
 

dashboard/src/app/ide/ide-iframe/ide-iframe.service.js

@@ -22,32 +22,44 @@ class IdeIFrameSvc {
    * Default constructor that is using resource
    * @ngInject for Dependency injection
    */
-  constructor ($timeout, $compile) {
+  constructor ($timeout, $compile, $rootScope, $location, $window) {
     this.iframeAdded = false;
     this.$timeout = $timeout;
     this.$compile = $compile;
 
+    $window.addEventListener("message", (event) => {
+      if ("ide-loaded" === event.data) {
+        // check whether user is still waiting for IDE
+        if (/\/ide\//.test($location.path())) {
+          $rootScope.$apply(() => {
+            $rootScope.showIDE = true;
+            $rootScope.hideLoader = true;
+          });
+        }
+      } else if ("show-workspaces" === event.data){
+        $rootScope.$apply(() => {
+          $location.path('/workspaces');
+        });
+      }
+    }, false);
   }
 
-
   addIFrame() {
     if (!this.iframeAdded) {
       this.iframeAdded = true;
         // The new element to be added
-        var $div = $('<ide-iframe id="ide-iframe-window" ng-show="showIDE" flex style="height: 100%"></ide-iframe>');
+        var $div = angular.element('<ide-iframe id="ide-iframe-window" ng-show="showIDE" flex style="height: 100%"></ide-iframe>');
 
         // The parent of the new element
-        var $target = $('body');
+        var $target = angular.element('body');
 
       let $scope = angular.element($target).scope();
       let insertHtml = this.$compile($div)($scope);
-      $target.append(insertHtml);
+      angular.element('body').find('.main-page').append(insertHtml);
 
     }
   }
 
-
 }
 
 export default IdeIFrameSvc;
-

dashboard/src/app/ide/ide-iframe/ide-iframe.styl

@@ -2,7 +2,7 @@ ide-iframe#ide-iframe-window.ng-hide
   opacity 1
 
 #ide-iframe-window
-  position absolute
+  position relative
   width 100%
   height 100%
   top 0