tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Frontend - Ticket Chat like style [skip ci]

This commit is contained in:
ivan 2016-08-24 23:32:30 -03:00
parent e09f029818
commit 3a9d009fff
3 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,22 +48,32 @@ class TicketViewer extends React.Component {
}
renderComment(comment) {
return (
<div className={this.getCommentClass(comment)}>
<div className="row">
<div className="ticket-viewer__comment-icon"></div>
const iconNode = (
<div className="col-md-1">
<div className="ticket-viewer__comment-action">
<Icon name="comment-o" size="2x" />
</div>
</div>
);
const commentNode = (
<div className="col-md-11">
<div className="ticket-viewer__comment">
<span className="ticket-viewer__comment-pointer" />
<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-content">{comment.content}</div>
{this.renderFileRow(comment.file)}
</div>
<div className="ticket-viewer__comment-content row">{comment.content}</div>
{this.renderFileRow(comment.file)}
</div>
);
return (
<div className={this.getActionClass(comment)}>
{comment.author.staff ? [commentNode, iconNode] : [iconNode, commentNode]}
</div>
);
}
@ -78,16 +88,17 @@ class TicketViewer extends React.Component {
}
return (
<div className="ticket-viewer__file row">
<div className="ticket-viewer__file">
{node}
</div>
)
}
getCommentClass(comment) {
getActionClass(action) {
let classes = {
'ticket-viewer__comment': true,
'ticket-viewer__comment_staff': comment.author.staff
'row': true,
'ticket-viewer__action': true,
'ticket-viewer__action_staff': action.author.staff
};
return classNames(classes);

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

@ -47,7 +47,7 @@
}
&__file {
background-color: $light-grey;
background-color: $very-light-grey;
text-align: right;
padding: 5px 10px;
font-size: 12px;
@ -60,50 +60,69 @@
padding: 5px;
}
&__comment {
&__action {
margin-top: 20px;
text-align: left;
&_staff {
.ticket-viewer__comment-action {
background-color: $primary-blue;
}
.ticket-viewer__comment-pointer {
left: 100%;
border-right-color: transparent;
border-left-color: $light-grey;
}
}
}
&__comment {
position: relative;
&-action {
vertical-align: top;
background-color: $secondary-blue;
color: white;
border-radius: 5px;
width: 42px;
height: 42px;
padding-left: 8px;
padding-top: 4px;
}
&-pointer {
right: 100%;
border: solid transparent;
position: absolute;
border-right-color: $light-grey;
border-width: 13px;
margin-top: 8px;
}
&-author {
text-align: left;
float: left;
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;
}
padding: 12px;
}
&-date {
text-align: right;
border: 2px solid $light-grey;
border-bottom: none;
padding: 22px;
padding: 12px;
background-color: $light-grey;
}
&-content {
background-color: white;
border: 2px solid $light-grey;
border: 2px solid $very-light-grey;
border-top: none;
padding: 20px 10px;
text-align: left;
}
&_staff {
}
}
}

1
client/src/scss/_vars.scss
View File

@ -5,6 +5,7 @@ $secondary-red: #FB6362;
$primary-blue: #414A59;
$secondary-blue: #20B8c5;
$very-light-grey: #F7F7F7;
$light-grey: #EEEEEE;
$grey: #E7E7E7;
$medium-grey: #D9D9D9;