Skip to content

Commit 49a49cb

Browse files
author
FalkWolsky
committed
Adapted Home Screen & Icons
1 parent 70ab8da commit 49a49cb

File tree

6 files changed

+91
-57
lines changed

6 files changed

+91
-57
lines changed

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,11 @@ export { ReactComponent as AlignClose } from "./icon-align-close.svg";
8080
export { ReactComponent as AlignTop } from "./icon-align-top.svg";
8181
export { ReactComponent as AlignBottom } from "./icon-align-bottom.svg";
8282
export { ReactComponent as AddIcon } from "./icon-add.svg";
83-
export { ReactComponent as ApplicationDocIcon } from "./icon-application-doc.svg";
8483
export { ReactComponent as ImportAppIcon } from "./icon-app-import.svg";
85-
export { ReactComponent as ModuleDocIcon } from "./icon-module-doc.svg";
8684
export { ReactComponent as ImportIcon } from "./icon-import.svg";
8785
export { ReactComponent as ImportIconV2 } from "./icon-import-v2.svg";
88-
export { ReactComponent as ModuleMenuIcon } from "./icon-module-menu.svg";
89-
export { ReactComponent as ModuleIcon } from "./icon-module.svg";
86+
export { ReactComponent as ModuleMenuIcon } from "./remix/focus-mode.svg";
87+
export { ReactComponent as ModuleIcon } from "./remix/focus-mode.svg";
9088
export { ReactComponent as AllAppIcon } from "./icon-all-app.svg";
9189
export { ReactComponent as DatasourceIcon } from "./icon-datasource.svg";
9290
export { ReactComponent as QueryLibraryIcon } from "./icon-query-library.svg";
@@ -113,13 +111,16 @@ export { ReactComponent as SuccessIcon } from "./icon-success.svg";
113111
export { ReactComponent as ErrorIcon } from "./icon-err-warning.svg";
114112
export { ReactComponent as DocIcon } from "./icon-tutorial.svg";
115113
export { ReactComponent as DocBoldIcon } from "./icon-tutorial-bold.svg";
116-
export { ReactComponent as NavDocIcon } from "./icon-nav-doc.svg";
117114
export { ReactComponent as LabIcon } from "./icon-laboratory.svg";
118115
export { ReactComponent as ArrowIcon } from "./icon-arrow.svg";
119116
export { ReactComponent as ArrowSolidIcon } from "./icon-arrow-solid.svg";
120117

118+
// Home Section
121119
export { ReactComponent as PlusIcon } from "./icon-plus.svg";
122-
export { ReactComponent as FolderIcon } from "./icon-application-folder.svg";
120+
export { ReactComponent as ApplicationDocIcon } from "./remix/apps-2-line.svg";
121+
export { ReactComponent as ModuleDocIcon } from "./remix/focus-mode.svg";
122+
export { ReactComponent as NavDocIcon } from "./remix/menu-line.svg";
123+
export { ReactComponent as FolderIcon } from "./remix/folder-6-line.svg";
123124
export { ReactComponent as AllTypesIcon } from "./icon-application-all.svg";
124125
export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user.svg";
125126
export { ReactComponent as HomeEmptyIcon } from "./icon-application-empty.svg";

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
1919
background: ${(props) => (props.$selected ? "#ebf0f7" : "#efeff1")};
2020
}
2121
22+
svg {
23+
width:24px
24+
}
25+
2226
${(props) =>
2327
props.$selected &&
2428
css`

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { APPLICATION_VIEW_URL } from "constants/routesURL";
2222
import { TypographyText } from "../../components/TypographyText";
2323
import { useParams } from "react-router-dom";
2424
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
25+
import { colorPickerEvent } from "@lowcoder-ee/comps/comps/mediaComp/colorPickerComp";
2526

2627
const EditButton = styled(TacoButton)`
2728
width: 52px;
@@ -158,13 +159,30 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
158159
return null;
159160
}
160161

162+
var iconColor = "#444";
163+
if (res.type === HomeResTypeEnum.Application) {
164+
iconColor = "#2650cf";
165+
}
166+
else if (res.type === HomeResTypeEnum.Module) {
167+
iconColor = "#cf9e26";
168+
}
169+
else if (res.type === HomeResTypeEnum.NavLayout || res.type === HomeResTypeEnum.MobileTabLayout) {
170+
iconColor = "#af41ff";
171+
}
172+
161173
const Icon = resInfo.icon;
162174

163175
return (
164176
<Wrapper>
165177
<Card>
166178
{Icon && (
167-
<Icon width={"24px"} height={"24px"} style={{ marginRight: "10px", flexShrink: 0 }} />
179+
<Icon width={"24px"} height={"24px"} style={
180+
{
181+
color: iconColor,
182+
marginRight: "10px",
183+
flexShrink: 0
184+
}
185+
} />
168186
)}
169187
<CardInfo
170188
onClick={(e) => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ export function HomeView() {
1616
return (
1717
<>
1818
<Helmet>{<title>{trans("productName")} {trans("home.home")}</title>}</Helmet>
19-
<HomeLayout elements={elements} mode={"view"} />
19+
<HomeLayout
20+
elements={elements}
21+
mode={"view"}
22+
/>
2023
</>
2124
);
2225
}

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

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
11
import styled from "styled-components";
22
import { trans } from "../../i18n";
3-
import { useLocation } from "react-router-dom";
4-
import { NEWS_URL } from "constants/routesURL";
53
import { default as Divider } from "antd/es/divider";
64

7-
import { Avatar, Badge, Button, Card, Col, Row, Space, Typography, Select, Table, Flex } from "antd";
8-
9-
10-
import {
11-
HomeModuleIcon,
12-
MarketplaceIcon,
13-
AppsIcon,
14-
} from "lowcoder-design";
15-
import { AppView } from "@lowcoder-ee/appView/AppView";
16-
import { useRef } from "react";
17-
18-
const { Text, Title, Link } = Typography;
5+
import { Card } from "antd";
196

207
const Wrapper = styled.div`
218
display: flex;
@@ -52,10 +39,10 @@ const NewsView = styled.div`
5239

5340
const StyleNewsCover = styled.div`
5441
background: rgb(2,0,36);
55-
background: -moz-linear-gradient(31deg, rgba(2,0,36,1) 0%, rgba(121,9,102,1) 35%, rgba(0,212,255,1) 100%);
56-
background: -webkit-linear-gradient(31deg, rgba(2,0,36,1) 0%, rgba(121,9,102,1) 35%, rgba(0,212,255,1) 100%);
57-
background: linear-gradient(31deg, rgba(2,0,36,1) 0%, rgba(121,9,102,1) 35%, rgba(0,212,255,1) 100%);
58-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
42+
background: -moz-linear-gradient(39deg, rgba(2,0,36,1) 0%, rgba(104,9,121,1) 35%, rgba(255,83,0,1) 100%);
43+
background: -webkit-linear-gradient(39deg, rgba(2,0,36,1) 0%, rgba(104,9,121,1) 35%, rgba(255,83,0,1) 100%);
44+
background: linear-gradient(39deg, rgba(2,0,36,1) 0%, rgba(104,9,121,1) 35%, rgba(255,83,0,1) 100%);
45+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#ff5300",GradientType=1);
5946
padding: 25px;
6047
height: 120px;
6148
border-radius:10px 10px 0 0;
@@ -98,14 +85,12 @@ export function NewsLayout() {
9885

9986
return (
10087
<Wrapper>
101-
<HeaderWrapper>
102-
103-
</HeaderWrapper>
88+
<HeaderWrapper></HeaderWrapper>
10489

10590
<ContentWrapper>
10691
<NewsView>
10792
<StyleNewsCover>
108-
<h1>Lowcoder {trans("home.news")}</h1>
93+
<h1 style={{color: "#ffffff", marginTop : "12px"}}>Lowcoder {trans("home.news")}</h1>
10994
</StyleNewsCover>
11095
<Card style={{ marginBottom: "20px" }}>
11196
<iframe

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

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const FolderNameWrapper = styled.div<{ $selected: boolean }>`
116116
display: inline-block;
117117
}
118118
}
119+
119120
`;
120121

121122
const FolderName = (props: { id: string; name: string }) => {
@@ -136,7 +137,10 @@ const FolderName = (props: { id: string; name: string }) => {
136137
setFolderNameEditing(false);
137138
}}
138139
/>
139-
<EditPopover items={[{ text: trans("rename"), onClick: () => setFolderNameEditing(true) }]}>
140+
<EditPopover items={[
141+
{ text: trans("rename"), onClick: () => setFolderNameEditing(true) },
142+
// Falk: TODO: Implement delete for Folders
143+
]}>
140144
<PopoverIcon tabIndex={-1} />
141145
</EditPopover>
142146
</>
@@ -316,12 +320,12 @@ export default function ApplicationHome() {
316320
};
317321
});
318322

319-
if (allFolders.length > 5) {
323+
if (allFolders.length > 1) {
320324
folderItems = [
321325
...folderItems,
322326
{
323327
text: (props: { selected?: boolean }) => (
324-
<MoreFoldersWrapper $selected={Boolean(props.selected)}>{trans("more")}</MoreFoldersWrapper>
328+
<MoreFoldersWrapper $selected={Boolean(props.selected)}>{trans("home.allFolders")}</MoreFoldersWrapper>
325329
),
326330
routePath: FOLDERS_URL,
327331
routeComp: RootFolderListView,
@@ -356,6 +360,11 @@ export default function ApplicationHome() {
356360
routeComp: NewsView,
357361
icon: ({ selected, ...otherProps }) => selected ? <NewsIcon {...otherProps} width={"24px"}/> : <NewsIcon {...otherProps} width={"24px"}/>,
358362
},
363+
]
364+
},
365+
366+
{
367+
items: [
359368
{
360369
text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
361370
routePath: ALL_APPLICATIONS_URL,
@@ -369,28 +378,15 @@ export default function ApplicationHome() {
369378
icon: ({ selected, ...otherProps }) => selected ? <HomeModuleIcon {...otherProps} width={"24px"}/> : <HomeModuleIcon {...otherProps} width={"24px"}/>,
370379
visible: ({ user }) => user.orgDev,
371380
},
372-
{
373-
text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
374-
routePath: MARKETPLACE_URL,
375-
routePathExact: false,
376-
routeComp: MarketplaceView,
377-
icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
378-
visible: ({ user }) => user.orgDev,
379-
},
380-
{
381-
text: <TabLabel>{trans("home.trash")}</TabLabel>,
382-
routePath: TRASH_URL,
383-
routeComp: TrashView,
384-
icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
385-
visible: ({ user }) => user.orgDev,
386-
},
381+
387382
],
388383
},
384+
389385
allFolders.length > 0
390386
? {
391387
title: (
392388
<FolderSectionLabel>
393-
{trans("home.folders")}
389+
{trans("home.yourFolders")}
394390
<FolderCountLabel>{`(${allFolders.length})`}</FolderCountLabel>
395391
{user.orgDev && (
396392
<CreateFolderIcon onClick={handleFolderCreate}>
@@ -403,8 +399,17 @@ export default function ApplicationHome() {
403399
style: { marginTop: "8px" },
404400
}
405401
: { items: [] },
402+
406403
{
407404
items: [
405+
{
406+
text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
407+
routePath: MARKETPLACE_URL,
408+
routePathExact: false,
409+
routeComp: MarketplaceView,
410+
icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
411+
visible: ({ user }) => user.orgDev,
412+
},
408413
{
409414
text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
410415
routePath: QUERY_LIBRARY_URL,
@@ -421,6 +426,23 @@ export default function ApplicationHome() {
421426
visible: ({ user }) => user.orgDev,
422427
onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
423428
},
429+
],
430+
},
431+
isEE() ? {
432+
items: [
433+
{
434+
text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
435+
routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
436+
routePathExact: false,
437+
routeComp: AppEditor,
438+
icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
439+
visible: ({ user }) => user.orgDev,
440+
},
441+
],
442+
} : { items: [] },
443+
444+
{
445+
items: [
424446
{
425447
text: <TabLabel>{trans("settings.title")}</TabLabel>,
426448
routePath: SETTING,
@@ -430,20 +452,21 @@ export default function ApplicationHome() {
430452
visible: ({ user }) => user.orgDev,
431453
onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
432454
},
433-
],
455+
]
434456
},
435-
isEE() ? {
457+
458+
{
436459
items: [
437460
{
438-
text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
439-
routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
440-
routePathExact: false,
441-
routeComp: AppEditor,
442-
icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
461+
text: <TabLabel>{trans("home.trash")}</TabLabel>,
462+
routePath: TRASH_URL,
463+
routeComp: TrashView,
464+
icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
443465
visible: ({ user }) => user.orgDev,
444466
},
445467
],
446-
} : { items: [] },
468+
},
469+
447470
]}
448471
/>
449472
{user.orgDev && (

0 commit comments

Comments
 (0)