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

Commit0ece0bf

Browse files
author
FalkWolsky
committed
Button Hover fix, Text Weight, Background, Tabs
1 parenta6685f9 commit0ece0bf

File tree

13 files changed

+689
-61
lines changed

13 files changed

+689
-61
lines changed

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
2626
margin:${buttonStyle.margin};
2727
padding:${buttonStyle.padding};
2828
29-
:hover,
30-
:focus {
29+
&:hover,
30+
&:focus {
3131
color:${buttonStyle.text};
3232
background-color:${hoverColor};
3333
border-color:${buttonStyle.border===buttonStyle.background
3434
?hoverColor
3535
:buttonStyle.border}!important;
3636
}
37-
:active {
37+
&:active {
3838
color:${buttonStyle.text};
3939
background-color:${activeColor};
4040
border-color:${buttonStyle.border===buttonStyle.background
@@ -55,15 +55,6 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
5555
align-items: center;
5656
overflow: hidden;
5757
gap: 6px;
58-
&:not(:disabled) {
59-
&:hover,
60-
&:focus {
61-
background-color:${(props)=>props.$buttonStyle ?genHoverColor(props.$buttonStyle.background) :''} !important;
62-
}
63-
:active {
64-
background-color:${(props)=>props.$buttonStyle ?genActiveColor(props.$buttonStyle.background) :''} !important;
65-
}
66-
}
6758
span {
6859
overflow: hidden;
6960
text-overflow: ellipsis;

‎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
/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const childrenMap = {
3030
0:{view:{layout:{},items:{}}},
3131
}),
3232
footer:SimpleContainerComp,
33-
3433
showHeader:BoolControl.DEFAULT_TRUE,
3534
showBody:BoolControl.DEFAULT_TRUE,
3635
showFooter:BoolControl,
@@ -108,7 +107,7 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
108107
returnlastValueIfEqual(this,"exposing_node",fromRecord(allNodes),checkEquals);
109108
}
110109

111-
getPropertyView():ControlNode{
110+
getPropertyView():ControlNode{
112111
return[this.areaPropertyView(),this.heightPropertyView()];
113112
}
114113

@@ -127,6 +126,7 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
127126
stylePropertyView(){
128127
returnthis.children.style.getPropertyView();
129128
}
129+
130130
}
131131

132132
functioncheckEquals(node1:Node<unknown>,node2:Node<unknown>):boolean{

0 commit comments

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