Skip to content

Commit a35b831

Browse files
oldboyxxoldboyxx
committed
Polished CSS, refactored useApi Query hook
1 parent 64b237e commit a35b831

21 files changed

+127
-407
lines changed

‎client/cypress/integration/issueDetails.spec.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,10 @@ describe('Issue details', () => {
6969

7070
cy.get(testid`modal:tracking`).within(() => {
7171
cy.contains('No time logged').should('exist');
72-
getNumberInputAtIndex(0).debounced('type', 1);
7372

73+
getNumberInputAtIndex(0).debounced('type', 1);
7474
cy.get('div[width="10"]').should('exist'); // tracking bar
75+
7576
getNumberInputAtIndex(1).debounced('type', 2);
7677

7778
cy.contains('button', 'Done')
@@ -124,7 +125,6 @@ describe('Issue details', () => {
124125
it('edits a comment successfully', () => {
125126
getIssueDetailsModal().within(() => {
126127
cy.get(testid`issue-comment`)
127-
.first()
128128
.contains('Edit')
129129
.click()
130130
.should('not.exist');
@@ -139,7 +139,6 @@ describe('Issue details', () => {
139139
.should('not.exist');
140140

141141
cy.get(testid`issue-comment`)
142-
.first()
143142
.should('contain', 'Edit')
144143
.and('contain', 'TEST_COMMENT_EDITED');
145144
});
@@ -148,7 +147,6 @@ describe('Issue details', () => {
148147
it('deletes a comment successfully', () => {
149148
getIssueDetailsModal()
150149
.find(testid`issue-comment`)
151-
.first()
152150
.contains('Delete')
153151
.click();
154152

‎client/package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"axios": "^0.19.0",
4848
"color": "^3.1.2",
4949
"core-js": "^3.4.7",
50-
"formik": "^2.0.8",
50+
"formik": "^2.1.1",
5151
"history": "^4.10.1",
5252
"jwt-decode": "^2.2.0",
5353
"lodash": "^4.17.15",

‎client/src/Project/Board/Lists/List/Issue/Styles.js

+6
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export const Issue = styled.div`
1616
box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25);
1717
transition: background 0.1s;
1818
${mixin.clickable}
19+
@media (max-width: 1100px) {
20+
padding: 10px 8px;
21+
}
1922
&:hover {
2023
background: ${color.backgroundLight};
2124
}
@@ -30,6 +33,9 @@ export const Issue = styled.div`
3033
export const Title = styled.p`
3134
padding-bottom: 11px;
3235
${font.size(15)}
36+
@media (max-width: 1100px) {
37+
${font.size(14.5)}
38+
}
3339
`;
3440

3541
export const Bottom = styled.div`

‎client/src/Project/Board/Lists/List/Styles.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from 'styled-components';
22

3-
import { color, font } from 'shared/utils/styles';
3+
import { color, font, mixin } from 'shared/utils/styles';
44

55
export const List = styled.div`
66
display: flex;
@@ -17,6 +17,7 @@ export const Title = styled.div`
1717
text-transform: uppercase;
1818
color: ${color.textMedium};
1919
${font.size(12.5)};
20+
${mixin.truncateText}
2021
`;
2122

2223
export const IssuesCount = styled.span`

‎client/src/Project/Board/Lists/List/index.jsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import moment from 'moment';
44
import { Droppable } from 'react-beautiful-dnd';
55
import { intersection } from 'lodash';
66

7-
import useCurrentUser from 'shared/hooks/currentUser';
87
import { IssueStatusCopy } from 'shared/constants/issues';
98

109
import Issue from './Issue';
@@ -14,11 +13,14 @@ const propTypes = {
1413
status: PropTypes.string.isRequired,
1514
project: PropTypes.object.isRequired,
1615
filters: PropTypes.object.isRequired,
16+
currentUserId: PropTypes.number,
1717
};
1818

19-
const ProjectBoardList = ({ status, project, filters }) => {
20-
const { currentUserId } = useCurrentUser();
19+
const defaultProps = {
20+
currentUserId: null,
21+
};
2122

23+
const ProjectBoardList = ({ status, project, filters, currentUserId }) => {
2224
const filteredIssues = filterIssues(project.issues, filters, currentUserId);
2325
const filteredListIssues = getSortedListIssues(filteredIssues, status);
2426
const allListIssues = getSortedListIssues(project.issues, status);
@@ -77,5 +79,6 @@ const formatIssuesCount = (allListIssues, filteredListIssues) => {
7779
};
7880

7981
ProjectBoardList.propTypes = propTypes;
82+
ProjectBoardList.defaultProps = defaultProps;
8083

8184
export default ProjectBoardList;

‎client/src/Project/Board/Lists/index.jsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { DragDropContext } from 'react-beautiful-dnd';
44

5+
import useCurrentUser from 'shared/hooks/currentUser';
56
import api from 'shared/utils/api';
67
import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
78
import { IssueStatus } from 'shared/constants/issues';
@@ -16,6 +17,8 @@ const propTypes = {
1617
};
1718

1819
const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
20+
const { currentUserId } = useCurrentUser();
21+
1922
const handleIssueDrop = ({ draggableId, destination, source }) => {
2023
if (!isPositionChanged(source, destination)) return;
2124

@@ -35,7 +38,13 @@ const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
3538
<DragDropContext onDragEnd={handleIssueDrop}>
3639
<Lists>
3740
{Object.values(IssueStatus).map(status => (
38-
<List key={status} status={status} project={project} filters={filters} />
41+
<List
42+
key={status}
43+
status={status}
44+
project={project}
45+
filters={filters}
46+
currentUserId={currentUserId}
47+
/>
3948
))}
4049
</Lists>
4150
</DragDropContext>

‎client/src/Project/IssueSearch/Styles.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { color, font, mixin } from 'shared/utils/styles';
44
import { InputDebounced, Spinner, Icon } from 'shared/components';
55

66
export const IssueSearch = styled.div`
7-
padding: 25px 35px;
7+
padding: 25px 35px 60px;
88
`;
99

1010
export const SearchInputCont = styled.div`

‎client/src/Project/Sidebar/Styles.js

+20-13
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@ import styled from 'styled-components';
33
import { color, sizes, font, mixin, zIndexValues } from 'shared/utils/styles';
44

55
export const Sidebar = styled.div`
6-
position: absolute;
6+
position: fixed;
77
z-index: ${zIndexValues.navLeft - 1};
88
top: 0;
99
left: ${sizes.appNavBarLeftWidth}px;
1010
height: 100vh;
11-
width: 240px;
12-
padding: 0 16px;
11+
width: ${sizes.secondarySideBarWidth}px;
12+
padding: 0 16px 24px;
1313
background: ${color.backgroundLightest};
1414
border-right: 1px solid ${color.borderLightest};
15+
${mixin.scrollableY}
16+
${mixin.customScrollbar()}
17+
@media (max-width: 1100px) {
18+
width: ${sizes.secondarySideBarWidth - 10}px;
19+
}
1520
`;
1621

1722
export const ProjectInfo = styled.div`
@@ -67,18 +72,20 @@ export const LinkText = styled.div`
6772
`;
6873

6974
export const NotImplemented = styled.div`
70-
display: none;
75+
display: inline-block;
7176
position: absolute;
72-
top: 9px;
73-
left: 101%;
74-
width: 120px;
75-
padding: 3px 0 3px 8px;
77+
top: 7px;
78+
left: 40px;
79+
width: 140px;
80+
padding: 5px 0 5px 8px;
7681
border-radius: 3px;
77-
color: #fff;
78-
background: #000;
79-
${font.size(12.5)};
80-
${font.medium}
82+
text-transform: uppercase;
83+
color: ${color.textDark};
84+
background: ${color.backgroundMedium};
85+
opacity: 0;
86+
${font.size(11.5)};
87+
${font.bold}
8188
${LinkItem}:hover & {
82-
display: inline-block;
89+
opacity: 1;
8390
}
8491
`;

‎client/src/Project/Styles.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import styled from 'styled-components';
22

33
import { sizes } from 'shared/utils/styles';
44

5+
const paddingLeft = sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40;
6+
57
export const ProjectPage = styled.div`
6-
padding: 25px 32px 0 ${sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40}px;
8+
padding: 25px 32px 50px ${paddingLeft}px;
9+
10+
@media (max-width: 1100px) {
11+
padding: 25px 20px 50px ${paddingLeft - 20}px;
12+
}
713
`;

‎client/src/index.jsx

-7
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,3 @@ import ReactDOM from 'react-dom';
77
import App from 'App';
88

99
ReactDOM.render(<App />, document.getElementById('root'));
10-
11-
// QUERY component cache-only doesn't work until first req finishes, look at currentUser on page load
12-
// APP IS NOT RESPONSIVE - REDUCE BROWSER HEIGHT, ISSUES DONT SCROLL
13-
// TODO: UPDATE FORMIK TO FIX SETFIELDVALUE TO EMPTY ARRAY ISSUE https://github.com/jaredpalmer/formik/pull/2144
14-
// REFACTOR HTML TO USE SEMANTIC ELEMENTS
15-
// MOVE SOME UTILS LIKE API TO SERVICES FOLDER
16-
// RENAME ISSUE DETAILS "USERS" TO ASSIGNEESREPORTER

‎client/src/shared/components/Modal/index.jsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,14 @@ const Modal = ({
5858

5959
useOnOutsideClick($modalRef, isOpen, closeModal, $clickableOverlayRef);
6060
useOnEscapeKeyDown(isOpen, closeModal);
61-
useEffect(setBodyScrollLock, [isOpen]);
61+
62+
useEffect(() => {
63+
document.body.style.overflow = 'hidden';
64+
65+
return () => {
66+
document.body.style.overflow = 'visible';
67+
};
68+
}, [isOpen]);
6269

6370
return (
6471
<>
@@ -72,7 +79,6 @@ const Modal = ({
7279
className={className}
7380
variant={variant}
7481
width={width}
75-
data-jira-modal="true"
7682
data-testid={testid}
7783
ref={$modalRef}
7884
>
@@ -89,11 +95,6 @@ const Modal = ({
8995

9096
const $root = document.getElementById('root');
9197

92-
const setBodyScrollLock = () => {
93-
const areAnyModalsOpen = !!document.querySelector('[data-jira-modal]');
94-
document.body.style.overflow = areAnyModalsOpen ? 'hidden' : 'visible';
95-
};
96-
9798
Modal.propTypes = propTypes;
9899
Modal.defaultProps = defaultProps;
99100

‎client/src/shared/hooks/api/mutation.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,13 @@ const useMutation = (method, url) => {
2929
[method, url, mergeState],
3030
);
3131

32-
return [{ ...state, [isWorkingAlias[method]]: state.isWorking }, makeRequest];
32+
return [
33+
{
34+
...state,
35+
[isWorkingAlias[method]]: state.isWorking,
36+
},
37+
makeRequest,
38+
];
3339
};
3440

3541
const isWorkingAlias = {

0 commit comments

Comments
 (0)