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

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

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