Guillermo - add-edit-password-frontend-message [skip ci]

client/src/app-components/ticket-info.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import i18n from 'lib-app/i18n';
+
+class TicketInfo extends React.Component {
+    static propTypes = {
+        ticket: React.PropTypes.object
+    };
+
+    render() {
+        return (
+            <div className="ticket-info">
+                <div className="ticket-info__title">
+                    {this.props.ticket.title}
+                </div>
+                <div className="ticket-info__description">
+                    {this.props.ticket.content}
+                </div>
+                <div className="ticket-info__author">
+                    Author: {this.props.ticket.author.name}
+                </div>
+                <div className="ticket-info__properties">
+                    <div className="ticket-info__properties__status">
+                        <span className="ticket-info__properties__label">
+                            Status:
+                        </span>
+                        <span className={this.getStatusClass()}>
+                            {(this.props.ticket.closed) ? 'closed' : 'open'}
+                        </span>
+                    </div>
+                    <div className="ticket-info__properties__priority">
+                        <span className="ticket-info__properties__label">
+                            Priority:
+                        </span>
+                        <span className="ticket-info__properties__badge-green">
+                            {this.props.ticket.priority}
+                        </span>
+                    </div>
+                    <div className="ticket-info__properties__owner">
+                        <span className="ticket-info__properties__label">
+                            Owned:
+                        </span>
+                        <span className="ticket-info__properties__badge-red">
+                            none
+                        </span>
+                    </div>
+                    <div className="ticket-info__properties__comments">
+                        <span className="ticket-info__properties__label">
+                            Comments:
+                        </span>
+                        <span className="ticket-info__properties__badge-blue">
+                            21
+                        </span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    getStatusClass(){
+        if(this.props.ticket.closed){
+            return "ticket-info__properties__badge-red";
+        }else{
+            return "ticket-info__properties__badge-green";
+        }
+    }
+}
+
+export default TicketInfo;

client/src/app-components/ticket-info.scss

@@ -0,0 +1,75 @@
+@import "../scss/vars";
+
+.ticket-info {
+    width: 300px;
+    font-weight: normal;
+    &__title{
+        color: $primary-black;
+        font-variant: small-caps;
+    }
+    &__description{
+        color: $grey;
+        font-size: small;
+    }
+    &__author{
+        color: $primary-blue;
+        margin-bottom: 12px;
+    }
+    &__properties{
+        background-color: $grey;
+        padding: 10px;
+        font-variant: small-caps;
+
+        &__status,
+        &__owner,
+        &__priority,
+        &__comments {
+            display: inline-block;
+            width: 50%;
+            position: relative;
+        }
+        &__owner,
+        &__comments{
+            margin-top: 10px;
+        }
+
+        &__badge-green,
+        &__badge-blue,
+        &__badge-red{
+            color: white;
+            border-radius: 7px;
+            display: inline-block;
+            width: 60px;
+            text-align: center;
+            margin-left: 5px;
+        }
+
+        &__badge-green{
+            background-color: $primary-green;
+        }
+
+        &__badge-blue{
+            background-color: $secondary-blue;
+        }
+
+        &__badge-red{
+            background-color: $primary-red;
+        }
+
+        &__label{
+            text-align: right;
+            width: 71px;
+            display: inline-block;
+
+        }
+
+        &__status,
+        &__owner{
+            margin-right: 10px;
+            width: 125px;
+            .ticket-info__properties__label{
+                width: 48px;
+            }
+        }
+    }
+}

client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js

@@ -7,6 +7,7 @@ import Header from 'core-components/header';
 import Table from 'core-components/table';
 import Button from 'core-components/button';
 import Tooltip from 'core-components/tooltip';
+import TicketInfo from 'app-components/ticket-info';
 
 class DashboardListTicketsPage extends React.Component {
     static propTypes = {
@@ -60,7 +61,7 @@ class DashboardListTicketsPage extends React.Component {
 
         return {
             number: (
-                <Tooltip content="hola">
+                <Tooltip content={<TicketInfo ticket={ticket}/>} >
                     {'#' + ticket.ticketNumber}
                 </Tooltip>
             ),

client/src/core-components/tooltip.js

@@ -60,7 +60,7 @@ class Tooltip extends React.Component {
         let props = {};
         props.className= 'tooltip__children';
 
-        if (this.props.openOnHover) {
+        if (!this.props.openOnHover) {
             props.onClick= this.onClick.bind(this);
         }
         return props;

client/src/core-components/tooltip.scss

@@ -12,7 +12,7 @@
         margin-bottom: 10px;
         box-shadow: 0 0 4px #8D8D8D;
         border-radius: 4px;
-        max-width: 200px;
+        min-width: 200px;
         background-color: #F7F7F7;
         color: black;
         padding: 10px;