CHE-490: add footer with product logo and support stuff

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

@@ -22,6 +22,8 @@ export class CheColorsConfig {
   '$che-purple-color': '#4E5A96',
   '$che-white-color' : '#FFFFFF',
   '$che-ide-background-color' : '#292C2F ',
+  '$che-logo-yellow-color' : '#FDB940',
+  '$che-logo-blue-color' : '#525C86',
   '$dark-menu-color': '#21252B',
   '$night-foggy-sky-color': '#545B64',
   '$dark-menacing-sky-color': '#5A5A5A',

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

@@ -6,6 +6,8 @@
   "$che-purple-color": "#4E5A96",
   "$che-white-color" : "#FFFFFF",
   "$che-ide-background-color" : "#292C2F ",
+  "$che-logo-yellow-color" : "#FDB940",
+  "$che-logo-blue-color" : "#525C86",
   "$dark-menu-color": "#21252B",
   "$night-foggy-sky-color": "#545B64",
   "$dark-menacing-sky-color": "#5A5A5A",

dashboard/src/app/ide/ide-loader/ide-loader.html

@@ -1,9 +1,4 @@
 <div flex style="height: 100%" class="ide-loader">
-    <div layout="column" layout-align="start center">
-        <div class="ide-loader-logo" ng-if="branding.logoURL">
-            <img ng-src="{{branding.logoURL}}">
-        </div>
-    </div>
     <div class="create-project-progress-panel-bottom">
         <div ng-repeat="step in ideLoaderCtrl.getSteps()">
             <div ng-if="$index < (ideLoaderCtrl.getSteps().length -1)"

dashboard/src/app/navbar/navbar.html

@@ -98,8 +98,5 @@
         </section>
       </div>
     </div>
-    <section layout="column" layout-align="end center" flex>
-      <a ng-href="{{navbarCtrl.menuItemUrl.projects}}"><img class="che-logo" ng-src="{{branding.logoURL}}" alt="logo"></a>
-    </section>
-  </md-toolbar>
+</md-toolbar>
 </div>

dashboard/src/assets/branding/product.json

@@ -4,5 +4,6 @@
   "logoFile": "che-logo.svg",
   "favicon": "favicon.ico",
   "ideResources": "/ide/_app/",
-  "helpPath": "https://www.eclipse.org/che/"
+  "helpPath": "https://www.eclipse.org/che/",
+  "supportEmail": "wish@codenvy.com"
 }

dashboard/src/components/branding/che-branding.factory.js

@@ -43,7 +43,8 @@ export class CheBranding {
                 logoURL: assetPrefix + brandingData.logoFile,
                 favicon : assetPrefix + brandingData.favicon,
                 ideResourcesPath : brandingData.ideResources,
-                helpPath : brandingData.helpPath
+                helpPath : brandingData.helpPath,
+                supportEmail: brandingData.supportEmail
             };
 
             this.productName = this.$rootScope.branding.title;
@@ -52,6 +53,7 @@ export class CheBranding {
             this.productLogo = this.$rootScope.branding.logoURL;
             this.ideResourcesPath = this.$rootScope.branding.ideResourcesPath;
             this.helpPath = this.$rootScope.branding.helpPath;
+            this.supportEmail = this.$rootScope.branding.supportEmail;
             this.deferred.resolve(this.$rootScope.branding);
         });
 
@@ -80,5 +82,9 @@ export class CheBranding {
     getProductHelpPath() {
         return this.helpPath;
     }
+
+    getProductSupportEmail() {
+      return this.supportEmail;
+    }
 }
 

dashboard/src/components/widget/footer/che-footer.directive.js

@@ -0,0 +1,94 @@
+/*
+ * 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';
+
+/**
+ * @ngdoc directive
+ * @name components.directive:cheFooter
+ * @restrict E
+ * @function
+ * @element
+ *
+ * @author Ann Shumilova
+ */
+export class CheFooter {
+
+  /**
+   * @ngdoc directive
+   * @name components.directive:cheFooter
+   * @restrict E
+   * @function
+   * @element
+   *
+   * @description
+   * `<che-footer>` defines a bottom footer.
+   *
+   * @param {string=} che-logo product logo location
+   * @param {string=} che-product-name product name
+   * @param {string=} che-support-email support email address
+   * @param {string=} che-support-help link to support help
+   *
+   * @usage
+   *   <che-footer che-logo="src/logo.svg"></che-footer>
+   *
+   * @example
+   <example module="userDashboard">
+   <file name="index.html">
+   <che-footer
+   che-logo="src/logo.svg"
+   che-product-name="Eclipse Che"
+   che-support-email="support@codenvy.com"
+   che-support-help="http://www.eclipse.org/che">
+   </che-footer>
+   </file>
+   </example>
+   * @author Ann Shumilova
+   */
+  constructor () {
+    this.restrict='E';
+    this.replace = true;
+    this.transclude= true;
+  }
+
+  /**
+   * Template for the current footer
+   * @param element
+   * @param attrs
+   * @returns {string} the template
+   */
+  template(element, attrs) {
+    var logo = attrs.cheLogo;
+    var productName  = attrs.cheProductName;
+    var supportEmail = attrs.cheSupportEmail;
+    var supportHelp = attrs.cheSupportHelp;
+
+    var template = '<div class=\"che-footer\" layout=\"row\" layout-align=\"start center\">';
+    if (logo) {
+      template += '<img class=\"che-footer-logo\" ng-src=\"' + logo + '\" alt=\"logo\">';
+    }
+    template += '<div flex />';
+    template += '<ng-transclude></ng-transclude>';
+
+    if (supportEmail) {
+      let subject = '?subject=' + encodeURIComponent('Wishes for ' + productName);
+      template += '<input class=\"che-footer-input\" ng-model=\"productWish\" placeholder=\"I wish this product...\" />';
+      template += '<a class=\"che-footer-button-mail che-footer-button\" ng-href=\"mailto:' + supportEmail + subject + '&body={{productWish}}\">Make a wish<a/>';
+    }
+
+    if (supportHelp) {
+      template += '<a class=\"che-footer-button-community che-footer-button\" ng-href=\"' + supportHelp + '\" target=\"_blank\">Community<a/>';
+    }
+    template += '</div>';
+    return template;
+  }
+
+}
+

