Skip to content

Style changes by Imtanan #708

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 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 21 commits into from
Feb 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
37a901a
font style property created and added in textDisplay component
imtananikhwa Feb 14, 2024
8592695
text-area font syle added
imtananikhwa Feb 15, 2024
8fd726c
Text area font style added
imtananikhwa Feb 15, 2024
a603a57
Table column styles working
imtananikhwa Feb 15, 2024
e3463a0
Delete client/packages/lowcoder/vite.config.mts.timestamp-17080052833…
imtananikhwa Feb 17, 2024
4380582
Merge pull request #684 from imtananikhwa/imtanan-task1
FalkWolsky Feb 17, 2024
0886f58
Controls added to divider, button comp, dropdown, nav ,link & mention…
imtananikhwa Feb 17, 2024
12b4551
Merge branch 'imtanan-task1' of https://github.com/imtananikhwa/lowco…
imtananikhwa Feb 17, 2024
5c6a0e1
Merge pull request #686 from imtananikhwa/imtanan-task1
FalkWolsky Feb 18, 2024
5a4e1c4
Common style config added, number input component updated, link compo…
imtananikhwa Feb 20, 2024
a055656
Creating function that helps to replace style from common style array…
imtananikhwa Feb 21, 2024
1d42ee8
Merge pull request #698 from imtananikhwa/imtanan-task1
FalkWolsky Feb 21, 2024
f556fa7
nav component issue fixes, component updates in progress
imtananikhwa Feb 22, 2024
8a63065
Toggle button border Width fixes
imtananikhwa Feb 22, 2024
7b6dda6
FOnt added for testing, circle progress and progress updated
imtananikhwa Feb 22, 2024
cac08a4
File upload component styling and controls added
imtananikhwa Feb 22, 2024
b31e606
Merge pull request #700 from imtananikhwa/imtanan-task1
FalkWolsky Feb 22, 2024
8c7c873
Radio component styling added
imtananikhwa Feb 23, 2024
67d578c
Checkbox, radio input styles complete, select styling in progress
imtananikhwa Feb 23, 2024
f5d941e
Merge pull request #705 from imtananikhwa/imtanan-task1
FalkWolsky Feb 23, 2024
42bb266
Merge branch 'dev' into style-changes-imtaman
FalkWolsky Feb 24, 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
1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff 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
4 changes: 4 additions & 0 deletions client/packages/lowcoder/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
<meta name="theme-color" content="#000000" />
<meta property="iframely:title" content="Lowcoder" />
<meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
<!-- Added Montserrat google font link to test font family style property for components -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>
html,
body {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
return css`
&&& {
border-radius: ${buttonStyle.radius};
border-width:${buttonStyle.borderWidth};
margin: ${buttonStyle.margin};
padding: ${buttonStyle.padding};
&:not(:disabled) {
Expand All @@ -22,6 +23,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
font-size: ${buttonStyle.textSize};
font-weight: ${buttonStyle.textWeight};
font-family: ${buttonStyle.fontFamily};
font-style: ${buttonStyle.fontStyle};
background-color: ${buttonStyle.background};
border-radius: ${buttonStyle.radius};
margin: ${buttonStyle.margin};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
margin: 0 !important;
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
}
${(props) => `background-color: ${props.$buttonStyle.background};`}
${(props) => `color: ${props.$buttonStyle.text};`}
${(props) => `padding: ${props.$buttonStyle.padding};`}
${(props) => `font-size: ${props.$buttonStyle.textSize};`}
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
width: 100%;
}
`;
Expand Down
25 changes: 16 additions & 9 deletions client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,27 @@ import { RefControl } from "comps/controls/refControl";
import { EditorContext } from "comps/editorState";
import React, { useContext } from "react";

const Link = styled(Button)<{ $style: LinkStyleType }>`
const Link = styled(Button) <{ $style: LinkStyleType }>`
${(props) => `
color: ${props.$style.text};
margin: ${props.$style.margin};
padding: ${props.$style.padding};
font-size: ${props.$style.textSize};
font-style:${props.$style.fontStyle};
font-family:${props.$style.fontFamily};
font-weight:${props.$style.textWeight};
border: ${props.$style.borderWidth} solid ${props.$style.border};
border-radius:${props.$style.radius ? props.$style.radius:'0px'};
background-color: ${props.$style.background};
&:hover {
color: ${props.$style.hoverText} !important;
}
&:active {
color: ${props.$style.activeText} !important;
}
`}
&.ant-btn {

&.ant-btn {
display: inline-flex;
align-items: center;
> span {
Expand Down Expand Up @@ -114,15 +121,15 @@ const LinkTmpComp = (function () {
{hiddenPropertyView(children)}
{loadingPropertyView(children)}
</Section>
<Section name={sectionNames.advanced}>
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
</Section></>
<Section name={sectionNames.advanced}>
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
</Section></>
)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
)}
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
)}
</>
);
})
Expand Down
15 changes: 8 additions & 7 deletions client/packages/lowcoder/src/comps/comps/dividerComp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
// TODO: find out how to set border style when text is active
// TODO: enable type "vertical" https://ant.design/components/divider

const StyledDivider = styled(Divider)<IProps>`
const StyledDivider = styled(Divider) <IProps>`
margin-top: 3.5px;
.ant-divider-inner-text {
height: 32px;
Expand All @@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)<IProps>`
font-size: ${(props) => props.$style.textSize};
font-weight: ${(props) => props.$style.textWeight};
font-family: ${(props) => props.$style.fontFamily};
font-style:${(props) => props.$style.fontStyle}
}
min-width: 0;
width: ${(props) => {
return widthCalculator(props.$style.margin);
width: ${(props) => {
return widthCalculator(props.$style.margin);
}};
min-height: ${(props) => {
return heightCalculator(props.$style.margin);
min-height: ${(props) => {
return heightCalculator(props.$style.margin);
}};
margin: ${(props) => {
return props.$style.margin;
margin: ${(props) => {
return props.$style.margin;
}};
padding: ${(props) => props.$style.padding};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,11 @@ const getStyle = (style: FileStyleType) => {
padding: ${style.padding};
width: ${widthCalculator(style.margin)};
height: ${heightCalculator(style.margin)};
font-family:${style.fontFamily};
font-size:${style.textSize};
font-weight:${style.textWeight};
font-style:${style.fontStyle};
border-width:${style.borderWidth};
}

.ant-btn:not(:disabled) {
Expand Down
45 changes: 34 additions & 11 deletions client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,20 @@ type IProps = {
$justify: boolean;
$bgColor: string;
$borderColor: string;
$borderWidth: string;
$borderRadius: string;
};

const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
height: 100%;
border-radius: 2px;
border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
box-sizing: border-box;
border: 1px solid ${(props) => props.$borderColor};
border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
background-color: ${(props) => props.$bgColor};
`;

const NavInner = styled("div")<Pick<IProps, "$justify">>`
margin: 0 -16px;
const NavInner = styled("div") <Pick<IProps, "$justify">>`
// margin: 0 -16px;
height: 100%;
display: flex;
justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
Expand All @@ -44,13 +46,23 @@ const Item = styled.div<{
$active: boolean;
$activeColor: string;
$color: string;
$fontFamily: string;
$fontStyle: string;
$textWeight: string;
$textSize: string;
$margin: string;
$padding: string;
}>`
height: 30px;
line-height: 30px;
padding: 0 16px;
padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
font-weight: 500;

font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
margin:${(props) => props.$margin ? props.$margin : '0px'};

&:hover {
color: ${(props) => props.$activeColor};
cursor: pointer;
Expand Down Expand Up @@ -79,7 +91,7 @@ const ItemList = styled.div<{ $align: string }>`
justify-content: ${(props) => props.$align};
`;

const StyledMenu = styled(Menu)<MenuProps>`
const StyledMenu = styled(Menu) <MenuProps>`
&.ant-dropdown-menu {
min-width: 160px;
}
Expand Down Expand Up @@ -144,6 +156,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
$active={active || subMenuSelectedKeys.length > 0}
$color={props.style.text}
$activeColor={props.style.accent}
$fontFamily={props.style.fontFamily}
$fontStyle={props.style.fontStyle}
$textWeight={props.style.textWeight}
$textSize={props.style.textSize}
$padding={props.style.padding}
$margin={props.style.margin}
onClick={() => onEvent("click")}
>
{label}
Expand Down Expand Up @@ -178,7 +196,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
const justify = props.horizontalAlignment === "justify";

return (
<Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
<Wrapper
$borderColor={props.style.border}
$bgColor={props.style.background}
$borderWidth={props.style.borderWidth}
$borderRadius={props.style.borderRadius}
>
<NavInner $justify={justify}>
{props.logoUrl && (
<LogoWrapper onClick={() => props.logoEvent("click")}>
Expand Down Expand Up @@ -220,7 +243,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
</Section>
)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState";
const getStyle = (style: InputLikeStyleType) => {
return css`
border-radius: ${style.radius};
border-width:${style.borderWidth} !important;
// still use antd style when disabled
&:not(.ant-input-number-disabled) {
color: ${style.text};
Expand All @@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => {
}
.ant-input-number {
margin: 0;

}
.ant-input-number input {
.ant-input-number-input {
margin: 0;
padding: ${style.padding};
height: ${heightCalculator(style.margin)};
color:${style.text};
font-family:${style.fontFamily} !important;
font-weight:${style.textWeight} !important;
font-size:${style.textSize} !important;
font-style:${style.fontStyle} !important;
}

.ant-input-number-handler-wrap {
Expand Down Expand Up @@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
`;
};

const InputNumber = styled(AntdInputNumber)<{
const InputNumber = styled(AntdInputNumber) <{
$style: InputLikeStyleType;
}>`
width: 100%;
Expand Down Expand Up @@ -391,15 +398,15 @@ const NumberInputTmpComp = (function () {
{children.max.propertyView({ label: trans("prop.maximum") })}
{children.customRule.propertyView({})}
</Section>
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section>
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section>
</>
)}
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
children.label.getPropertyView()
)}

Expand Down
22 changes: 14 additions & 8 deletions client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { default as Progress } from "antd/es/progress";
import { styleControl } from "comps/controls/styleControl";
import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import styled, { css } from "styled-components";
import { Section, sectionNames } from "lowcoder-design";
import { numberExposingStateControl } from "../controls/codeStateControl";
Expand All @@ -14,33 +14,38 @@ import { EditorContext } from "comps/editorState";

// TODO: after Update of ANTd, introduce Size attribute to ProgressCircle

const getStyle = (style: ProgressStyleType) => {
const getStyle = (style: CircleProgressType) => {
return css`
width: ${widthCalculator(style.margin)};
height: ${heightCalculator(style.margin)};
margin: ${style.margin};
padding: ${style.padding};
border-radius:${style.radius};
.ant-progress-text {
color: ${style.text};
color: ${style.text} !important;
font-family:${style.fontFamily};
font-style:${style.fontStyle};
font-size:${style.textSize} !important;
font-weight:${style.textWeight};
}
.ant-progress-circle-trail {
stroke: ${style.track};
}
.ant-progress-inner .ant-progress-circle-path {
stroke: ${style.fill};
stroke: ${style.fill} !important;
}
&.ant-progress-status-success {
.ant-progress-inner .ant-progress-circle-path {
stroke: ${style.success};
stroke: ${style.success} !important;
}
.ant-progress-text {
color: ${style.success};
color: ${style.success} !important;
}
}
`;
};

export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType }>`
export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
width: 100%;
height: 100%;
padding: 2px;
Expand All @@ -59,7 +64,8 @@ export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType
let ProgressCircleTmpComp = (function () {
const childrenMap = {
value: numberExposingStateControl("value", 60),
style: styleControl(ProgressStyle),
// borderRadius property hidden as it's not valid for progress circle
style: styleControl(CircleProgressStyle),
};
return new UICompBuilder(childrenMap, (props) => {
return (
Expand Down
4 changes: 4 additions & 0 deletions client/packages/lowcoder/src/comps/comps/progressComp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ const getStyle = (style: ProgressStyleType) => {
line-height: 2;
.ant-progress-text {
color: ${style.text};
font-style:${style.fontStyle};
font-family:${style.fontFamily};
font-weight:${style.textWeight};
font-size:${style.textSize};
}
width: ${widthCalculator(style.margin)};
height: ${heightCalculator(style.margin)};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing";

const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
width: 100%;
font-family:"Montserrat";
${(props) => props.$style && getStyle(props.$style)}
`;

Expand Down
Loading