Skip to content

Fix/theme styling #871

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 12, 2024
Merged

Fix/theme styling #871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
719017c
table comp theme style applied
MenamAfzaal May 11, 2024
2caa4c1
inactive tab color changed
MenamAfzal May 11, 2024
b2fbcee
table styling changes
MenamAfzaal May 11, 2024
16cc3d4
table styling changes
MenamAfzaal May 11, 2024
5a4e6b7
background image adjusted
MenamAfzal May 11, 2024
4230faf
Merge branch 'fix/theme-styling' of https://github.com/MenamAfzal/low…
MenamAfzal May 11, 2024
e104575
border width added by default
MenamAfzal May 11, 2024
a6dfc4e
Merge branch 'dev' into fix/theme-styling
FalkWolsky May 11, 2024
59613ad
pull from dev
MenamAfzaal May 12, 2024
bdaad8d
error resolved
MenamAfzaal May 12, 2024
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
41 changes: 3 additions & 38 deletions client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const getStyle = (style: ContainerStyleType) => {
overflow: hidden;
padding: ${style.padding};
${style.background && `background-color: ${style.background};`}
${style.backgroundImage && `background-image: ${style.backgroundImage};`}
${style.backgroundImage && `background-image: url(${style.backgroundImage});`}
${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
Expand All @@ -49,20 +49,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`

const HeaderInnerGrid = styled(InnerGrid)<{
$backgroundColor: string
$headerBackgroundImage: string;
$headerBackgroundImageRepeat: string;
$headerBackgroundImageSize: string;
$headerBackgroundImagePosition: string;
$headerBackgroundImageOrigin: string;
}>`
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
`;

const SiderInnerGrid = styled(InnerGrid)<{
Expand All @@ -76,7 +66,7 @@ const SiderInnerGrid = styled(InnerGrid)<{
overflow: auto;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$siderBackgroundImage && `background-image: ${props.$siderBackgroundImage};`}
${(props) => props.$siderBackgroundImage && `background-image: url(${props.$siderBackgroundImage});`}
${(props) => props.$siderBackgroundImageRepeat && `background-repeat: ${props.$siderBackgroundImageRepeat};`}
${(props) => props.$siderBackgroundImageSize && `background-size: ${props.$siderBackgroundImageSize};`}
${(props) => props.$siderBackgroundImagePosition && `background-position: ${props.$siderBackgroundImagePosition};`}
Expand All @@ -88,21 +78,11 @@ const BodyInnerGrid = styled(InnerGrid)<{
$backgroundColor: string;
$borderColor: string;
$borderWidth: string;
$backgroundImage: string;
$backgroundImageRepeat: string;
$backgroundImageSize: string;
$backgroundImagePosition: string;
$backgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
flex: 1;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
`;

const FooterInnerGrid = styled(InnerGrid)<{
Expand All @@ -120,7 +100,7 @@ const FooterInnerGrid = styled(InnerGrid)<{
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`}
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
Expand Down Expand Up @@ -219,11 +199,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
containerPadding={[0, 0]}
showName={{ bottom: showFooter ? 20 : 0 }}
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
style={{ padding: headerStyle.containerHeaderPadding }} />
</Header>
</BackgroundColorContext.Provider>
Expand Down Expand Up @@ -286,11 +261,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
$backgroundColor={bodyStyle?.background || 'transparent'}
$borderColor={style?.border}
$borderWidth={style?.borderWidth}
$backgroundImage={bodyStyle?.backgroundImage}
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
$backgroundImageSize={bodyStyle?.backgroundImageSize}
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
style={{ padding: bodyStyle.containerBodyPadding }} />
)}
</ScrollBar>
Expand Down Expand Up @@ -353,11 +323,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
$backgroundColor={bodyStyle?.background || 'transparent'}
$borderColor={style?.border}
$borderWidth={style?.borderWidth}
$backgroundImage={bodyStyle?.backgroundImage}
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
$backgroundImageSize={bodyStyle?.backgroundImageSize}
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
style={{ padding: bodyStyle.containerBodyPadding }} />
)}
</ScrollBar>
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const childrenMap = {
autoHeight: AutoHeightControl,
siderScrollbars: withDefault(BoolControl, false),
contentScrollbars: withDefault(BoolControl, false),
style: styleControl(ContainerStyle),
style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
headerStyle: styleControl(ContainerHeaderStyle),
siderStyle: styleControl(ContainerSiderStyle),
bodyStyle: styleControl(ContainerBodyStyle),
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ let StepControlBasicComp = (function () {
background-color: ${props.style.background};
border: ${props.style.borderWidth} solid ${props.style.border};
border-radius: ${props.style.radius};
background-image: ${props.style.backgroundImage};
background-image: url(${props.style.backgroundImage});
background-repeat: ${props.style.backgroundImageRepeat};
background-size: ${props.style.backgroundImageSize};
background-position: ${props.style.backgroundImagePosition};
Expand Down
14 changes: 9 additions & 5 deletions client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,17 @@ const getStyle = (
&,
> td {
background: ${genLinerGradient(rowStyle.background)};
border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
}
}

> tr:nth-of-type(2n) {
&,
> td {
background: ${alternateBackground};
border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
}
}

Expand Down Expand Up @@ -136,14 +140,15 @@ const BackgroundWrapper = styled.div<{
$style: TableStyleType;
$tableAutoHeight: boolean;
}>`
${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`}
background: ${(props) => props.$style.background} !important;
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
// border: ${(props) => `${props.$style.border} !important`};
border-radius: ${(props) => props.$style.radius} !important;
// padding: unset !important;
padding: ${(props) => props.$style.padding} !important
padding: ${(props) => props.$style.padding} !important;
margin: ${(props) => props.$style.margin} !important;
overflow: scroll !important;
border-style:${(props) => props.$style.borderStyle} !important;
border-width: ${(props) => `${props.$style.borderWidth} !important`};
${(props) => props.$style}
`;

Expand Down Expand Up @@ -339,7 +344,6 @@ const TableTd = styled.td<{
}
background: ${(props) => props.$background} !important;
border-color: ${(props) => props.$style.border} !important;
border-width: ${(props) => props.$style.borderWidth} !important;
border-radius: ${(props) => props.$style.radius};

padding: 0 !important;
Expand Down Expand Up @@ -533,7 +537,7 @@ function TableCellView(props: {
text: columnStyle.text || columnsStyle.text,
border: columnStyle.border || columnsStyle.border,
radius: columnStyle.radius || columnsStyle.radius,
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
// borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
textSize: columnStyle.textSize || columnsStyle.textSize,
textWeight: columnsStyle.textWeight || columnStyle.textWeight,
fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
Expand Down
8 changes: 4 additions & 4 deletions client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,12 +205,12 @@ const tableChildrenMap = {
pagination: PaginationControl,
sort: valueComp<Array<SortValue>>([]),
toolbar: TableToolbarComp,
style: styleControl(TableStyle),
rowStyle: styleControl(TableRowStyle),
style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
toolbarStyle: styleControl(TableToolbarStyle),
headerStyle: styleControl(TableHeaderStyle),
headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
searchText: StringControl,
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
columnsStyle: styleControl(TableColumnStyle),
viewModeResizable: BoolControl,
visibleResizables: BoolControl,
// sample data for regenerating columns
Expand Down
18 changes: 4 additions & 14 deletions client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const childrenMap = {
onEvent: eventHandlerControl(EVENT_OPTIONS),
disabled: BoolCodeControl,
showHeader: withDefault(BoolControl, true),
style: styleControl(TabContainerStyle),
style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
headerStyle: styleControl(ContainerHeaderStyle),
bodyStyle: styleControl(ContainerBodyStyle),
tabsGutter: withDefault(NumberControl, 32),
Expand All @@ -72,14 +72,15 @@ const getStyle = (
headerStyle: ContainerHeaderStyleType,
bodyStyle: ContainerBodyStyleType,
) => {
console.log("🚀 ~ style:", style)
return css`
&.ant-tabs {
overflow: hidden;
border: ${style.borderWidth} solid ${style.border};
border-radius: ${style.radius};
padding: ${style.padding};
background-color: ${style.background};
background-image: ${style.backgroundImage};
background-image: url(${style.backgroundImage});
background-repeat: ${style.backgroundImageRepeat};
background-size: ${style.backgroundImageSize};
background-position: ${style.backgroundImagePosition};
Expand All @@ -90,26 +91,15 @@ const getStyle = (
.react-grid-layout {
border-radius: 0;
background-color: ${bodyStyle.background || 'transparent'};
background-image: ${bodyStyle.backgroundImage};
background-repeat: ${bodyStyle.backgroundImageRepeat};
background-size: ${bodyStyle.backgroundImageSize};
background-position: ${bodyStyle.backgroundImagePosition};
background-origin: ${bodyStyle.backgroundImageOrigin};

}
}

> .ant-tabs-nav {
background-color: ${headerStyle.headerBackground || 'transparent'};
background-image: ${headerStyle.headerBackgroundImage};
background-repeat: ${headerStyle.headerBackgroundImageRepeat};
background-size: ${headerStyle.headerBackgroundImageSize};
background-position: ${headerStyle.headerBackgroundImagePosition};
background-origin: ${headerStyle.headerBackgroundImageOrigin};

.ant-tabs-tab {
div {
color: ${style.tabText};
color: #8b8fa3;
}

&.ant-tabs-tab-active div {
Expand Down
34 changes: 2 additions & 32 deletions client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const getStyle = (style: ContainerStyleType) => {
overflow: hidden;
padding: ${style.padding};
${style.background && `background-color: ${style.background};`}
${style.backgroundImage && `background-image: ${style.backgroundImage};`}
${style.backgroundImage && `background-image: url(${style.backgroundImage});`}
${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
Expand All @@ -35,42 +35,22 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`

const HeaderInnerGrid = styled(InnerGrid)<{
$backgroundColor: string
$headerBackgroundImage: string;
$headerBackgroundImageRepeat: string;
$headerBackgroundImageSize: string;
$headerBackgroundImagePosition: string;
$headerBackgroundImageOrigin: string;
}>`
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
`;

const BodyInnerGrid = styled(InnerGrid)<{
$showBorder: boolean;
$backgroundColor: string;
$borderColor: string;
$borderWidth: string;
$backgroundImage: string;
$backgroundImageRepeat: string;
$backgroundImageSize: string;
$backgroundImagePosition: string;
$backgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
flex: 1;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
`;

const FooterInnerGrid = styled(InnerGrid)<{
Expand All @@ -88,7 +68,7 @@ const FooterInnerGrid = styled(InnerGrid)<{
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`}
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
Expand Down Expand Up @@ -135,11 +115,6 @@ export function TriContainer(props: TriContainerProps) {
containerPadding={[paddingWidth, 3]}
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
style={{padding: headerStyle.containerHeaderPadding}}

/>
Expand All @@ -162,11 +137,6 @@ export function TriContainer(props: TriContainerProps) {
$backgroundColor={bodyStyle?.background || 'transparent'}
$borderColor={style?.border}
$borderWidth={style?.borderWidth}
$backgroundImage={bodyStyle?.backgroundImage}
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
$backgroundImageSize={bodyStyle?.backgroundImageSize}
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
style={{padding: bodyStyle.containerBodyPadding}}
/>
</ScrollBar>
Expand Down
2 changes: 1 addition & 1 deletion client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const childrenMap = {
showFooter: BoolControl,
autoHeight: AutoHeightControl,
scrollbars: withDefault(BoolControl, false),
style: styleControl(ContainerStyle),
style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
headerStyle: styleControl(ContainerHeaderStyle),
bodyStyle: styleControl(ContainerBodyStyle),
footerStyle: styleControl(ContainerFooterStyle),
Expand Down
Loading
Loading