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

nav component issue fixes, component updates in progress#700

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
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 Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,6 +33,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
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;
Expand All@@ -41,7 +42,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
color: ${props.$style.activeText} !important;
}
`}
&.ant-btn {

&.ant-btn {
display: inline-flex;
align-items: center;
> span {
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
20 changes: 13 additions & 7 deletionsclient/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,18 +24,19 @@ type IProps = {
$bgColor: string;
$borderColor: string;
$borderWidth: string;
$borderRadius: string;
};

const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
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: ${(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;
//margin: 0 -16px;
height: 100%;
display: flex;
justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
Expand All@@ -49,17 +50,19 @@ const Item = styled.div<{
$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: ${(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')}


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@@ -157,6 +160,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
$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@@ -195,6 +200,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
$borderColor={props.style.border}
$bgColor={props.style.background}
$borderWidth={props.style.borderWidth}
$borderRadius={props.style.borderRadius}
>
<NavInner $justify={justify}>
{props.logoUrl && (
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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ const getStyle = (style: ProgressStyleType) => {
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@@ -192,7 +192,17 @@ let MentionTmpComp = (function () {
label: value,
}))}
autoSize={props.autoHeight}
style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight }}
style={{
height: "100%",
maxHeight: "100%",
resize: "none",
padding: props.style.padding,
fontStyle: props.style.fontStyle,
fontFamily: props.style.fontFamily,
borderWidth: props.style.borderWidth,
fontWeight: props.style.textWeight,
fontSize: props.style.textSize
}}
readOnly={props.readOnly}
/>
</ConfigProvider>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -476,7 +476,8 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
}

export const ButtonStyle = [
...getBgBorderRadiusByBg("primary"),
// ...getBgBorderRadiusByBg("primary"),
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE
] as const;

Expand DownExpand Up@@ -1015,7 +1016,12 @@ export const TableColumnLinkStyle = [
...LinkTextStyle,
] as const;

export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
export const FileStyle = [
// ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
getStaticBackground(SURFACE_COLOR),
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
// TEXT, ACCENT, MARGIN, PADDING
] as const;

export const FileViewerStyle = [
getStaticBackground("#FFFFFF"),
Expand DownExpand Up@@ -1084,30 +1090,43 @@ export const ProgressStyle = [
depTheme: "canvas",
depType: DEP_TYPE.CONTRAST_TEXT,
transformer: contrastText,
}]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
}]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
TRACK,
FILL,
SUCCESS,
] as const;

export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]

export const NavigationStyle = [
{
name: "text",
label: trans("text"),
depName: "background",
depType: DEP_TYPE.CONTRAST_TEXT,
transformer: contrastText,
},
ACCENT,
getStaticBackground("#FFFFFF00"),
getStaticBorder("#FFFFFF00"),
MARGIN,
PADDING,
FONT_FAMILY,
FONT_STYLE,
TEXT_WEIGHT,
TEXT_SIZE,
BORDER_WIDTH
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
{
name: "text",
label: trans("text"),
depName: "background",
depType: DEP_TYPE.CONTRAST_TEXT,
transformer: contrastText,
},
ACCENT,
getStaticBackground("#FFFFFF00")
])
// {
// name: "text",
// label: trans("text"),
// depName: "background",
// depType: DEP_TYPE.CONTRAST_TEXT,
// transformer: contrastText,
// },
// ACCENT,
// getStaticBackground("#FFFFFF00"),
// getStaticBorder("#FFFFFF00"),
// MARGIN,
// PADDING,
// FONT_FAMILY,
// FONT_STYLE,
// TEXT_WEIGHT,
// TEXT_SIZE,
// BORDER_WIDTH
] as const;

export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
Expand DownExpand Up@@ -1363,6 +1382,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp