CHE-490: add footer with logo and support stuff
Signed-off-by: Ann Shumilova <ashumilova@codenvy.com>6.19.x
Ann Shumilova
parent
3baea928f6
commit
7789835f35
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue