Skip to content

Styling fixes/improvements #649

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 6 commits into from
Jan 19, 2024
Merged

Styling fixes/improvements #649

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
951b904
fix repositoryUrl check in workflows
raheeliftikhar5 Jan 19, 2024
54cf4db
fix styles for sortable column header
raheeliftikhar5 Jan 19, 2024
f341397
adding background styles in container
raheeliftikhar5 Jan 19, 2024
e818a27
adding background styles in container
raheeliftikhar5 Jan 19, 2024
c063b69
updated tabs container styles
raheeliftikhar5 Jan 19, 2024
a0199e4
handle form height based for fixed height setting
raheeliftikhar5 Jan 19, 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
Prev Previous commit
Next Next commit
updated tabs container styles
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Jan 19, 2024
commit c063b69d0a6d85ff2160f97f681261a60fd9cead
86 changes: 60 additions & 26 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 @@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
import { TabsOptionControl } from "comps/controls/optionsControl";
import { styleControl } from "comps/controls/styleControl";
import { TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
import { addMapChildAction } from "comps/generators/sameTypeMap";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
Expand All @@ -33,9 +33,6 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
import { EditorContext } from "comps/editorState";
import { checkIsMobile } from "util/commonUtils";
import { messageInstance } from "lowcoder-design";
import { show } from "antd-mobile/es/components/dialog/show";
import { BoolControl } from "@lowcoder-ee/index.sdk";
import { Switch } from "antd";

const EVENT_OPTIONS = [
{
Expand All @@ -57,38 +54,52 @@ const childrenMap = {
disabled: BoolCodeControl,
showHeader: withDefault(BooleanStateControl, "true"),
style: styleControl(TabContainerStyle),
headerStyle: styleControl(ContainerHeaderStyle),
bodyStyle: styleControl(ContainerBodyStyle),
};

type ViewProps = RecordConstructorToView<typeof childrenMap>;
type TabbedContainerProps = ViewProps & { dispatch: DispatchType };

const getStyle = (style: TabContainerStyleType) => {
const getStyle = (
style: TabContainerStyleType,
headerStyle: ContainerHeaderStyleType,
bodyStyle: ContainerBodyStyleType,
) => {
return css`
&.ant-tabs {
overflow: hidden;
border: ${style.borderWidth} solid ${style.border};
border-radius: ${style.radius};
overflow: hidden;
padding: ${style.padding};
background-color: ${style.background};
background-image: ${style.backgroundImage};
background-repeat: ${style.backgroundImageRepeat};
background-size: ${style.backgroundImageSize};
background-position: ${style.backgroundImagePosition};
background-origin: ${style.backgroundImageOrigin};

> .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
height: 100%;
.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-content-holder > .ant-tabs-content > div > .react-grid-layout {
background-color: ${style.background};
border-radius: 0;

background-image: ${style.backgroundImage};
background-repeat: ${style.backgroundImageRepeat};
background-size: ${style.backgroundImageSize};
background-position: ${style.backgroundImagePosition};
background-origin: ${style.backgroundImageOrigin};

}
}

> .ant-tabs-nav {
background-color: ${style.headerBackground};
background-image: ${style.headerBackgroundImage};
background-repeat: ${style.headerBackgroundImageRepeat};
background-size: ${style.headerBackgroundImageSize};
background-position: ${style.headerBackgroundImagePosition};
background-origin: ${style.headerBackgroundImageOrigin};
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 {
Expand All @@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => {
};

const StyledTabs = styled(Tabs)<{
$style: TabContainerStyleType;
$style: TabContainerStyleType;
$headerStyle: ContainerHeaderStyleType;
$bodyStyle: ContainerBodyStyleType;
$isMobile?: boolean;
$showHeader?: boolean;
}>`
Expand Down Expand Up @@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{
margin-right: -24px;
}

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

const ContainerInTab = (props: ContainerBaseProps) => {
Expand All @@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => {
};

const TabbedContainer = (props: TabbedContainerProps) => {
let { tabs, containers, dispatch, style } = props;
let {
tabs,
containers,
dispatch,
style,
headerStyle,
bodyStyle,
} = props;

const visibleTabs = tabs.filter((tab) => !tab.hidden);
const selectedTab = visibleTabs.find((tab) => tab.key === props.selectedTabKey.value);
Expand Down Expand Up @@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
key: tab.key,
forceRender: true,
children: (
<BackgroundColorContext.Provider value={props.style.background}>
<BackgroundColorContext.Provider value={bodyStyle.background}>
<ContainerInTab
layout={containerProps.layout.getView()}
items={gridItemCompToGridItems(containerProps.items.getView())}
Expand All @@ -222,6 +246,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
<StyledTabs
activeKey={activeKey}
$style={style}
$headerStyle={headerStyle}
$bodyStyle={bodyStyle}
$showHeader={showHeader}
onChange={(key) => {
if (key !== props.selectedTabKey.value) {
Expand Down Expand Up @@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
{children.showHeader.getView() && (
<Section name={"Header Style"}>
{ children.headerStyle.getPropertyView() }
</Section>
)}
<Section name={"Body Style"}>
{ children.bodyStyle.getPropertyView() }
</Section>
</>
)}
</>
Expand Down