Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 048b981

Browse files
sarikeQIQI03
sarike
authored and
QIQI03
committed
feat: feat: home left nav folder name support rename
1 parent ad605ff commit 048b981

File tree

7 files changed

+169
-118
lines changed

7 files changed

+169
-118
lines changed

‎client/packages/openblocks/src/components/TypographyText.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Typography } from "antd";
2+
import React from "react";
3+
import styled from "styled-components";
4+
5+
const AntdTypographyText = styled(Typography.Text)`
6+
font-size: 14px;
7+
color: #333333;
8+
line-height: 14px;
9+
overflow: hidden;
10+
text-overflow: ellipsis;
11+
display: block;
12+
13+
:is(.ant-typography-edit-content) {
14+
color: red;
15+
padding: unset;
16+
margin: unset !important;
17+
left: unset;
18+
}
19+
20+
.ant-input,
21+
.ant-input:focus,
22+
.ant-input-focused {
23+
height: 24px !important;
24+
min-height: 24px;
25+
background: #ffffff;
26+
border: 1px solid #3377ff;
27+
border-radius: 4px;
28+
padding: 4px 8px;
29+
margin: -5px 0 3px -9px;
30+
white-space: nowrap;
31+
32+
font-size: 14px;
33+
color: #333333;
34+
line-height: 14px;
35+
36+
::-webkit-scrollbar {
37+
display: none;
38+
}
39+
}
40+
`;
41+
42+
export const TypographyText = (props: {
43+
value: string;
44+
editing: boolean;
45+
onChange: (value: string) => void;
46+
}) => (
47+
<AntdTypographyText
48+
title={props.value}
49+
ellipsis={true}
50+
editable={{
51+
enterIcon: null,
52+
tooltip: false,
53+
editing: props.editing,
54+
icon: null,
55+
triggerType: ["text"],
56+
onChange: props.onChange,
57+
}}
58+
>
59+
{props.value}
60+
</AntdTypographyText>
61+
);

‎client/packages/openblocks/src/components/layout/Layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const SideBarV2 = styled(SideBar)`
2222
.sidebar-section:not(:last-child)::after {
2323
content: "";
2424
display: block;
25-
width: 192px;
25+
width: 204px;
2626
height: 1px;
2727
background-color: #ebebeb;
2828
margin: 0 auto 4px;

‎client/packages/openblocks/src/components/layout/SideBarItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Wrapper = styled.div<{ size?: SideBarSize; selected?: boolean }>`
1212
border-radius: 4px;
1313
display: flex;
1414
align-items: center;
15-
padding: 0 26px;
15+
padding: 0 8px 0 26px;
1616
cursor: pointer;
1717
1818
:hover {

‎client/packages/openblocks/src/pages/ApplicationV2/HomeResCard.tsx

Lines changed: 20 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { message, Typography } from "antd";
1+
import { message } from "antd";
22
import { TacoButton } from "openblocks-design";
33
import React, { useState } from "react";
44
import { useDispatch } from "react-redux";
@@ -19,6 +19,7 @@ import { trans } from "../../i18n";
1919
import { checkIsMobile } from "util/commonUtils";
2020
import history from "util/history";
2121
import { APPLICATION_VIEW_URL } from "constants/routesURL";
22+
import { TypographyText } from "../../components/TypographyText";
2223

2324
const EditButton = styled(TacoButton)`
2425
width: 52px;
@@ -46,6 +47,7 @@ const ExecButton = styled(TacoButton)`
4647
border: 1px solid #c2d6ff;
4748
color: #315efb;
4849
}
50+
4951
@media screen and (max-width: 500px) {
5052
margin-right: 0;
5153
display: none;
@@ -81,10 +83,12 @@ const Card = styled.div`
8183
opacity: 1;
8284
}
8385
}
86+
8487
@media screen and (max-width: 500px) {
8588
button {
8689
opacity: 1;
8790
}
91+
8892
padding: 0;
8993
}
9094
`;
@@ -107,45 +111,8 @@ const CardInfo = styled.div`
107111
}
108112
}
109113
110-
span.ant-typography {
111-
overflow: hidden;
112-
text-overflow: ellipsis;
113-
display: block;
114-
}
115-
116114
.ant-typography {
117115
padding: 0 0 8px 0;
118-
119-
font-size: 14px;
120-
color: #333333;
121-
line-height: 14px;
122-
}
123-
124-
.ant-typography-edit-content {
125-
padding: unset;
126-
margin: unset;
127-
left: unset;
128-
}
129-
130-
.ant-input,
131-
.ant-input:focus,
132-
.ant-input-focused {
133-
height: 24px !important;
134-
min-height: 24px;
135-
background: #ffffff;
136-
border: 1px solid #3377ff;
137-
border-radius: 4px;
138-
padding: 4px 8px;
139-
margin: -5px 0 3px -9px;
140-
white-space: nowrap;
141-
142-
font-size: 14px;
143-
color: #333333;
144-
line-height: 14px;
145-
146-
::-webkit-scrollbar {
147-
display: none;
148-
}
149116
}
150117
`;
151118

@@ -210,30 +177,22 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
210177
}
211178
}}
212179
>
213-
<Typography.Text
214-
title={res.name}
215-
editable={{
216-
enterIcon: null,
217-
tooltip: false,
218-
editing: appNameEditing,
219-
icon: null,
220-
triggerType: ["text"],
221-
onChange: (value) => {
222-
if (!value.trim()) {
223-
message.warn(trans("home.nameCheckMessage"));
224-
return;
225-
}
226-
if (res.type === HomeResTypeEnum.Folder) {
227-
dispatch(updateFolder({ id: res.id, name: value }));
228-
} else {
229-
dispatch(updateAppMetaAction(res.id, value));
230-
}
231-
setAppNameEditing(false);
232-
},
180+
<TypographyText
181+
value={res.name}
182+
editing={appNameEditing}
183+
onChange={(value) => {
184+
if (!value.trim()) {
185+
message.warn(trans("home.nameCheckMessage"));
186+
return;
187+
}
188+
if (res.type === HomeResTypeEnum.Folder) {
189+
dispatch(updateFolder({ id: res.id, name: value }));
190+
} else {
191+
dispatch(updateAppMetaAction(res.id, value));
192+
}
193+
setAppNameEditing(false);
233194
}}
234-
>
235-
{res.name}
236-
</Typography.Text>
195+
/>
237196
<AppTimeOwnerInfoLabel title={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
238197
</CardInfo>
239198
<OperationWrapper>

‎client/packages/openblocks/src/pages/ApplicationV2/index.tsx

Lines changed: 86 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { getUser, isFetchingUser } from "redux/selectors/usersSelectors";
1313
import { useDispatch, useSelector } from "react-redux";
1414
import {
15+
EditPopover,
1516
EllipsisTextCss,
1617
FolderIcon,
1718
HomeActiveIcon,
@@ -46,12 +47,14 @@ import { TrashView } from "./TrashView";
4647
import { SideBarItemType } from "../../components/layout/SideBarSection";
4748
import { RootFolderListView } from "./RootFolderListView";
4849
import InviteDialog from "../common/inviteDialog";
49-
import { fetchFolderElements } from "../../redux/reduxActions/folderActions";
50+
import { fetchFolderElements, updateFolder } from "../../redux/reduxActions/folderActions";
5051
import { ModuleView } from "./ModuleView";
5152
import { useCreateFolder } from "./useCreateFolder";
5253
import { trans } from "../../i18n";
5354
import { foldersSelector } from "../../redux/selectors/folderSelector";
5455
import Setting from "pages/setting";
56+
import { message } from "antd";
57+
import { TypographyText } from "../../components/TypographyText";
5558

5659
const TabLabel = styled.div`
5760
font-weight: 500;
@@ -63,7 +66,7 @@ const FolderSectionLabel = styled.div`
6366
font-weight: 500;
6467
font-size: 14px;
6568
line-height: 14px;
66-
padding: 0 12px 0 26px;
69+
padding: 0 8px 0 26px;
6770
height: 30px;
6871
`;
6972

@@ -74,19 +77,72 @@ const FolderCountLabel = styled.span`
7477
color: #b8b9bf;
7578
`;
7679

77-
const FolderLabel = styled.div<{ selected: boolean }>`
78-
max-width: 140px;
80+
const FolderNameWrapper = styled.div<{ selected: boolean }>`
81+
display: flex;
82+
align-items: center;
83+
justify-content: space-between;
84+
flex-grow: 1;
7985
${EllipsisTextCss};
86+
height: 100%;
87+
8088
${(props) => {
8189
if (props.selected) {
8290
return css`
8391
font-weight: 500;
92+
93+
svg {
94+
display: inline-block;
95+
}
8496
`;
8597
}
8698
}}
99+
.ant-typography {
100+
max-width: 138px;
101+
}
102+
103+
:hover {
104+
svg {
105+
display: inline-block;
106+
}
107+
}
87108
`;
88109

89-
const PopoverIcon = styled(PointIcon)<{ selected: boolean }>`
110+
const FolderName = (props: { id: string; name: string }) => {
111+
const dispatch = useDispatch();
112+
const [folderNameEditing, setFolderNameEditing] = useState(false);
113+
114+
return (
115+
<>
116+
<TypographyText
117+
value={props.name}
118+
editing={folderNameEditing}
119+
onChange={(value) => {
120+
if (!value.trim()) {
121+
message.warn(trans("home.nameCheckMessage"));
122+
return;
123+
}
124+
dispatch(updateFolder({ id: props.id, name: value }));
125+
setFolderNameEditing(false);
126+
}}
127+
/>
128+
<EditPopover items={[{ text: trans("rename"), onClick: () => setFolderNameEditing(true) }]}>
129+
<PopoverIcon tabIndex={-1} />
130+
</EditPopover>
131+
</>
132+
);
133+
};
134+
135+
const MoreFoldersWrapper = styled.div<{ selected: boolean }>`
136+
${(props) => {
137+
if (props.selected) {
138+
return css`
139+
font-weight: 500;
140+
`;
141+
}
142+
}}
143+
`;
144+
145+
const MoreFoldersIcon = styled(PointIcon)<{ selected: boolean }>`
90146
cursor: pointer;
91147
flex-shrink: 0;
92148
@@ -95,6 +151,26 @@ const PopoverIcon = styled(PointIcon)<{ selected: boolean }>`
95151
}
96152
`;
97153

154+
const PopoverIcon = styled(PointIcon)`
155+
cursor: pointer;
156+
flex-shrink: 0;
157+
display: none;
158+
159+
g {
160+
fill: #8b8fa3;
161+
}
162+
163+
:hover {
164+
background-color: #e1e3eb;
165+
border-radius: 4px;
166+
cursor: pointer;
167+
168+
g {
169+
fill: #3377ff;
170+
}
171+
}
172+
`;
173+
98174
const InviteUser = styled.div`
99175
position: absolute;
100176
display: flex;
@@ -215,7 +291,9 @@ export default function ApplicationHome() {
215291
return {
216292
onSelected: (_, currentPath) => currentPath === path,
217293
text: (props: { selected: boolean }) => (
218-
<FolderLabel selected={props.selected}>{folder.name}</FolderLabel>
294+
<FolderNameWrapper selected={props.selected}>
295+
<FolderName name={folder.name} id={folder.folderId} />
296+
</FolderNameWrapper>
219297
),
220298
routePath: FOLDER_URL,
221299
routePathExact: false,
@@ -231,11 +309,11 @@ export default function ApplicationHome() {
231309
...folderItems,
232310
{
233311
text: (props: { selected: boolean }) => (
234-
<FolderLabel selected={props.selected}>{trans("more")}</FolderLabel>
312+
<MoreFoldersWrapper selected={props.selected}>{trans("more")}</MoreFoldersWrapper>
235313
),
236314
routePath: FOLDERS_URL,
237315
routeComp: RootFolderListView,
238-
icon: PopoverIcon,
316+
icon: MoreFoldersIcon,
239317
size: "small",
240318
},
241319
];

0 commit comments

Comments
 (0)