Skip to content

Commit 1517539

Browse files
Venkataramanan VenkateswaranVenkataramanan Venkateswaran
Venkataramanan Venkateswaran
authored and
Venkataramanan Venkateswaran
committed
Venkataramanan fix: edit, suggest, delete button alignments in single task
1 parent d8f37c1 commit 1517539

4 files changed

Lines changed: 107 additions & 71 deletions

File tree

‎src/components/Projects/WBS/SingleTask/SingleTask.jsx‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { connect, useSelector } from 'react-redux';
55
import ReactTooltip from 'react-tooltip';
66
import axios from 'axios';
77
import { NavItem, Button, Modal, ModalBody } from 'reactstrap';
8+
import styles from './SingleTask.module.css';
89

910
import { Editor } from '@tinymce/tinymce-react';
1011
import { Link, useHistory } from 'react-router-dom';
@@ -150,45 +151,46 @@ function SingleTask(props) {
150151
</thead>
151152
<tbody className={darkMode ? 'bg-yinmn-blue' : ''}>
152153
<tr style={{ textAlign: 'center', verticalAlign: 'middle' }}>
153-
<th scope="row">
154-
<div className="d-flex flex-column align-items-center">
155-
<EditTaskModal
156-
key={`editTask_${task._id}`}
157-
parentNum={task.num}
158-
taskId={task._id}
159-
wbsId={task.wbsId}
160-
parentId1={task.parentId1}
161-
parentId2={task.parentId2}
162-
parentId3={task.parentId3}
163-
mother={task.mother}
164-
level={task.level}
165-
setTask={setTask}
166-
/>
167-
{canDeleteTask && (
168-
<>
169-
<Button
170-
type="button"
171-
size="sm"
172-
className="btn btn-danger mt-1 ml-2"
173-
onClick={() => showUpDeleteModal()}
174-
>
175-
Delete
176-
</Button>
177-
<ModalDelete
178-
isOpen={modalDelete}
179-
closeModal={() => setModalDelete(false)}
180-
confirmModal={() => deleteTask(task._id, task.mother)}
181-
modalMessage={
182-
props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
183-
}
184-
modalTitle={Message.CONFIRM_DELETION}
185-
darkMode={darkMode}
186-
/>
187-
</>
188-
)}
189-
</div>
190-
</th>
154+
<th scope="row">
155+
<div className={styles.actionButtonsContainer}>
156+
<EditTaskModal
157+
key={`editTask_${task._id}`}
158+
parentNum={task.num}
159+
taskId={task._id}
160+
wbsId={task.wbsId}
161+
parentId1={task.parentId1}
162+
parentId2={task.parentId2}
163+
parentId3={task.parentId3}
164+
mother={task.mother}
165+
level={task.level}
166+
setTask={setTask}
167+
/>
168+
169+
{canDeleteTask && (
170+
<>
171+
<Button
172+
type="button"
173+
size="sm"
174+
className={`btn btn-danger ${styles.actionButton}`}
175+
onClick={() => showUpDeleteModal()}
176+
>
177+
Delete
178+
</Button>
191179

180+
<ModalDelete
181+
isOpen={modalDelete}
182+
closeModal={() => setModalDelete(false)}
183+
confirmModal={() => deleteTask(task._id, task.mother)}
184+
modalMessage={
185+
props.popupEditor.currPopup.popupContent || 'DELETE THIS TASK ?'
186+
}
187+
modalTitle={Message.CONFIRM_DELETION}
188+
darkMode={darkMode}
189+
/>
190+
</>
191+
)}
192+
</div>
193+
</th>
192194
<td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
193195
{task.num}
194196
</td>

‎src/components/Projects/WBS/SingleTask/SingleTask.module.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.actionButtonsContainer {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
gap: 8px;
6+
}
7+
8+
.actionButton {
9+
width: 90px;
10+
margin: 0 !important;
11+
display: inline-flex;
12+
align-items: center;
13+
justify-content: center;
14+
}

‎src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,39 +1085,43 @@ function EditTaskModal(props) {
10851085
) : null}
10861086
</Modal>
10871087
<div className="task-action-buttons d-flex" />
1088-
{canUpdateTask && (
1089-
<Button
1090-
className="mx-2 controlBtn"
1091-
color="primary"
1092-
size="sm"
1093-
onClick={e => handleModalShow('Edit')}
1094-
style={darkMode ? boxStyleDark : boxStyle}
1095-
>
1096-
Edit
1097-
</Button>
1098-
)}
1099-
{canSuggestTask && (
1100-
<Button
1101-
className="mr-2 controlBtn"
1102-
color="primary"
1103-
size="sm"
1104-
onClick={e => handleModalShow('Suggest')}
1105-
style={darkMode ? boxStyleDark : boxStyle}
1106-
>
1107-
Suggest
1108-
</Button>
1109-
)}
1110-
{!canUpdateTask && !canSuggestTask && (
1111-
<Button
1112-
className="mr-2 controlBtn"
1113-
color="primary"
1114-
size="sm"
1115-
onClick={e => handleModalShow('View')}
1116-
style={darkMode ? boxStyleDark : boxStyle}
1117-
>
1118-
View
1119-
</Button>
1120-
)}
1088+
<div className={styles.taskTopActionButtons}>
1089+
{canUpdateTask && (
1090+
<Button
1091+
className={styles.taskActionButton}
1092+
color="primary"
1093+
size="sm"
1094+
onClick={() => handleModalShow('Edit')}
1095+
style={darkMode ? boxStyleDark : boxStyle}
1096+
>
1097+
Edit
1098+
</Button>
1099+
)}
1100+
1101+
{canSuggestTask && (
1102+
<Button
1103+
className={styles.taskActionButton}
1104+
color="primary"
1105+
size="sm"
1106+
onClick={() => handleModalShow('Suggest')}
1107+
style={darkMode ? boxStyleDark : boxStyle}
1108+
>
1109+
Suggest
1110+
</Button>
1111+
)}
1112+
1113+
{!canUpdateTask && !canSuggestTask && (
1114+
<Button
1115+
className={styles.taskActionButton}
1116+
color="primary"
1117+
size="sm"
1118+
onClick={() => handleModalShow('View')}
1119+
style={darkMode ? boxStyleDark : boxStyle}
1120+
>
1121+
View
1122+
</Button>
1123+
)}
1124+
</div>
11211125
</div>
11221126
);
11231127
}

‎src/components/Projects/WBS/WBSDetail/wbs.module.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,4 +347,20 @@
347347
.button-group button {
348348
margin-bottom: 10px;
349349
}
350+
}
351+
352+
.taskTopActionButtons {
353+
display: flex;
354+
justify-content: center;
355+
align-items: center;
356+
gap: 8px;
357+
flex-wrap: nowrap;
358+
}
359+
360+
.taskActionButton {
361+
width: 90px;
362+
margin: 0 !important;
363+
display: inline-flex;
364+
align-items: center;
365+
justify-content: center;
350366
}

0 commit comments

Comments
 (0)