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

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 21 commits intodevfromstyle-changes-imtaman
Feb 24, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
21 commits
Select commitHold shift + click to select a range
37a901a
font style property created and added in textDisplay component
imtananikhwaFeb 14, 2024
8592695
text-area font syle added
imtananikhwaFeb 15, 2024
8fd726c
Text area font style added
imtananikhwaFeb 15, 2024
a603a57
Table column styles working
imtananikhwaFeb 15, 2024
e3463a0
Delete client/packages/lowcoder/vite.config.mts.timestamp-17080052833…
imtananikhwaFeb 17, 2024
4380582
Merge pull request #684 from imtananikhwa/imtanan-task1
FalkWolskyFeb 17, 2024
0886f58
Controls added to divider, button comp, dropdown, nav ,link & mention…
imtananikhwaFeb 17, 2024
12b4551
Merge branch 'imtanan-task1' of https://github.com/imtananikhwa/lowco…
imtananikhwaFeb 17, 2024
5c6a0e1
Merge pull request #686 from imtananikhwa/imtanan-task1
FalkWolskyFeb 18, 2024
5a4e1c4
Common style config added, number input component updated, link compo…
imtananikhwaFeb 20, 2024
a055656
Creating function that helps to replace style from common style array…
imtananikhwaFeb 21, 2024
1d42ee8
Merge pull request #698 from imtananikhwa/imtanan-task1
FalkWolskyFeb 21, 2024
f556fa7
nav component issue fixes, component updates in progress
imtananikhwaFeb 22, 2024
8a63065
Toggle button border Width fixes
imtananikhwaFeb 22, 2024
7b6dda6
FOnt added for testing, circle progress and progress updated
imtananikhwaFeb 22, 2024
cac08a4
File upload component styling and controls added
imtananikhwaFeb 22, 2024
b31e606
Merge pull request #700 from imtananikhwa/imtanan-task1
FalkWolskyFeb 22, 2024
8c7c873
Radio component styling added
imtananikhwaFeb 23, 2024
67d578c
Checkbox, radio input styles complete, select styling in progress
imtananikhwaFeb 23, 2024
f5d941e
Merge pull request #705 from imtananikhwa/imtanan-task1
FalkWolskyFeb 23, 2024
42bb266
Merge branch 'dev' into style-changes-imtaman
FalkWolskyFeb 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 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
4 changes: 4 additions & 0 deletionsclient/packages/lowcoder/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionsclient/packages/lowcoder/src/comps/comps/dividerComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionsclient/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 DownExpand 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 DownExpand 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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-numberinput {
.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 DownExpand Up@@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
`;
};

const InputNumber = styled(AntdInputNumber)<{
const InputNumber = styled(AntdInputNumber)<{
$style: InputLikeStyleType;
}>`
width: 100%;
Expand DownExpand 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionsclient/packages/lowcoder/src/comps/comps/progressComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
[8]ページ先頭
©2009-2025 Movatter.jp