diff --git a/client/src/app/main/main-home/main-home-page-portal.js b/client/src/app/main/main-home/main-home-page-portal.js index 6f63cc37..3935e0d7 100644 --- a/client/src/app/main/main-home/main-home-page-portal.js +++ b/client/src/app/main/main-home/main-home-page-portal.js @@ -1,5 +1,7 @@ import React from 'react'; import classNames from 'classnames'; +import {browserHistory} from 'react-router'; +import {connect} from 'react-redux' import Widget from 'core-components/widget'; import Card from 'core-components/card'; @@ -7,26 +9,76 @@ import i18n from 'lib-app/i18n'; import Header from 'core-components/header'; class MainHomePagePortal extends React.Component { + static propTypes = { + type: React.PropTypes.oneOf(['default', 'complete']) + }; + render() { return (
-
+
- +
- +
- +
); } + + getTicketsCardProps() { + return { + title: i18n('TICKETS'), + description: i18n('TICKETS_DESCRIPTION'), + icon: 'ticket', + color: 'red', + buttonText: (this.props.type === 'complete') ? i18n('CREATE_TICKET') : null, + onButtonClick: () => browserHistory.push('/create-ticket') + }; + } + + getAccountCardProps() { + return { + title: i18n('ACCOUNT'), + description: i18n('ACCOUNT_DESCRIPTION'), + icon: 'user', + color: 'green' + }; + } + + getArticlesCardProps() { + return { + title: i18n('ARTICLES'), + description: i18n('ARTICLES_DESCRIPTION'), + icon: 'book', + color: 'blue', + buttonText: (this.props.type === 'complete') ? i18n('VIEW_ARTICLES') : null, + onButtonClick: () => browserHistory.push('/view-articles') + }; + } + + getViewTicketCardProps() { + return { + title: i18n('VIEW_TICKET'), + description: i18n('VIEW_TICKET_DESCRIPTION'), + icon: 'check-square-o', + color: 'green', + buttonText: (this.props.type === 'complete') ? i18n('CHECK_TICKET') : null, + onButtonClick: () => browserHistory.push('/check-ticket') + }; + } } -export default MainHomePagePortal; \ No newline at end of file +export default connect((store) => { + return { + title: store.config.title + }; +})(MainHomePagePortal); \ No newline at end of file diff --git a/client/src/app/main/main-home/main-home-page.js b/client/src/app/main/main-home/main-home-page.js index 5b258354..92840276 100644 --- a/client/src/app/main/main-home/main-home-page.js +++ b/client/src/app/main/main-home/main-home-page.js @@ -1,6 +1,6 @@ import React from 'react'; +import {connect} from 'react-redux' -import {connect} from 'react-redux' import i18n from 'lib-app/i18n'; import MainHomePageLoginWidget from 'app/main/main-home/main-home-page-login-widget'; @@ -13,11 +13,9 @@ class MainHomePage extends React.Component { return (
{this.renderMessage()} -
- -
-
- + {(this.props.config['user-system-enabled']) ? this.renderLoginWidget() : null} +
+
); @@ -34,6 +32,14 @@ class MainHomePage extends React.Component { } } + renderLoginWidget() { + return ( +
+ +
+ ); + } + renderSuccess() { return ( @@ -53,6 +59,7 @@ class MainHomePage extends React.Component { export default connect((store) => { return { - session: store.session + session: store.session, + config: store.config }; })(MainHomePage); \ No newline at end of file diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js index dd031535..6702eb0b 100644 --- a/client/src/app/main/main-layout-header.js +++ b/client/src/app/main/main-layout-header.js @@ -12,7 +12,7 @@ class MainLayoutHeader extends React.Component { render() { return (
- {this.renderAccessLinks()} + {(this.props.config['user-system-enabled']) ? this.renderAccessLinks() : null}
); diff --git a/client/src/core-components/button.js b/client/src/core-components/button.js index 2932b38c..404834ad 100644 --- a/client/src/core-components/button.js +++ b/client/src/core-components/button.js @@ -17,6 +17,7 @@ class Button extends React.Component { static propTypes = { children: React.PropTypes.node, + inverted: React.PropTypes.bool, size: React.PropTypes.oneOf([ 'extra-small', 'small', @@ -70,7 +71,8 @@ class Button extends React.Component { let classes = { 'button': true, 'button_disabled': this.props.disabled, - + 'button_inverted': this.props.inverted, + 'button_primary': (this.props.type === 'primary'), 'button_secondary': (this.props.type === 'secondary'), 'button_tertiary': (this.props.type === 'tertiary'), diff --git a/client/src/core-components/button.scss b/client/src/core-components/button.scss index 2c133d1d..2729a652 100644 --- a/client/src/core-components/button.scss +++ b/client/src/core-components/button.scss @@ -31,6 +31,10 @@ &_secondary { background-color: $primary-green; + &:focus, &:hover { + background-color: lighten($primary-green, 5%); + outline: none; + } &.button_disabled, &.button_disabled:hover { @@ -41,6 +45,11 @@ &_tertiary { background-color: $secondary-blue; + &:focus, &:hover { + background-color: lighten($secondary-blue, 5%); + outline: none; + } + &.button_disabled, &.button_disabled:hover { background-color: lighten($secondary-blue, 15%); @@ -93,4 +102,26 @@ text-decoration: underline; } } + + &_inverted { + background-color: white; + + &:focus, &:hover { + background-color: white; + opacity: 0.9; + outline: none; + } + + &.button_primary { + color: $primary-red; + } + + &.button_secondary { + color: $primary-green; + } + + &.button_tertiary { + color: $secondary-blue; + } + } } \ No newline at end of file diff --git a/client/src/core-components/card.js b/client/src/core-components/card.js index 991b0161..29dda180 100644 --- a/client/src/core-components/card.js +++ b/client/src/core-components/card.js @@ -1,5 +1,6 @@ import React from 'react'; import Icon from 'core-components/icon'; +import Button from 'core-components/button'; import classNames from 'classnames'; class Card extends React.Component{ @@ -7,7 +8,9 @@ class Card extends React.Component{ description: React.PropTypes.string, title: React.PropTypes.string, icon: React.PropTypes.string, - color: React.PropTypes.string + color: React.PropTypes.string, + buttonText: React.PropTypes.string, + onButtonClick: React.PropTypes.func }; render() { @@ -16,12 +19,23 @@ class Card extends React.Component{
{this.props.title}
{this.props.description}
+ {(this.props.buttonText) ? this.renderButton() : null} +
+ ); + } + + renderButton() { + return ( +
+
); } getClass() { - var classes = { + let classes = { 'card': true, 'card_red': (this.props.color === 'red'), 'card_blue': (this.props.color === 'blue'), @@ -32,5 +46,15 @@ class Card extends React.Component{ return classNames(classes); } + + getButtonType() { + let types = { + 'red': 'primary', + 'green': 'secondary', + 'blue': 'tertiary' + }; + + return types[this.props.color]; + } } export default Card; diff --git a/client/src/core-components/card.scss b/client/src/core-components/card.scss index 77bd29e2..1044b8b5 100644 --- a/client/src/core-components/card.scss +++ b/client/src/core-components/card.scss @@ -5,6 +5,7 @@ color: white; height: 260px; padding: 15px; + position: relative; &__title { font-variant: small-caps; @@ -16,6 +17,13 @@ font-size: $font-size--sm; } + &__button { + position: absolute; + left: 0; + right: 0; + bottom: 17px; + } + &_red { background-color: $primary-red; } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index ac2a5bbd..b317c0b1 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -11,7 +11,7 @@ module.exports = [ 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'reCaptchaPrivate': 'LALA', 'url': 'http://www.opensupports.com/support', - 'title': 'Very Cool', + 'title': 'OpenSupports Support Center', 'layout': 'Boxed', 'time-zone': 3, 'no-reply-email': 'shitr@post.com', @@ -36,8 +36,11 @@ module.exports = [ status: 'success', data: { 'language': 'en', + 'title': '', + 'layout': 'Boxed', 'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS', 'maintenance-mode': false, + 'user-system-enabled': false, 'departments': [ {id: 1, name: 'Sales Support', owners: 2}, {id: 2, name: 'Technical Issues', owners: 5}, diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 8e69269c..882ffabf 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -73,6 +73,7 @@ export default { 'ASSIGN_TO_ME': 'Assign to me', 'UN_ASSIGN': 'Unassign', 'VIEW_TICKET': 'View Ticket', + 'VIEW_TICKET_DESCRIPTION': 'Check the status of your ticket using your ticket number and email.', 'SELECT_CUSTOM_RESPONSE': 'Select a custom response...', 'WARNING': 'Warning', 'INFO': 'Information', @@ -152,6 +153,7 @@ export default { 'ALL_NOTIFICATIONS': 'All notifications', 'VERIFY_SUCCESS': 'User verified', 'VERIFY_FAILED': 'Could not verify', + 'CHECK_TICKET': 'Check Ticket', //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket',