diff --git a/client/src/app-components/ticket-info.js b/client/src/app-components/ticket-info.js new file mode 100644 index 00000000..5966d4f4 --- /dev/null +++ b/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 ( +
+
+ {this.props.ticket.title} +
+
+ {this.props.ticket.content} +
+
+ Author: {this.props.ticket.author.name} +
+
+
+ + Status: + + + {(this.props.ticket.closed) ? 'closed' : 'open'} + +
+
+ + Priority: + + + {this.props.ticket.priority} + +
+
+ + Owned: + + + none + +
+
+ + Comments: + + + 21 + +
+
+
+ ); + } + getStatusClass(){ + if(this.props.ticket.closed){ + return "ticket-info__properties__badge-red"; + }else{ + return "ticket-info__properties__badge-green"; + } + } +} + +export default TicketInfo; \ No newline at end of file diff --git a/client/src/app-components/ticket-info.scss b/client/src/app-components/ticket-info.scss new file mode 100644 index 00000000..fde38901 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js index 40707fa8..042f00b4 100644 --- a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js +++ b/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: ( - + } > {'#' + ticket.ticketNumber} ), diff --git a/client/src/core-components/tooltip.js b/client/src/core-components/tooltip.js index d293c7c4..3f825264 100644 --- a/client/src/core-components/tooltip.js +++ b/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; diff --git a/client/src/core-components/tooltip.scss b/client/src/core-components/tooltip.scss index fb8f79f9..11eb58d0 100644 --- a/client/src/core-components/tooltip.scss +++ b/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;