tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-31 01:35:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Ivan - Frontend - Add comments icon [skip ci]

Browse Source
This commit is contained in:
ivan 2016-08-24 20:36:29 -03:00
parent 41a4a3f00d
commit e09f029818
3 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js
View File

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import Icon from 'core-components/icon'; import Icon from 'core-components/icon';
class TicketViewer extends React.Component { class TicketViewer extends React.Component {
@ -31,10 +33,10 @@ class TicketViewer extends React.Component {
<div className="ticket-viewer__author col-md-4">{this.props.ticket.author.name}</div> <div className="ticket-viewer__author col-md-4">{this.props.ticket.author.name}</div>
<div className="ticket-viewer__date col-md-4">{this.props.ticket.date}</div> <div className="ticket-viewer__date col-md-4">{this.props.ticket.date}</div>
</div> </div>
<div className="ticket-viewer__content row">{this.props.ticket.content}</div> <div className="ticket-viewer__content">
{this.renderFileRow(this.props.ticket.file)} {this.renderComment(this.props.ticket)}
</div>
<div className="ticket-viewer__comments"> <div className="ticket-viewer__comments">
<div className="ticket-viewer__comments-title row">Responses</div>
{this.props.ticket.comments.map(this.renderComment.bind(this))} {this.props.ticket.comments.map(this.renderComment.bind(this))}
</div> </div>
<div className="ticket-viewer__response"> <div className="ticket-viewer__response">
@ -45,11 +47,19 @@ class TicketViewer extends React.Component {
); );
} }
renderComment(comment, index) { renderComment(comment) {
return ( return (
<div className="ticket-viewer__comment" key={index}> <div className={this.getCommentClass(comment)}>
<div className="row"> <div className="row">
<div className="ticket-viewer__comment-author">{comment.author.name}</div> <div className="ticket-viewer__comment-icon"></div>
<div className="ticket-viewer__comment-author">
<span className="ticket-viewer__comment-author-icon">
<Icon name="comment-o" size="2x" />
</span>
<span className="ticket-viewer__comment-author-name">
{comment.author.name}
</span>
</div>
<div className="ticket-viewer__comment-date">{comment.date}</div> <div className="ticket-viewer__comment-date">{comment.date}</div>
</div> </div>
<div className="ticket-viewer__comment-content row">{comment.content}</div> <div className="ticket-viewer__comment-content row">{comment.content}</div>
@ -73,6 +83,15 @@ class TicketViewer extends React.Component {
</div> </div>
) )
} }
getCommentClass(comment) {
let classes = {
'ticket-viewer__comment': true,
'ticket-viewer__comment_staff': comment.author.staff
};
return classNames(classes);
}
getFileLink(filePath = '') { getFileLink(filePath = '') {
const fileName = filePath.replace(/^.*[\\\/]/, ''); const fileName = filePath.replace(/^.*[\\\/]/, '');

34
client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss
View File

@ -43,10 +43,6 @@
} }
&__content { &__content {
background-color: white;
border: 2px solid $light-grey;
padding: 20px 10px;
text-align: left;
margin-top: 10px; margin-top: 10px;
} }
@ -57,10 +53,6 @@
font-size: 12px; font-size: 12px;
} }
&__comments {
margin-top: 10px;
}
&__comments-title { &__comments-title {
text-align: left; text-align: left;
background-color: $dark-grey; background-color: $dark-grey;
@ -69,19 +61,35 @@
} }
&__comment { &__comment {
margin-top: 5px; margin-top: 20px;
&-author { &-author {
text-align: left; text-align: left;
float: left; float: left;
padding: 10px; position: relative;
padding-top: 22px;
padding-left: 70px;
&-icon {
background-color: $secondary-blue;
color: white;
border-radius: 100%;
display: inline-block;
width: 42px;
height: 42px;
padding-left: 8px;
padding-top: 4px;
position: absolute;
top: 10px;
left: 10px;
}
} }
&-date { &-date {
text-align: right; text-align: right;
border: 2px solid $light-grey; border: 2px solid $light-grey;
border-bottom: none; border-bottom: none;
padding: 10px; padding: 22px;
background-color: $light-grey; background-color: $light-grey;
} }
@ -93,5 +101,9 @@
padding: 20px 10px; padding: 20px 10px;
text-align: left; text-align: left;
} }
&_staff {
}
} }
} }

2
client/src/index.html
View File

@ -6,7 +6,7 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>App Name</title> <title>OS4</title>
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
</head> </head>