dashboard/src/components/widget/footer/che-footer.styl

@@ -0,0 +1,63 @@
+.che-footer
+  height 30px
+  background-color $white-color
+  border-top 1px solid $list-separator-color
+  padding 0px 10px
+
+.che-footer-logo
+  padding 5px 0px
+  height 30px
+  flex-shrink 0
+  flex-grow 0
+
+.che-footer-button
+  padding 0px 15px
+  font-size 9pt
+  cursor pointer
+  height 18px
+  color $white-color
+  border-radius 2px
+
+.che-footer a
+  text-decoration none
+  color $white-color
+
+.che-footer-button-community
+  background-color $che-logo-yellow-color
+
+.che-footer-button-community:hover
+  background-color darken($che-logo-yellow-color, 25%)
+
+.che-footer-button-mail
+  background-color $che-logo-blue-color
+  margin 0px 15px 0px 5px
+
+.che-footer-button-mail:hover
+  background-color darken($che-logo-blue-color, 20%)
+
+.che-footer-input
+  width 200px
+  background-color inherit
+  color $che-logo-blue-color
+  box-shadow none
+  border 1px solid $che-logo-blue-color
+  border-radius 3px
+  height 18px
+  line-height 18px
+  outline none
+  font-size 9pt
+  padding 0px 5px
+
+.che-footer-input::-webkit-input-placeholder
+  color $che-logo-blue-color
+  font-size 9pt
+
+.che-footer-input:-moz-placeholder
+  /* Mozilla Firefox 4 to 18 */
+  color $che-purple-color
+  font-size 9pt
+
+.che-footer-input::-moz-placeholder
+  /* Mozilla Firefox 19+ */
+  color $che-purple-color
+  font-size 9pt

dashboard/src/components/widget/widget-config.js

@@ -26,6 +26,7 @@ import {CheDropZone} from './dropzone/che-dropzone.directive';
 import {CheEmptyState} from './empty-state/che-empty-state.directive';
 import {CheEventLogger} from './event-logger/che-event-logger.directive';
 import {CheFrame} from './frame/che-frame.directive';
+import {CheFooter} from './footer/che-footer.directive';
 import {CheHtmlSource} from './html-source/che-html-source.directive';
 import {CheInput} from './input/che-input.directive';
 import {CheLabel} from './label/che-label.directive';
@@ -80,6 +81,7 @@ export class WidgetConfig {
       .directive('cheEmptyState', CheEmptyState)
       .directive('cheEventLogger', CheEventLogger)
       .directive('cheFrame', CheFrame)
+      .directive('cheFooter', CheFooter)
       .directive('cheHtmlSource', CheHtmlSource)
       .directive('cheInput', CheInput)
       .directive('cheLabel', CheLabel)

dashboard/src/index.html

@@ -53,8 +53,10 @@
   <md-sidenav id="chenavmenu" class='ide-show not-visible' ng-hide="showIDE" ng-class="waitingLoaded ? 'md-sidenav-left md-whiteframe-z2 dark-menu-bg sidebar-entry' : 'not-visible'" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
     <che-nav-bar id="chenavbar" ></che-nav-bar>
   </md-sidenav>
-  <div class="main-page ide-show" layout="column" role="main" tabindex="-1" flex ng-view ng-show="waitingLoaded && !showIDE">
-
+  <div class="main-page ide-show" layout="column" flex ng-show="waitingLoaded && !showIDE">
+    <div role="main" ng-view layout="column" flex>
+    </div>
+    <che-footer che-logo="{{branding.logoURL}}" che-support-help="{{branding.helpPath}}" che-support-email="{{branding.supportEmail}}" che-product-name="Eclipse Che"></che-footer>
   </div>
     <!-- Addons are not automatically injected -->