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

Table style updates#517

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 6 commits intolowcoder-org:devfromraheeliftikhar5:table-updates
Nov 25, 2023
Merged
Show file tree
Hide file tree
Changes from1 commit
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
PrevPrevious commit
NextNext commit
feat: add text-size option in styling
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committedNov 25, 2023
commit0f9d2ef3e1cc0070355af173f90ca880eabafd9e
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletionclient/packages/lowcoder-design/src/icons/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -296,4 +296,5 @@ export { ReactComponent as CommentIcon } from "icons/icon-comment-comp.svg";
export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
export { ReactComponent as WidthIcon } from "icons/icon-width.svg";
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
export { ReactComponent as ResponsiveLayoutCompIcon } from "icons/icon-responsive-layout-comp.svg";
export { ReactComponent as TextSizeIcon } from "./icon-text-size.svg";
4 changes: 4 additions & 0 deletionsclient/packages/lowcoder/src/api/commonSettingApi.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,6 +47,7 @@ export interface ThemeDetail {
margin?: string;
padding?: string;
gridColumns?: string; //Added By Aqib Mirza
textSize?: string;
}

export function getThemeDetailName(key: keyof ThemeDetail) {
Expand All@@ -70,6 +71,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
//Added By Aqib Mirza
case "gridColumns":
return trans("themeDetail.gridColumns");
case "textSize":
return trans("style.textSize");
}
return "";
}
Expand All@@ -84,6 +87,7 @@ export function isThemeColorKey(key: string) {
case "margin":
case "padding":
case "gridColumns": //Added By Aqib Mirza
case "textSize":
return true;
}
return false;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,10 +21,11 @@ import {
withFunction,
wrapChildAction,
} from "lowcoder-core";
import { AlignClose, AlignLeft, AlignRight, controlItem } from "lowcoder-design";
import { AlignClose, AlignLeft, AlignRight,IconRadius, TextSizeIcon,controlItem } from "lowcoder-design";
import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
import { ColorControl } from "comps/controls/colorControl";
import { JSONValue } from "util/jsonTypes";
import styled from "styled-components";

export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
Expand DownExpand Up@@ -100,9 +101,14 @@ export const columnChildrenMap = {
text: withDefault(ColorControl, ""),
border: withDefault(ColorControl, ""),
radius: withDefault(RadiusControl, ""),
textSize: withDefault(RadiusControl, ""),
cellColor: CellColorComp,
};

const StyledIcon = styled.span`
margin: 0 4px 0 14px;
`;

