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

Commite616845

Browse files
authored
Merge pull request#637 from lowcoder-org/feature/styletypes-improvement
Feature/styletypes improvement
2 parentsc8282d1 +952da2f commite616845

File tree

15 files changed

+760
-73
lines changed

15 files changed

+760
-73
lines changed

‎client/packages/lowcoder-design/src/components/colorSelect/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,4 @@ const ColorBlock = styled.div<{ $color: string }>`
177177
cursor: pointer;
178178
background-clip: content-box;
179179
overflow: hidden;
180-
`;
180+
`;

‎client/packages/lowcoder/src/components/ColorPicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
197197
)}
198198
{colorKey==="margin"&&(
199199
<divclassName="config-input">
200-
<Margin$margin={defaultMargin||"3px"}>
200+
<Margin$margin={defaultMargin||"4px"}>
201201
<div>
202202
<ExpandIcontitle=""/>
203203
</div>
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
215215
)}
216216
{colorKey==="padding"&&(
217217
<divclassName="config-input">
218-
<Padding$padding={defaultPadding||"3px"}>
218+
<Padding$padding={defaultPadding||"4px"}>
219219
<div>
220220
<CompressIcontitle=""/>
221221
</div>

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,30 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1616
margin:${buttonStyle.margin};
1717
padding:${buttonStyle.padding};
1818
&:not(:disabled) {
19-
// click animation color
2019
--antd-wave-shadow-color:${buttonStyle.border};
2120
border-color:${buttonStyle.border};
2221
color:${buttonStyle.text};
22+
font-size:${buttonStyle.textSize};
23+
font-weight:${buttonStyle.textWeight};
2324
background-color:${buttonStyle.background};
2425
border-radius:${buttonStyle.radius};
2526
margin:${buttonStyle.margin};
2627
padding:${buttonStyle.padding};
2728
28-
:hover,
29-
:focus {
29+
&:hover,
30+
&:focus {
3031
color:${buttonStyle.text};
3132
background-color:${hoverColor};
3233
border-color:${buttonStyle.border===buttonStyle.background
3334
?hoverColor
34-
:buttonStyle.border};
35+
:buttonStyle.border}!important;
3536
}
36-
37-
:active {
37+
&:active {
3838
color:${buttonStyle.text};
3939
background-color:${activeColor};
4040
border-color:${buttonStyle.border===buttonStyle.background
4141
?activeColor
42-
:buttonStyle.border};
42+
:buttonStyle.border}!important;
4343
}
4444
}
4545
}
@@ -54,11 +54,11 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
5454
justify-content: center;
5555
align-items: center;
5656
overflow: hidden;
57+
gap: 6px;
5758
span {
5859
overflow: hidden;
5960
text-overflow: ellipsis;
6061
}
61-
gap: 6px;
6262
`;
6363

6464
exportconstButtonCompWrapper=styled.div<{disabled:boolean}>`

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ export const ContainerBaseComp = (function () {
4141
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
4242
<><Sectionname={sectionNames.layout}>
4343
{children.container.getPropertyView()}
44-
</Section><Sectionname={sectionNames.style}>{children.container.stylePropertyView()}</Section></>
44+
</Section>
45+
<Sectionname={sectionNames.style}>
46+
{children.container.stylePropertyView()}
47+
</Section>
48+
</>
4549
)}
4650
</>
4751
);

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
318318
constdefaultGrid=
319319
useContext(ThemeContext)?.theme?.gridColumns||
320320
defaultTheme?.gridColumns||
321-
"24";
321+
"12";
322322
/////////////////////
323323
constisDroppable=
324324
useContext(IsDroppable)&&(_.isNil(props.isDroppable)||props.isDroppable)&&!readOnly;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
1212
import{hiddenPropertyView}from"comps/utils/propertyUtils";
1313
import{trans}from"i18n";
1414
import{EditorContext}from"comps/editorState";
15+
import*asReactDOMClientfrom'react-dom/client';
1516

1617
// TODO: eventually to embedd in container so we have styling?
1718
// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -59,9 +60,8 @@ const defaultCode = `
5960
);
6061
6162
const ConnectedComponent =${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
62-
63-
const container = document.getElementById("root");
64-
const root = createRoot(container);
63+
const container = document.getElementById('root');
64+
const root = ReactDOMClient.createRoot(container);
6565
root.render(<ConnectedComponent />);
6666
6767
</script>

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
33
import{CompAction,CompActionTypes,deleteCompAction,wrapChildAction}from"lowcoder-core";
44
import{DispatchType,RecordConstructorToView,wrapDispatch}from"lowcoder-core";
55
import{AutoHeightControl}from"comps/controls/autoHeightControl";
6-
import{stringExposingStateControl}from"comps/controls/codeStateControl";
6+
import{BooleanStateControl,booleanExposingStateControl,stringExposingStateControl}from"comps/controls/codeStateControl";
77
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
88
import{TabsOptionControl}from"comps/controls/optionsControl";
99
import{styleControl}from"comps/controls/styleControl";
@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
1212
import{addMapChildAction}from"comps/generators/sameTypeMap";
1313
import{NameConfig,NameConfigHidden,withExposingConfigs}from"comps/generators/withExposing";
1414
import{NameGenerator}from"comps/utils";
15-
import{Section,sectionNames}from"lowcoder-design";
15+
import{ControlNode,Section,sectionNames}from"lowcoder-design";
1616
import{HintPlaceHolder}from"lowcoder-design";
1717
import_from"lodash";
1818
importReact,{useCallback,useContext}from"react";
@@ -33,6 +33,9 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
3333
import{EditorContext}from"comps/editorState";
3434
import{checkIsMobile}from"util/commonUtils";
3535
import{messageInstance}from"lowcoder-design";
36+
import{show}from"antd-mobile/es/components/dialog/show";
37+
import{BoolControl}from"@lowcoder-ee/index.sdk";
38+
import{Switch}from"antd";
3639

3740
constEVENT_OPTIONS=[
3841
{
@@ -52,27 +55,40 @@ const childrenMap = {
5255
autoHeight:AutoHeightControl,
5356
onEvent:eventHandlerControl(EVENT_OPTIONS),
5457
disabled:BoolCodeControl,
58+
showHeader:BooleanStateControl,
5559
style:styleControl(TabContainerStyle),
5660
};
5761

5862
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
5963
typeTabbedContainerProps=ViewProps&{dispatch:DispatchType};
60-
64+
6165
constgetStyle=(style:TabContainerStyleType)=>{
6266
returncss`
6367
&.ant-tabs {
64-
border:1px solid${style.border};
68+
border:${style.borderWidth} solid${style.border};
6569
border-radius:${style.radius};
6670
overflow: hidden;
67-
padding:${style.padding};
71+
padding:${style.padding};
6872
6973
> .ant-tabs-content-holder> .ant-tabs-content>div> .react-grid-layout {
7074
background-color:${style.background};
7175
border-radius:0;
76+
77+
background-image:${style.backgroundImage};
78+
background-repeat:${style.backgroundImageRepeat};
79+
background-size:${style.backgroundImageSize};
80+
background-position:${style.backgroundImagePosition};
81+
background-origin:${style.backgroundImageOrigin};
82+
7283
}
7384
7485
> .ant-tabs-nav {
7586
background-color:${style.headerBackground};
87+
background-image:${style.headerBackgroundImage};
88+
background-repeat:${style.headerBackgroundImageRepeat};
89+
background-size:${style.headerBackgroundImageSize};
90+
background-position:${style.headerBackgroundImagePosition};
91+
background-origin:${style.headerBackgroundImageOrigin};
7692
7793
.ant-tabs-tab {
7894
div {
@@ -96,7 +112,11 @@ const getStyle = (style: TabContainerStyleType) => {
96112
`;
97113
};
98114

99-
constStyledTabs=styled(Tabs)<{$style:TabContainerStyleType;$isMobile?:boolean}>`
115+
constStyledTabs=styled(Tabs)<{
116+
$style:TabContainerStyleType;
117+
$isMobile?:boolean;
118+
$showHeader?:boolean;
119+
}>`
100120
&.ant-tabs {
101121
height: 100%;
102122
}
@@ -111,6 +131,7 @@ const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boo
111131
}
112132
113133
.ant-tabs-nav {
134+
display:${(props)=>(props.$showHeader ?"block" :"none")};
114135
padding: 0${(props)=>(props.$isMobile ?16 :24)}px;
115136
background: white;
116137
margin: 0px;
@@ -158,12 +179,10 @@ const TabbedContainer = (props: TabbedContainerProps) => {
158179
consteditorState=useContext(EditorContext);
159180
constmaxWidth=editorState.getAppSettings().maxWidth;
160181
constisMobile=checkIsMobile(maxWidth);
161-
constpaddingWidth=isMobile ?8 :20;
162-
163-
// log.debug("TabbedContainer. props: ", props);
182+
constshowHeader=props.showHeader.value;
183+
constpaddingWidth=isMobile ?8 :0;
164184

165185
consttabItems=visibleTabs.map((tab)=>{
166-
// log.debug("Tab. tab: ", tab, " containers: ", containers);
167186
constid=String(tab.id);
168187
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
169188
constcontainerProps=containers[id].children;
@@ -203,6 +222,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
203222
<StyledTabs
204223
activeKey={activeKey}
205224
$style={style}
225+
$showHeader={showHeader}
206226
onChange={(key)=>{
207227
if(key!==props.selectedTabKey.value){
208228
props.selectedTabKey.onChange(key);
@@ -220,6 +240,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
220240
);
221241
};
222242

243+
223244
exportconstTabbedContainerBaseComp=(function(){
224245
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
225246
return(
@@ -238,11 +259,12 @@ export const TabbedContainerBaseComp = (function () {
238259
})}
239260
{children.selectedTabKey.propertyView({label:trans("prop.defaultValue")})}
240261
</Section>
241-
262+
242263
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
243264
<Sectionname={sectionNames.interaction}>
244265
{children.onEvent.getPropertyView()}
245266
{disabledPropertyView(children)}
267+
{children.showHeader.propertyView({label:trans("prop.showHeader")})}
246268
{hiddenPropertyView(children)}
247269
</Section>
248270
)}
@@ -364,6 +386,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
364386
overrideautoHeight():boolean{
365387
returnthis.children.autoHeight.getView();
366388
}
389+
390+
367391
}
368392

369393
exportconstTabbedContainerComp=withExposingConfigs(TabbedContainerImplComp,[

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ const getStyle = (style: TextStyleType) => {
2626
border-radius:${(style.radius ?style.radius :"4px")};
2727
border:${(style.borderWidth ?style.borderWidth :"0px")} solid${style.border};
2828
color:${style.text};
29+
font-size:${style.textSize}!important;
30+
font-weight:${style.textWeight}!important;
2931
background-color:${style.background};
3032
.markdown-bodya {
3133
color:${style.links};

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
99
import{TriContainerViewProps}from"../triContainerComp/triContainerCompBuilder";
1010

1111
constgetStyle=(style:ContainerStyleType)=>{
12-
returncss`
12+
returncss`
1313
border-color:${style.border};
14+
border-width:${style.borderWidth};
1415
border-radius:${style.radius};
1516
overflow: hidden;
1617
// margin:${style.margin};
@@ -29,32 +30,64 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
2930
${(props)=>props.$style&&getStyle(props.$style)}
3031
`;
3132

32-
constHeaderInnerGrid=styled(InnerGrid)<{$backgroundColor:string}>`
33+
constHeaderInnerGrid=styled(InnerGrid)<{
34+
$backgroundColor:string
35+
$headerBackgroundImage:string;
36+
$headerBackgroundImageRepeat:string;
37+
$headerBackgroundImageSize:string;
38+
$headerBackgroundImagePosition:string;
39+
$headerBackgroundImageOrigin:string;
40+
}>`
3341
overflow: visible;
3442
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
3543
border-radius: 0;
44+
${(props)=>props.$headerBackgroundImage&&`background-image:${props.$headerBackgroundImage};`}
45+
${(props)=>props.$headerBackgroundImageRepeat&&`background-repeat:${props.$headerBackgroundImageRepeat};`}
46+
${(props)=>props.$headerBackgroundImageSize&&`background-size:${props.$headerBackgroundImageSize};`}
47+
${(props)=>props.$headerBackgroundImagePosition&&`background-position:${props.$headerBackgroundImagePosition};`}
48+
${(props)=>props.$headerBackgroundImageOrigin&&`background-origin:${props.$headerBackgroundImageOrigin};`}
3649
`;
3750

3851
constBodyInnerGrid=styled(InnerGrid)<{
3952
$showBorder:boolean;
4053
$backgroundColor:string;
4154
$borderColor:string;
55+
$backgroundImage:string;
56+
$backgroundImageRepeat:string;
57+
$backgroundImageSize:string;
58+
$backgroundImagePosition:string;
59+
$backgroundImageOrigin:string;
4260
}>`
4361
border-top:${(props)=>`${props.$showBorder ?1 :0}px solid${props.$borderColor}`};
4462
flex: 1;
4563
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
4664
border-radius: 0;
65+
${(props)=>props.$backgroundImage&&`background-image:${props.$backgroundImage};`}
66+
${(props)=>props.$backgroundImageRepeat&&`background-repeat:${props.$backgroundImageRepeat};`}
67+
${(props)=>props.$backgroundImageSize&&`background-size:${props.$backgroundImageSize};`}
68+
${(props)=>props.$backgroundImagePosition&&`background-position:${props.$backgroundImagePosition};`}
69+
${(props)=>props.$backgroundImageOrigin&&`background-origin:${props.$backgroundImageOrigin};`}
4770
`;
4871

4972
constFooterInnerGrid=styled(InnerGrid)<{
5073
$showBorder:boolean;
5174
$backgroundColor:string;
5275
$borderColor:string;
76+
$footerBackgroundImage:string;
77+
$footerBackgroundImageRepeat:string;
78+
$footerBackgroundImageSize:string;
79+
$footerBackgroundImagePosition:string;
80+
$footerBackgroundImageOrigin:string;
5381
}>`
5482
border-top:${(props)=>`${props.$showBorder ?1 :0}px solid${props.$borderColor}`};
5583
overflow: visible;
5684
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
5785
border-radius: 0;
86+
${(props)=>props.$footerBackgroundImage&&`background-image:${props.$footerBackgroundImage};`}
87+
${(props)=>props.$footerBackgroundImageRepeat&&`background-repeat:${props.$footerBackgroundImageRepeat};`}
88+
${(props)=>props.$footerBackgroundImageSize&&`background-size:${props.$footerBackgroundImageSize};`}
89+
${(props)=>props.$footerBackgroundImagePosition&&`background-position:${props.$footerBackgroundImagePosition};`}
90+
${(props)=>props.$footerBackgroundImageOrigin&&`background-origin:${props.$footerBackgroundImageOrigin};`}
5891
`;
5992

6093
exporttypeTriContainerProps=TriContainerViewProps&{
@@ -75,7 +108,7 @@ export function TriContainer(props: TriContainerProps) {
75108
consteditorState=useContext(EditorContext);
76109
constmaxWidth=editorState.getAppSettings().maxWidth;
77110
constisMobile=checkIsMobile(maxWidth);
78-
constpaddingWidth=isMobile ?7 :19;
111+
constpaddingWidth=isMobile ?8 :0;
79112

80113
return(
81114
<divstyle={{padding:style.margin,height:'100%'}}>
@@ -91,7 +124,13 @@ export function TriContainer(props: TriContainerProps) {
91124
containerPadding={[paddingWidth,3]}
92125
showName={{bottom:showBody||showFooter ?20 :0}}
93126
$backgroundColor={style?.headerBackground}
127+
$headerBackgroundImage={style?.headerBackgroundImage}
128+
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
129+
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
130+
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
131+
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
94132
style={{padding:style.containerheaderpadding}}
133+
95134
/>
96135
</BackgroundColorContext.Provider>
97136
)}
@@ -110,6 +149,11 @@ export function TriContainer(props: TriContainerProps) {
110149
hintPlaceholder={props.hintPlaceholder??HintPlaceHolder}
111150
$backgroundColor={style?.background}
112151
$borderColor={style?.border}
152+
$backgroundImage={style?.backgroundImage}
153+
$backgroundImageRepeat={style?.backgroundImageRepeat}
154+
$backgroundImageSize={style?.backgroundImageSize}
155+
$backgroundImagePosition={style?.backgroundImagePosition}
156+
$backgroundImageOrigin={style?.backgroundImageOrigin}
113157
style={{padding:style.containerbodypadding}}
114158
/>
115159
</BackgroundColorContext.Provider>
@@ -126,6 +170,11 @@ export function TriContainer(props: TriContainerProps) {
126170
containerPadding={showBody||showHeader ?[paddingWidth,3.5] :[paddingWidth,3]}
127171
showName={{top:showHeader||showBody ?20 :0}}
128172
$backgroundColor={style?.footerBackground}
173+
$footerBackgroundImage={style?.footerBackgroundImage}
174+
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
175+
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
176+
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
177+
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
129178
$borderColor={style?.border}
130179
style={{padding:style.containerfooterpadding}}
131180
/>

0 commit comments

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