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

Add properties and CSS controls to components#684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionsclient/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@
},
"scripts": {
"start": "yarn workspace lowcoder start",
"start-win":"LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
"start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
"start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
"build": "yarn node ./scripts/build.js",
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -108,6 +108,7 @@ export const columnChildrenMap = {
textSize: withDefault(RadiusControl, ""),
textWeight: withDefault(StringControl, "normal"),
fontFamily: withDefault(StringControl, "sans-serif"),
fontStyle: withDefault(StringControl, 'normal'),
cellColor: CellColorComp,
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
linkColor: withDefault(ColorControl, "#3377ff"),
Expand DownExpand Up@@ -155,10 +156,10 @@ export class ColumnComp extends ColumnInitComp {
)
);
}
if(action.type === CompActionTypes.CHANGE_VALUE) {
if(action.type === CompActionTypes.CHANGE_VALUE) {
const title = comp.children.title.unevaledValue;
const dataIndex = comp.children.dataIndex.getView();
if(!Boolean(title)) {
if(!Boolean(title)) {
comp.children.title.dispatchChangeValueAction(dataIndex);
}
}
Expand DownExpand Up@@ -223,10 +224,10 @@ export class ColumnComp extends ColumnInitComp {
})}
{this.children.autoWidth.getView() === "fixed" &&
this.children.width.propertyView({ label: trans("prop.width") })}

{(columnType === 'link' || columnType === 'links') && (
<>
<Divider style={{margin: '12px 0'}} />
<Divider style={{margin: '12px 0'}} />
{controlItem({}, (
<div>
<b>{"Link Style"}</b>
Expand All@@ -243,10 +244,10 @@ export class ColumnComp extends ColumnInitComp {
})}
</>
)}
<Divider style={{margin: '12px 0'}} />
<Divider style={{margin: '12px 0'}} />
{controlItem({}, (
<div>
<b>{"Column Style"}</b>
<b>{"Column Style"}</b>
</div>
))}
{this.children.background.propertyView({
Expand All@@ -260,29 +261,34 @@ export class ColumnComp extends ColumnInitComp {
})}
{this.children.borderWidth.propertyView({
label: trans('style.borderWidth'),
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
placeholder: '1px',
})}
{this.children.radius.propertyView({
label: trans('style.borderRadius'),
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
placeholder: '3px',
})}
{this.children.textSize.propertyView({
label: trans('style.textSize'),
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
placeholder: '14px',
})}
{this.children.textWeight.propertyView({
label: trans('style.textWeight'),
preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
placeholder: 'normal',
})}
{this.children.fontFamily.propertyView({
label: trans('style.fontFamily'),
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
placeholder: 'sans-serif',
})}
{this.children.fontStyle.propertyView({
label: trans('style.fontStyle'),
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
placeholder: 'normal'
})}
{this.children.textOverflow.getPropertyView()}
{this.children.cellColor.getPropertyView()}
</>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -51,7 +51,7 @@ const getStyle = (
style: TableStyleType,
rowStyle: TableRowStyleType,
headerStyle: TableHeaderStyleType,
toolbarStyle: TableToolbarStyleType
toolbarStyle: TableToolbarStyleType,
) => {
const background = genLinerGradient(style.background);
const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
Expand DownExpand Up@@ -140,7 +140,8 @@ const BackgroundWrapper = styled.div<{
background: ${(props) => props.$style.background} !important;
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
border-radius: ${(props) => props.$style.radius} !important;
padding: unset !important;
// padding: unset !important;
padding: ${(props) => props.$style.padding} !important
margin: ${(props) => props.$style.margin} !important;
overflow: scroll !important;
${(props) => props.$style}
Expand DownExpand Up@@ -209,18 +210,19 @@ const TableWrapper = styled.div<{
> .ant-table-thead {
> tr > th {
background-color: ${(props) => props.$headerStyle.headerBackground};

border-color: ${(props) => props.$headerStyle.border};
border-width: ${(props) => props.$headerStyle.borderWidth};
color: ${(props) => props.$headerStyle.headerText};
border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
${(props) =>
props.$fixedHeader && `
${(props) =>
props.$fixedHeader && `
position: sticky;
position: -webkit-sticky;
top: ${props.$fixedToolbar ? '47px' : '0'};
z-index: 99;
`
}
}

> div {
margin: ${(props) => props.$headerStyle.margin};
Expand All@@ -229,6 +231,8 @@ const TableWrapper = styled.div<{
font-size: ${(props) => props.$headerStyle.textSize};
font-weight: ${(props) => props.$headerStyle.textWeight};
font-family: ${(props) => props.$headerStyle.fontFamily};
font-style: ${(props) => props.$headerStyle.fontStyle};
color:${(props) => props.$headerStyle.text}
}
}

Expand DownExpand Up@@ -286,8 +290,8 @@ const TableWrapper = styled.div<{

// hide the bottom border of the last row
${(props) =>
props.$toolbarPosition !== "below" &&
`
props.$toolbarPosition !== "below" &&
`
tbody > tr:last-child > td {
border-bottom: unset;
}
Expand All@@ -300,10 +304,10 @@ const TableWrapper = styled.div<{
}
}

${(props) =>
${(props) =>
props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
`;

const TableTh = styled.th<{ width?: number }>`
overflow: hidden;

Expand All@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`

const TableTd = styled.td<{
$background: string;
$style: TableColumnStyleType & {rowHeight?: string};
$style: TableColumnStyleType & {rowHeight?: string};
$defaultThemeDetail: ThemeDetail;
$linkStyle?: TableColumnLinkStyleType;
$isEditing: boolean;
Expand DownExpand Up@@ -348,7 +352,8 @@ const TableTd = styled.td<{

${(props) => props.$tableSize === 'small' && `
padding: 1px 8px;
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
font-style:${props.$style.fontStyle} !important;
min-height: ${props.$style.rowHeight || '14px'};
line-height: 20px;
${!props.$autoHeight && `
Expand All@@ -358,7 +363,8 @@ const TableTd = styled.td<{
`};
${(props) => props.$tableSize === 'middle' && `
padding: 8px 8px;
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
font-style:${props.$style.fontStyle} !important;
min-height: ${props.$style.rowHeight || '24px'};
line-height: 24px;
${!props.$autoHeight && `
Expand All@@ -368,7 +374,8 @@ const TableTd = styled.td<{
`};
${(props) => props.$tableSize === 'large' && `
padding: 16px 16px;
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
font-style:${props.$style.fontStyle} !important;
min-height: ${props.$style.rowHeight || '48px'};
${!props.$autoHeight && `
overflow-y: auto;
Expand DownExpand Up@@ -444,7 +451,7 @@ const ResizeableTitle = (props: any) => {
draggableOpts={{ enableUserSelectHack: false }}
handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
<TitleResizeHandle
ref={ref}
ref={ref}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand DownExpand Up@@ -519,7 +526,7 @@ function TableCellView(props: {
const cellColor = cellColorFn({
currentCell: record[title.toLowerCase()],
});

const style = {
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
margin: columnStyle.margin || columnsStyle.margin,
Expand All@@ -528,8 +535,9 @@ function TableCellView(props: {
radius: columnStyle.radius || columnsStyle.radius,
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
textSize: columnStyle.textSize || columnsStyle.textSize,
textWeight: columnStyle.textWeight || columnsStyle.textWeight,
fontFamily: columnStyle.fontFamily || columnsStyle.fontFamily,
textWeight: columnsStyle.textWeight || columnStyle.textWeight,
fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
fontStyle: columnsStyle.fontStyle || columnStyle.fontStyle,
rowHeight: rowHeight,
}
let { background } = style;
Expand All@@ -554,7 +562,7 @@ function TableCellView(props: {
</TableTd>
);
}

return (
<TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
{tdView}
Expand DownExpand Up@@ -804,7 +812,7 @@ export function TableCompView(props: {

return (
<BackgroundColorContext.Provider value={style.background} >

<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
{toolbar.position === "above" && toolbarView}
<TableWrapper
Expand All@@ -826,11 +834,11 @@ export function TableCompView(props: {
: "OB_CHILDREN_KEY_PLACEHOLDER",
fixed: "left",
onExpand: (expanded) => {
if(expanded) {
handleChangeEvent('rowExpand')
} else {
handleChangeEvent('rowShrink')
}
if(expanded) {
handleChangeEvent('rowExpand')
} else {
handleChangeEvent('rowShrink')
}
}
}}
rowColorFn={compChildren.rowColor.getView() as any}
Expand All@@ -857,14 +865,14 @@ export function TableCompView(props: {
compChildren.loading.getView()
}
/>

<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
{expansion.expandModalView}
</SlotConfigContext.Provider>
</TableWrapper>
{toolbar.position === "below" && toolbarView}
</BackgroundWrapper>

</BackgroundColorContext.Provider>
);
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -210,7 +210,7 @@ const tableChildrenMap = {
toolbarStyle: styleControl(TableToolbarStyle),
headerStyle: styleControl(TableHeaderStyle),
searchText: StringControl,
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
viewModeResizable: BoolControl,
visibleResizables: BoolControl,
// sample data for regenerating columns
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -311,6 +311,7 @@ export function columnsToAntdFormat(
status: StatusType;
}[];
const title = renderTitle({ title: column.title, editable: column.editable });

return {
title: column.showTitle ? title : '',
titleText: column.title,
Expand All@@ -326,6 +327,7 @@ export function columnsToAntdFormat(
radius: column.radius,
textSize: column.textSize,
textWeight: column.textWeight,
fontStyle:column.fontStyle,
fontFamily: column.fontFamily,
borderWidth: column.borderWidth,
},
Expand Down
9 changes: 5 additions & 4 deletionsclient/packages/lowcoder/src/comps/comps/textComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,6 +29,7 @@ const getStyle = (style: TextStyleType) => {
font-size: ${style.textSize} !important;
font-weight: ${style.textWeight} !important;
font-family: ${style.fontFamily} !important;
font-style:${style.fontStyle} !important;
background-color: ${style.background};
.markdown-body a {
color: ${style.links};
Expand DownExpand Up@@ -111,7 +112,7 @@ const VerticalAlignmentOptions = [
] as const;


let TextTmpComp = (function () {
let TextTmpComp = (function () {

const childrenMap = {
text: stringExposingStateControl(
Expand All@@ -123,7 +124,7 @@ let TextTmpComp = (function () {
horizontalAlignment: alignWithJustifyControl(),
verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
style: styleControl(TextStyle),
margin: MarginControl,
margin: MarginControl,
padding: PaddingControl,
};
return new UICompBuilder(childrenMap, (props) => {
Expand All@@ -145,7 +146,7 @@ let TextTmpComp = (function () {
.setPropertyViewFn((children) => {
return (
<>

<Section name={sectionNames.basic}>
{children.type.propertyView({
label: trans("value"),
Expand All@@ -160,7 +161,7 @@ let TextTmpComp = (function () {
{hiddenPropertyView(children)}
</Section>
)}

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<>
<Section name={sectionNames.layout}>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -229,6 +229,7 @@ export function getStyle(style: InputLikeStyleType) {
font-size: ${style.textSize};
font-weight: ${style.textWeight};
font-family: ${style.fontFamily};
font-style:${style.fontStyle};
background-color: ${style.background};
border-color: ${style.border};

Expand DownExpand Up@@ -275,10 +276,10 @@ export const inputRefMethods = [
];

export function checkMentionListData(data: any) {
if(data === "") return {}
for(const key in data) {
check(data[key], ["array"], key,(node)=>{
check(node, ["string"],);
if(data === "") return {}
for(const key in data) {
check(data[key], ["array"], key,(node) =>{
check(node, ["string"],);
return node
})
}
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp