diff --git a/dashboard/src/app/dashboard/dashboard-config.js b/dashboard/src/app/dashboard/dashboard-config.js index d81822818a4..d6ee250d184 100644 --- a/dashboard/src/app/dashboard/dashboard-config.js +++ b/dashboard/src/app/dashboard/dashboard-config.js @@ -32,13 +32,13 @@ export class DashboardConfig { register.controller('DashboardController', DashboardController); // config routes - register.app.config(function ($routeProvider) { + register.app.config(($routeProvider) => { $routeProvider.accessWhen('/', { templateUrl: 'app/dashboard/dashboard.html', controller: 'DashboardController', controllerAs: 'dashboardController', resolve: { - check: ['$q', 'cheService', 'cheAdminService', function ($q, cheService, cheAdminService) { + check: ['$q', 'cheService', 'cheAdminService', ($q, cheService, cheAdminService) => { var defer = $q.defer(); cheService.fetchServices().then(() => { cheAdminService.fetchServices().then(() => { diff --git a/dashboard/src/app/dashboard/dashboard.html b/dashboard/src/app/dashboard/dashboard.html index 540801c386f..30546e09bbf 100644 --- a/dashboard/src/app/dashboard/dashboard.html +++ b/dashboard/src/app/dashboard/dashboard.html @@ -14,7 +14,7 @@ che-add-button-name="New Project" che-add-button-href="#/create-project" che-event-logger="dashboard/new.project"> - + diff --git a/dashboard/src/app/index.module.js b/dashboard/src/app/index.module.js index a3b62f55be0..b7d797e0e1a 100644 --- a/dashboard/src/app/index.module.js +++ b/dashboard/src/app/index.module.js @@ -34,12 +34,11 @@ let initModule = angular.module('userDashboard', ['ngAnimate', 'ngCookies', 'ngT 'ngDropdowns', 'ngLodash', 'angularCharts', 'ngClipboard', 'uuid4', 'angularFileUpload']); - // add a global resolve flag on all routes (user needs to be resolved first) -initModule.config(['$routeProvider', function ($routeProvider) { - $routeProvider.accessWhen = function(path, route) { +initModule.config(['$routeProvider', ($routeProvider) => { + $routeProvider.accessWhen = (path, route) => { route.resolve || (route.resolve = {}); - route.resolve.app = ['cheBranding', '$q', 'cheProfile', 'cheUser', function (cheBranding, $q, cheProfile, cheUser) { + route.resolve.app = ['cheBranding', '$q', 'cheProfile', 'cheUser', (cheBranding, $q, cheProfile, cheUser) => { var deferred = $q.defer(); cheUser.fetchUser().then(() => { @@ -63,9 +62,9 @@ initModule.config(['$routeProvider', function ($routeProvider) { return $routeProvider.when(path, route); }; - $routeProvider.accessOtherWise = function(route) { + $routeProvider.accessOtherWise = (route) => { route.resolve || (route.resolve = {}); - route.resolve.app = ['$q', 'cheProfile', 'cheUser', function ($q, cheProfile, cheUser) { + route.resolve.app = ['$q', 'cheProfile', 'cheUser', ($q, cheProfile, cheUser) => { var deferred = $q.defer(); cheUser.fetchUser().then(() => { @@ -95,7 +94,7 @@ var DEV = false; // config routes -initModule.config(['$routeProvider', function ($routeProvider) { +initModule.config(['$routeProvider', ($routeProvider) => { // add demo page if (DEV) { $routeProvider.accessWhen('/demo-components', { @@ -108,12 +107,11 @@ initModule.config(['$routeProvider', function ($routeProvider) { }]); - /** * Setup route redirect module */ -initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeout', 'ideIFrameSvc', 'cheIdeFetcher', 'routeHistory', - function ($rootScope, $location, routingRedirect, cheUser, $timeout, ideIFrameSvc, cheIdeFetcher, routeHistory) { +initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeout', 'ideIFrameSvc', 'cheIdeFetcher', 'routeHistory', 'cheUIElementsInjectorService', + ($rootScope, $location, routingRedirect, cheUser, $timeout, ideIFrameSvc, cheIdeFetcher, routeHistory, cheUIElementsInjectorService) => { $rootScope.hideLoader = false; $rootScope.waitingLoaded = false; @@ -123,10 +121,10 @@ initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeo cheIdeFetcher; routeHistory; - $rootScope.$on('$viewContentLoaded', function() { + $rootScope.$on('$viewContentLoaded', () => { ideIFrameSvc.addIFrame(); - - $timeout(function() { + cheUIElementsInjectorService.injectAll(); + $timeout(() => { if (!$rootScope.hideLoader) { if (!$rootScope.wantTokeepLoader) { $rootScope.hideLoader = true; @@ -160,14 +158,13 @@ initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeo }]); - // add interceptors -initModule.factory('ETagInterceptor', function ($window, $cookies, $q) { +initModule.factory('ETagInterceptor', ($window, $cookies, $q) => { var etagMap = {}; return { - request: function(config) { + request: (config) => { // add IfNoneMatch request on the che api if there is an existing eTag if ('GET' === config.method) { if (config.url.indexOf('/api') === 0) { @@ -180,7 +177,7 @@ initModule.factory('ETagInterceptor', function ($window, $cookies, $q) { } return config || $q.when(config); }, - response: function(response) { + response: (response) => { // if response is ok, keep ETag if ('GET' === response.config.method) { @@ -189,7 +186,7 @@ initModule.factory('ETagInterceptor', function ($window, $cookies, $q) { if (responseEtag) { if (response.config.url.indexOf('/api') === 0) { - etagMap[response.config.url] = responseEtag; + etagMap[response.config.url] = responseEtag; } } } @@ -201,12 +198,10 @@ initModule.factory('ETagInterceptor', function ($window, $cookies, $q) { }); - - -initModule.config(function($mdThemingProvider, jsonColors) { +initModule.config(($mdThemingProvider, jsonColors) => { var cheColors = angular.fromJson(jsonColors); - var getColor = function(key) { + var getColor = (key) => { var color = cheColors[key]; if (!color) { // return a flashy red color if color is undefined @@ -223,12 +218,11 @@ initModule.config(function($mdThemingProvider, jsonColors) { var cheMap = $mdThemingProvider.extendPalette('indigo', { '500': getColor('$dark-menu-color'), - '300' : 'D0D0D0' + '300': 'D0D0D0' }); $mdThemingProvider.definePalette('che', cheMap); - var cheDangerMap = $mdThemingProvider.extendPalette('red', { - }); + var cheDangerMap = $mdThemingProvider.extendPalette('red', {}); $mdThemingProvider.definePalette('cheDanger', cheDangerMap); var cheWarningMap = $mdThemingProvider.extendPalette('orange', { @@ -237,20 +231,18 @@ initModule.config(function($mdThemingProvider, jsonColors) { $mdThemingProvider.definePalette('cheWarning', cheWarningMap); var cheDefaultMap = $mdThemingProvider.extendPalette('blue', { - 'A400' : getColor('$che-medium-blue-color') + 'A400': getColor('$che-medium-blue-color') }); $mdThemingProvider.definePalette('cheDefault', cheDefaultMap); var cheNoticeMap = $mdThemingProvider.extendPalette('blue', { - 'A400' : getColor('$mouse-gray-color') + 'A400': getColor('$mouse-gray-color') }); $mdThemingProvider.definePalette('cheNotice', cheNoticeMap); - - var cheAccentMap = $mdThemingProvider.extendPalette('blue', { - '700' : getColor('$che-medium-blue-color'), + '700': getColor('$che-medium-blue-color'), 'A400': getColor('$che-medium-blue-color'), 'A200': getColor('$che-medium-blue-color'), 'contrastDefaultColor': 'light' @@ -259,27 +251,27 @@ initModule.config(function($mdThemingProvider, jsonColors) { var cheNavyPalette = $mdThemingProvider.extendPalette('purple', { - '500' : getColor('$che-navy-color'), + '500': getColor('$che-navy-color'), 'contrastDefaultColor': 'light' }); $mdThemingProvider.definePalette('cheNavyPalette', cheNavyPalette); var toolbarPrimaryPalette = $mdThemingProvider.extendPalette('purple', { - '500' : getColor('$che-white-color'), + '500': getColor('$che-white-color'), 'contrastDefaultColor': 'dark' }); $mdThemingProvider.definePalette('toolbarPrimaryPalette', toolbarPrimaryPalette); var toolbarAccentPalette = $mdThemingProvider.extendPalette('purple', { - 'A200' : 'EF6C00', - '700' : 'E65100', + 'A200': 'EF6C00', + '700': 'E65100', 'contrastDefaultColor': 'light' }); $mdThemingProvider.definePalette('toolbarAccentPalette', toolbarAccentPalette); var cheGreyPalette = $mdThemingProvider.extendPalette('grey', { - 'A100' : 'efefef', + 'A100': 'efefef', 'contrastDefaultColor': 'light' }); $mdThemingProvider.definePalette('cheGrey', cheGreyPalette); @@ -345,7 +337,7 @@ initModule.constant('userDashboardConfig', { developmentMode: DEV }); -initModule.config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) { +initModule.config(['$routeProvider', '$locationProvider', '$httpProvider', ($routeProvider, $locationProvider, $httpProvider) => { // Add the ETag interceptor for Che API $httpProvider.interceptors.push('ETagInterceptor'); }]); diff --git a/dashboard/src/app/projects/list-projects/project-item/project-item.styl b/dashboard/src/app/projects/list-projects/project-item/project-item.styl index fe988c4189d..d31ef57de94 100644 --- a/dashboard/src/app/projects/list-projects/project-item/project-item.styl +++ b/dashboard/src/app/projects/list-projects/project-item/project-item.styl @@ -13,12 +13,12 @@ .project-list-static-icon flex 0 1 100px text-align center - padding-right 10px + padding-right 0 .project-list-row min-height 56px margin-left 10px - margin-right 10px + margin-right 0 cursor pointer .project-list-row > div diff --git a/dashboard/src/components/components-config.js b/dashboard/src/components/components-config.js index 8ed9a71ea7e..9c4fed321ae 100644 --- a/dashboard/src/components/components-config.js +++ b/dashboard/src/components/components-config.js @@ -17,6 +17,7 @@ import {CheBrandingConfig} from './branding/che-branding-config'; import {CodeMirrorConstant} from './codemirror/codemirror'; import {GitHubService} from './github/github-service'; import {CheIdeFetcherConfig} from './ide-fetcher/che-ide-fetcher-config'; +import {CheUIElementsInjectorConfig} from './injector/che-ui-elements-injector-config.js'; import {CheNotificationConfig} from './notification/che-notification-config'; import {OnBoardingConfig} from './onboarding/onboarding-config'; import {RoutingConfig} from './routing/routing-config'; @@ -32,6 +33,7 @@ export class ComponentsConfig { new CodeMirrorConstant(register); new GitHubService(register); new CheIdeFetcherConfig(register); + new CheUIElementsInjectorConfig(register); new CheNotificationConfig(register); new OnBoardingConfig(register); new RoutingConfig(register); diff --git a/dashboard/src/components/injector/che-ui-elements-injector-config.js b/dashboard/src/components/injector/che-ui-elements-injector-config.js new file mode 100644 index 00000000000..7dd7cc8435b --- /dev/null +++ b/dashboard/src/components/injector/che-ui-elements-injector-config.js @@ -0,0 +1,20 @@ +/* + * Copyright (c) 2015-2016 Codenvy, S.A. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * which accompanies this distribution, and is available at + * http://www.eclipse.org/legal/epl-v10.html + * + * Contributors: + * Codenvy, S.A. - initial API and implementation + */ +'use strict'; + +import {CheUIElementsInjectorService} from './che-ui-elements-injector.service.js'; + +export class CheUIElementsInjectorConfig { + + constructor(register) { + register.service('cheUIElementsInjectorService', CheUIElementsInjectorService); + } +} diff --git a/dashboard/src/components/injector/che-ui-elements-injector.service.js b/dashboard/src/components/injector/che-ui-elements-injector.service.js new file mode 100644 index 00000000000..831e167f1eb --- /dev/null +++ b/dashboard/src/components/injector/che-ui-elements-injector.service.js @@ -0,0 +1,150 @@ +/* + * Copyright (c) 2015-2016 Codenvy, S.A. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * which accompanies this distribution, and is available at + * http://www.eclipse.org/legal/epl-v10.html + * + * Contributors: + * Codenvy, S.A. - initial API and implementation + */ +'use strict'; + + +/** + * This class is handling the service for the injecting UI elements to other widgets from outside. + * @author Oleksii Orel + */ +export class CheUIElementsInjectorService { + + /** + * Default constructor that is using resource injection + * @ngInject for Dependency injection + */ + constructor($timeout, $document, $compile) { + this.$timeout = $timeout; + this.$document = $document; + this.$compile = $compile; + + //object of destination elements with id as keys and innerHTML of additional widget as value + //{ parentElementId: { additionalElementId: additionalElementInnerHTML } } + this.elementsToInject = {}; + } + + /** + * Add an element for injection. + * @param parentElementId the ID of parent element + * @param additionalElementId the ID of additional element + * @param additionalElementHTML the innerHTML of additional Element + * @returns {boolean} - true if successful + */ + addElementForInjection(parentElementId, additionalElementId, additionalElementHTML) { + if (!parentElementId || !additionalElementId || !additionalElementHTML) { + return false; + } + + if (!this.elementsToInject[parentElementId]) { + this.elementsToInject[parentElementId] = {}; + } + this.elementsToInject[parentElementId][additionalElementId] = additionalElementHTML; + + return true; + } + + /** + * Inject all additional elements if it possible. + */ + injectAll() { + this.$timeout(() => { + for (let parentElementId in this.elementsToInject) { + let oneParentElements = this.elementsToInject[parentElementId]; + let parentElement = this.$document[0].getElementById(parentElementId); + if (!parentElement) { + continue; + } + + for (let additionalElementId in oneParentElements) { + let jqAdditionalElement = angular.element(oneParentElements[additionalElementId]); + if (!jqAdditionalElement) { + continue; + } + // set an id into the additional element + jqAdditionalElement.attr('id', additionalElementId); + this.injectAdditionalElement(parentElement, jqAdditionalElement); + } + } + }); + } + + /** + * Inject an additional elements if it possible. + * @param parentElement the parent DOM element for injection + * @param jqAdditionalElement the jqLite additional element + * @returns {boolean} - true if successful + */ + injectAdditionalElement(parentElement, jqAdditionalElement) { + if (!jqAdditionalElement || !parentElement) { + return false; + } + + let additionalElementId = jqAdditionalElement.attr('id'); + if (!additionalElementId) { + return false; + } + + let jqParentElement = angular.element(parentElement); + + // compile the view + let compileAdditionalElement = this.$compile(jqAdditionalElement)(jqParentElement.scope()); + + let oldElement = this.$document[0].getElementById(additionalElementId); + if (oldElement) { + oldElement.remove(); + } + + jqParentElement.append(compileAdditionalElement); + + return true; + } + + /** + * Inject an additional element if it possible. + * @param parentElementId the ID of parent element for injection + * @param additionalElement the additional element + * @returns {boolean} - true if successful + */ + injectAdditionalElementByParentId(parentElementId, additionalElement) { + if (!additionalElement) { + return false; + } + + let jqAdditionalElement = angular.element(additionalElement); + + let additionalElementId = jqAdditionalElement.attr('id'); + if (!additionalElementId) { + return false; + } + + let parentElement = this.$document[0].getElementById(parentElementId); + if (!parentElement) { + return false; + } + + return this.injectAdditionalElement(parentElement, jqAdditionalElement); + } + + /** + * delete a DOM element by id. + * @param elementId the ID of element + * @returns {boolean} - true if successful + */ + deleteElementById(elementId) { + let removeElement = this.$document[0].getElementById(elementId); + if (removeElement) { + removeElement.remove(); + return true; + } + + return false; + } +}