Skip to content

Commit 900b716

Browse files
glenwidglenwid
committed
styling overhaul
1 parent fe7735b commit 900b716

13 files changed

+304
-235
lines changed

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"dependencies": {
2020
"antd": "^4.15.0",
2121
"less": "^4.1.1",
22+
"moment": "^2.29.1",
2223
"prism-react-renderer": "^1.2.0",
2324
"styled-components": "^5.2.1"
2425
},
@@ -77,6 +78,7 @@
7778
"@typescript-eslint/parser": "^4.22.0",
7879
"antd": "^4.15.0",
7980
"babel-eslint": "^10.1.0",
81+
"babel-loader": "^8.2.2",
8082
"eslint": "^7.25.0",
8183
"eslint-config-prettier": "^8.3.0",
8284
"eslint-config-react-app": "^6.0.0",
@@ -94,7 +96,6 @@
9496
"rollup-plugin-postcss": "^4.0.0",
9597
"rollup-plugin-typescript2": "^0.30.0",
9698
"typescript": "^4.1.2",
97-
"webpack": "^4.46.0",
98-
"babel-loader": "^8.2.2"
99+
"webpack": "^4.46.0"
99100
}
100101
}

‎src/components/BorderWrapper.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
3+
interface BorderWrapperProps {
4+
heightTop: number
5+
heightBottom: number
6+
}
7+
8+
const BorderWrapper: React.FC<BorderWrapperProps> = ({
9+
heightTop,
10+
heightBottom,
11+
children
12+
}) => {
13+
return (
14+
<div>
15+
<div
16+
className="extraBorderBottom"
17+
style={{
18+
borderLeft: '1px solid #d9d9d9',
19+
height: heightTop + 'em'
20+
}}
21+
>
22+
{'\u200C'}
23+
</div>
24+
{children}
25+
<div
26+
className="extraBorderBottom"
27+
style={{
28+
borderLeft: '1px solid #d9d9d9',
29+
height: heightBottom + 'em'
30+
}}
31+
>
32+
{'\u200C'}
33+
</div>
34+
</div>
35+
)
36+
}
37+
38+
export default BorderWrapper

‎src/components/CodeLine.tsx

Lines changed: 38 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Line, LineContent, LineNo } from './styles'
33
import { Button } from 'antd'
44
import {
55
PlusOutlined,
6-
ExclamationCircleTwoTone,
76
InfoCircleTwoTone,
87
MessageTwoTone
98
} from '@ant-design/icons'
@@ -19,6 +18,7 @@ import {
1918
import CommentViewer from './CommentViewer'
2019
import { CustomComment } from '../types/types'
2120
import ReplyEditor from './ReplyEditor'
21+
import BorderWrapper from './BorderWrapper'
2222

2323
export interface CodeLineProps {
2424
line: Token[]
@@ -64,9 +64,6 @@ export const CodeLine: React.FC<CodeLineProps> = ({
6464
const [mildInfo, setMildInfo] = useState<boolean>(
6565
comments.map(element => element.type).includes('mildInfo')
6666
)
67-
const [severeInfo, setSevereInfo] = useState<boolean>(
68-
comments.map(element => element.type).includes('severeInfo')
69-
)
7067

7168
// check what kind of comments are present to manage annotations
7269
useEffect(() => {
@@ -81,37 +78,21 @@ export const CodeLine: React.FC<CodeLineProps> = ({
8178
} else {
8279
setMildInfo(false)
8380
}
84-
85-
if (comments.map(element => element.type).includes('severeInfo')) {
86-
setSevereInfo(true)
87-
} else {
88-
setSevereInfo(false)
89-
}
9081
}, [comments])
9182

9283
// returns the right padding value depending on the number of annotations present
9384
const getPaddingLeft = () => {
9485
if (!showComments) {
95-
return 4.3
96-
}
97-
if (
98-
(commentThread && !(mildInfo || severeInfo)) ||
99-
(mildInfo && !(commentThread || severeInfo)) ||
100-
(severeInfo && !(commentThread || mildInfo))
101-
) {
102-
return 2.95
86+
return 3
10387
}
104-
if (
105-
(commentThread && mildInfo && !severeInfo) ||
106-
(mildInfo && severeInfo && !commentThread) ||
107-
(commentThread && severeInfo && !mildInfo)
108-
) {
88+
if ((commentThread && !mildInfo) || (mildInfo && !commentThread)) {
10989
return 1.65
11090
}
111-
if (commentThread && mildInfo && severeInfo) {
91+
if (commentThread && mildInfo) {
11292
return 0.35
11393
}
114-
return 4.3
94+
95+
return 3
11596
}
11697

11798
// show addButton and adjust padding accordingly
@@ -149,7 +130,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({
149130
return 'Question'
150131
}
151132
}
152-
if (!mildInfo && !commentThread && !severeInfo) {
133+
if (!mildInfo && !commentThread) {
153134
if (role === 'teacher') {
154135
return 'Comment'
155136
} else {
@@ -168,7 +149,11 @@ export const CodeLine: React.FC<CodeLineProps> = ({
168149
onMouseLeave={() => handleMouseLeave()}
169150
data-testid={'line' + lineNo}
170151
>
171-
<div className="lineLeft">
152+
<div
153+
style={{
154+
display: 'table-row'
155+
}}
156+
>
172157
{isShown && showComments && (
173158
<>
174159
<Button
@@ -181,14 +166,6 @@ export const CodeLine: React.FC<CodeLineProps> = ({
181166
</>
182167
)}
183168

184-
{severeInfo && showComments && (
185-
<ExclamationCircleTwoTone
186-
style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
187-
onClick={() => onToggle()}
188-
twoToneColor="#F00E3B"
189-
/>
190-
)}
191-
192169
{mildInfo && showComments && (
193170
<InfoCircleTwoTone
194171
style={{ paddingLeft: '0.15em', paddingRight: '0.15em' }}
@@ -243,34 +220,35 @@ export const CodeLine: React.FC<CodeLineProps> = ({
243220
{isEditorShown && showComments && (
244221
<div
245222
style={{
246-
paddingLeft: '6em'
223+
paddingLeft: '4.65em'
247224
}}
248225
>
249-
<div
250-
style={{
251-
display: 'flex',
252-
flexDirection: 'column',
253-
paddingTop: '0.5em',
254-
paddingBottom: '1em',
255-
border: '1px solid #d9d9d9',
256-
paddingLeft: '1.1em',
257-
paddingRight: '1.1em',
258-
marginLeft: 0,
259-
marginBottom: '0.5em',
260-
marginTop: '0.5em'
261-
}}
262-
>
263-
<ReplyEditor
264-
onCancel={() => setIsEditorShown(false)}
265-
line={lineNo}
266-
onSubmit={value => {
267-
onSubmit(value)
268-
setIsEditorShown(false)
226+
<BorderWrapper heightTop={0.5} heightBottom={2}>
227+
<div
228+
style={{
229+
display: 'flex',
230+
flexDirection: 'column',
231+
paddingTop: '0.5em',
232+
paddingBottom: '0.5em',
233+
border: '1px solid #d9d9d9',
234+
borderRadius: '0 2px 15px 0',
235+
paddingLeft: '1.1em',
236+
paddingRight: '0.5em',
237+
marginLeft: 0
269238
}}
270-
placeholder={getPlaceholder()}
271-
focus
272-
/>
273-
</div>
239+
>
240+
<ReplyEditor
241+
onCancel={() => setIsEditorShown(false)}
242+
line={lineNo}
243+
onSubmit={value => {
244+
onSubmit(value)
245+
setIsEditorShown(false)
246+
}}
247+
placeholder={getPlaceholder()}
248+
focus
249+
/>
250+
</div>
251+
</BorderWrapper>
274252
</div>
275253
)}
276254
</>

‎src/components/CodeReview.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
.lineLeft {
2-
display: table-row;
3-
}
4-
1+
.codeReview {
2+
padding-bottom: 1em;
3+
}

‎src/components/CodeReview.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { onlyUnique } from '../utils/UtilityFunctions'
1818
import { State, Action } from '../types/types'
1919
import { SettingOutlined } from '@ant-design/icons'
2020
import { Menu } from 'antd'
21+
import moment from 'moment'
2122

2223
export interface CodeReviewProps {
2324
code: string
@@ -166,14 +167,16 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
166167
line: line,
167168
content: content,
168169
author: author,
169-
type: 'comment'
170+
type: 'comment',
171+
timeAdded: moment().format('DD-MM-YY HH:mm')
170172
}
171173
} else {
172174
// result comment
173175
newComment = {
174176
content: content,
175177
author: author,
176-
type: 'comment'
178+
type: 'comment',
179+
timeAdded: moment().format('DD-MM-YY HH:mm')
177180
}
178181
}
179182
return newComment
@@ -257,12 +260,13 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
257260
)
258261

259262
return (
260-
<div>
263+
<div className="codeReview">
261264
<div
262265
style={{
263266
display: 'flex',
264267
flexDirection: 'row-reverse',
265-
paddingTop: '0.5em'
268+
borderLeft: '1px solid #d9d9d9',
269+
marginLeft: '4.65em'
266270
}}
267271
>
268272
<Dropdown
@@ -318,13 +322,7 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
318322
</Highlight>
319323

320324
{showResult && showComments && (
321-
<div
322-
style={{
323-
paddingLeft: '0.5em',
324-
paddingRight: '0.5em',
325-
paddingTop: '1em'
326-
}}
327-
>
325+
<div>
328326
<CommentViewer
329327
comments={getResults()}
330328
result

‎src/components/CodeReviewCard.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.ant-card-small > .ant-card-body {
2+
padding: 0 1em 0 0.5em
3+
}

‎src/components/CodeReviewCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { Card } from 'antd'
33
import 'antd/dist/antd.css'
4-
import './CodeReview.css'
4+
import './CodeReviewCard.css'
55
import CodeReview, { CodeReviewProps } from './CodeReview'
66

77
const cardBodyStyle = {

‎src/components/CommentViewer.css

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,43 +9,59 @@
99

1010
.infoComments {
1111
padding: 0.5em 0.5em 0.5em 1em;
12-
border-top: 1px solid #ebebeb;
12+
border-top: 1px solid #d9d9d9;
1313
}
1414

15-
pre {
15+
pre {
1616
margin-bottom: 0;
1717
}
1818

1919
.ant-collapse {
20-
border: 1px solid #f0f0f0;
20+
border: 1px solid #d9d9d9;
21+
border-radius: 0 2px 15px 0;
22+
}
23+
24+
.extraBorderBottom {
25+
border-left: 1px solid #d9d9d9;
26+
height: 2em
27+
}
28+
29+
.extraBorderTop {
30+
border-left: 1px solid #d9d9d9;
31+
height: 0.5em
2132
}
2233

2334
.ant-collapse-content > .ant-collapse-content-box {
2435
padding: 0;
25-
}
2636

27-
.ant-input {
28-
background-color: #fdfdfd;
2937
}
3038

3139
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
3240
padding-top: 0.5em;
3341
padding-bottom: 0.5em;
34-
background-color: white;
3542
}
3643

3744
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
3845
padding-top: 0.5em;
3946
padding-bottom: 0.5em;
4047
}
48+
49+
.ant-collapse-item:last-child > .ant-collapse-content {
50+
border-radius: 0 0 15px 0;
51+
}
52+
53+
.ant-collapse > .ant-collapse-item {
54+
border-bottom: 0;
55+
}
56+
4157
.ant-comment-inner {
4258
padding-top: 0;
4359
padding-bottom: 0.5em;
4460
}
4561

4662
.commentViewer {
47-
padding-bottom: 0.5em;
48-
padding-top: 0.1em;
63+
padding-top: 0;
64+
padding-left: 4.65em;
4965
}
5066

5167
.ant-comment-content-author {

0 commit comments

Comments
 (0)