Skip to content

Commit 3e52c81

Browse files
author
vikasrohit
authored
Merge pull request #1100 from appirio-tech/feature/messageEditDelete
Feature/message edit delete
2 parents 8ee6cf3 + 96af853 commit 3e52c81

File tree

6 files changed

+160
-117
lines changed

6 files changed

+160
-117
lines changed

‎src/components/ActionCard/ActionCard.scss‎

Lines changed: 101 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@
1414
padding: $base-unit*2 $base-unit*6;
1515
}
1616

17+
.Dropdown li:not(:last-child) {
18+
a {
19+
border-bottom: 1px solid $tc-gray-10;
20+
display: block;
21+
}
22+
}
1723
.edit-toggle-container {
1824
display: inline;
25+
float: right;
1926

2027
.edit-toggle {
2128
background: url('../../assets/images/ui-16px-1_edit-73.svg') no-repeat 30px 50%;
@@ -31,53 +38,51 @@
3138
line-height: 20px;
3239
height: 20px;
3340
padding: 0 25px 0 25px;
34-
float: right;
3541
cursor: pointer;
3642
}
3743
.edit-toggle.for-topic {
3844
background: url('../../assets/images/arrows-16px-3_small-down.svg') no-repeat 30px 50%;
3945
}
40-
.edit-dropdown {
41-
border-radius: $base-unit;
42-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
43-
padding: 10px 0;
44-
position: absolute;
45-
background: $tc-white;
46-
top: 15px;
47-
right: 10px;
48-
z-index: 2;
49-
display: flex;
50-
a {
51-
display: block;
52-
@include roboto-medium;
53-
font-size: $tc-label-md;
54-
color: #394146;
55-
text-align: left;
56-
line-height: 30px;
57-
padding: 0 16px 0 10px;
58-
&:hover {
59-
background: $tc-dark-blue-10;
60-
}
61-
&.active {
62-
background: $tc-dark-blue-10;
63-
}
46+
.dropdown-menu-list a{
47+
text-decoration:none;
48+
font-weight:400;
49+
padding:0px;
50+
&:hover{
51+
background:transparent;
6452
}
65-
.delete-confirm {
66-
justify-content: space-between;
67-
padding: 10px 10px 0 10px;
53+
}
54+
.dropdown-menu-list li{
55+
padding:0px 20px 0 20px;
56+
&:hover{
57+
background:$tc-gray-10;
6858
}
69-
.delete-confirm-btns {
70-
float: right;
71-
padding-top: 5px;
59+
}
7260

73-
button {
74-
margin-left: 10px
75-
}
76-
}
77-
.hide {
78-
display: none !important
79-
}
61+
62+
63+
.pointer-shadow .dropdown-menu-list{
64+
transform:translate(-50%,0%);
65+
}
66+
.pointer-shadow .dropdown-menu-list::before {
67+
content: '';
68+
display: block;
69+
position: absolute;
70+
top: -6px;
71+
right:14px;
72+
margin-left:-24px;
73+
width: 12px;
74+
height: 12px;
75+
background: #FFFFFF;
76+
border-right: 1px solid #DCDCE0;
77+
border-bottom: 1px solid #DCDCE0;
78+
transform: rotate(-135deg);
79+
z-index: 999;
80+
}
81+
82+
.pointer-shadow.hide{
83+
display:none;
8084
}
85+
8186
}
8287

8388
.card-header {
@@ -215,24 +220,12 @@
215220
// Embedded content overrides -- end
216221

217222
.comment {
218-
background: $tc-gray-neutral-light;
219223
box-shadow: 0px 0px 3px 0px rgba(89, 167, 255, 0.00);
220224
border-radius: 4px;
221225
padding: $base-unit*2;
222226
margin-bottom: -10px;
223227
width: calc(100% - 40px);
224228

225-
&:before {
226-
content: '';
227-
position: absolute;
228-
width: 0px;
229-
height: 0px;
230-
margin-left: -16px;
231-
border-top: 10px solid transparent;
232-
border-bottom: 10px solid transparent;
233-
border-right: 14px solid $tc-gray-neutral-light;
234-
transform: rotate(-90deg);
235-
}
236229

237230
&.self {
238231
background: $tc-dark-blue-10;
@@ -259,6 +252,11 @@
259252
}
260253
}
261254

255+
.commentEdit{
256+
padding-left:0px;
257+
padding-right:0px;
258+
}
259+
262260
.comment-form {
263261
textarea,
264262
input {
@@ -524,7 +522,7 @@
524522

525523
&:hover,
526524
&.active {
527-
background-color: $tc-gray-neutral-light;
525+
background-color: white;
528526
}
529527
}
530528

@@ -634,4 +632,56 @@
634632
color: red;
635633
font-weight: bold;
636634
}
635+
}
636+
637+
.delete-post-dialog{
638+
639+
padding: 50px 40px 50px 40px;
640+
top : 50%;
641+
left : 50%;
642+
right : auto;
643+
bottom : auto;
644+
transform : translate(-50%, -50%);
645+
position:absolute;
646+
background: white;
647+
648+
box-shadow: 0 2px 9px 0 rgba(38,38,40,0.15);
649+
border-radius: 6px;
650+
}
651+
652+
.delete-post-dialog-overlay{
653+
background : rgba(38, 38, 40, 0.6);
654+
z-index:20;
655+
position : fixed;
656+
top : 0;
657+
left : 0;
658+
right : 0;
659+
bottom : 0;
660+
}
661+
662+
.modal-title{
663+
font-family: Roboto-Medium;
664+
font-size: 20px;
665+
color: #47474F;
666+
line-height: 30px;
667+
}
668+
669+
.modal-body{
670+
margin-top:20px;
671+
font-family: Roboto-Regular;
672+
font-size: 15px;
673+
color: #747480;
674+
line-height: 25px;
675+
}
676+
677+
.action-btn {
678+
margin-left:10px;
679+
}
680+
681+
.action-area{
682+
margin-top:45px;
683+
}
684+
685+
.dropdownContainer{
686+
display:inline;
637687
}

‎src/components/ActionCard/CommentEditToggle.jsx‎

Lines changed: 49 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,20 @@
11
import React, {PropTypes} from 'react'
22
import cn from 'classnames'
3+
import { Dropdown, DropdownItem } from 'appirio-tech-react-components'
4+
import Modal from 'react-modal'
35

46
export default class CommentEditToggle extends React.Component {
57

68
constructor(props) {
79
super(props)
8-
this.state = {isOpen: false}
10+
this.state = {}
911
this.onEdit = this.onEdit.bind(this)
1012
this.onDelete = this.onDelete.bind(this)
1113
this.showDelete = this.showDelete.bind(this)
1214
this.cancelDelete = this.cancelDelete.bind(this)
13-
this.onClickOutside = this.onClickOutside.bind(this)
14-
}
15-
16-
componentDidMount() {
17-
document.removeEventListener('click', this.onClickOutside)
18-
document.addEventListener('click', this.onClickOutside)
19-
}
20-
21-
componentWillUnmount() {
22-
document.removeEventListener('click', this.onClickOutside)
23-
}
24-
25-
onClickOutside(evt) {
26-
if (!this.state.isOpen) {
27-
return
28-
}
29-
30-
let currNode = evt.target
31-
let isInToggle = false
32-
33-
do {
34-
if (currNode === this.refs.editToggleContainer) {
35-
isInToggle = true
36-
break
37-
}
38-
39-
currNode = currNode.parentNode
40-
41-
if(!currNode)
42-
break
43-
} while(currNode.tagName)
44-
45-
if (!isInToggle) {
46-
this.setState({isOpen: false})
47-
}
4815
}
4916

5017
onEdit() {
51-
this.setState({isOpen: false})
5218
this.props.onEdit()
5319
}
5420

@@ -57,38 +23,61 @@ export default class CommentEditToggle extends React.Component {
5723
}
5824

5925
cancelDelete() {
60-
this.setState({isOpen: false, showDeleteConfirm: false})
26+
this.setState({showDeleteConfirm: false})
6127
}
6228

6329
onDelete() {
64-
this.setState({isOpen: false})
30+
this.setState({showDeleteConfirm: false})
6531
this.props.onDelete()
6632
}
6733

6834
render() {
69-
const { isOpen, showDeleteConfirm } = this.state
70-
35+
const {showDeleteConfirm } = this.state
36+
const editOptions = {label:this.props.forTopic ? 'Edit post' : 'Edit comment', val:'1'}
37+
const deleteOptions = {label:this.props.forTopic ? 'Delete post' : 'Delete comment', val:'2'}
7138
return (
72-
<div className="edit-toggle-container" ref="editToggleContainer">
73-
<div className={cn('edit-toggle', {'for-topic': this.props.forTopic})} onClick={() => this.setState({isOpen: !isOpen, showDeleteConfirm: false})}>
39+
<div className="dropdownContainer">
40+
<Dropdown pointerShadow className="drop-down edit-toggle-container">
41+
<div className={cn('dropdown-menu-header', 'edit-toggle', {'for-topic': this.props.forTopic})} >
42+
</div>
43+
<div className="dropdown-menu-list down-layer">
44+
<ul>
45+
<DropdownItem key={1} item={editOptions}
46+
onItemClick={this.onEdit}
47+
currentSelection=""
48+
/>
49+
<DropdownItem key={2} item={deleteOptions}
50+
onItemClick={this.showDelete}
51+
currentSelection=""
52+
/>
53+
</ul>
54+
</div>
55+
</Dropdown>
56+
<Modal
57+
isOpen={ showDeleteConfirm }
58+
className="delete-post-dialog"
59+
overlayClassName="delete-post-dialog-overlay"
60+
onRequestClose={ this.cancelDelete }
61+
contentLabel=""
62+
>
63+
64+
<div className="modal-title">
65+
Are you sure you want to delete this post?
66+
</div>
67+
68+
<div className="modal-body">
69+
This action cannot be undone.
70+
</div>
71+
72+
<div className="button-area flex center action-area">
73+
<button className="tc-btn tc-btn-default tc-btn-sm action-btn btn-cancel" onClick={this.cancelDelete}>Cancel</button>
74+
<button className="tc-btn tc-btn-warning tc-btn-sm action-btn " onClick={this.onDelete}>Delete Post</button>
7475
</div>
75-
{
76-
(isOpen) &&
77-
<dir className="edit-dropdown">
78-
<ul className={cn({hide: showDeleteConfirm})}>
79-
<li><a href="javascript:" onClick={this.onEdit}>{this.props.forTopic ? 'Edit post' : 'Edit comment'}</a></li>
80-
{!this.props.hideDelete && <li><a href="javascript:" onClick={this.showDelete}>{this.props.forTopic ? 'Delete post' : 'Delete comment'}</a></li>}
81-
</ul>
82-
<div className={cn('delete-confirm', {hide: !showDeleteConfirm})}>
83-
<h4>Confirm to delete {this.props.forTopic ? 'post' : 'comment'}</h4>
84-
<div className="delete-confirm-btns">
85-
<button className="tc-btn tc-btn-primary tc-btn-xs" onClick={this.cancelDelete} type="button">Cancel</button>
86-
<button className="tc-btn tc-btn-primary tc-btn-xs" onClick={this.onDelete} type="button">Delete</button>
87-
</div>
88-
</div>
89-
</dir>
90-
}
91-
</div>
76+
</Modal>
77+
78+
</div>
79+
80+
9281
)
9382
}
9483
}

‎src/components/RichTextArea/RichTextArea.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ class RichTextArea extends React.Component {
193193
<div className="portrait">
194194
<Avatar avatarUrl={avatarUrl} userName={authorName} />
195195
</div>
196-
<div className={cn('object', {comment: disableTitle})}>
196+
<div className={cn('object', {comment: disableTitle}, 'commentEdit')}>
197197
<input
198198
ref="title" value={titleValue}
199199
className={cn('new-post-title', {'hide-title': disableTitle})}
@@ -237,17 +237,17 @@ class RichTextArea extends React.Component {
237237
</div>
238238
<div className="tc-btns">
239239
{ editMode && !isCreating &&
240-
<button className="tc-btn tc-btn-primary tc-btn-sm" onClick={this.cancelEdit}>
240+
<button className="tc-btn-link postActionButton" onClick={this.cancelEdit}>
241241
Cancel
242242
</button>
243243
}
244244
{ editMode &&
245-
<button className="tc-btn tc-btn-primary tc-btn-sm" onClick={this.onPost} disabled={!canSubmit }>
245+
<button className="tc-btn tc-btn-primary tc-btn-sm postActionButton" onClick={this.onPost} disabled={!canSubmit }>
246246
{ isCreating ? 'Saving...' : 'Save changes' }
247247
</button>
248248
}
249249
{ !editMode &&
250-
<button className="tc-btn tc-btn-primary tc-btn-sm" onClick={this.onPost} disabled={!canSubmit }>
250+
<button className="tc-btn tc-btn-primary tc-btn-sm postActionButton" onClick={this.onPost} disabled={!canSubmit }>
251251
{ isCreating ? 'Posting...' : 'Post' }
252252
</button>
253253
}

‎src/components/RichTextArea/RichTextArea.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,8 @@
2929

3030
.hide-title {
3131
display: none !important;
32+
}
33+
34+
.postActionButton{
35+
font-size:13px;
3236
}

0 commit comments

Comments
 (0)