Skip to content

Commit 585327e

Browse files
uniquemouniquemo
authored
Merge pull request #8 from cangzhang/feat/ui
feat: optimize ui and logic
2 parents a202e85 + 70ad9a9 commit 585327e

File tree

14 files changed

+145
-28
lines changed

14 files changed

+145
-28
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
"npm-run-all": "^4.1.5",
140140
"prettier": "^2.2.1",
141141
"style-loader": "^2.0.0",
142+
"svg-inline-loader": "^0.8.2",
142143
"ts-loader": "^8.0.5",
143144
"typescript": "^4.0.3",
144145
"webpack": "4",

‎src/extension.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ export async function activate(context: vscode.ExtensionContext) {
4646
vscode.commands.registerCommand('codingPlugin.showMROverview', async (mr: IMRWebViewDetail) => {
4747
Panel.createOrShow(context, codingSrv);
4848
codingSrv.getMRDetail(mr.iid).then((detailResp) => {
49-
Panel.currentPanel?.broadcast(`UPDATE_CURRENT_MR`, {
49+
Panel.currentPanel?.broadcast(`mr.update`, {
5050
...mr,
5151
data: detailResp.data,
5252
user: context.workspaceState.get(`session`, {} as ISessionData)?.user,
5353
});
5454
});
5555
codingSrv.getMRActivities(mr.iid).then((activityResp) => {
56-
Panel.currentPanel?.broadcast(`UPDATE_MR_ACTIVITIES`, activityResp.data);
56+
Panel.currentPanel?.broadcast(`mr.update.activities`, activityResp.data);
5757
});
5858
codingSrv.getMRReviewers(mr.iid).then((reviewerResp) => {
5959
Panel.currentPanel?.broadcast(`mr.update.reviewers`, reviewerResp.data);

‎src/panel.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,12 @@ export class Panel {
115115
this.replyMessage(message);
116116
break;
117117
case 'mr.add.comment':
118-
const result = await this._codingSrv.commentMR(args.id, args.comment);
119-
this.replyMessage(message, result.data);
118+
const commentRes = await this._codingSrv.commentMR(args.id, args.comment);
119+
this.replyMessage(message, commentRes.data);
120+
break;
121+
case 'mr.get.activities':
122+
const getActivitiesRes = await this._codingSrv.getMRActivities(args);
123+
this.replyMessage(message, getActivitiesRes.data);
120124
break;
121125
}
122126
} catch (err) {

‎webpack.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ module.exports = {
3434
},
3535
],
3636
},
37+
{
38+
test: /\.svg$/,
39+
loader: 'svg-inline-loader',
40+
},
3741
],
3842
},
3943
performance: {

‎webviews/App.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ const TitleWrapper = styled.div`
2424
const Row = styled.div`
2525
display: flex;
2626
align-items: center;
27-
margin: 16px 0;
27+
margin: 16px 0 0;
28+
padding-bottom: 15px;
29+
border-bottom: 1px solid var(--vscode-list-inactiveSelectionBackground);
2830
`;
2931
const Desc = styled.article`
3032
border: 1px solid gray;
@@ -40,6 +42,15 @@ const Sidebar = styled.div`
4042
width: 200px;
4143
margin-left: 20px;
4244
`;
45+
const EditBtn = styled.span`
46+
width: 16px;
47+
height: 16px;
48+
margin-left: 10px;
49+
cursor: pointer;
50+
`;
51+
const Empty = styled.div`
52+
text-align: center;
53+
`;
4354

4455
function App() {
4556
const { currentMR, updateMRTitle } = appStore;
@@ -56,9 +67,10 @@ function App() {
5667
const { repoInfo, data } = currentMR;
5768
const { merge_request: mergeRequest } = data;
5869

59-
const handleKeyDown = (event: any) => {
70+
const handleKeyDown = async (event: any) => {
6071
if (event.key === 'Enter') {
61-
updateMRTitle(title);
72+
await updateMRTitle(title);
73+
setEditing(false);
6274
}
6375
};
6476

@@ -97,9 +109,11 @@ function App() {
97109
#{currentMR.iid}
98110
</a>
99111
)
100-
<span className='edit' onClick={handleEdit}>
101-
编辑
102-
</span>
112+
<EditBtn
113+
className='edit'
114+
onClick={handleEdit}
115+
dangerouslySetInnerHTML={{ __html: require('./assets/edit.svg') }}
116+
/>
103117
</>
104118
)}
105119
</TitleWrapper>
@@ -109,10 +123,15 @@ function App() {
109123
</Row>
110124
<BodyWrap>
111125
<Body>
112-
<h3>Description:</h3>
126+
<h3>Description</h3>
113127
<Desc>
114-
<div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
128+
{mergeRequest?.body ? (
129+
<div dangerouslySetInnerHTML={{ __html: mergeRequest?.body }} />
130+
) : (
131+
<Empty>Empty</Empty>
132+
)}
115133
</Desc>
134+
<h3>Activities</h3>
116135
<Activities />
117136
</Body>
118137
<Sidebar>

‎webviews/assets/check.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎webviews/assets/edit.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎webviews/components/Activities.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,9 @@ function Activities() {
3030
);
3131
};
3232

33-
const allActivities = [...activities.map((i) => [i]), ...comments];
34-
allActivities.sort((a, b) => {
35-
return a[0].created_at - b[0].create_at;
36-
});
33+
const allActivities = [...activities.map((i) => [i]), ...comments].sort(
34+
(a, b) => a[0].created_at - b[0].created_at,
35+
);
3736

3837
return (
3938
<div>

‎webviews/components/Comment.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const Header = styled.div`
1515
align-items: center;
1616
border: 1px solid var(--vscode-list-inactiveSelectionBackground);
1717
background: var(--vscode-list-inactiveSelectionBackground);
18+
padding: 5px 10px;
1819
`;
1920
const AuthorLinkWrap = styled.div`
2021
margin-left: 5px;
@@ -25,7 +26,7 @@ const Body = styled.div`
2526
border-top: none;
2627
`;
2728
const Time = styled.div`
28-
margin-left: 20px;
29+
margin-left: 15px;
2930
`;
3031

3132
const ChildComment = styled.div`
@@ -41,7 +42,7 @@ function Comment({ comment }: IProps) {
4142
const renderChildComments = () => {
4243
return comment.childComments?.map((c) => {
4344
return (
44-
<ChildComment>
45+
<ChildComment key={c.id}>
4546
<AuthorLink for={c.author} />
4647
<ChildCommentContent>
4748
<div dangerouslySetInnerHTML={{ __html: c.content }} />

‎webviews/components/Reviewers.tsx‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,57 @@
11
import React from 'react';
2+
import styled from 'styled-components';
3+
import { view } from '@risingstack/react-easy-state';
4+
import appStore from 'webviews/store/appStore';
5+
import { Avatar, AuthorLink } from 'webviews/components/User';
6+
7+
const Title = styled.div`
8+
margin-top: 15px;
9+
font-size: 16px;
10+
font-weight: 600;
11+
`;
12+
const FlexCenter = styled.div`
13+
display: flex;
14+
align-items: center;
15+
`;
16+
const Item = styled(FlexCenter)`
17+
padding: 5px 0;
18+
justify-content: space-between;
19+
a:first-child {
20+
margin-right: 5px;
21+
}
22+
`;
23+
const Icon = styled.div`
24+
width: 16px;
25+
height: 16px;
26+
position: relative;
27+
top: 4px;
28+
`;
229

330
function Reviewers() {
4-
return <div>reviewers</div>;
31+
const { reviewers } = appStore;
32+
const { reviewers: rReviewers = [], volunteer_reviewers: volunteerReviewers = [] } = reviewers;
33+
const allReviewers = [...rReviewers, ...volunteerReviewers];
34+
35+
return (
36+
<div>
37+
<Title>Reviewers</Title>
38+
{allReviewers.map((r) => {
39+
return (
40+
<Item>
41+
<FlexCenter>
42+
<Avatar for={r.reviewer} />
43+
<AuthorLink for={r.reviewer} />
44+
</FlexCenter>
45+
{r.value === 100 && (
46+
<Icon>
47+
<span dangerouslySetInnerHTML={{ __html: require('../assets/check.svg') }} />
48+
</Icon>
49+
)}
50+
</Item>
51+
);
52+
})}
53+
</div>
54+
);
555
}
656

7-
export default Reviewers;
57+
export default view(Reviewers);

0 commit comments

Comments
 (0)