From 7789835f351a84ebb56050b6f0bf33765bd3dde2 Mon Sep 17 00:00:00 2001 From: Ann Shumilova Date: Wed, 17 Feb 2016 01:17:26 +0200 Subject: [PATCH] CHE-490: add footer with logo and support stuff Signed-off-by: Ann Shumilova --- .../src/app/colors/che-color.constant.js | 2 + dashboard/src/app/colors/che-colors.json | 2 + .../src/app/ide/ide-loader/ide-loader.html | 5 - dashboard/src/app/navbar/navbar.html | 5 +- dashboard/src/assets/branding/che-logo.svg | 6 +- dashboard/src/assets/branding/product.json | 3 +- .../branding/che-branding.factory.js | 8 +- .../widget/footer/che-footer.directive.js | 94 +++++++++++++++++++ .../components/widget/footer/che-footer.styl | 63 +++++++++++++ .../src/components/widget/widget-config.js | 2 + dashboard/src/index.html | 6 +- 11 files changed, 180 insertions(+), 16 deletions(-) create mode 100644 dashboard/src/components/widget/footer/che-footer.directive.js create mode 100644 dashboard/src/components/widget/footer/che-footer.styl diff --git a/dashboard/src/app/colors/che-color.constant.js b/dashboard/src/app/colors/che-color.constant.js index 335a393971..525752a2ad 100644 --- a/dashboard/src/app/colors/che-color.constant.js +++ b/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', diff --git a/dashboard/src/app/colors/che-colors.json b/dashboard/src/app/colors/che-colors.json index bd85b426ef..94d3f64350 100644 --- a/dashboard/src/app/colors/che-colors.json +++ b/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", diff --git a/dashboard/src/app/ide/ide-loader/ide-loader.html b/dashboard/src/app/ide/ide-loader/ide-loader.html index bf01016731..7b41397e7c 100644 --- a/dashboard/src/app/ide/ide-loader/ide-loader.html +++ b/dashboard/src/app/ide/ide-loader/ide-loader.html @@ -1,9 +1,4 @@
-
- -
-
- -
- +
diff --git a/dashboard/src/assets/branding/che-logo.svg b/dashboard/src/assets/branding/che-logo.svg index a2c7f8170f..58abf591fe 100644 --- a/dashboard/src/assets/branding/che-logo.svg +++ b/dashboard/src/assets/branding/che-logo.svg @@ -14,9 +14,9 @@ - - - + + + diff --git a/dashboard/src/assets/branding/product.json b/dashboard/src/assets/branding/product.json index cbd58b0b0b..4bbed5aaf8 100644 --- a/dashboard/src/assets/branding/product.json +++ b/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" } diff --git a/dashboard/src/components/branding/che-branding.factory.js b/dashboard/src/components/branding/che-branding.factory.js index 2ff507ee13..2a3ed23cc2 100644 --- a/dashboard/src/components/branding/che-branding.factory.js +++ b/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; + } } diff --git a/dashboard/src/components/widget/footer/che-footer.directive.js b/dashboard/src/components/widget/footer/che-footer.directive.js new file mode 100644 index 0000000000..ddbaaed97d --- /dev/null +++ b/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 + * `` 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 + * + * + * @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 = '
'; + if (logo) { + template += '\"logo\"'; + } + template += '
'; + template += ''; + + if (supportEmail) { + let subject = '?subject=' + encodeURIComponent('Wishes for ' + productName); + template += ''; + template += 'Make a wish'; + } + + if (supportHelp) { + template += 'Community'; + } + template += '
'; + return template; + } + +} + diff --git a/dashboard/src/components/widget/footer/che-footer.styl b/dashboard/src/components/widget/footer/che-footer.styl new file mode 100644 index 0000000000..ce314327ee --- /dev/null +++ b/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 diff --git a/dashboard/src/components/widget/widget-config.js b/dashboard/src/components/widget/widget-config.js index 97b56238c7..55a3215542 100644 --- a/dashboard/src/components/widget/widget-config.js +++ b/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) diff --git a/dashboard/src/index.html b/dashboard/src/index.html index 35b594166b..1da2864f7a 100644 --- a/dashboard/src/index.html +++ b/dashboard/src/index.html @@ -53,8 +53,10 @@ -
- +
+
+
+