/**
* export for test.
* Put it here temporarily to avoid circular dependencies
Expand DownExpand Up@@ -208,9 +214,14 @@ export class ColumnComp extends ColumnInitComp {
})}
{this.children.radius.propertyView({
label: trans('style.borderRadius'),
//preInputNode: <StyledIcon as={IconRadius} title="" />,
preInputNode: <StyledIcon as={IconRadius} title="" />,
placeholder: '3px',
})}
{this.children.textSize.propertyView({
label: trans('style.textSize'),
preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
placeholder: '14px',
})}
{this.children.cellColor.getPropertyView()}
</>
);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -277,6 +277,7 @@ const TableTd = styled.td<{

> div > div {
color: ${(props) => props.$style.text};
font-size: ${(props) => props.$style.textSize};
&,
> .ant-badge > .ant-badge-status-text,
> div > .markdown-body {
Expand DownExpand Up@@ -404,6 +405,7 @@ function TableCellView(props: {
text: columnStyle.text || columnsStyle.text,
border: columnStyle.border || columnsStyle.border,
radius: columnStyle.radius || columnsStyle.radius,
textSize: columnStyle.textSize || columnsStyle.textSize,
}
let { background } = style;
if (rowContext.selected) {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -321,6 +321,7 @@ export function columnsToAntdFormat(
text: column.text,
border: column.border,
radius: column.radius,
textSize: column.textSize,
},
cellColorFn: column.cellColor,
onWidthResize: column.onWidthResize,
Expand Down
49 changes: 42 additions & 7 deletionsclient/packages/lowcoder/src/comps/controls/styleControl.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,14 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
import { ThemeContext } from "comps/utils/themeContext";
import { trans } from "i18n";
import _ from "lodash";
import { controlItem, IconRadius, IconReset, ExpandIcon, CompressIcon, } from "lowcoder-design";
import {
controlItem,
IconRadius,
IconReset,
ExpandIcon,
CompressIcon,
TextSizeIcon,
} from "lowcoder-design";
import { useContext } from "react";
import styled from "styled-components";
import { useIsMobile } from "util/hooks";
Expand All@@ -21,6 +28,7 @@ import {
SingleColorConfig,
MarginConfig,
PaddingConfig,
TextSizeConfig,
} from "./styleControlConstants";

function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
Expand All@@ -35,6 +43,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
return config.hasOwnProperty("radius");
}

function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
return config.hasOwnProperty("textSize");
}

function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
return config.hasOwnProperty("margin");
}
Expand All@@ -56,6 +68,10 @@ function isEmptyRadius(radius: string) {
return _.isEmpty(radius);
}

function isEmptyTextSize(textSize: string) {
return _.isEmpty(textSize);
}

function isEmptyMargin(margin: string) {
return _.isEmpty(margin);
}
Expand All@@ -80,6 +96,10 @@ function calcColors<ColorMap extends Record<string, string>>(
if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
res[name] = props[name];
return;
}
if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
res[name] = props[name];
return;
}
if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
res[name] = props[name];
Expand All@@ -103,6 +123,10 @@ function calcColors<ColorMap extends Record<string, string>>(
if (isRadiusConfig(config)) {
res[name] = themeWithDefault[config.radius];
}
if (isTextSizeConfig(config)) {
// TODO: remove default textSize after added in theme in backend.
res[name] = themeWithDefault[config.textSize] || '14px';
}
if (isMarginConfig(config)) {
res[name] = themeWithDefault[config.margin];
}
Expand DownExpand Up@@ -222,7 +246,9 @@ margin: 0 8px 0 -2px;
const PaddingIcon = styled(CompressIcon)`
margin: 0 8px 0 -2px;
`;

const StyledTextSizeIcon = styled(TextSizeIcon)`
margin: 0 8px 0 -2px;
`;
const ResetIcon = styled(IconReset)`
&:hover g g {
stroke: #315efb;
Expand All@@ -236,7 +262,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
const name: Names<T> = config.name;
if (
name === "radius" ||
name === "cardRadius"
name === "cardRadius" ||
name === "textSize"
) {
childrenMap[name] = StringControl;
} else if (name === "margin" || name === "padding" || name==="containerheaderpadding" || name==="containerfooterpadding" || name==="containerbodypadding") {
Expand DownExpand Up@@ -323,9 +350,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
return controlItem(
{ filterText: config.label },
<div key={index}>
{name === "radius" ||
{(name === "radius" ||
name === "gap" ||
name === "cardRadius"
name === "cardRadius")
? (
children[name] as InstanceType<typeof StringControl>
).propertyView({
Expand All@@ -341,17 +368,25 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
preInputNode: <MarginIcon title="" />,
placeholder: props[name],
})
: name === "padding" ||
:(name === "padding" ||
name === "containerheaderpadding"||
name === "containerfooterpadding"||
name === "containerbodypadding"
name === "containerbodypadding")
? (
children[name] as InstanceType<typeof StringControl>
).propertyView({
label: config.label,
preInputNode: <PaddingIcon title="" />,
placeholder: props[name],
})
: name === "textSize"
? (
children[name] as InstanceType<typeof StringControl>
).propertyView({
label: config.label,
preInputNode: <StyledTextSizeIcon title="" />,
placeholder: props[name],
})
: children[name].propertyView({
label: config.label,
panelDefaultColor: props[name],
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ export type RadiusConfig = CommonColorConfig & {
readonly radius: string;
};

export type TextSizeConfig = CommonColorConfig & {
readonly textSize: string;
};

export type ContainerHeaderPaddigConfig = CommonColorConfig & {
readonly containerheaderpadding: string;
};
Expand All@@ -42,7 +46,7 @@ export type DepColorConfig = CommonColorConfig & {
readonly depType?: DEP_TYPE;
transformer: (color: string, ...rest: string[]) => string;
};
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig |TextSizeConfig |MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;

export const defaultTheme: ThemeDetail = {
primary: "#3377FF",
Expand All@@ -54,6 +58,7 @@ export const defaultTheme: ThemeDetail = {
margin: "3px",
padding: "3px",
gridColumns: "24",
textSize: "14px",
};

export const SURFACE_COLOR = "#FFFFFF";
Expand DownExpand Up@@ -260,6 +265,12 @@ const PADDING = {
padding: "padding",
} as const;

const TEXT_SIZE = {
name: "textSize",
label: trans("style.textSize"),
textSize: "textSize",
} as const;

const CONTAINERHEADERPADDING = {
name: "containerheaderpadding",
label: trans("style.containerheaderpadding"),
Expand DownExpand Up@@ -696,6 +707,7 @@ export const TableColumnStyle = [
getStaticBorder(),
RADIUS,
TEXT,
TEXT_SIZE,
] as const;

export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -362,6 +362,7 @@ export const en = {
containerfooterpadding: "Footer Padding",
containerbodypadding: "Body Padding",
minWidth: "Minimum Width",
textSize: "Text Size",
},
export: {
hiddenDesc: "If true, the component is hidden",
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/src/i18n/locales/zh.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -343,6 +343,7 @@ style: {
containerfooterpadding: "下内边距",
containerbodypadding: "内边距",
minWidth: "最小宽度",
textSize: "字体大小",
},
export: {
hiddenDesc: "如果为true,则隐藏组件",
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp