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

Commit89aa5d0

Browse files
move theme selection in color settings
1 parentb09e024 commit89aa5d0

File tree

2 files changed

+96
-83
lines changed

2 files changed

+96
-83
lines changed

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

Lines changed: 83 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -236,36 +236,13 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
236236
constlowcoderCompsMeta=useSelector((state:AppState)=>state.npmPlugin.packageMeta['lowcoder-comps']);
237237
const[lowcoderCompVersions,setLowcoderCompVersions]=useState(['latest']);
238238
const{
239-
themeList,
240-
defaultTheme,
241-
themeId,
242239
title,
243240
description,
244241
icon,
245242
category,
246243
showHeaderInPublic,
247-
preventAppStylesOverwriting,
248244
lowcoderCompVersion,
249245
}=props;
250-
251-
constTHEME_OPTIONS=themeList?.map((theme)=>({
252-
label:theme.name,
253-
value:theme.id+"",
254-
}));
255-
256-
constthemeWithDefault=(
257-
themeId.getView()===DEFAULT_THEMEID||
258-
(!!themeId.getView()&&
259-
THEME_OPTIONS.findIndex((item)=>item.value===themeId.getView())===-1)
260-
?DEFAULT_THEMEID
261-
:themeId.getView()
262-
)asstring;
263-
264-
useEffect(()=>{
265-
if(themeWithDefault===DEFAULT_THEMEID){
266-
themeId.dispatchChangeValueAction(themeWithDefault);
267-
}
268-
},[themeWithDefault]);
269246

270247
useEffect(()=>{
271248
setLowcoderCompVersions([
@@ -274,20 +251,6 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
274251
])
275252
},[lowcoderCompsMeta])
276253

277-
278-
constDropdownItem=(params:{value:string})=>{
279-
constthemeItem=themeList.find((theme)=>theme.id===params.value);
280-
return(
281-
<ItemSpan>
282-
<TagDesc$theme={themeItem?.theme}>
283-
<divclassName="left"/>
284-
<divclassName="right"/>
285-
</TagDesc>
286-
<EllipsisSpanstyle={{maxWidth:"238px"}}>{themeItem?.name}</EllipsisSpan>
287-
{themeItem?.id===defaultTheme&&<DefaultSpan>{trans("appSetting.default")}</DefaultSpan>}
288-
</ItemSpan>
289-
);
290-
};
291254
return(
292255
<>
293256
<BaseSection
@@ -322,40 +285,6 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
322285
label:trans("appSetting.showPublicHeader"),
323286
})}
324287
</div>
325-
<Dropdown
326-
defaultValue={
327-
themeWithDefault===""
328-
?undefined
329-
:themeWithDefault===DEFAULT_THEMEID
330-
?defaultTheme||undefined
331-
:themeWithDefault
332-
}
333-
placeholder={trans("appSetting.themeSettingDefault")}
334-
options={THEME_OPTIONS}
335-
label={trans("appSetting.themeSetting")}
336-
placement="bottom"
337-
itemNode={(value)=><DropdownItemvalue={value}/>}
338-
preNode={()=>(
339-
<>
340-
<CreateDivonClick={()=>window.open(THEME_SETTING)}>
341-
<StyledAddIcon/>
342-
{trans("appSetting.themeCreate")}
343-
</CreateDiv>
344-
<DividerStyled/>
345-
</>
346-
)}
347-
allowClear
348-
onChange={(value)=>{
349-
themeId.dispatchChangeValueAction(
350-
value===defaultTheme ?DEFAULT_THEMEID :value||""
351-
);
352-
}}
353-
/>
354-
<divstyle={{margin:'20px 0'}}>
355-
{preventAppStylesOverwriting.propertyView({
356-
label:trans("prop.preventOverwriting"),
357-
})}
358-
</div>
359288
</DivStyled>
360289
</BaseSection>
361290
<BaseSection
@@ -409,6 +338,10 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
409338

410339
functionAppCanvasSettingsModal(props:ChildrenInstance){
411340
const{
341+
themeList,
342+
defaultTheme,
343+
themeId,
344+
preventAppStylesOverwriting,
412345
maxWidth,
413346
gridColumns,
414347
gridRowHeight,
@@ -423,8 +356,87 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
423356
gridBgImageOrigin,
424357
}=props;
425358

359+
constTHEME_OPTIONS=themeList?.map((theme)=>({
360+
label:theme.name,
361+
value:theme.id+"",
362+
}));
363+
364+
constthemeWithDefault=(
365+
themeId.getView()===DEFAULT_THEMEID||
366+
(!!themeId.getView()&&
367+
THEME_OPTIONS.findIndex((item)=>item.value===themeId.getView())===-1)
368+
?DEFAULT_THEMEID
369+
:themeId.getView()
370+
)asstring;
371+
372+
useEffect(()=>{
373+
if(themeWithDefault===DEFAULT_THEMEID){
374+
themeId.dispatchChangeValueAction(themeWithDefault);
375+
}
376+
},[themeWithDefault]);
377+
378+
constDropdownItem=(params:{value:string})=>{
379+
constthemeItem=themeList.find((theme)=>theme.id===params.value);
380+
return(
381+
<ItemSpan>
382+
<TagDesc$theme={themeItem?.theme}>
383+
<divclassName="left"/>
384+
<divclassName="right"/>
385+
</TagDesc>
386+
<EllipsisSpanstyle={{maxWidth:"238px"}}>{themeItem?.name}</EllipsisSpan>
387+
{themeItem?.id===defaultTheme&&<DefaultSpan>{trans("appSetting.default")}</DefaultSpan>}
388+
</ItemSpan>
389+
);
390+
};
391+
426392
return(
427393
<>
394+
<BaseSection
395+
name={"Theme Settings"}
396+
width={288}
397+
noMargin
398+
style={{
399+
borderTop:"1px solid #e1e3eb",
400+
backgroundColor:"#fff",
401+
}}
402+
>
403+
<DivStyled>
404+
<Dropdown
405+
defaultValue={
406+
themeWithDefault===""
407+
?undefined
408+
:themeWithDefault===DEFAULT_THEMEID
409+
?defaultTheme||undefined
410+
:themeWithDefault
411+
}
412+
placeholder={trans("appSetting.themeSettingDefault")}
413+
options={THEME_OPTIONS}
414+
label={trans("appSetting.themeSetting")}
415+
placement="bottom"
416+
itemNode={(value)=><DropdownItemvalue={value}/>}
417+
preNode={()=>(
418+
<>
419+
<CreateDivonClick={()=>window.open(THEME_SETTING)}>
420+
<StyledAddIcon/>
421+
{trans("appSetting.themeCreate")}
422+
</CreateDiv>
423+
<DividerStyled/>
424+
</>
425+
)}
426+
allowClear
427+
onChange={(value)=>{
428+
themeId.dispatchChangeValueAction(
429+
value===defaultTheme ?DEFAULT_THEMEID :value||""
430+
);
431+
}}
432+
/>
433+
<divstyle={{margin:'20px 0'}}>
434+
{preventAppStylesOverwriting.propertyView({
435+
label:trans("prop.preventOverwriting"),
436+
})}
437+
</div>
438+
</DivStyled>
439+
</BaseSection>
428440
<BaseSection
429441
name={trans("appSetting.canvas")}
430442
width={288}

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -562,18 +562,6 @@ function EditorView(props: EditorViewProps) {
562562
{appSettingsComp.getPropertyView()}
563563
</>
564564
)}
565-
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
566-
{props.preloadComp.getPropertyView()}
567-
<PreloadDiv
568-
onClick={()=>dispatch(
569-
setEditorExternalStateAction({
570-
showScriptsAndStyleModal:true,
571-
})
572-
)}
573-
>
574-
<LeftPreloadIcon/>
575-
{trans("leftPanel.toolbarPreload")}
576-
</PreloadDiv>
577565
</ScrollBar>
578566
</SettingsDiv>
579567
)}
@@ -595,6 +583,19 @@ function EditorView(props: EditorViewProps) {
595583
</AppSettingContext.Provider>
596584
{menuKey===SiderKey.JS&&(
597585
<>
586+
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
587+
{props.preloadComp.getPropertyView()}
588+
<PreloadDiv
589+
onClick={()=>dispatch(
590+
setEditorExternalStateAction({
591+
showScriptsAndStyleModal:true,
592+
})
593+
)}
594+
>
595+
<LeftPreloadIcon/>
596+
{trans("leftPanel.toolbarPreload")}
597+
</PreloadDiv>
598+
598599
{props.preloadComp.getJSLibraryPropertyView()}
599600
</>
600601
)}

0 commit comments

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