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 - Ticket Chat like style [skip ci]

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

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

@ -47,7 +47,7 @@
} }
&__file { &__file {
background-color: $light-grey; background-color: $very-light-grey;
text-align: right; text-align: right;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
@ -60,50 +60,69 @@
padding: 5px; padding: 5px;
} }
&__comment { &__action {
margin-top: 20px; 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 { &-author {
text-align: left; text-align: left;
float: left; float: left;
position: relative; position: relative;
padding-top: 22px; padding: 12px;
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: 22px; padding: 12px;
background-color: $light-grey; background-color: $light-grey;
} }
&-content { &-content {
background-color: white; background-color: white;
border: 2px solid $light-grey; border: 2px solid $very-light-grey;
border-top: none; border-top: none;
padding: 20px 10px; padding: 20px 10px;
text-align: left; text-align: left;
} }
&_staff {
}
} }
} }

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

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