Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 585327e

Browse files
Merge pull request cangzhang#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+
<ChildCommentkey={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)

AltStyle によって変換されたページ (->オリジナル) /