tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-08-19 16:58:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merged in OS-27-tooltip-ticket-number (pull request #56)

Browse Source 
OS-27 tooltip ticket number
This commit is contained in:
Ivan Diaz 2016-09-30 17:53:31 -03:00
commit 8747326fca
7 changed files with 262 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/app-components/ticket-info.js Normal file
View File

@ -0,0 +1,77 @@
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={this.getPriorityClass()}>
{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';
}
}
getPriorityClass() {
let priorityClasses = {
'low': 'ticket-info__properties__badge-green',
'medium': 'ticket-info__properties__badge-blue',
'high': 'ticket-info__properties__badge-red'
};
return priorityClasses[this.props.ticket.priority];
}
}
export default TicketInfo;

75
client/src/app-components/ticket-info.scss Normal file
View File

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

3
client/src/app-components/ticket-list.js
View File

@ -5,6 +5,7 @@ import i18n from 'lib-app/i18n';
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 TicketList extends React.Component {
static propTypes = {
@ -97,7 +98,7 @@ class TicketList extends React.Component {
return {
number: (
<Tooltip content="hola">
<Tooltip content={<TicketInfo ticket={ticket}/>} openOnHover>
{'#' + ticket.ticketNumber}
</Tooltip>
),

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

@ -105,7 +105,9 @@ let DemoPage = React.createClass({
title: 'Tooltip',
render: (
<div>
<Tooltip content="mensaje mensa jemensajemens ajem ensaje nsaje adicionals">hola</Tooltip>
<Tooltip content="mensaje mensa jemensajemens ajem ensaje nsaje adicionals" openOnHover={true}>
hola
</Tooltip>
</div>
)
},

49
client/src/core-components/__tests__/tooltip-test.js Normal file
View File

@ -0,0 +1,49 @@
const Tooltip = require('core-components/tooltip');
describe('Tooltip component', function () {
it('should open and close with click', function () {
let tooltip = TestUtils.renderIntoDocument(
<Tooltip content="hola">
<span className="clickeable">text to click</span>
</Tooltip>
);
let clickeable = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'clickeable')[0];
let content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(0);
TestUtils.Simulate.click(clickeable);
content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(1);
expect(content[0].textContent).to.equal('hola');
TestUtils.Simulate.click(clickeable);
content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(0);
});
it('should open and close with hover', function () {
let tooltip = TestUtils.renderIntoDocument(
<Tooltip content="hola" openOnHover>
<span className="to-hovering">text</span>
</Tooltip>
);
let hovereable = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'to-hovering')[0];
let content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(0);
TestUtils.Simulate.mouseOver(hovereable);
content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(1);
expect(content[0].textContent).to.equal('hola');
TestUtils.Simulate.mouseOut(hovereable);
content = TestUtils.scryRenderedDOMComponentsWithClass(tooltip, 'tooltip__message');
expect(content.length).to.equal(0);
});
});

64
client/src/core-components/tooltip.js
View File

@ -5,24 +5,26 @@ class Tooltip extends React.Component {
static propTypes = {
children: React.PropTypes.node,
content: React.PropTypes.node
content: React.PropTypes.node,
openOnHover: React.PropTypes.bool
};
constructor (props){
super(props);
this.state = {show : false};
}
state = {
show : false
};
render (){
render() {
return (
<div className="tooltip" >
<div {...this.getProps()}>
{(this.state.show) ? this.renderAnimatedMessage() : null}
<div className="tooltip__children" onClick={this.onClick.bind(this)}>{this.props.children}</div>
<div {...this.getChildrenProps()}>
{this.props.children}
</div>
</div>
);
}
renderAnimatedMessage(){
renderAnimatedMessage() {
return (
<Motion defaultStyle={{opacity:spring(0)}} style={{opacity:spring(1)}}>
{this.renderMessage.bind(this)}
@ -30,7 +32,7 @@ class Tooltip extends React.Component {
)
}
renderMessage(animation){
renderMessage(animation) {
return (
<div style={animation}>
<div className="tooltip__message">
@ -40,11 +42,47 @@ class Tooltip extends React.Component {
</div>
)
}
onClick(){
getProps() {
let props = {};
props.className = 'tooltip';
if(this.props.openOnHover) {
props.onMouseOver = this.onMouseOver.bind(this);
props.onMouseOut = this.onMouseOut.bind(this);
}
return props;
}
getChildrenProps() {
let props = {};
props.className= 'tooltip__children';
if(!this.props.openOnHover) {
props.onClick= this.onClick.bind(this);
}
return props;
}
onMouseOver() {
this.setState({
show: true
});
}
onMouseOut() {
this.setState({
show: false
});
}
onClick() {
if (this.state.show) {
this.setState({show : false});
this.setState({show: false});
} else {
this.setState({show : true});
this.setState({show: true});
}
}
}

9
client/src/core-components/tooltip.scss
View File

@ -1,24 +1,25 @@
.tooltip {
position: relative;
display: inline-block;
&__children{
&__children {
cursor: default;
}
&__message{
&__message {
position: absolute;
bottom: 100%;
left: -25%;
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;
}
&__pointer{
&__pointer {
border: solid transparent;
position: absolute;
border-top-color: #8D8D8D;