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

Commit c86ba27

Browse files
Merge pull request #2046 from iamfaran/feat/1867-table-btn-styles
[Feat]: #1867 add styles for the button column
2 parents 702f9f2 + 32b706f commit c86ba27

File tree

3 files changed

+26
-6
lines changed

3 files changed

+26
-6
lines changed

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
44
import { dropdownControl } from "comps/controls/dropdownControl";
55
import { disabledPropertyView, loadingPropertyView } from "comps/utils/propertyUtils";
66
import { trans } from "i18n";
7-
import { useStyle } from "comps/controls/styleControl";
8-
import { ButtonStyle } from "comps/controls/styleControlConstants";
7+
import { styleControl,useStyle } from "comps/controls/styleControl";
8+
import { ButtonStyle,TableColumnButtonStyle } from "comps/controls/styleControlConstants";
99
import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
1010
import { IconControl } from "comps/controls/iconControl";
1111
import { hasIcon } from "comps/utils";
@@ -58,10 +58,11 @@ const childrenMap = {
5858
disabled: BoolCodeControl,
5959
prefixIcon: IconControl,
6060
suffixIcon: IconControl,
61+
style: styleControl(TableColumnButtonStyle, 'style', { boldTitle: true }),
6162
};
6263

6364
const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstructorToComp<typeof childrenMap>>}) => {
64-
const style = useStyle(ButtonStyle);
65+
const themeButtonStyle = useStyle(ButtonStyle);
6566
const hasText = !!props.text;
6667
const hasPrefixIcon = hasIcon(props.prefixIcon);
6768
const hasSuffixIcon = hasIcon(props.suffixIcon);
@@ -85,7 +86,10 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
8586
onClick={handleClick}
8687
loading={props.loading}
8788
disabled={props.disabled}
88-
$buttonStyle={props.buttonType === "primary" ? style : undefined}
89+
$buttonStyle={props.buttonType === "primary" ? ({
90+
...themeButtonStyle,
91+
...(props.style as any),
92+
} as any) : undefined}
8993
style={buttonStyle}
9094
icon={hasPrefixIcon ? props.prefixIcon : undefined}
9195
>
@@ -120,6 +124,7 @@ const ButtonCompTmp = (function () {
120124
})}
121125
{loadingPropertyView(children)}
122126
{disabledPropertyView(children)}
127+
{children.style.getPropertyView()}
123128
{children.onClick.propertyView()}
124129
</>
125130
))

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -937,11 +937,12 @@ function calcColors<ColorMap extends Record<string, string>>(
937937
return res as ColorMap;
938938
}
939939

940-
const TitleDiv = styled.div`
940+
const TitleDiv = styled.div<{$boldTitle?: boolean}>`
941941
display: flex;
942942
justify-content: space-between;
943943
font-size: 13px;
944944
line-height: 1;
945+
font-weight: ${(props) => (props.$boldTitle ? 600 : 400)};
945946
946947
span:nth-of-type(2) {
947948
cursor: pointer;
@@ -1149,6 +1150,7 @@ const useThemeStyles = (
11491150
export function styleControl<T extends readonly SingleColorConfig[]>(
11501151
colorConfigs: T,
11511152
styleKey: string = '',
1153+
options?: { boldTitle?: boolean },
11521154
) {
11531155
type ColorMap = { [K in Names<T>]: string };
11541156
const childrenMap: any = {};
@@ -1268,7 +1270,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
12681270

12691271
return (
12701272
<>
1271-
<TitleDiv>
1273+
<TitleDiv$boldTitle={options?.boldTitle}>
12721274
<span>{label}</span>
12731275
{showReset && (
12741276
<span

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2371,6 +2371,18 @@ export const RichTextEditorStyle = [
23712371
BORDER_WIDTH,
23722372
] as const;
23732373

2374+
export const TableColumnButtonStyle = [
2375+
getBackground('primary'),
2376+
{
2377+
name: "text",
2378+
label: trans("style.text"),
2379+
color: "#000000",
2380+
},
2381+
PADDING,
2382+
BORDER,
2383+
] as const;
2384+
2385+
23742386
export type QRCodeStyleType = StyleConfigType<typeof QRCodeStyle>;
23752387
export type TimeLineStyleType = StyleConfigType<typeof TimeLineStyle>;
23762388
export type AvatarStyleType = StyleConfigType<typeof AvatarStyle>;
@@ -2437,6 +2449,7 @@ export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
24372449
export type TableColumnLinkStyleType = StyleConfigType<
24382450
typeof TableColumnLinkStyle
24392451
>;
2452+
export type TableColumnButtonStyleType = StyleConfigType<typeof TableColumnButtonStyle>;
24402453
export type TableSummaryRowStyleType = StyleConfigType<typeof TableSummaryRowStyle>;
24412454
export type FileStyleType = StyleConfigType<typeof FileStyle>;
24422455
export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /