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

Merge branch 'master' into ticket-get-path

This commit is contained in:
ivan 2016-09-09 00:57:43 -03:00
parent 7b6f9e28c8 3418adb028
commit c787be375d
10 changed files with 151 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/demo/components-demo-page.js
View File

@ -9,6 +9,7 @@ const Checkbox = require('core-components/checkbox');
const Widget = require('core-components/widget');
const DropDown = require('core-components/drop-down');
const Menu = require('core-components/menu');
const Tooltip = require('core-components/tooltip');
let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
let secondaryMenuItems = [
@ -77,6 +78,12 @@ let DemoPage = React.createClass({
render: (
<Menu items={secondaryMenuItems} type="secondary"/>
)
},
{
title: 'Tooltip',
render: (
<Tooltip content="mensaje mensa jemensajemens ajem ensaje nsaje adicionals">hola</Tooltip>
)
}
],

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

@ -1,21 +1,31 @@
import React from 'react';
import classNames from 'classnames';
import Widget from 'core-components/widget';
import Card from 'core-components/card';
import i18n from 'lib-app/i18n';
import Header from 'core-components/header';
class MainHomePagePortal extends React.Component {
render() {
return (
<Widget className={classNames('main-home-page-portal', this.props.className)}>
<Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
<Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
<Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
<div className="main-home-page-portal__title">
<Header 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"/>
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
</div>
</div>
</Widget>
);
}
}

4
client/src/app/main/main-home/main-home-page-portal.scss
View File

@ -1,3 +1,7 @@
.main-home-page-portal {
min-height: 412px;
&__card {
padding: 5px;
}
}

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

@ -10,22 +10,26 @@ class Card extends React.Component{
color: React.PropTypes.string
};
render(){
return(
render() {
return (
<div className={this.getClass()}>
<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>
</div>
)
);
}
getClass(){
getClass() {
var classes = {
'card': true,
'card_red': (this.props.color === 'red'),
'card_blue': (this.props.color === 'blue'),
'card_green': (this.props.color === 'green')
};
classes[this.props.className] = (this.props.className);
return classNames(classes);
}
}

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

@ -1,26 +1,30 @@
@import "../scss/vars";
.card{
padding: 15px;
width: 200px;
height: 260px;
color: white;
display: inline-block;
margin-right: 10px;
border-radius: 4px;
&__title{
font-variant: small-caps;
font-size: 20px;
}
&__description{
}
&_red{
background-color: $primary-red;
}
&_blue{
background-color: $secondary-blue;
}
&_green{
background-color: $primary-green;
}
.card {
border-radius: 4px;
color: white;
height: 260px;
padding: 15px;
&__title {
font-variant: small-caps;
margin: 10px 0;
font-size: $font-size--lg;
}
&__description {
font-size: $font-size--sm;
}
&_red {
background-color: $primary-red;
}
&_blue {
background-color: $secondary-blue;
}
&_green {
background-color: $primary-green;
}
}

2
client/src/core-components/form-field.scss
View File

@ -15,7 +15,7 @@
&_errored {
.form-field__error {
color: $primary-red;
font-size: $font-size--sm;
font-size: $font-size--xs;
display: block;
position: absolute;
}

52
client/src/core-components/tooltip.js Normal file
View File

@ -0,0 +1,52 @@
import React from 'react'
import {Motion, spring} from 'react-motion';
class Tooltip extends React.Component {
static propTypes = {
children: React.PropTypes.node,
content: React.PropTypes.node
};
constructor (props){
super(props);
this.state = {show : false};
}
render (){
return (
<div className="tooltip" >
{(this.state.show) ? this.renderAnimatedMessage() : null}
<div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
</div>
);
}
renderAnimatedMessage(){
return (
<Motion defaultStyle={{opacity:spring(0)}} style={{opacity:spring(1)}}>
{this.renderMessage.bind(this)}
</Motion>
)
}
renderMessage(animation){
return (
<div style={animation}>
<div className="tooltip__message">
{this.props.content}
</div>
<span className="tooltip__pointer"/>
</div>
)
}
onClick(){
if (this.state.show) {
this.setState({show : false});
} else {
this.setState({show : true});
}
}
}
export default Tooltip;

30
client/src/core-components/tooltip.scss Normal file
View File

@ -0,0 +1,30 @@
.tooltip {
position: relative;
display: inline-block;
&__children{
}
&__message{
position: absolute;
bottom: 100%;
left: -25%;
margin-bottom: 10px;
box-shadow: 0 0 4px #8D8D8D;
border-radius: 4px;
max-width: 200px;
background-color: #F7F7F7;
color: black;
padding: 10px;
}
&__pointer{
border: solid transparent;
position: absolute;
border-top-color: #8D8D8D;
border-width: 10px;
top: -10px;
left: 50%;
margin-left: -8px;
}
}

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

@ -19,9 +19,11 @@ export default {
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
'TICKET_LIST': 'Ticket List',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
'TICKETS_DESCRIPTION': 'A random text about tickets',
'ARTICLES_DESCRIPTION': 'A random text about articles',
'ACCOUNT_DESCRIPTION': 'A random text about account',
'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
'SUPPORT_CENTER': 'Support Center',
'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
'DEPARTMENT': 'Department',
'AUTHOR': 'Author',
'DATE': 'Date',

4
client/src/scss/_vars.scss
View File

@ -20,8 +20,8 @@ $full-space: 40px;
$half-space: 20px;
// FONT SIZING
$font-size--xs: 10px;
$font-size--sm: 12px;
$font-size--xs: 11px;
$font-size--sm: 13px;
$font-size--md: 16px;
$font-size--lg: 24px;
$font-size--xl: 32px;