mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 14:56:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve styling

Browse Source
This commit is contained in:
chenos 2021-09-08 15:40:53 +08:00
parent 1c30baffcf
commit e82139cfc8
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/client/src/schemas/display/index.tsx
View File

@ -30,52 +30,52 @@ const usePlaceholder = (value?: any) => {
};
const Input: React.FC<InputProps> = (props) => {
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-input', props);
return (
<Space className={cls(prefixCls, props.className)} style={props.style}>
<div className={cls(prefixCls, props.className)} style={props.style}>
{props.addonBefore}
{props.prefix}
{usePlaceholder(props.value)}
{props.suffix}
{props.addonAfter}
</Space>
</div>
);
};
const URL: React.FC<InputProps> = (props) => {
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-url', props);
const content = props.value && (
<a target={'_blank'} href={props.value as any}>
{props.value}
</a>
);
return (
<Space className={cls(prefixCls, props.className)} style={props.style}>
<div className={cls(prefixCls, props.className)} style={props.style}>
{props.addonBefore}
{props.prefix}
{content}
{props.suffix}
{props.addonAfter}
</Space>
</div>
);
};
const InputNumber: React.FC<InputProps & InputNumberProps> = (props) => {
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-input-number', props);
const value = usePlaceholder(props.value);
return (
<Space className={cls(prefixCls, props.className)} style={props.style}>
<div className={cls(prefixCls, props.className)} style={props.style}>
{props.addonBefore}
{props.prefix}
{props.formatter ? props.formatter(value) : value}
{props.suffix}
{props.addonAfter}
</Space>
</div>
);
};
const TextArea: React.FC<any> = (props) => {
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-textarea', props);
const ellipsis = props.ellipsis === true ? {} : props.ellipsis;
const content = props.ellipsis ? (
<div>
@ -100,19 +100,19 @@ const TextArea: React.FC<any> = (props) => {
usePlaceholder(props.value)
);
return (
<Space className={cls(prefixCls, props.className)} style={props.style}>
<div className={cls(prefixCls, props.className)} style={props.style}>
{props.addonBefore}
{props.prefix}
{content}
{props.suffix}
{props.addonAfter}
</Space>
</div>
);
};
const Select: React.FC<SelectProps<any>> = observer((props) => {
const field = useField<Formily.Core.Models.Field>();
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-select', props);
const dataSource: any[] = field?.dataSource?.length
? field.dataSource
: props?.options?.length
@ -156,7 +156,7 @@ const Select: React.FC<SelectProps<any>> = observer((props) => {
const ObjectSelect: React.FC<SelectProps<any>> = observer((props) => {
const field = useField<Formily.Core.Models.Field>();
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-select', props);
const dataSource: any[] = field?.dataSource?.length
? field.dataSource
: props?.options?.length
@ -201,7 +201,7 @@ const ObjectSelect: React.FC<SelectProps<any>> = observer((props) => {
const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
const field = useField<Formily.Core.Models.Field>();
const placeholder = usePlaceholder();
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-tree-select', props);
const dataSource = field?.dataSource?.length
? field.dataSource
: props?.options?.length
@ -259,7 +259,7 @@ const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
const Cascader: React.FC<CascaderProps> = observer((props) => {
const field = useField<Formily.Core.Models.Field>();
const placeholder = usePlaceholder();
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-cascader', props);
const dataSource: any[] = field?.dataSource?.length
? field.dataSource
: props?.options?.length
@ -302,7 +302,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: any) => {
return <div></div>;
}
const placeholder = usePlaceholder();
const prefixCls = usePrefixCls('description-text', props);
const prefixCls = usePrefixCls('description-date-picker', props);
const getDefaultFormat = () => {
const { dateFormat, showTime, timeFormat } = props;
let format = dateFormat;

7
packages/client/src/schemas/kanban/style.less
View File

@ -39,6 +39,13 @@
.ant-formily-item-label {
min-height: 0 !important;
}
.ant-description-input {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.nb-kanban-drag-overlay {