tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Update home page for user system disabled [skip ci]

This commit is contained in:
Ivan Diaz 2017-01-17 16:27:46 -03:00
parent e8e29d8701
commit e20760e8bb
9 changed files with 146 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/src/app/main/main-home/main-home-page-portal.js
View File

@ -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 (
<Widget className={classNames('main-home-page-portal', this.props.className)}>
<div className="main-home-page-portal__title">
<Header title={i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
<Header title={this.props.title || i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
</div>
<div className="main-home-page-portal__cards">
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
<Card {...this.getTicketsCardProps()}/>
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
<Card {...((this.props.type === 'complete') ? this.getViewTicketCardProps() : this.getAccountCardProps())} />
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
<Card {...this.getArticlesCardProps()} />
</div>
</div>
</Widget>
);
}
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;
export default connect((store) => {
return {
title: store.config.title
};
})(MainHomePagePortal);

21
client/src/app/main/main-home/main-home-page.js
View File

@ -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 (
<div className="main-home-page">
{this.renderMessage()}
<div className="col-md-4">
<MainHomePageLoginWidget />
</div>
<div className="col-md-8">
<MainHomePagePortal />
{(this.props.config['user-system-enabled']) ? this.renderLoginWidget() : null}
<div className={(this.props.config['user-system-enabled']) ? 'col-md-8' : 'col-md-12'}>
<MainHomePagePortal type={((this.props.config['user-system-enabled']) ? 'default' : 'complete')}/>
</div>
</div>
);
@ -34,6 +32,14 @@ class MainHomePage extends React.Component {
}
}
renderLoginWidget() {
return (
<div className="col-md-4">
<MainHomePageLoginWidget />
</div>
);
}
renderSuccess() {
return (
<Message title={i18n('VERIFY_SUCCESS')} type="success" className="main-home-page__message">
@ -53,6 +59,7 @@ class MainHomePage extends React.Component {
export default connect((store) => {
return {
session: store.session
session: store.session,
config: store.config
};
})(MainHomePage);

2
client/src/app/main/main-layout-header.js
View File

@ -12,7 +12,7 @@ class MainLayoutHeader extends React.Component {
render() {
return (
<div className="main-layout-header">
{this.renderAccessLinks()}
{(this.props.config['user-system-enabled']) ? this.renderAccessLinks() : null}
<LanguageSelector {...this.getLanguageSelectorProps()} />
</div>
);

4
client/src/core-components/button.js
View File

@ -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'),

31
client/src/core-components/button.scss
View File

@ -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;
}
}
}

28
client/src/core-components/card.js
View File

@ -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{
<div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
<div className="card__title">{this.props.title}</div>
<div className="card__description">{this.props.description}</div>
{(this.props.buttonText) ? this.renderButton() : null}
</div>
);
}
renderButton() {
return (
<div className="card__button">
<Button type={this.getButtonType()} inverted onClick={this.props.onButtonClick}>
{this.props.buttonText}
</Button>
</div>
);
}
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;

8
client/src/core-components/card.scss
View File

@ -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;
}

5
client/src/data/fixtures/system-fixtures.js
View File

@ -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},

2
client/src/data/languages/en.js
View File

@ -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',