Merge branch 'master' into ticket-get-path

client/src/app/demo/components-demo-page.js

@@ -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>
+            )
         }
 	],
 

client/src/app/main/main-home/main-home-page-portal.js

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

client/src/app/main/main-home/main-home-page-portal.scss

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

client/src/core-components/card.js

@@ -17,8 +17,9 @@ class Card extends React.Component{
                 <div className="card__title">{this.props.title}</div>
                 <div className="card__description">{this.props.description}</div>
             </div>
-        )
+        );
     }
+
     getClass() {
         var classes = {
             'card': true,
@@ -26,6 +27,9 @@ class Card extends React.Component{
             'card_blue': (this.props.color === 'blue'),
             'card_green': (this.props.color === 'green')
         };
+
+        classes[this.props.className] = (this.props.className);
+
         return classNames(classes);
     }
 }

client/src/core-components/card.scss

@@ -1,25 +1,29 @@
 @import "../scss/vars";
 
 .card {
-  padding: 15px;
-  width: 200px;
-  height: 260px;
-  color: white;
-  display: inline-block;
-  margin-right: 10px;
     border-radius: 4px;
+    color: white;
+    height: 260px;
+    padding: 15px;
+
     &__title {
         font-variant: small-caps;
-    font-size: 20px;
+        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;
     }

client/src/core-components/form-field.scss

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

client/src/core-components/tooltip.js

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

client/src/core-components/tooltip.scss

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

client/src/data/languages/en.js

@@ -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',
+    'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
-    'ARTICLES_DESCRIPTION': 'A random text about articles',
+    'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
-    'ACCOUNT_DESCRIPTION': 'A random text about account',
+    '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',

client/src/scss/_vars.scss

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