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

Commite379627

Browse files
authored
Merge pull requestlowcoder-org#725 from raheeliftikhar5/app_meta_field
Added app meta fields title, description, category and icon in App settings
2 parents5e5f73c +fa20094 commite379627

File tree

7 files changed

+121
-41
lines changed

7 files changed

+121
-41
lines changed

‎client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

Lines changed: 78 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import{ThemeDetail,ThemeType}from"api/commonSettingApi";
22
import{RecordConstructorToComp}from"lowcoder-core";
33
import{dropdownInputSimpleControl}from"comps/controls/dropdownInputSimpleControl";
4-
import{MultiCompBuilder,valueComp}from"comps/generators";
4+
import{MultiCompBuilder,valueComp,withDefault}from"comps/generators";
55
import{AddIcon,Dropdown}from"lowcoder-design";
66
import{EllipsisSpan}from"pages/setting/theme/styledComponents";
77
import{useEffect}from"react";
@@ -14,6 +14,10 @@ import { default as Divider } from "antd/es/divider";
1414
import{THEME_SETTING}from"constants/routesURL";
1515
import{CustomShortcutsComp}from"./customShortcutsComp";
1616
import{DEFAULT_THEMEID}from"comps/utils/themeUtil";
17+
import{StringControl}from"comps/controls/codeControl";
18+
import{IconControl}from"comps/controls/iconControl";
19+
import{dropdownControl}from"comps/controls/dropdownControl";
20+
import{ApplicationCategoriesEnum}from"constants/applicationConstants";
1721

1822
constTITLE=trans("appSetting.title");
1923
constUSER_DEFINE="__USER_DEFINE";
@@ -92,9 +96,37 @@ const SettingsStyled = styled.div`
9296
`;
9397

9498
constDivStyled=styled.div`
95-
div {
96-
width: 100%;
97-
display: block;
99+
> div {
100+
flex-wrap: wrap;
101+
margin-bottom: 12px;
102+
103+
> div {
104+
width: 100%;
105+
display: block;
106+
}
107+
108+
> div:first-child {
109+
margin-bottom: 6px;
110+
}
111+
112+
.tooltipLabel {
113+
white-space: nowrap;
114+
}
115+
116+
}
117+
// custom styles for icon selector
118+
.app-icon {
119+
> div {
120+
margin-bottom: 0;
121+
122+
> div:first-child {
123+
margin-bottom: 6px;
124+
}
125+
> div:nth-child(2) {
126+
width: 88%;
127+
display: inline-block;
128+
}
129+
}
98130
}
99131
`;
100132

@@ -134,7 +166,22 @@ const DividerStyled = styled(Divider)`
134166
border-color: #e1e3eb;
135167
`;
136168

169+
typeAppCategoriesEnumKey=keyoftypeofApplicationCategoriesEnum
170+
constAppCategories=Object.keys(ApplicationCategoriesEnum).map(
171+
(cat)=>{
172+
constvalue=ApplicationCategoriesEnum[catasAppCategoriesEnumKey];
173+
return{
174+
label:value,
175+
value,
176+
}
177+
}
178+
)
179+
137180
constchildrenMap={
181+
title:withDefault(StringControl,''),
182+
description:withDefault(StringControl,''),
183+
icon:IconControl,
184+
category:dropdownControl(AppCategories,ApplicationCategoriesEnum.BUSINESS),
138185
maxWidth:dropdownInputSimpleControl(OPTIONS,USER_DEFINE,"1920"),
139186
themeId:valueComp<string>(DEFAULT_THEMEID),
140187
customShortcuts:CustomShortcutsComp,
@@ -146,7 +193,16 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
146193
};
147194

148195
functionAppSettingsModal(props:ChildrenInstance){
149-
const{ themeList, defaultTheme, themeId, maxWidth}=props;
196+
const{
197+
themeList,
198+
defaultTheme,
199+
themeId,
200+
maxWidth,
201+
title,
202+
description,
203+
icon,
204+
category,
205+
}=props;
150206
constTHEME_OPTIONS=themeList?.map((theme)=>({
151207
label:theme.name,
152208
value:theme.id+"",
@@ -182,16 +238,30 @@ function AppSettingsModal(props: ChildrenInstance) {
182238
<SettingsStyled>
183239
<Title>{TITLE}</Title>
184240
<DivStyled>
241+
{title.propertyView({
242+
label:trans("appSetting.appTitle"),
243+
placeholder:trans("appSetting.appTitle")
244+
})}
245+
{description.propertyView({
246+
label:trans("appSetting.appDescription"),
247+
placeholder:trans("appSetting.appDescription")
248+
})}
249+
{category.propertyView({
250+
label:trans("appSetting.appCategory"),
251+
})}
252+
<divclassName="app-icon">
253+
{icon.propertyView({
254+
label:trans("icon"),
255+
tooltip:trans("aggregation.iconTooltip"),
256+
})}
257+
</div>
185258
{maxWidth.propertyView({
186259
dropdownLabel:trans("appSetting.canvasMaxWidth"),
187260
inputLabel:trans("appSetting.userDefinedMaxWidth"),
188261
inputPlaceholder:trans("appSetting.inputUserDefinedPxValue"),
189262
placement:"bottom",
190263
min:350,
191264
lastNode:<span>{trans("appSetting.maxWidthTip")}</span>,
192-
labelStyle:{marginBottom:"8px"},
193-
dropdownStyle:{marginBottom:"12px"},
194-
inputStyle:{marginBottom:"12px"}
195265
})}
196266
<Dropdown
197267
defaultValue={
@@ -205,8 +275,6 @@ function AppSettingsModal(props: ChildrenInstance) {
205275
options={THEME_OPTIONS}
206276
label={trans("appSetting.themeSetting")}
207277
placement="bottom"
208-
labelStyle={{marginBottom:"8px"}}
209-
dropdownStyle={{marginBottom:"12px"}}
210278
itemNode={(value)=><DropdownItemvalue={value}/>}
211279
preNode={()=>(
212280
<>

‎client/packages/lowcoder/src/comps/hooks/drawerComp.tsx

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,35 @@ const DrawerWrapper = styled.div`
3535
pointer-events: auto;
3636
`;
3737

38+
constButtonStyle=styled(Button)<{$closePosition?:string}>`
39+
position: absolute;
40+
${(props)=>props.$closePosition==="right" ?"right: 0;" :"left: 0;"}
41+
top: 0;
42+
z-index: 10;
43+
font-weight: 700;
44+
box-shadow: none;
45+
color: rgba(0, 0, 0, 0.45);
46+
height: 54px;
47+
width: 54px;
48+
49+
svg {
50+
width: 16px;
51+
height: 16px;
52+
}
53+
54+
&,
55+
:hover,
56+
:focus {
57+
background-color: transparent;
58+
border: none;
59+
}
60+
61+
:hover,
62+
:focus {
63+
color: rgba(0, 0, 0, 0.75);
64+
}
65+
`;
66+
3867
// If it is a number, use the px unit by default
3968
functiontransToPxSize(size:string|number){
4069
returnisNumeric(size) ?size+"px" :(sizeasstring);
@@ -103,34 +132,6 @@ let TmpDrawerComp = (function () {
103132
},
104133
[dispatch,isTopBom]
105134
);
106-
constButtonStyle=styled(Button)`
107-
position: absolute;
108-
${props.closePosition==="right" ?"right: 0;" :"left: 0;"}
109-
top: 0;
110-
z-index: 10;
111-
font-weight: 700;
112-
box-shadow: none;
113-
color: rgba(0, 0, 0, 0.45);
114-
height: 54px;
115-
width: 54px;
116-
117-
svg {
118-
width: 16px;
119-
height: 16px;
120-
}
121-
122-
&,
123-
:hover,
124-
:focus {
125-
background-color: transparent;
126-
border: none;
127-
}
128-
129-
:hover,
130-
:focus {
131-
color: rgba(0, 0, 0, 0.75);
132-
}
133-
`;
134135
return(
135136
<BackgroundColorContext.Providervalue={props.style.background}>
136137
<DrawerWrapper>
@@ -168,6 +169,7 @@ let TmpDrawerComp = (function () {
168169
mask={props.showMask}
169170
>
170171
<ButtonStyle
172+
$closePosition={props.closePosition}
171173
onClick={()=>{
172174
props.visible.onChange(false);
173175
}}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1860,7 +1860,10 @@ export const de = {
18601860
"maxWidthTip":"Die maximale Breite sollte größer als oder gleich 350 sein",
18611861
"themeSetting":"Angewandter Stil Thema",
18621862
"themeSettingDefault":"Standard",
1863-
"themeCreate":"Thema erstellen"
1863+
"themeCreate":"Thema erstellen",
1864+
"appTitle":"Titel",
1865+
"appDescription":"Beschreibung",
1866+
"appCategory":"Kategorie",
18641867
},
18651868
"customShortcut":{
18661869
"title":"Benutzerdefinierte Abkürzungen",

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2045,7 +2045,10 @@ export const en = {
20452045
"maxWidthTip":"Max Width Should Be Greater Than or Equal to 350",
20462046
"themeSetting":"Applied Style Theme",
20472047
"themeSettingDefault":"Default",
2048-
"themeCreate":"Create Theme"
2048+
"themeCreate":"Create Theme",
2049+
"appTitle":"Title",
2050+
"appDescription":"Description",
2051+
"appCategory":"Category",
20492052
},
20502053
"customShortcut":{
20512054
"title":"Custom Shortcuts",

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1933,6 +1933,9 @@ appSetting: {
19331933
themeSetting:"主题设置",
19341934
themeSettingDefault:"默认",
19351935
themeCreate:"创建主题",
1936+
appTitle:"标题",
1937+
appDescription:"描述",
1938+
appCategory:"类别",
19361939
},
19371940
customShortcut:{
19381941
title:"自定义快捷键",

‎client/packages/lowcoder/src/pages/common/styledComponent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const RightStyledCard = styled(Card)`
3939

4040
exportconstLeftPanel=styled(StyledCard)`
4141
display: block;
42+
z-index:${Layers.rightPanel};
4243
`;
4344
exportconstRightPanelWrapper=styled(RightStyledCard)`
4445
display: flex;

‎client/packages/lowcoder/src/pages/editor/styledComponents.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,6 @@ export const CollapseWrapper = styled.div<{ $clientX?: number }>`
148148
display: none;
149149
}
150150
.simplebar-content > div {
151-
padding: 0;
151+
//padding: 0;
152152
}
153153
`;

0 commit comments

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