Movatterモバイル変換

[0]ホーム
URL:

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

Commit3d063e2

Browse files
Merge pull request#1779 from kamalqureshi/update_app_card_ui
Update Card UI on Homepage
2 parents077842b +84ee3e5 commit3d063e2

File tree

6 files changed

+267
-95
lines changed

6 files changed

+267
-95
lines changed

‎client/packages/lowcoder/src/constants/applicationConstants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export interface ApplicationMeta {
8181
title?:string;
8282
description?:string;
8383
image?:string;
84+
icon?:string;
8485
category?:ApplicationCategoriesEnum;
8586
showheader?:boolean;
8687
orgId:string;

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3931,6 +3931,10 @@ export const en = {
39313931
"datasource":"Data Sources",
39323932
"selectDatasourceType":"Select Data Source Type",
39333933
"home":"Home",
3934+
"desc":"Description",
3935+
"renameApp":"Rename app",
3936+
"updateAppName":"Update Application Name",
3937+
"titleUpdateWarning":"The card displays the app title. Changing the app name will not update the card view.",
39343938
"all":"All",
39353939
"app":"App",
39363940
"navigation":"Navigation",

‎client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -469,7 +469,7 @@ export function HomeLayout(props: HomeLayoutProps) {
469469
title:e.title,
470470
description:e.description,
471471
category:e.category,
472-
icon:e.image,
472+
icon:e.icon,
473473
type:HomeResTypeEnum[HomeResTypeEnum[e.applicationType]asHomeResKey],
474474
creator:e?.creatorEmail??e.createBy,
475475
lastModifyTime:e.lastModifyTime,
@@ -630,7 +630,7 @@ export function HomeLayout(props: HomeLayoutProps) {
630630

631631
<Divider/>
632632

633-
<ContentWrapper>
633+
<ContentWrapper>
634634

635635
{isFetching&&resList.length===0 ?(
636636
<SkeletonStyleactiveparagraph={{rows:8,width:648}}title={false}/>

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

Lines changed: 202 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import{TacoButton}from"lowcoder-design/src/components/button"
2-
import{ReactNode,useState}from"react";
1+
import{TacoButton,CustomModal,Alert}from"lowcoder-design"
2+
import{useState,useEffect}from"react";
33
import{useDispatch}from"react-redux";
44
import{updateAppMetaAction}from"redux/reduxActions/applicationActions";
55
importstyledfrom"styled-components";
@@ -25,6 +25,11 @@ import { useParams } from "react-router-dom";
2525
import{messageInstance}from"lowcoder-design/src/components/GlobalInstances";
2626
import{FolderIcon}from"icons";
2727
import{BrandedIcon}from"@lowcoder-ee/components/BrandedIcon";
28+
import{Typography}from"antd";
29+
import{defaultasForm}from"antd/es/form";
30+
import{defaultasInput}from"antd/es/input";
31+
import{MultiIconDisplay}from"@lowcoder-ee/comps/comps/multiIconDisplay";
32+
import{FormStyled}from"../setting/idSource/styledComponents";
2833

2934
constExecButton=styled(TacoButton)`
3035
width: 52px;
@@ -50,14 +55,16 @@ const ExecButton = styled(TacoButton)`
5055
`;
5156

5257
constWrapper=styled.div`
53-
height: 67px;
5458
padding: 0 6px;
5559
border-radius: 8px;
56-
margin-bottom: -1px;
57-
margin-top: 1px;
58-
60+
margin-bottom: 2px;
61+
margin-top: 2px;
62+
padding-top: 10px;
63+
padding-bottom: 10px;
64+
background-color: #fcfcfc;
65+
min-height: 100px;
5966
&:hover {
60-
background-color: #f5f7fa;
67+
background-color: #f5f5f6
6168
}
6269
`;
6370

@@ -98,7 +105,6 @@ const CardInfo = styled.div`
98105
height: 100%;
99106
flex-grow: 1;
100107
cursor: pointer;
101-
overflow: hidden;
102108
padding-right: 12px;
103109
104110
&:hover {
@@ -124,6 +130,7 @@ const AppTimeOwnerInfoLabel = styled.div`
124130
constOperationWrapper=styled.div`
125131
display: flex;
126132
align-items: center;
133+
padding-right: 10px;
127134
@media screen and (max-width: 500px) {
128135
> svg {
129136
display: none;
@@ -133,9 +140,75 @@ const OperationWrapper = styled.div`
133140

134141
constMONTH_MILLIS=30*24*60*60*1000;
135142

143+
interfaceUpdateAppModalProps{
144+
visible:boolean;
145+
onCancel:()=>void;
146+
onOk:(values:any)=>void;
147+
res:HomeRes;
148+
folderId?:string;
149+
}
150+
151+
exportfunctionUpdateAppModal({ visible, onCancel, onOk, res, folderId}:UpdateAppModalProps){
152+
const[detailsForm]=Form.useForm();
153+
154+
// Reset form values when res changes
155+
useEffect(()=>{
156+
if(res&&visible){
157+
detailsForm.setFieldsValue({
158+
appName:res.name,
159+
title:res.title
160+
});
161+
}
162+
},[res,visible,detailsForm]);
163+
164+
return(
165+
<CustomModal
166+
title={trans("home.updateAppName")}
167+
open={visible}
168+
destroyOnHidden
169+
onCancel={onCancel}
170+
showCancelButton={false}
171+
showOkButton
172+
width="440px"
173+
okText={trans("finish")}
174+
onOk={()=>{
175+
detailsForm.validateFields().then((values)=>{
176+
onOk(values);
177+
}).catch((errorInfo)=>{
178+
console.error('Validation failed:',errorInfo);
179+
});
180+
}}
181+
>
182+
<FormStyled
183+
form={detailsForm}
184+
name="general"
185+
layout="vertical"
186+
style={{maxWidth:'100%'}}
187+
autoComplete="off"
188+
>
189+
{res.title&&
190+
<Alertlabel={trans("home.titleUpdateWarning")}type="warning"/>}
191+
<br/>
192+
193+
<Form.Itemlabel={trans("home.name")}name="appName">
194+
<Input/>
195+
</Form.Item>
196+
197+
{res.title&&(
198+
<Form.Itemlabel={trans("title")}name="title">
199+
<Inputdisabled/>
200+
</Form.Item>
201+
)}
202+
203+
</FormStyled>
204+
</CustomModal>
205+
);
206+
}
207+
136208
exportfunctionHomeResCard(props:{res:HomeRes;onMove:(res:HomeRes)=>void;setModify:any;modify:boolean}){
137209
const{ res, onMove, setModify, modify}=props;
138210
const[appNameEditing,setAppNameEditing]=useState(false);
211+
const[dialogVisible,setDialogVisible]=useState(false)
139212
constdispatch=useDispatch();
140213

141214
const{ folderId}=useParams<{folderId:string}>();
@@ -161,96 +234,137 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
161234
elseif(res.type===HomeResTypeEnum.NavLayout||res.type===HomeResTypeEnum.MobileTabLayout){
162235
iconColor="#af41ff";
163236
}
164-
165237
constIcon=resInfo.icon;
166238

239+
consthandleModalOk=(values:any)=>{
240+
dispatch(
241+
updateAppMetaAction({applicationId:res.id,name:values.appName||res.name,folderId:folderId})
242+
);
243+
244+
setDialogVisible(false);
245+
setTimeout(()=>{
246+
setModify(!modify);
247+
},200);
248+
};
249+
167250
return(
168-
<Wrapper>
169-
<Card>
170-
{Icon&&(
171-
<BrandedIcon>
172-
<Iconwidth={"42px"}height={"42px"}style={
173-
{
174-
color:iconColor,
175-
marginRight:"10px",
176-
flexShrink:0
177-
}
178-
}/>
179-
</BrandedIcon>
180-
)}
181-
<CardInfo
182-
onClick={(e)=>{
183-
if(appNameEditing){
184-
return;
185-
}
186-
if(res.type===HomeResTypeEnum.Folder){
187-
handleFolderViewClick(res.id);
188-
}else{
189-
if(checkIsMobile(window.innerWidth)){
190-
history.push(APPLICATION_VIEW_URL(res.id,"view"));
191-
return;
192-
}
193-
if(res.isMarketplace){
194-
handleMarketplaceAppViewClick(res.id);
195-
return;
196-
}
197-
res.isEditable ?handleAppEditClick(e,res.id) :handleAppViewClick(res.id);
198-
}
199-
}}
200-
>
201-
<TypographyText
202-
value={res.name}
203-
editing={appNameEditing}
204-
onChange={(value)=>{
205-
if(!value.trim()){
206-
messageInstance.warning(trans("home.nameCheckMessage"));
251+
<>
252+
<UpdateAppModal
253+
visible={dialogVisible}
254+
onCancel={()=>setDialogVisible(false)}
255+
onOk={handleModalOk}
256+
res={res}
257+
folderId={folderId}
258+
/>
259+
260+
<Wrapper>
261+
<Card>
262+
{res.icon ?
263+
<MultiIconDisplay
264+
identifier={res.icon&&typeofres.icon==='string' ?res.icon :'/icon:antd/appstoreoutlined'}
265+
width="30px"
266+
height="30px"
267+
style={{
268+
marginRight:"6px",
269+
flexShrink:0,
270+
color:"#b766db"
271+
}}
272+
/> :
273+
Icon&&(
274+
<BrandedIcon>
275+
<Iconwidth={"42px"}height={"42px"}style={
276+
{
277+
color:iconColor,
278+
marginRight:"10px",
279+
flexShrink:0
280+
}
281+
}/>
282+
</BrandedIcon>
283+
)
284+
}
285+
<CardInfo
286+
onClick={(e)=>{
287+
if(appNameEditing){
207288
return;
208289
}
209290
if(res.type===HomeResTypeEnum.Folder){
210-
dispatch(updateFolder({id:res.id,name:value}));
211-
setTimeout(()=>{
212-
setModify(!modify);
213-
},200);
291+
handleFolderViewClick(res.id);
214292
}else{
215-
dispatch(
216-
updateAppMetaAction({applicationId:res.id,name:value,folderId:folderId})
217-
);
218-
setTimeout(()=>{
219-
setModify(!modify);
220-
},200);
293+
if(checkIsMobile(window.innerWidth)){
294+
history.push(APPLICATION_VIEW_URL(res.id,"view"));
295+
return;
296+
}
297+
if(res.isMarketplace){
298+
handleMarketplaceAppViewClick(res.id);
299+
return;
300+
}
301+
res.isEditable ?handleAppEditClick(e,res.id) :handleAppViewClick(res.id);
221302
}
222-
setAppNameEditing(false);
223303
}}
224-
/>
225-
<AppTimeOwnerInfoLabeltitle={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
226-
</CardInfo>
227-
<OperationWrapper>
228-
{/* {res.isEditable && (
229-
<EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
230-
{trans("edit")}
231-
</EditButton>
232-
)} */}
233-
<ExecButton
234-
onClick={()=>
235-
res.type===HomeResTypeEnum.Folder
236-
?handleFolderViewClick(res.id)
237-
:res.isMarketplace
238-
?handleMarketplaceAppViewClick(res.id)
239-
:handleAppViewClick(res.id)
240-
}
241304
>
242-
{trans("view")}
243-
</ExecButton>
244-
<HomeResOptions
245-
res={res}
246-
onRename={()=>setAppNameEditing(true)}
247-
onMove={(res)=>onMove(res)}
248-
setModify={setModify}
249-
modify={modify}
250-
/>
251-
</OperationWrapper>
252-
</Card>
253-
</Wrapper>
305+
<TypographyText
306+
value={res.title||res.name}
307+
editing={false}
308+
onChange={(value)=>{
309+
if(!value.trim()){
310+
messageInstance.warning(trans("home.nameCheckMessage"));
311+
return;
312+
}
313+
if(res.type===HomeResTypeEnum.Folder){
314+
dispatch(updateFolder({id:res.id,name:value}));
315+
setTimeout(()=>{
316+
setModify(!modify);
317+
},200);
318+
}else{
319+
dispatch(
320+
updateAppMetaAction({applicationId:res.id,name:value,folderId:folderId})
321+
);
322+
setTimeout(()=>{
323+
setModify(!modify);
324+
},200);
325+
}
326+
setAppNameEditing(false);
327+
}}
328+
/>
329+
330+
{res?.description
331+
&&<Typography.Text
332+
type="secondary"
333+
style={{fontSize:12,textWrap:"wrap"}}
334+
>
335+
{res.description.length>150 ?res.description.substring(0,150)+'...' :res.description}
336+
</Typography.Text>}
337+
338+
<AppTimeOwnerInfoLabeltitle={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
339+
</CardInfo>
340+
<OperationWrapper>
341+
{/* {res.isEditable && (
342+
<EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
343+
{trans("edit")}
344+
</EditButton>
345+
)} */}
346+
<ExecButton
347+
onClick={()=>
348+
res.type===HomeResTypeEnum.Folder
349+
?handleFolderViewClick(res.id)
350+
:res.isMarketplace
351+
?handleMarketplaceAppViewClick(res.id)
352+
:handleAppViewClick(res.id)
353+
}
354+
>
355+
{trans("view")}
356+
</ExecButton>
357+
<HomeResOptions
358+
res={res}
359+
onRename={()=>setDialogVisible(true)}
360+
onMove={(res)=>onMove(res)}
361+
setModify={setModify}
362+
modify={modify}
363+
/>
364+
</OperationWrapper>
365+
</Card>
366+
</Wrapper>
367+
</>
254368
);
255369
}
256370

‎client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const HomeResOptions = (props: {
5353
if(res.isEditable){
5454
options=[
5555
...options,
56-
{text:trans("rename"),onClick:()=>onRename(res)},
56+
{text:trans("home.renameApp"),onClick:()=>onRename(res)},
5757
{
5858
text:trans("header.duplicate",{type:HomeResInfo[res.type].name.toLowerCase()}),
5959
onClick:()=>{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp