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

Commitfaba3f7

Browse files
authored
Merge pull requestlowcoder-org#649 from raheeliftikhar5/table-fixes
Styling fixes/improvements
2 parents9da2673 +a0199e4 commitfaba3f7

File tree

11 files changed

+139
-126
lines changed

11 files changed

+139
-126
lines changed

‎.github/workflows/publish-lowcoder-cli.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
jobs:
1111
publish-package:
12-
if:${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
12+
if:${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
1313
runs-on:ubuntu-latest
1414
steps:
1515
-name:Checkout repository

‎.github/workflows/publish-lowcoder-comps.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
jobs:
1111
publish-package:
12-
if:${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
12+
if:${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
1313
runs-on:ubuntu-latest
1414
steps:
1515
-name:Checkout repository

‎.github/workflows/publish-lowcoder-core.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
jobs:
1111
publish-package:
12-
if:${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
12+
if:${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
1313
runs-on:ubuntu-latest
1414
steps:
1515
-name:Checkout repository

‎.github/workflows/publish-lowcoder-sdk.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
jobs:
1111
publish-package:
12-
if:${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
12+
if:${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
1313
runs-on:ubuntu-latest
1414
steps:
1515
-name:Checkout repository

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,17 @@ import log from "loglevel";
5757
import{DisabledContext}from"comps/generators/uiCompBuilder";
5858
import{LoadingOutlined}from"@ant-design/icons";
5959
import{messageInstance}from"lowcoder-design";
60+
import{styled}from"styled-components";
61+
62+
constFormWrapper=styled.div`
63+
height: 100%;
64+
.ant-spin-nested-loading {
65+
height: 100%;
66+
.ant-spin-container {
67+
height: 100%;
68+
}
69+
}
70+
`;
6071

6172
consteventOptions=[submitEvent]asconst;
6273

@@ -172,12 +183,18 @@ const FormBaseComp = (function () {
172183
returnnewContainerCompBuilder(childrenMap,(props,dispatch)=>{
173184
return(
174185
<DisabledContext.Providervalue={props.disabled}>
175-
<Spinindicator={loadingIcon}spinning={props.loading}>
176-
<TriContainer
177-
{...props}
178-
hintPlaceholder={<BodyPlaceholder{...props}dispatch={dispatch}/>}
179-
/>
180-
</Spin>
186+
<FormWrapper>
187+
<Spin
188+
indicator={loadingIcon}
189+
spinning={props.loading}
190+
style={{height:'100%'}}
191+
>
192+
<TriContainer
193+
{...props}
194+
hintPlaceholder={<BodyPlaceholder{...props}dispatch={dispatch}/>}
195+
/>
196+
</Spin>
197+
</FormWrapper>
181198
</DisabledContext.Provider>
182199
);
183200
})

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const columnChildrenMap = {
106106
borderWidth:withDefault(RadiusControl,""),
107107
radius:withDefault(RadiusControl,""),
108108
textSize:withDefault(RadiusControl,""),
109-
textWeight:withDefault(StringControl,"regular"),
109+
textWeight:withDefault(StringControl,"normal"),
110110
fontFamily:withDefault(StringControl,"sans-serif"),
111111
cellColor:CellColorComp,
112112
textOverflow:withDefault(TextOverflowControl,"ellipsis"),
@@ -276,7 +276,7 @@ export class ColumnComp extends ColumnInitComp {
276276
{this.children.textWeight.propertyView({
277277
label:trans('style.textWeight'),
278278
preInputNode:<StyledTextWeightIconas={TextWeigthIcon}title=""/>,
279-
placeholder:'regular',
279+
placeholder:'normal',
280280
})}
281281
{this.children.fontFamily.propertyView({
282282
label:trans('style.fontFamily'),

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,6 @@ const TableWrapper = styled.div<{
212212
border-color:${(props)=>props.$headerStyle.border};
213213
border-width:${(props)=>props.$headerStyle.borderWidth};
214214
color:${(props)=>props.$headerStyle.headerText};
215-
font-size:${(props)=>props.$headerStyle.textSize};
216-
font-weight:${(props)=>props.$headerStyle.textWeight};
217-
font-family:${(props)=>props.$headerStyle.fontFamily};
218215
border-inline-end:${(props)=>`${props.$headerStyle.borderWidth} solid${props.$headerStyle.border}`} !important;
219216
${(props)=>
220217
props.$fixedHeader&&`
@@ -227,6 +224,12 @@ const TableWrapper = styled.div<{
227224
228225
> div {
229226
margin:${(props)=>props.$headerStyle.margin};
227+
228+
&, .ant-table-column-title > div {
229+
font-size:${(props)=>props.$headerStyle.textSize};
230+
font-weight:${(props)=>props.$headerStyle.textWeight};
231+
font-family:${(props)=>props.$headerStyle.fontFamily};
232+
}
230233
}
231234
232235
&:last-child {
@@ -516,7 +519,7 @@ function TableCellView(props: {
516519
constcellColor=cellColorFn({
517520
currentCell:record[title.toLowerCase()],
518521
});
519-
522+
520523
conststyle={
521524
background:cellColor||rowColor||columnStyle.background||columnsStyle.background,
522525
margin:columnStyle.margin||columnsStyle.margin,

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

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo
77
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
88
import{TabsOptionControl}from"comps/controls/optionsControl";
99
import{styleControl}from"comps/controls/styleControl";
10-
import{TabContainerStyle,TabContainerStyleType,heightCalculator,widthCalculator}from"comps/controls/styleControlConstants";
10+
import{ContainerBodyStyle,ContainerBodyStyleType,ContainerHeaderStyle,ContainerHeaderStyleType,TabContainerStyle,TabContainerStyleType,heightCalculator,widthCalculator}from"comps/controls/styleControlConstants";
1111
import{sameTypeMap,UICompBuilder,withDefault}from"comps/generators";
1212
import{addMapChildAction}from"comps/generators/sameTypeMap";
1313
import{NameConfig,NameConfigHidden,withExposingConfigs}from"comps/generators/withExposing";
@@ -33,9 +33,6 @@ 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";
3936

4037
constEVENT_OPTIONS=[
4138
{
@@ -57,38 +54,52 @@ const childrenMap = {
5754
disabled:BoolCodeControl,
5855
showHeader:withDefault(BooleanStateControl,"true"),
5956
style:styleControl(TabContainerStyle),
57+
headerStyle:styleControl(ContainerHeaderStyle),
58+
bodyStyle:styleControl(ContainerBodyStyle),
6059
};
6160

6261
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
6362
typeTabbedContainerProps=ViewProps&{dispatch:DispatchType};
6463

65-
constgetStyle=(style:TabContainerStyleType)=>{
64+
constgetStyle=(
65+
style:TabContainerStyleType,
66+
headerStyle:ContainerHeaderStyleType,
67+
bodyStyle:ContainerBodyStyleType,
68+
)=>{
6669
returncss`
6770
&.ant-tabs {
71+
overflow: hidden;
6872
border:${style.borderWidth} solid${style.border};
6973
border-radius:${style.radius};
70-
overflow: hidden;
7174
padding:${style.padding};
75+
background-color:${style.background};
76+
background-image:${style.backgroundImage};
77+
background-repeat:${style.backgroundImageRepeat};
78+
background-size:${style.backgroundImageSize};
79+
background-position:${style.backgroundImagePosition};
80+
background-origin:${style.backgroundImageOrigin};
81+
82+
> .ant-tabs-content-holder> .ant-tabs-content> .ant-tabs-tabpane {
83+
height:100%;
84+
.react-grid-layout {
85+
border-radius:0;
86+
background-color:${bodyStyle.background||'transparent'};
87+
background-image:${bodyStyle.backgroundImage};
88+
background-repeat:${bodyStyle.backgroundImageRepeat};
89+
background-size:${bodyStyle.backgroundImageSize};
90+
background-position:${bodyStyle.backgroundImagePosition};
91+
background-origin:${bodyStyle.backgroundImageOrigin};
7292
73-
> .ant-tabs-content-holder> .ant-tabs-content>div> .react-grid-layout {
74-
background-color:${style.background};
75-
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-
93+
}
8394
}
8495
8596
> .ant-tabs-nav {
86-
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};
97+
background-color:${headerStyle.headerBackground||'transparent'};
98+
background-image:${headerStyle.headerBackgroundImage};
99+
background-repeat:${headerStyle.headerBackgroundImageRepeat};
100+
background-size:${headerStyle.headerBackgroundImageSize};
101+
background-position:${headerStyle.headerBackgroundImagePosition};
102+
background-origin:${headerStyle.headerBackgroundImageOrigin};
92103
93104
.ant-tabs-tab {
94105
div {
@@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => {
113124
};
114125

115126
constStyledTabs=styled(Tabs)<{
116-
$style:TabContainerStyleType;
127+
$style:TabContainerStyleType;
128+
$headerStyle:ContainerHeaderStyleType;
129+
$bodyStyle:ContainerBodyStyleType;
117130
$isMobile?:boolean;
118131
$showHeader?:boolean;
119132
}>`
@@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{
145158
margin-right: -24px;
146159
}
147160
148-
${(props)=>props.$style&&getStyle(props.$style)}
161+
${(props)=>props.$style&&getStyle(
162+
props.$style,
163+
props.$headerStyle,
164+
props.$bodyStyle,
165+
)}
149166
`;
150167

151168
constContainerInTab=(props:ContainerBaseProps)=>{
@@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => {
155172
};
156173

157174
constTabbedContainer=(props:TabbedContainerProps)=>{
158-
let{ tabs, containers, dispatch, style}=props;
175+
let{
176+
tabs,
177+
containers,
178+
dispatch,
179+
style,
180+
headerStyle,
181+
bodyStyle,
182+
}=props;
159183

160184
constvisibleTabs=tabs.filter((tab)=>!tab.hidden);
161185
constselectedTab=visibleTabs.find((tab)=>tab.key===props.selectedTabKey.value);
@@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
203227
key:tab.key,
204228
forceRender:true,
205229
children:(
206-
<BackgroundColorContext.Providervalue={props.style.background}>
230+
<BackgroundColorContext.Providervalue={bodyStyle.background}>
207231
<ContainerInTab
208232
layout={containerProps.layout.getView()}
209233
items={gridItemCompToGridItems(containerProps.items.getView())}
@@ -222,6 +246,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
222246
<StyledTabs
223247
activeKey={activeKey}
224248
$style={style}
249+
$headerStyle={headerStyle}
250+
$bodyStyle={bodyStyle}
225251
$showHeader={showHeader}
226252
onChange={(key)=>{
227253
if(key!==props.selectedTabKey.value){
@@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
277303
<Sectionname={sectionNames.style}>
278304
{children.style.getPropertyView()}
279305
</Section>
306+
{children.showHeader.getView()&&(
307+
<Sectionname={"Header Style"}>
308+
{children.headerStyle.getPropertyView()}
309+
</Section>
310+
)}
311+
<Sectionname={"Body Style"}>
312+
{children.bodyStyle.getPropertyView()}
313+
</Section>
280314
</>
281315
)}
282316
</>

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ const getStyle = (style: ContainerStyleType) => {
1818
padding:${style.padding};
1919
// width:${widthCalculator(style.margin)};
2020
// height:${heightCalculator(style.margin)};
21+
${style.background&&`background-color:${style.background};`}
22+
${style.backgroundImage&&`background-image:${style.backgroundImage};`}
23+
${style.backgroundImageRepeat&&`background-repeat:${style.backgroundImageRepeat};`}
24+
${style.backgroundImageSize&&`background-size:${style.backgroundImageSize};`}
25+
${style.backgroundImagePosition&&`background-position:${style.backgroundImagePosition};`}
26+
${style.backgroundImageOrigin&&`background-origin:${style.backgroundImageOrigin};`}
2127
`;
2228
};
2329

@@ -130,7 +136,7 @@ export function TriContainer(props: TriContainerProps) {
130136
minHeight="46px"
131137
containerPadding={[paddingWidth,3]}
132138
showName={{bottom:showBody||showFooter ?20 :0}}
133-
$backgroundColor={headerStyle?.headerBackground}
139+
$backgroundColor={headerStyle?.headerBackground||'transparent'}
134140
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
135141
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
136142
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
@@ -154,7 +160,7 @@ export function TriContainer(props: TriContainerProps) {
154160
(showHeader&&showFooter)||showHeader ?[paddingWidth,11.5] :[paddingWidth,11]
155161
}
156162
hintPlaceholder={props.hintPlaceholder??HintPlaceHolder}
157-
$backgroundColor={bodyStyle?.background}
163+
$backgroundColor={bodyStyle?.background||'transparent'}
158164
$borderColor={style?.border}
159165
$borderWidth={style?.borderWidth}
160166
$backgroundImage={bodyStyle?.backgroundImage}
@@ -177,7 +183,7 @@ export function TriContainer(props: TriContainerProps) {
177183
minHeight={showBody ?"47px" :"46px"}
178184
containerPadding={showBody||showHeader ?[paddingWidth,3.5] :[paddingWidth,3]}
179185
showName={{top:showHeader||showBody ?20 :0}}
180-
$backgroundColor={footerStyle?.footerBackground}
186+
$backgroundColor={footerStyle?.footerBackground||'transparent'}
181187
$footerBackgroundImage={footerStyle?.footerBackgroundImage}
182188
$footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
183189
$footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,7 @@ function calcColors<ColorMap extends Record<string, string>>(
393393
}
394394
if(isTextWeightConfig(config)){
395395
// TODO: remove default textWeight after added in theme in backend.
396-
res[name]=themeWithDefault[config.textWeight]||'regular';
396+
res[name]=themeWithDefault[config.textWeight]||'normal';
397397
}
398398
if(isFontFamilyConfig(config)){
399399
res[name]=themeWithDefault[config.fontFamily]||'sans-serif';

0 commit comments

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